/* ==========================================================================
   PATHWAY — COMPONENTS
   Naming: .block, .block__part, .block--variant
   ========================================================================== */

/* ==========================================================================
   1. HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,248,250,.86);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: var(--hair) solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 4.25rem;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text); }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 1.0625rem; letter-spacing: var(--tr-word); font-weight: 700; }
.brand__sub {
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-top: 3px; white-space: nowrap;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  font-size: var(--t-small); color: var(--text-muted);
  text-decoration: none; padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.nav-toggle {
  margin-left: auto; display: none; align-items: center; gap: var(--s-2);
  background: none; border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: var(--hair) solid var(--rule);
    padding: var(--s-3) clamp(1rem,4vw,2.5rem) var(--s-5);
    box-shadow: var(--shadow-panel);
  }
  .nav[hidden] { display: none; }
  .nav__link { padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--rule); }
  .nav .btn { margin-top: var(--s-4); justify-content: center; }
}

/* ==========================================================================
   2. BUTTONS — pill geometry against the boxy panels
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-small); font-weight: 500; line-height: 1;
  padding: 0.8125rem var(--s-5);
  border-radius: var(--r-pill); border: var(--hair) solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: none; }
.btn__arrow { flex: none; transition: transform var(--d-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--graphite); color: var(--offwhite); }
.btn--primary:hover { background: var(--graphite-800); }

.btn--accent { background: var(--steel); color: #fff; }
.btn--accent:hover { background: #1A4A76; }

.btn--ghost { border-color: var(--rule-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--graphite); background: rgba(34,40,46,.03); }

/* On dark panels */
.panel .btn--primary, .on-dark .btn--primary { background: var(--offwhite); color: var(--graphite); }
.panel .btn--primary:hover, .on-dark .btn--primary:hover { background: #fff; }
.panel .btn--ghost, .on-dark .btn--ghost { border-color: var(--rule-on-dark); color: var(--offwhite); }
.panel .btn--ghost:hover, .on-dark .btn--ghost:hover { border-color: var(--sky); background: rgba(125,180,226,.08); }

/* ==========================================================================
   3. PANEL — the core surface. A dark drawing sheet on the paper desk.
   ========================================================================== */
.panel {
  position: relative; isolation: isolate;
  background: var(--bg-panel); color: var(--text-on-dark);
  border-radius: var(--r-panel);
  padding: var(--panel-p);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
/* hairline construction grid, drafted onto the sheet */
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--grid-line) var(--hair), transparent var(--hair));
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 20%, transparent 78%);
}
.panel--light {
  background: #fff; color: var(--text);
  border: var(--hair) solid var(--rule);
  box-shadow: none;
}
.panel--light::before { display: none; }
.panel--deep { background: var(--graphite-900); }
.panel--flush { padding: 0; }

/* ---- Title block: bottom-right, like a real construction drawing ------- */
.titleblock {
  position: absolute; right: 0; bottom: 0;
  display: grid; grid-auto-flow: column;
  border-top: var(--hair) solid var(--rule-on-dark);
  border-left: var(--hair) solid var(--rule-on-dark);
  background: rgba(23,27,32,.72);
  backdrop-filter: blur(4px);
  border-top-left-radius: 2px;
}
.titleblock__cell {
  padding: 0.5rem 0.875rem;
  border-left: var(--hair) solid var(--rule-on-dark);
  min-width: 4.5rem;
}
.titleblock__cell:first-child { border-left: 0; }
.titleblock__k {
  display: block; font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite-400);
  margin-bottom: 2px;
}
.titleblock__v {
  display: block; font-family: var(--font-mono); font-size: 0.6875rem;
  font-weight: 500; color: var(--offwhite); font-variant-numeric: tabular-nums;
}
.titleblock__v--accent { color: var(--sky); }
.panel--light .titleblock {
  background: rgba(255,255,255,.86);
  border-color: var(--rule);
}
.panel--light .titleblock__cell { border-color: var(--rule); }
.panel--light .titleblock__k { color: var(--text-muted); }
.panel--light .titleblock__v { color: var(--text); }
.panel--light .titleblock__v--accent { color: var(--accent); }
@media (max-width: 700px) { .titleblock { display: none; } }

/* ---- Eyebrow: a real sheet code + label, never decorative numbering ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: var(--hair);
  background: currentColor; flex: none; opacity: .5;
}
.panel .eyebrow, .on-dark .eyebrow { color: var(--sky); }
.eyebrow--plain::before { display: none; }

/* ==========================================================================
   4. SECTION HEADER
   ========================================================================== */
