/* ============================================================================
   Maryland MDE Wells & Septics Permit Portal — Design Tokens
   ----------------------------------------------------------------------------
   USWDS-aligned token layer. NO CDN, NO external fonts, NO framework.
   Rationale: MDE runs behind a locked-down firewall/CSP. The prior prototypes
   loaded Tailwind Play CDN + Google Fonts + FontAwesome + unpkg Leaflet, which
   (a) fails offline, (b) violates a strict CSP, and (c) silently no-ops v4
   utility classes on a v3 CDN. Everything here is local and versionless.

   Colors are USWDS system tokens. All text/background pairs used in components
   below are >= 4.5:1 (normal text) or >= 3:1 (large text / UI boundaries).
   ============================================================================ */

:root {
  /* ---- USWDS base ink/paper ---- */
  --c-ink:            #1b1b1b;   /* gray-90  on white = 15.3:1 */
  --c-ink-muted:      #565c65;   /* gray-60  on white =  6.6:1  */
  --c-ink-subtle:     #71767a;   /* gray-50  on white =  4.6:1  (min for body) */
  --c-paper:          #ffffff;
  --c-paper-alt:      #f0f0f0;   /* gray-5  */
  --c-paper-sunken:   #f9f9f9;   /* gray-2  */

  /* ---- USWDS primary (Maryland/gov blue) ---- */
  --c-primary:        #005ea2;   /* primary        on white = 5.1:1 */
  --c-primary-dark:   #1a4480;   /* primary-dark   on white = 8.2:1 */
  --c-primary-darker: #162e51;   /* primary-darker on white = 11.9:1 */
  --c-primary-light:  #73b3e7;
  --c-primary-lighter:#d9e8f6;
  --c-primary-vivid:  #0050d8;

  /* ---- Semantic ---- */
  --c-success:        #00a91c;
  --c-success-dark:   #008817;
  --c-success-darker: #216e1f;
  --c-success-light:  #ecf3ec;
  --c-warning:        #ffbe2e;
  --c-warning-dark:   #e5a000;
  --c-warning-darker: #936f38;
  --c-warning-light:  #faf3d1;
  --c-error:          #d54309;
  --c-error-dark:     #b50909;
  --c-error-darker:   #8b0a03;
  --c-error-light:    #f4e3db;
  --c-info:           #00bde3;
  --c-info-darker:    #2e6276;
  --c-info-light:     #e7f6f8;
  --c-disabled:       #c9c9c9;
  --c-disabled-ink:   #757575;

  /* ---- Carbon-copy form colors -------------------------------------------
     The legacy paper process is color-coded. MDE has questioned whether the
     color names should remain user-facing (see Cumers review comment), so
     these are DISPLAY ACCENTS ONLY, keyed off a stable form_type_code.
     Never branch logic on color. ------------------------------------------- */
  --c-form-green:     #216e1f;
  --c-form-green-bg:  #ecf3ec;
  --c-form-yellow:    #936f38;
  --c-form-yellow-bg: #faf3d1;
  --c-form-blue:      #2e6276;
  --c-form-blue-bg:   #e7f6f8;
  --c-form-white:     #565c65;
  --c-form-white-bg:  #f0f0f0;
  --c-form-purple:    #54278f;
  --c-form-purple-bg: #ede3fa;

  /* ---- Type scale. Base is 16px, NOT the 10-12px of the old prototypes.
       The prior county.html set nearly all body text at text-[10px]/[11px]
       with gray-400, failing WCAG 1.4.3 and 1.4.4. ------------------------- */
  /* THE ONE PLACE THE UI TYPEFACE IS DECIDED (stack specified 2 Sep 2026).
     Set here rather than on any component: tokens.css puts var(--font-sans) on
     <body> at line ~131 and everything else inherits, so changing this line
     changes the whole site and nothing can be left behind on the old stack. */
  --font-sans: "Public Sans", "GDS Transport", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 12px - STATUS CHIPS AND CODE BOXES ONLY. Added 3 Sep 2026.
     BELOW the 13px prose floor on the next line, and that is the whole point of
     having a separate step rather than lowering --fs-3xs: 13px stays the floor
     for anything a person READS (a sentence, a rule, a citation), and this step
     is for the two-word labels a person SCANS -- "Available now", "Required",
     the boxed GF / YF codes. Those are landmarks, not prose, and at 13px bold
     with a pill around them they were competing with the headings beside them.
     NEVER put a sentence at this size. If a rule, a hint or any wrapping text
     needs to be smaller, the answer is --fs-3xs and shorter text. */
  --fs-4xs: 0.75rem;    /* 12px - status chips / code boxes, NOT prose */
  --fs-3xs: 0.8125rem;  /* 13px - table dense / legal fine print floor */
  --fs-2xs: 0.875rem;   /* 14px - labels, chips */
  --fs-xs:  0.9375rem;  /* 15px - table body */
  --fs-sm:  1rem;       /* 16px - BODY DEFAULT */
  --fs-md:  1.125rem;   /* 18px */
  --fs-lg:  1.375rem;   /* 22px */
  --fs-xl:  1.75rem;    /* 28px */
  --fs-2xl: 2.125rem;   /* 34px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.55;

  /* ---- 8px spacing scale (USWDS units) ---- */
  --sp-05: 0.25rem;  /*  4 */
  --sp-1:  0.5rem;   /*  8 */
  --sp-15: 0.75rem;  /* 12 */
  --sp-2:  1rem;     /* 16 */
  --sp-3:  1.5rem;   /* 24 */
  --sp-4:  2rem;     /* 32 */
  --sp-5:  2.5rem;   /* 40 */
  --sp-6:  3rem;     /* 48 */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.10);
  --shadow-2: 0 2px 6px rgba(0,0,0,.14);
  --shadow-3: 0 8px 24px rgba(0,0,0,.20);

  --border-1: 1px solid #a9aeb1;   /* gray-40, 3:1 vs white — UI boundary min */
  --border-2: 2px solid #565c65;

  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 6px #2491ff;  /* USWDS focus */

  --maxw-page: 1600px;
  --maxw-prose: 68ch;
  --z-header: 100;
  --z-menu: 300;
  --z-modal: 500;
  --z-toast: 700;
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-paper-sunken);
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-1); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-sm); }
p  { margin: 0 0 var(--sp-2); max-width: var(--maxw-prose); }

