/* ============================================================================
   app.css — component layer for the shell, the generic form renderer and the
   repeating-table widget.

   tokens.css stays the token + primitive layer and is not edited. Everything
   here is built from those tokens; no new raw colour or size values are
   introduced except the one missing form accent (teal, for the Certificate of
   Potability, which had no carbon-copy colour because it never existed on
   paper as a coloured form).

   No external font, no CDN, no build step. Loads after tokens.css.
   ============================================================================ */

:root {
  --c-form-teal:    #0f6e78;
  --c-form-teal-bg: #e8f5f6;
}

/* ==================================================== government banner ==== */
.gov-banner__env {
  margin: var(--sp-05) 0 0;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-warning-darker);
}

/* ============================================================== header ==== */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.site-header__id { display: flex; align-items: center; gap: var(--sp-2); }
/* THE REAL MDE LOGO, not the letters "MDE".

   This was a dark circle with the text MDE set in serif inside it — a stand-in
   for the agency mark, and the last serif declaration left in any stylesheet the
   main layout loads. It now holds <img src="~/img/logo.png">, per the standing
   instruction to use that file rather than a lettered placeholder.

   Sized by height with width:auto so the logo keeps its own aspect ratio; the
   circle and the dark fill are gone because the artwork is not round and a
   coloured plate behind a logo that already has its own background reads as a
   badge stuck on the header. No font properties remain here at all — there is
   no text left to set. */
.site-header__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.site-header__seal img {
  display: block;
  height: 2.75rem;
  width: auto;
}
.site-header__title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--c-primary-darker);
}
.site-header__sub {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--c-ink-muted);
}
.site-header__role { text-align: right; }
.site-header__rolelbl {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--c-ink-muted);
}
.site-header__who {
  margin: var(--sp-05) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* ============================================================= menubar ==== */
.menubar__hint {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-normal);
  color: var(--c-ink-subtle);
}
.menu--wide { min-width: 24rem; }
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
}
.menu__swatch {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  flex: 0 0 auto;
  border: var(--border-1) solid rgba(0, 0, 0, .35);
  border-radius: 2px;
}
.menu__swatch[data-color="green"]  { background: var(--c-form-green); }
.menu__swatch[data-color="yellow"] { background: var(--c-form-yellow); }
.menu__swatch[data-color="blue"]   { background: var(--c-form-blue); }
.menu__swatch[data-color="white"]  { background: var(--c-paper); }
.menu__swatch[data-color="purple"] { background: var(--c-form-purple); }
.menu__swatch[data-color="teal"]   { background: var(--c-form-teal); }
.menu__code {
  margin-left: auto;
  padding-left: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--c-ink-subtle);
  white-space: nowrap;
}
/* An item the current role cannot use stays visible and reads as unavailable,
   rather than disappearing — a menu that changes length per role is disorienting
   and hides the existence of the workflow step entirely. */
[data-perm-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ============================================= capability read-out bar ==== */
.rolebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-paper-sunken);
  border-bottom: var(--border-1) solid var(--c-disabled);
}
.rolebar__caps { display: flex; flex-wrap: wrap; gap: var(--sp-05); }
.rolebar__note {
  margin: 0;
  flex: 1 1 18rem;
  font-size: var(--fs-3xs);
  color: var(--c-ink-muted);
}

/* ========================================================== breadcrumb ==== */
.crumbs { max-width: var(--maxw-page); margin: 0 auto; padding: var(--sp-1) var(--sp-3); }
.crumbs ol { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.crumbs li { font-size: var(--fs-2xs); color: var(--c-ink-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--sp-1); color: var(--c-ink-subtle); }
.crumbs [aria-current="page"] { font-weight: var(--fw-semibold); color: var(--c-ink); }

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-primary);
  font: inherit;
  font-size: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--c-primary-darker); }