.sec-head { max-width: 68ch; margin-bottom: var(--s-7); }
.sec-head__title { margin-bottom: var(--s-4); }
.sec-head--split {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: end; max-width: none;
}
@media (max-width: 860px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

/* ==========================================================================
   5. CARDS + GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: #fff; border: var(--hair) solid var(--rule);
  border-radius: var(--r-card); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
.card__code {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; color: var(--accent);
}
.card__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.012em; margin: 0; }
.card__body { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--s-3); }
.card__link {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.card__link svg { transition: transform var(--d-base) var(--ease-out); }

/* Whole-card link target */
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--graphite); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.card:hover .card__link svg { transform: translateX(4px); }

.card--dark { background: var(--graphite-700); border-color: var(--rule-on-dark); color: var(--text-on-dark); }
.card--dark .card__body { color: var(--text-on-dark-mut); }
.card--dark .card__code { color: var(--sky); }
.card--dark .card__link { color: var(--offwhite); }
a.card--dark:hover { border-color: var(--sky); }

/* ==========================================================================
   6. STAT ROW — hairline-divided, mono figures
   ========================================================================== */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: var(--hair) solid var(--rule);
}
.stats__item {
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-bottom: var(--hair) solid var(--rule);
  border-right: var(--hair) solid var(--rule);
}
.stats__item:last-child { border-right: 0; }
.stats__figure {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--text); display: block; margin-bottom: var(--s-3);
}
.stats__figure sup { font-size: .5em; vertical-align: super; color: var(--accent); }
.stats__label { font-size: var(--t-small); color: var(--text-muted); display: block; }
.panel .stats, .on-dark .stats { border-color: var(--rule-on-dark); }
.panel .stats__item, .on-dark .stats__item { border-color: var(--rule-on-dark); }
.panel .stats__figure, .on-dark .stats__figure { color: var(--offwhite); }
.panel .stats__figure sup, .on-dark .stats__figure sup { color: var(--sky); }
.panel .stats__label, .on-dark .stats__label { color: var(--text-on-dark-mut); }

/* ==========================================================================
   7. DATA TABLE — permit fee / timeline schedules
   ========================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table caption {
  text-align: left; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--text-muted); padding-bottom: var(--s-3);
}
.table th, .table td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: var(--hair) solid var(--rule); vertical-align: top;
}
.table th {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.table td:first-child { font-weight: 500; }
.table .num { white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   8. STEP LIST — a real sequence, so numbering is legitimate here
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item {
  counter-increment: step;
  display: grid; grid-template-columns: 3.5rem minmax(0,1fr);
  gap: var(--s-4); padding: var(--s-5) 0;
  border-top: var(--hair) solid var(--rule);
}
.steps__item:last-child { border-bottom: var(--hair) solid var(--rule); }
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500;
  color: var(--rule-strong); line-height: 1; letter-spacing: -0.02em;
}
.steps__title { font-size: var(--t-h3); font-weight: 700; margin: 0 0 var(--s-2); letter-spacing: -0.012em; }
.steps__body { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
.steps__meta {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
}
.panel .steps__item, .on-dark .steps__item { border-color: var(--rule-on-dark); }
.panel .steps__item::before, .on-dark .steps__item::before { color: var(--graphite-600); }
.panel .steps__body, .on-dark .steps__body { color: var(--text-on-dark-mut); }
.panel .steps__meta, .on-dark .steps__meta { color: var(--sky); }
@media (max-width: 640px) { .steps__item { grid-template-columns: 2.5rem minmax(0,1fr); gap: var(--s-3); } }

/* ==========================================================================
   9. TAG / PILL / BADGE
   ========================================================================== */
.taglist { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.tag {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3125rem 0.625rem; border-radius: var(--r-pill);
  border: var(--hair) solid var(--rule-strong); color: var(--text-muted);
  white-space: nowrap;
}
.tag--accent { border-color: rgba(31,86,136,.35); color: var(--accent); background: rgba(31,86,136,.05); }
.tag--warn { border-color: rgba(196,52,42,.3); color: var(--red-ink); background: rgba(196,52,42,.04); }
.panel .tag, .on-dark .tag { border-color: var(--rule-on-dark); color: var(--text-on-dark-mut); }
.panel .tag--accent, .on-dark .tag--accent { border-color: rgba(125,180,226,.4); color: var(--sky); background: rgba(125,180,226,.08); }

/* ==========================================================================
   10. ACCORDION (FAQ)
   ========================================================================== */
.acc { border-top: var(--hair) solid var(--rule); }
.acc__item { border-bottom: var(--hair) solid var(--rule); }
.acc__item > summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.012em;
}
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__item > summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 400;
  color: var(--accent); transition: transform var(--d-base) var(--ease);
}
.acc__item[open] > summary::after { transform: rotate(45deg); }
.acc__body { padding: 0 0 var(--s-5); }
.acc__body p { font-size: var(--t-small); color: var(--text-muted); }