a { color: var(--c-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-darker); }

/* Single global focus treatment. Applies to everything, including
   programmatically focused headings and dialogs. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
[tabindex="-1"]:focus { outline: none; }

/* Respect user motion preference — absent from both prior prototypes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.u-visually-hidden,
.usa-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link — the old prototype used focus:absolute with no top/left, so it
   rendered at a stale static offset. This one is deterministic. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-primary-darker); color: #fff;
  padding: var(--sp-1) var(--sp-2); font-weight: var(--fw-bold);
  text-decoration: underline;
}
.skip-link:focus { left: var(--sp-1); top: var(--sp-1); }

.u-hidden { display: none !important; }
.u-flow > * + * { margin-top: var(--sp-2); }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-nowrap { white-space: nowrap; }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--c-ink-muted); }
.u-req { color: var(--c-error-dark); font-weight: var(--fw-bold); }

/* ============================ GOV BANNER ============================ */
.gov-banner { background: var(--c-paper-alt); font-size: var(--fs-2xs); border-bottom: 1px solid #dfe1e2; }
.gov-banner__row { max-width: var(--maxw-page); margin: 0 auto; padding: var(--sp-05) var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.gov-banner__flag { width: 22px; height: 15px; flex: none; border: 1px solid #adadad; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gov-banner__flag i { display: block; }
.gov-banner__flag i:nth-child(1) { background: #ffbe2e; }
.gov-banner__flag i:nth-child(2) { background: #b50909; }
.gov-banner__flag i:nth-child(3) { background: #b50909; }
.gov-banner__flag i:nth-child(4) { background: #ffbe2e; }
.gov-banner__btn { background: none; border: 0; padding: 0; font: inherit; color: var(--c-primary-dark);
  text-decoration: underline; cursor: pointer; }
.gov-banner__panel { max-width: var(--maxw-page); margin: 0 auto; padding: var(--sp-2);
  background: var(--c-paper); border-top: 1px solid #dfe1e2; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gov-banner__panel p { font-size: var(--fs-2xs); margin: 0; }

/* ============================ HEADER / NAV ============================ */
.site-header { background: var(--c-paper); border-bottom: 4px solid var(--c-primary-darker);
  position: sticky; top: 0; z-index: var(--z-header); box-shadow: var(--shadow-1); }
.site-header__row { max-width: var(--maxw-page); margin: 0 auto; padding: var(--sp-15) var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--sp-15); }
.brand__seal { width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--c-primary-darker); color: #fff; display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .04em; }
.brand__name { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2; }
.brand__sub { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.site-header__spacer { flex: 1 1 auto; }

/* ---- Menu bar: the real "View" menu. Prior prototypes had none. ---- */
.menubar { display: flex; gap: var(--sp-05); flex-wrap: wrap; }
.menubar__item { position: relative; }
.menubar__btn {
  background: none; border: 0; border-radius: var(--radius-md);
  padding: var(--sp-1) var(--sp-15); font: inherit; font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold); color: var(--c-primary-dark); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-05);
}
.menubar__btn:hover { background: var(--c-primary-lighter); }
.menubar__btn[aria-expanded="true"] { background: var(--c-primary-darker); color: #fff; }
.menubar__btn::after { content: ""; width: 0; height: 0; border: 4px solid transparent;
  border-top-color: currentColor; margin-top: 3px; }
.menubar__btn.is-plain::after { display: none; }

.menu {
  position: absolute; top: calc(100% + 2px); left: 0; min-width: 320px;
  background: var(--c-paper); border: 1px solid #a9aeb1; border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); padding: var(--sp-05); z-index: var(--z-menu);
  max-height: 78vh; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__group { padding: var(--sp-1) var(--sp-15) var(--sp-05); font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-muted); }
.menu__item {
  display: flex; width: 100%; gap: var(--sp-15); align-items: flex-start;
  background: none; border: 0; border-radius: var(--radius-sm); text-align: left;
  padding: var(--sp-1) var(--sp-15); font: inherit; font-size: var(--fs-2xs);
  color: var(--c-ink); cursor: pointer;
}
.menu__item:hover { background: var(--c-primary-lighter); }
.menu__item[aria-disabled="true"] { color: var(--c-disabled-ink); cursor: not-allowed; }
.menu__item[aria-disabled="true"]:hover { background: none; }
.menu__item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px;
  border: 1px solid rgba(0,0,0,.25); }
.menu__item .txt { flex: 1 1 auto; }
.menu__item .code { display: block; font-family: var(--font-mono); font-size: var(--fs-3xs);
  color: var(--c-ink-muted); }
.menu__item[aria-checked="true"] .txt::after { content: " ✓"; color: var(--c-success-darker);
  font-weight: var(--fw-bold); }
.menu__sep { height: 1px; background: #dfe1e2; margin: var(--sp-05) 0; border: 0; }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font: inherit; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-md);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--c-primary); color: #fff; line-height: 1.2;
}
.btn:hover { background: var(--c-primary-dark); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--c-disabled); color: var(--c-disabled-ink); cursor: not-allowed; border-color: transparent;
}
.btn--outline { background: none; color: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn--outline:hover { background: var(--c-primary-lighter); color: var(--c-primary-darker); }
.btn--success { background: var(--c-success-darker); }
.btn--success:hover { background: #17591a; }
.btn--danger { background: var(--c-error-dark); }
.btn--danger:hover { background: var(--c-error-darker); }
.btn--ghost { background: none; color: var(--c-primary-dark); border-color: transparent; }
.btn--ghost:hover { background: var(--c-primary-lighter); }
.btn--sm { font-size: var(--fs-3xs); padding: var(--sp-05) var(--sp-1); }
.btn--lg { font-size: var(--fs-sm); padding: var(--sp-15) var(--sp-3); }
.btn--block { width: 100%; }

/* Icon-only buttons MUST still carry an accessible name via aria-label.
   The old grid used title= only, which is not a reliable accessible name. */
.btn-icon {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 1px solid #a9aeb1; border-radius: var(--radius-md); background: var(--c-paper);
  color: var(--c-primary-dark); cursor: pointer; font-size: var(--fs-2xs);
}
.btn-icon:hover { background: var(--c-primary-lighter); }
.btn-icon--danger { color: var(--c-error-dark); }

/* ============================ LAYOUT ============================ */
.page { max-width: var(--maxw-page); margin: 0 auto; padding: var(--sp-3) var(--sp-2) var(--sp-6); }
.page__head { display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap;
  margin-bottom: var(--sp-3); }
.page__head h1 { margin: 0; }
.page__head p { margin: var(--sp-05) 0 0; color: var(--c-ink-muted); font-size: var(--fs-xs); }
.page__actions { margin-left: auto; display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.card { background: var(--c-paper); border: 1px solid #dfe1e2; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); }
.card__head { padding: var(--sp-2); border-bottom: 1px solid #dfe1e2; display: flex;
  gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.card__head h2, .card__head h3 { margin: 0; font-size: var(--fs-md); }
.card__body { padding: var(--sp-2); }
.card__foot { padding: var(--sp-2); border-top: 1px solid #dfe1e2; background: var(--c-paper-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.grid-kpi { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--sp-3); }
.kpi { background: var(--c-paper); border: 1px solid #dfe1e2; border-left: 6px solid var(--c-primary);
  border-radius: var(--radius-md); padding: var(--sp-2); }
.kpi__val { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; }
.kpi__lbl { font-size: var(--fs-3xs); color: var(--c-ink-muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: var(--fw-bold); margin-top: var(--sp-05); }
.kpi--success { border-left-color: var(--c-success-darker); }
.kpi--warning { border-left-color: var(--c-warning-darker); }
.kpi--error { border-left-color: var(--c-error-dark); }

/* ============================ ALERTS ============================ */
.alert { border-left: 8px solid var(--c-info-darker); background: var(--c-info-light);
  padding: var(--sp-2); border-radius: var(--radius-md); margin-bottom: var(--sp-2); }
.alert h3, .alert h4 { margin: 0 0 var(--sp-05); font-size: var(--fs-sm); }
.alert p, .alert ul { margin: 0; font-size: var(--fs-xs); max-width: none; }
.alert--success { border-color: var(--c-success-darker); background: var(--c-success-light); }
.alert--warning { border-color: var(--c-warning-darker); background: var(--c-warning-light); }
.alert--error   { border-color: var(--c-error-dark);     background: var(--c-error-light); }
.alert--rbac    { border-color: var(--c-form-purple);    background: var(--c-form-purple-bg); }

/* ============================ CHIPS / TAGS ============================ */
.chip { display: inline-flex; align-items: center; gap: var(--sp-05); padding: 2px var(--sp-1);
  border-radius: var(--radius-pill); font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  border: 1px solid; white-space: nowrap; }
/* Status is conveyed by TEXT + color + border, never color alone (WCAG 1.4.1) */
.chip--neutral { background: var(--c-paper-alt);   color: #3d4551;             border-color: #a9aeb1; }
.chip--info    { background: var(--c-info-light);  color: var(--c-info-darker); border-color: var(--c-info-darker); }
.chip--success { background: var(--c-success-light);color: var(--c-success-darker);border-color: var(--c-success-darker); }
.chip--warning { background: var(--c-warning-light);color: var(--c-warning-darker);border-color: var(--c-warning-darker); }
.chip--error   { background: var(--c-error-light); color: var(--c-error-darker); border-color: var(--c-error-dark); }
.chip--paused  { background: #f5f0e6;              color: #7a4d05;             border-color: #7a4d05; }

/* FORM TAG (30 Sep 2026): the "Started as" / form-name label. Was a pill chip with a 4px
   accent border; a long form name wraps to two lines in a table cell, and the pill's round
   ends then cut into the text and bent the accent bar round them. A flat label instead:
   straight accent bar on the left (colour per form type via --form-accent), small corners,
   normal-weight wrapping text. Colour is decoration only — the text names the form. */
.form-tag { display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: .2rem .55rem .2rem .5rem; border: 1px solid #dfe1e2;
  border-left: 4px solid var(--form-accent, #005ea2); border-radius: 0 .25rem .25rem 0;
  background: var(--c-paper-alt); color: #1b1b1b; font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); line-height: 1.35; white-space: normal; overflow-wrap: break-word;
  text-align: left; vertical-align: top; }

/* ============================ TABLES ============================ */
.table-wrap { overflow-x: auto; border: 1px solid #dfe1e2; border-radius: var(--radius-md);
  background: var(--c-paper); }
/* Grid body 14px (30 Sep 2026, "CAN GRID TEXT SIZE BE REDUCED"; was --fs-xs 15px). Stays above the 13px floor. */
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-2xs); }
table.tbl caption { text-align: left; padding: var(--sp-15) var(--sp-2); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); color: var(--c-ink-muted); border-bottom: 1px solid #dfe1e2; }
table.tbl th, table.tbl td { padding: var(--sp-1) var(--sp-15); text-align: left;
  border-bottom: 1px solid #edeff0; vertical-align: top; }
table.tbl thead th { background: var(--c-paper-alt); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid #a9aeb1;
  white-space: nowrap; position: relative; }
table.tbl tbody tr:hover { background: #f5faff; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tfoot td { background: var(--c-paper-alt); font-weight: var(--fw-bold);
  border-top: 2px solid #a9aeb1; }

/* Sortable header: a real button, with aria-sort on the th. */
.th-sort { background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
  text-transform: inherit; letter-spacing: inherit; font-weight: var(--fw-bold);
  color: var(--c-primary-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-sort::after { content: "↕"; font-size: 11px; opacity: .55; }
[aria-sort="ascending"]  .th-sort::after { content: "▲"; opacity: 1; }
[aria-sort="descending"] .th-sort::after { content: "▼"; opacity: 1; }

.filter-row td { background: var(--c-paper-sunken); padding: var(--sp-05) var(--sp-1); }
.filter-row input { width: 100%; min-width: 90px; font-size: var(--fs-3xs);
  padding: 4px var(--sp-05); border: 1px solid #a9aeb1; border-radius: var(--radius-sm); }

.pager { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-15) var(--sp-2);
  border-top: 1px solid #dfe1e2; flex-wrap: wrap; font-size: var(--fs-2xs); }
.pager__info { margin-right: auto; color: var(--c-ink-muted); }
.pager__btn { min-width: 34px; height: 32px; border: 1px solid #a9aeb1; background: var(--c-paper);
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--fs-3xs); }
.pager__btn[aria-current="true"] { background: var(--c-primary-darker); color: #fff;
  border-color: var(--c-primary-darker); font-weight: var(--fw-bold); }
.pager__btn:disabled { color: var(--c-disabled-ink); cursor: not-allowed; }

/* ============================ FORMS ============================ */
fieldset.fs { border: 0; margin: 0 0 var(--sp-3); padding: 0; }
fieldset.fs > legend { font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 0;
  margin-bottom: var(--sp-05); }
.fs__hint { font-size: var(--fs-2xs); color: var(--c-ink-muted); margin: 0 0 var(--sp-2);
  max-width: var(--maxw-prose); }

.form-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(12, 1fr); }
.fld { grid-column: span 4; min-width: 0; }
.fld[data-span="2"]  { grid-column: span 2; }
.fld[data-span="3"]  { grid-column: span 3; }
.fld[data-span="4"]  { grid-column: span 4; }
.fld[data-span="6"]  { grid-column: span 6; }
.fld[data-span="8"]  { grid-column: span 8; }
.fld[data-span="12"] { grid-column: span 12; }
@media (max-width: 900px) {
  .fld, .fld[data-span] { grid-column: span 12; }
}

.fld__label { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  margin-bottom: var(--sp-05); }
.fld__hint { display: block; font-size: var(--fs-3xs); color: var(--c-ink-muted);
  margin-bottom: var(--sp-05); }
.fld__unit { font-weight: var(--fw-normal); color: var(--c-ink-muted); }
.fld__col { display: block; font-family: var(--font-mono); font-size: 11px;
  color: var(--c-ink-subtle); }

.inp, select.inp, textarea.inp {
  width: 100%; font: inherit; font-size: var(--fs-2xs); color: var(--c-ink);
  padding: var(--sp-1); border: 1px solid #565c65; border-radius: var(--radius-sm);
  background: var(--c-paper);
}
textarea.inp { min-height: 88px; resize: vertical; }
.inp:disabled, .inp[readonly] { background: var(--c-paper-alt); color: #3d4551; border-color: #a9aeb1; }
.inp[readonly] { cursor: default; }
.inp[aria-invalid="true"] { border: 3px solid var(--c-error-dark); }

.fld__err { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  color: var(--c-error-darker); margin-top: var(--sp-05); }
.fld--invalid { border-left: 4px solid var(--c-error-dark); padding-left: var(--sp-1); }

/* Choice lists: real fieldset/legend + input+label pairs */
.choices { display: grid; gap: var(--sp-05); }
.choices--inline { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--sp-2); }
.choice { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--fs-2xs);
  padding: var(--sp-05) 0; }
.choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--c-primary); }
.choice__txt { flex: 1 1 auto; }
.choice__txt .code { font-family: var(--font-mono); font-weight: var(--fw-bold);
  color: var(--c-primary-darker); }
.choice__note { display: block; font-size: var(--fs-3xs); color: var(--c-ink-muted); }

/* Read-only display value (role/state derived, not a disabled input) */
.ro { background: var(--c-paper-alt); border: 1px dashed #a9aeb1; border-radius: var(--radius-sm);
  padding: var(--sp-1); font-size: var(--fs-2xs); min-height: 38px; }
.ro:empty::before { content: "—"; color: var(--c-ink-subtle); }

/* Definition pairs for read-only summaries */
.dl { display: grid; gap: var(--sp-15); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; }
.dl > div { min-width: 0; }
.dl dt { font-size: var(--fs-3xs); color: var(--c-ink-muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: var(--fw-bold); }
.dl dd { margin: 2px 0 0; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  overflow-wrap: anywhere; }

/* Office-use-only zone. The paper form has four restricted zones; make the
   boundary explicit so it is obvious which role owns the data. */
.office-zone { border: 2px dashed var(--c-form-purple); background: var(--c-form-purple-bg);
  border-radius: var(--radius-md); padding: var(--sp-2); }
.office-zone__tag { display: inline-block; background: var(--c-form-purple); color: #fff;
  font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .05em; padding: 2px var(--sp-1); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-1); }

/* File upload */
.upload { border: 2px dashed #565c65; border-radius: var(--radius-md); padding: var(--sp-2);
  background: var(--c-paper-sunken); }
.upload input[type=file] { font-size: var(--fs-2xs); }
.filelist { list-style: none; margin: var(--sp-15) 0 0; padding: 0; display: grid; gap: var(--sp-05); }
.filelist li { display: flex; gap: var(--sp-1); align-items: center; font-size: var(--fs-3xs);
  background: var(--c-paper); border: 1px solid #dfe1e2; border-radius: var(--radius-sm);
  padding: var(--sp-05) var(--sp-1); }
.filelist .nm { flex: 1 1 auto; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Repeating table (lithology, perc holes, casing, sealing log, ...) */
.rep { border: 1px solid #a9aeb1; border-radius: var(--radius-md); overflow: hidden; }
.rep table { width: 100%; border-collapse: collapse; font-size: var(--fs-3xs); }
.rep th, .rep td { padding: var(--sp-05); border-bottom: 1px solid #edeff0; text-align: left; }
.rep thead th { background: var(--c-paper-alt); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; border-bottom: 2px solid #a9aeb1; }
.rep td input, .rep td select { width: 100%; font: inherit; font-size: var(--fs-3xs);
  padding: 4px; border: 1px solid #a9aeb1; border-radius: var(--radius-sm); }
.rep__foot { padding: var(--sp-1); background: var(--c-paper-sunken); border-top: 1px solid #dfe1e2;
  display: flex; gap: var(--sp-1); align-items: center; }
.rep__rownum { width: 34px; text-align: center; color: var(--c-ink-muted);
  font-family: var(--font-mono); }

/* ============================ STEPPER ============================ */
.stepper { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex;
  gap: var(--sp-05); flex-wrap: wrap; border-bottom: 1px solid #dfe1e2; }
.stepper li { flex: 1 1 140px; }
.stepper button { width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 4px solid #dfe1e2; padding: var(--sp-1) var(--sp-15); font: inherit;
  font-size: var(--fs-3xs); color: var(--c-ink-muted); cursor: pointer; }
.stepper button:hover { background: var(--c-paper-alt); }
.stepper button .n { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #dfe1e2; color: #3d4551; font-weight: var(--fw-bold);
  margin-right: var(--sp-05); font-size: 11px; }
.stepper button .t { font-weight: var(--fw-bold); }
.stepper li[data-state="current"] button { border-bottom-color: var(--c-primary);
  color: var(--c-primary-darker); }
.stepper li[data-state="current"] button .n { background: var(--c-primary); color: #fff; }
.stepper li[data-state="done"] button { border-bottom-color: var(--c-success-darker);
  color: var(--c-success-darker); }
.stepper li[data-state="done"] button .n { background: var(--c-success-darker); color: #fff; }

/* ============================ DASHBOARD COLUMN ============================ */
/* One centred, max-width column for the dashboard so its content reads the same on a
   wide monitor as on a laptop instead of stretching a short toolbar across the viewport.
   Applied inside .page (which supplies the padding); this only constrains and centres. */
.dash { max-width: 1080px; margin-inline: auto; }
.dash .tabpanel { padding-inline: var(--sp-3); }

/* ============================ TABS ============================ */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid #a9aeb1;
  padding: 0 var(--sp-1); background: var(--c-paper-alt);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tabs button { background: none; border: 0; border-bottom: 4px solid transparent;
  padding: var(--sp-1) var(--sp-15); font: inherit; font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); color: var(--c-ink-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-05); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tabs button:hover { background: var(--c-paper); color: var(--c-ink); }
.tabs button[aria-selected="true"] { background: var(--c-paper); color: var(--c-primary-darker);
  border-bottom-color: var(--c-primary); }
.tabs button .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.tabs button .badge { font-size: 10px; background: var(--c-primary-darker); color: #fff;
  border-radius: var(--radius-pill); padding: 0 5px; font-weight: var(--fw-bold); }
.tabpanel { background: var(--c-paper); border: 1px solid #dfe1e2; border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--sp-3); }
.tabpanel:focus-visible { box-shadow: var(--focus-ring); }

/* ============================ MODAL ============================ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(27,27,27,.65);
  display: grid; place-items: center; padding: var(--sp-2); z-index: var(--z-modal); }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--c-paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  width: min(980px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal--wide { width: min(1280px, 100%); }
.modal__head { padding: var(--sp-2); border-bottom: 1px solid #dfe1e2; display: flex;
  gap: var(--sp-2); align-items: flex-start; }
.modal__head h2 { margin: 0; font-size: var(--fs-lg); }
.modal__head p { margin: var(--sp-05) 0 0; font-size: var(--fs-2xs); color: var(--c-ink-muted); }
.modal__close { margin-left: auto; }
.modal__body { padding: var(--sp-3); overflow-y: auto; flex: 1 1 auto; }
.modal__foot { padding: var(--sp-2); border-top: 1px solid #dfe1e2; background: var(--c-paper-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.modal__foot .right { margin-left: auto; display: flex; gap: var(--sp-1); }

/* ============================ TOAST ============================ */
.toast-region { position: fixed; bottom: var(--sp-2); right: var(--sp-2); z-index: var(--z-toast);
  display: grid; gap: var(--sp-1); max-width: 420px; }
.toast { background: var(--c-primary-darker); color: #fff; padding: var(--sp-15) var(--sp-2);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--fs-2xs);
  border-left: 6px solid var(--c-info); }
.toast--success { border-left-color: var(--c-success); }
.toast--error { border-left-color: var(--c-error); }
.toast--warning { border-left-color: var(--c-warning); }

/* ============================ PIPELINE ============================ */
.pipeline { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-05);
  flex-wrap: wrap; }
.pipeline li { flex: 1 1 130px; border: 1px solid #dfe1e2; border-top: 5px solid #dfe1e2;
  border-radius: var(--radius-md); padding: var(--sp-1); background: var(--c-paper);
  font-size: var(--fs-3xs); }
.pipeline li .n { font-family: var(--font-mono); color: var(--c-ink-muted); }
.pipeline li .t { display: block; font-weight: var(--fw-bold); }
.pipeline li[data-state="done"]    { border-top-color: var(--c-success-darker); background: var(--c-success-light); }
.pipeline li[data-state="current"] { border-top-color: var(--c-primary); background: var(--c-primary-lighter); }
.pipeline li[data-state="paused"]  { border-top-color: var(--c-warning-darker); background: var(--c-warning-light); }
.pipeline li[data-state="blocked"] { border-top-color: var(--c-error-dark); background: var(--c-error-light); }

/* ============================ FORM PICKER CARDS ============================ */
.picker { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.picker__card { border: 1px solid #a9aeb1; border-left: 6px solid var(--c-primary);
  border-radius: var(--radius-md); padding: var(--sp-2); background: var(--c-paper);
  display: flex; flex-direction: column; gap: var(--sp-1); }
.picker__card h4 { margin: 0; font-size: var(--fs-sm); }
.picker__card .code { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.picker__card p { font-size: var(--fs-3xs); margin: 0; color: var(--c-ink-muted); max-width: none; }
.picker__card .spacer { flex: 1 1 auto; }
.picker__card[data-locked="true"] { background: var(--c-paper-alt); border-left-color: #a9aeb1; }
.picker__card[data-filed="true"] { border-left-color: var(--c-success-darker); }

/* ============================ PRINT ============================ */
@media print {
  .site-header, .gov-banner, .page__actions, .modal-backdrop, .toast-region,
  .tabs, .stepper, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card, .tabpanel { border: 0; box-shadow: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}