/* =============================================================== views ==== */
.view {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: var(--sp-3);
}
.view:focus { outline: none; }
.view__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.view__head h2 { margin: 0; font-size: var(--fs-lg); color: var(--c-primary-darker); }
.view__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.view__intro {
  max-width: var(--maxw-prose);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.fld__lbl--inline { margin: 0; white-space: nowrap; }
.inp--inline { width: auto; min-width: 14rem; }

.btn--secondary {
  background: var(--c-paper);
  border: var(--border-2) solid var(--c-primary);
  color: var(--c-primary-darker);
}
.btn--secondary:hover { background: var(--c-primary-lighter); }
.btn--icon-lead { display: inline-flex; align-items: center; gap: var(--sp-1); }
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--border-1) solid var(--c-disabled);
}
/* 2 Oct 2026: Back sits on the left of an action row, every other control on the right. */
.actionbar__back { margin-right: auto; }
/* 2 Oct 2026: the off-screen Enter-key default of a step (see _StepActionBar). Not display:none,
   because some browsers skip a hidden default button on implicit submission. */
.actionbar__enter-default {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ================================================================ KPIs ==== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.kpi__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-primary-darker);
}
.kpi__label {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--c-ink-muted);
}
.kpi[data-tone="warning"] { border-left: 4px solid var(--c-warning); }
.kpi[data-tone="error"]   { border-left: 4px solid var(--c-error); }
.kpi[data-tone="success"] { border-left: 4px solid var(--c-success); }
.kpi[data-tone="info"]    { border-left: 4px solid var(--c-info); }
.kpi[data-tone="paused"]  { border-left: 4px solid var(--c-form-purple); }

/* ============================================================== tables ==== */
.tbl-wrap { overflow-x: auto; border: var(--border-1) solid var(--c-disabled); border-radius: var(--radius-md); }
.tbl__count { margin: 0 0 var(--sp-1); font-size: var(--fs-2xs); color: var(--c-ink-muted); }
.tbl__empty { padding: var(--sp-4); text-align: center; color: var(--c-ink-muted); }
.tbl--compact th, .tbl--compact td {
  padding: var(--sp-05) var(--sp-1);
  font-size: var(--fs-3xs);
}
/* The primary value of a stacked cell, where the applicant and driller columns put
   a name on the first line and the site or the filing date under it. Block, so it
   owns its line whether or not a sub-line follows; semibold, so the eye lands on
   the name and not on the address beneath it. Added 24 Aug 2026 with the
   applicant-and-site merge — see COLUMNS in js/app.js. */
.cell__main {
  display: block;
  font-weight: var(--fw-semibold);
}
.cell__sub {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--c-ink-subtle);
}
.cell__sub--warn { color: var(--c-error-dark); font-weight: var(--fw-semibold); }

/* ============================================================== chips ===== */
.chip--xs { padding: 0 .35rem; font-size: var(--fs-3xs); }
.chip--role { background: var(--c-primary-lighter); color: var(--c-primary-darker); }
.chip--form { background: var(--c-form-purple-bg); color: var(--c-form-purple); }
.chip--paused { background: var(--c-form-purple-bg); color: var(--c-form-purple); }

/* ============================================================= alerts ===== */
.alert--info {
  background: var(--c-info-light);
  border-left: 4px solid var(--c-info);
}
.alert--info h4 { color: var(--c-info-darker); }
.alert--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-2xs); }
.alert--sm h4 { margin: 0 0 var(--sp-05); font-size: var(--fs-2xs); }
.alert__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-3xs); color: var(--c-ink-muted); }

/* ================================================== application header ==== */
.wshead {
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
  background: var(--c-paper-alt);
  border: var(--border-1) solid var(--c-disabled);
  border-radius: var(--radius-md);
}
.wshead__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.wshead__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--c-primary-darker);
}
.dl--inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
}
.dl--inline dt {
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-ink-subtle);
}
.dl--inline dd {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.dl__empty { padding: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-ink-muted); }
.dl__full { grid-column: 1 / -1; }