/* ==========================================================================
   11. FORM — contact / submit a plan set
   ========================================================================== */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.field__label .req { color: var(--red-ink); }
.field__input, .field__select, .field__textarea {
  width: 100%; padding: 0.75rem var(--s-4);
  background: #fff; color: var(--text);
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-card);
  font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field__textarea { min-height: 8rem; resize: vertical; }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,86,136,.14);
}
.field__hint { font-size: var(--t-small); color: var(--text-muted); }

/* ==========================================================================
   12. CALLOUT — the correction-round warning, in red pen
   ========================================================================== */
.callout {
  border-left: 3px solid var(--accent);
  background: rgba(31,86,136,.045);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.callout p { font-size: var(--t-small); margin: 0; }
.callout__label {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: var(--s-2);
}
.callout--warn { border-left-color: var(--red-ink); background: rgba(196,52,42,.04); }
.callout--warn .callout__label { color: var(--red-ink); }

/* ==========================================================================
   13. QUOTE
   ========================================================================== */
.quote { max-width: 46ch; }
.quote__text {
  font-size: var(--t-h2); font-weight: 400; line-height: 1.32;
  letter-spacing: -0.018em; margin: 0 0 var(--s-5); max-width: none;
}
.quote__by {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.panel .quote__by, .on-dark .quote__by { color: var(--sky); }

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */
.cta-band { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer { background: var(--graphite-900); color: var(--text-on-dark); padding-block: var(--s-8) var(--s-5); margin-top: var(--s-8); }
.site-footer a { color: var(--text-on-dark-mut); text-decoration: none; }
.site-footer a:hover { color: var(--offwhite); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap: var(--s-6); padding-bottom: var(--s-7);
  border-bottom: var(--hair) solid var(--rule-on-dark);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col__head {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--sky); margin-bottom: var(--s-4);
}
.footer-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-small); }
.footer-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  padding-top: var(--s-5); font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-400);
}
.footer-brand__mark { width: 30px; height: 30px; margin-bottom: var(--s-4); }

/* ==========================================================================
   16. DATA TABLE — published jurisdiction figures and fee bases
   Hairlines, mono column heads, tabular numerals. Scrolls rather than crushes.
   ========================================================================== */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-card);
  background: #fff;
}
.panel:not(.panel--light) .tablewrap {
  border-color: var(--rule-on-dark);
  background: var(--graphite-800);
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 34rem;
}
.dtable th,
.dtable td {
  text-align: left;
  padding: 0.875rem 1rem;
  vertical-align: top;
}
.dtable thead th {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: var(--hair) solid var(--rule-strong);
  background: var(--paper);
}
.dtable tbody th {
  font-weight: 600;
  color: var(--text);
  width: 38%;
}
.dtable tbody td {
  color: var(--text-muted);
}
.dtable tbody td.num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dtable tbody tr + tr th,
.dtable tbody tr + tr td {
  border-top: var(--hair) solid var(--rule);
}

/* On a dark panel the same table inverts via semantic tokens. */
.panel:not(.panel--light) .dtable thead th {
  color: var(--text-on-dark-mut);
  background: var(--graphite-900);
  border-bottom-color: var(--rule-on-dark);
}
.panel:not(.panel--light) .dtable tbody th { color: var(--text-on-dark); }
.panel:not(.panel--light) .dtable tbody td { color: var(--text-on-dark-mut); }
.panel:not(.panel--light) .dtable tbody td.num { color: var(--accent-on-dark); }
.panel:not(.panel--light) .dtable tbody tr + tr th,
.panel:not(.panel--light) .dtable tbody tr + tr td { border-top-color: var(--rule-on-dark); }

@media (max-width: 700px) {
  .tablewrap::after {
    content: "";
  }
  .dtable th,
  .dtable td { padding: 0.75rem 0.875rem; }
}

