/* ==========================================================================
   v1-grid.css  -  the per-jurisdiction (V1) grid on the region page: "Where legal and cost questions come first"
   (design FS 8.18, MC-REGION-PAGE 2026-10). Loaded only by region/<id>.html, after region-page.css.

   The grid is a 1px-gap grid on --rule: cards on --sheet. Every qualitative value is an OUTLINED NEUTRAL CHIP with a shape and
   words and no colour of its own: a filled square = yes / within, a hollow square = no / outside, a dash = not read, nothing =
   a plain word. A chip is never green or red and never tinted by its value; the live green / red badge tints are gone. The
   words come from lib/qual-labels.js (never a raw enum token); the chip's class is the neutral `v1-chip`, its shape a data attribute.

   Markup: section.v1-section > h2 + p.v1-lead + .v1-set* ( p.v1-group? + .v1-grid > .v1-card* )
           .v1-card > h3.v1-card-h + dl.v1-kv > div > dt + dd (chips, .v1-note) + p.v1-src + p.v1-gaps
   ========================================================================== */

.v1-section h2 { margin: 0; font: 340 clamp(26px, 2.6vw, 34px)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.v1-lead { margin: var(--s3) 0 0; max-width: 62ch; font: italic 400 15.5px/1.55 var(--f-text); color: var(--ink-3); }
.v1-set { margin-top: var(--s5); }
.v1-group { margin: 0 0 var(--s2); font: 600 var(--t-label, 10.5px)/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.v1-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.v1-grid > .v1-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd card never leaves a hollow cell showing the rule colour */
.v1-card { min-width: 0; background: var(--sheet); padding: var(--s5) var(--s5) var(--s4); }
.v1-card-h { margin: 0 0 var(--s3); font: 600 var(--t-label, 10.5px)/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.v1-kv { margin: 0; padding: 0; }
.v1-kv > div { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px dotted var(--rule-strong); }
.v1-kv > div:last-child { border-bottom: 0; }
.v1-kv dt { margin: 0; font: 600 var(--t-label, 10.5px)/1.4 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.v1-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font: 400 14.5px/1.5 var(--f-text); color: var(--ink); }
.v1-kv dd em { font-style: italic; color: var(--ink-2); }
.v1-kv .mono { font-variant-numeric: tabular-nums lining-nums; }
.v1-note { font: italic 400 13px/1.45 var(--f-text); color: var(--ink-3); }
.v1-src { margin: var(--s3) 0 0; font: 400 12.5px/1.5 var(--f-ui); color: var(--ink-3); overflow-wrap: anywhere; }
.v1-src a { color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.v1-src a:hover { color: var(--accent); }
.v1-gaps { margin: var(--s2) 0 0; font: italic 400 13.5px/1.5 var(--f-text); color: var(--ink-3); }
.v1-gaps b { font: 600 var(--t-label, 10.5px) var(--f-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }

/* the neutral chip: an outline, the words, and (for a yes / no) a drawn shape. Same ink and rule on every chip. */
.v1-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 6px 2px 0; padding: 2px 9px 2px 8px;
  font: 500 12px/1.3 var(--f-ui); color: var(--ink-2);
  border: 1px solid var(--rule-strong); border-radius: 11px; background: transparent;
}
.v1-chip[data-shape="yes"]::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.v1-chip[data-shape="no"]::before { content: ""; flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid currentColor; }
.v1-chip[data-shape="na"]::before { content: ""; flex: none; width: 8px; border-top: 1.5px solid currentColor; }

@media (max-width: 767px) {
  .v1-card { padding: var(--s4) var(--s4) var(--s3); }
}
@media print {
  .v1-grid { background: transparent; gap: 0; }
  .v1-card { border-bottom: 1px solid #999; break-inside: avoid; }
}