/* =========================================================== pipeline ===== */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-05);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.pipeline__step {
  flex: 1 1 auto;
  min-width: 6.5rem;
  padding: var(--sp-05) var(--sp-1);
  border-top: 4px solid var(--c-disabled);
  background: var(--c-paper);
}
.pipeline__label { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.pipeline__step[data-state="done"]    { border-top-color: var(--c-success); }
.pipeline__step[data-state="done"] .pipeline__label { color: var(--c-success-darker); }
.pipeline__step[data-state="current"] { border-top-color: var(--c-primary-vivid); background: var(--c-primary-lighter); }
.pipeline__step[data-state="current"] .pipeline__label { font-weight: var(--fw-bold); color: var(--c-primary-darker); }
.pipeline__step[data-state="paused"]  { border-top-color: var(--c-form-purple); background: var(--c-form-purple-bg); }
.pipeline__step[data-state="blocked"] { border-top-color: var(--c-error); }
.pipeline__step[data-state="blocked"] .pipeline__label { color: var(--c-error-darker); text-decoration: line-through; }

/* =============================================================== tabs ===== */
.tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-1) var(--sp-15);
  border: var(--border-1) solid var(--c-disabled);
  border-bottom: 0;
  border-top: 3px solid var(--c-disabled);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--c-paper-sunken);
  color: var(--c-ink-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tab[aria-selected="true"] {
  background: var(--c-paper);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}
.tab[data-color="green"][aria-selected="true"]  { border-top-color: var(--c-form-green); }
.tab[data-color="yellow"][aria-selected="true"] { border-top-color: var(--c-form-yellow); }
.tab[data-color="blue"][aria-selected="true"]   { border-top-color: var(--c-form-blue); }
.tab[data-color="white"][aria-selected="true"]  { border-top-color: var(--c-form-white); }
.tab[data-color="purple"][aria-selected="true"] { border-top-color: var(--c-form-purple); }
.tab[data-color="teal"][aria-selected="true"]   { border-top-color: var(--c-form-teal); }
.tab__label { font-size: var(--fs-2xs); }
.tab__code { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--c-ink-subtle); }
.tab__badge {
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-ink-subtle);
}
.tab__badge--filed  { color: var(--c-success-darker); font-weight: var(--fw-bold); }
.tab__badge--locked { color: var(--c-warning-darker); font-weight: var(--fw-bold); }

/* ================================================== form-picker cards ===== */
.picker__name { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.picker__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--c-ink-subtle);
}
.picker__alias {
  display: inline-block;
  margin-top: var(--sp-05);
  font-size: var(--fs-3xs);
  font-style: italic;
  color: var(--c-ink-muted);
}
.picker__deadline {
  display: block;
  margin-top: var(--sp-05);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  color: var(--c-error-dark);
}
.picker__why {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-3xs);
  color: var(--c-warning-darker);
}

/* ========================================================= file list ====== */
.filelist__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
  padding: var(--sp-1);
  border-bottom: var(--border-1) solid var(--c-disabled);
}
.filelist__name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.filelist__meta { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.filelist__item .btn-icon { margin-left: auto; }

/* ====================================== generic form renderer chrome ====== */
.formhdr {
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-left: 6px solid var(--c-form-purple);
  background: var(--c-paper-alt);
}
.formhdr[data-color="green"]  { border-left-color: var(--c-form-green);  background: var(--c-form-green-bg); }
.formhdr[data-color="yellow"] { border-left-color: var(--c-form-yellow); background: var(--c-form-yellow-bg); }
.formhdr[data-color="blue"]   { border-left-color: var(--c-form-blue);   background: var(--c-form-blue-bg); }
.formhdr[data-color="white"]  { border-left-color: var(--c-form-white);  background: var(--c-form-white-bg); }
.formhdr[data-color="teal"]   { border-left-color: var(--c-form-teal);   background: var(--c-form-teal-bg); }
.formhdr h3 { margin: 0; font-size: var(--fs-md); }
.formhdr__meta { margin: var(--sp-05) 0 0; font-size: var(--fs-3xs); color: var(--c-ink-muted); }
/* The colour name is an ALIAS shown for continuity with the paper carbon copies.
   Never branch logic on it — an MDE reviewer has already asked whether the form
   colour names should still be used at all. */
.formhdr__copies { margin: var(--sp-05) 0 0; font-size: var(--fs-3xs); font-style: italic; color: var(--c-ink-subtle); }
.formbody > .fs { margin-bottom: var(--sp-3); }

.fs__cite { margin: 0 0 var(--sp-1); font-size: var(--fs-3xs); font-family: var(--font-mono); color: var(--c-ink-subtle); }
.fs__lock {
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-warning-light);
  border-left: 4px solid var(--c-warning);
  font-size: var(--fs-2xs);
}