/* ==========================================================================
   17. CONTAINMENT & TAP TARGETS
   Grid and flex children default to min-width:auto, which defeats the
   overflow-x:auto on .diagram-scroll and .tablewrap and pushes the page wide
   on narrow viewports. Scope the fix to layout containers only.
   ========================================================================== */
.panel > *,
.grid > *,
.sec-head > *,
.footer-grid > *,
.stack-lg > * { min-width: 0; }

.ppath-frame,
.tablewrap { max-width: 100%; }

/* Tables in half-width grid columns shrink and wrap instead of scrolling. */
.grid .tablewrap .dtable { min-width: 0; }
.grid .tablewrap .dtable tbody td.num { white-space: normal; overflow-wrap: anywhere; }

/* Long tag text (portal names, agency names) must wrap rather than overflow. */
.tag {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 44px minimum interactive target — WCAG 2.2 target size (minimum). */
.brand,
.nav-toggle,
.card__link,
.footer-col__list a,
.footer-bar a { min-height: 44px; }

.card__link,
.footer-col__list a { display: inline-flex; align-items: center; }

.footer-col__list { gap: 0; }

/* Tag links are interactive targets; plain tags are not. */
a.tag,
.taglist a { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   18. LIGHT-PANEL CORRECTIONS
   `.panel--light` is a modifier on `.panel`, so every `.panel X` dark-surface
   override in this file also matches inside it — putting sky-on-white text at
   2.1:1 and muted-on-dark text on a white card. The prototype patched the
   title block only. This restores the light-surface values for the rest.
   ========================================================================== */
.panel--light .eyebrow { color: var(--accent); }

.panel--light .stats,
.panel--light .stats__item { border-color: var(--rule); }
.panel--light .stats__figure { color: var(--text); }
.panel--light .stats__figure sup { color: var(--accent); }
.panel--light .stats__label { color: var(--text-muted); }

.panel--light .steps__item { border-color: var(--rule); }
.panel--light .steps__item::before { color: var(--paper-300); }
.panel--light .steps__body { color: var(--text-muted); }
.panel--light .steps__meta { color: var(--accent); }

.panel--light .tag { border-color: var(--rule-strong); color: var(--text-muted); }
.panel--light .tag--accent {
  border-color: rgba(31,86,136,.35); color: var(--accent); background: rgba(31,86,136,.05);
}

.panel--light .quote__by { color: var(--accent); }

.panel--light .btn--primary { background: var(--graphite); color: var(--offwhite); }
.panel--light .btn--primary:hover { background: var(--graphite-700); }
.panel--light .btn--ghost { border-color: var(--rule-strong); color: var(--text); }
.panel--light .btn--ghost:hover { border-color: var(--accent); background: rgba(31,86,136,.05); }

.panel--light .gantt__track { background: rgba(34,40,46,.05); }
.panel--light .gantt__label { color: var(--text-muted); }
.panel--light .gantt__days { color: var(--text); }

/* base.css sets `.panel .lead` / `.panel .muted` to the on-dark muted ink, which
   also matches inside `.panel--light`. Restore the light-surface value. */
.panel--light .lead,
.panel--light .muted { color: var(--text-muted); }

/* Inline links inside prose on a dark panel: steel is 1.95:1 there. Use sky. */
.panel:not(.panel--light) a:not(.btn):not(.card):not(.tag):not(.nav__link) {
  color: var(--accent-on-dark);
}

/* --------------------------------------------------------------------------
   Data tables stack on a phone rather than scrolling sideways. Each cell
   carries its column head in data-label, so the reading order stays intact
   without a horizontal scrollbar.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .tablewrap { border: 0; border-radius: 0; background: transparent; overflow-x: visible; }
  .dtable { min-width: 0; display: block; }
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable tbody,
  .dtable tr,
  .dtable th,
  .dtable td { display: block; width: auto; }
  .dtable tr {
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-card);
    background: #fff;
    padding: var(--s-4);
    margin-bottom: var(--s-3);
  }
  .dtable tbody th,
  .dtable tbody td { padding: 0; border: 0; }
  .dtable tbody th { font-size: var(--t-body); margin-bottom: var(--s-3); }
  .dtable tbody td { margin-top: var(--s-3); }
  .dtable tbody td.num { text-align: left; font-size: var(--t-body); }
  .dtable tbody td::before,
  .dtable tbody tr + tr th::before { display: none; }
  .dtable tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .dtable tbody tr + tr th,
  .dtable tbody tr + tr td { border-top: 0; }
  .panel:not(.panel--light) .dtable tr { background: var(--graphite-800); border-color: var(--rule-on-dark); }
}