.fld__lbl { display: block; margin-bottom: 2px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.fld__note { margin: var(--sp-05) 0 0; font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.fld__counter { margin: 2px 0 0; font-size: var(--fs-3xs); color: var(--c-ink-subtle); text-align: right; }
.fld__group { border: 0; padding: 0; margin: 0; }
.fld__static {
  padding: var(--sp-1);
  background: var(--c-paper-sunken);
  border-left: 3px solid var(--c-disabled);
  font-size: var(--fs-2xs);
}
/* Inherited defects are shown, not hidden. A <details> keeps them out of the
   way of a driller filling the form while remaining reachable to a reviewer. */
.fld__flag { margin-top: var(--sp-05); font-size: var(--fs-3xs); }
.fld__flag summary { color: var(--c-warning-darker); font-weight: var(--fw-semibold); cursor: pointer; }
.fld__flag p { margin: var(--sp-05) 0 0; color: var(--c-ink-muted); }

.inp-group { display: flex; align-items: stretch; gap: 0; }
.inp-group .inp { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.inp-affix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-1);
  background: var(--c-paper-sunken);
  border: var(--border-1) solid var(--c-disabled);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-2xs);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.ro__unit { margin-left: var(--sp-05); font-size: var(--fs-2xs); color: var(--c-ink-muted); }
.ro--cell, .inp--cell { min-width: 0; font-size: var(--fs-3xs); }
.req { color: var(--c-error-dark); text-decoration: none; }

/* ====================================== repeating-row table (.rep) ======== */
.rep { width: 100%; border-collapse: collapse; }
.rep__head th {
  padding: var(--sp-05) var(--sp-1);
  background: var(--c-paper-sunken);
  border-bottom: var(--border-2) solid var(--c-disabled);
  font-size: var(--fs-3xs);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rep td { padding: 2px var(--sp-05); border-bottom: var(--border-1) solid var(--c-disabled); vertical-align: top; }
/* Real row ordinals. The paper form pre-printed MATERIAL 1, 2, 2, 3 — a typo
   that a static label set would faithfully reproduce forever. */
.rep__num {
  width: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--c-ink-subtle);
  text-align: right;
}
.rep__act { width: 2.5rem; text-align: center; }
.rep__unit { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.rep__subrow td { border-bottom: 0; padding-top: 0; }
.rep__meta { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.rep__cite { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--c-ink-subtle); }
.rep__empty { padding: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-ink-muted); text-align: center; }
.rep__foot { display: flex; gap: var(--sp-1); align-items: center; margin-top: var(--sp-1); }

/* ============================================================ stepper ===== */
.stepper { display: flex; flex-wrap: wrap; gap: var(--sp-05); margin-bottom: var(--sp-2); padding: 0; list-style: none; }
.stepper__item { flex: 0 0 auto; }
.stepper__btn {
  padding: var(--sp-05) var(--sp-15);
  border: var(--border-1) solid var(--c-disabled);
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  font: inherit;
  font-size: var(--fs-3xs);
  cursor: pointer;
}
.stepper__btn[aria-current="step"] {
  background: var(--c-primary-darker);
  border-color: var(--c-primary-darker);
  color: #fff;
  font-weight: var(--fw-bold);
}
.steppanel { margin-top: var(--sp-2); }

/* ============================================================== modal ===== */
.modal--lg { width: min(72rem, 94vw); }
.modal__body { max-height: 70vh; overflow-y: auto; }
.card--office { margin-top: var(--sp-3); }

/* =========================================================== utility ===== */
.cols-3 { columns: 3 14rem; margin: var(--sp-1) 0 0; padding-left: var(--sp-3); font-size: var(--fs-2xs); }
.cols-3 li { break-inside: avoid; }

.site-footer {
  max-width: var(--maxw-page);
  margin: var(--sp-5) auto 0;
  padding: var(--sp-3);
  border-top: var(--border-1) solid var(--c-disabled);
  font-size: var(--fs-3xs);
  color: var(--c-ink-muted);
}
.site-footer p { margin: 0 0 var(--sp-05); }

body.has-modal { overflow: hidden; }

@media print {
  .gov-banner, .menubar, .rolebar, .crumbs, .view__actions, .actionbar,
  .site-footer, .toast-region, .tabs, .filter-row { display: none !important; }
  .tabpanel[hidden] { display: none !important; }
  .tbl-wrap { overflow: visible; border: 0; }
}

@media (max-width: 700px) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .site-header__role { text-align: left; }
  .cols-3 { columns: 1; }
}