/* PermitsByBada site styles. One file, no build step.

   Identity: the permit placard. A city posts an amber card in the window of every job site;
   we set that card on cool ledger paper. Amber always means "your trade, what you get".
   Grey means "the rest of the city's table". Numbers are the hero and use the signage face.

   Colour tokens (light / dark)
     --paper     page background, cool ledger grey-green        #F2F4EF / #0F1612
     --surface   cards, rows, form panels                        #FFFFFF / #17201B
     --ink       text and the placard's outline                  #142019 / #E7EDE9
     --ink-2     secondary text (AA on paper and surface)        #46544C / #A9B6AF
     --rule      hairlines between rows                          #CAD2CC / #2D3B34
     --tint      quiet fill for hovered and open rows            #E8ECE6 / #1D2822
     --amber     placard amber, fills only, never text on paper  #F5B800 / #FFC21A
     --on-amber  text on amber                                   #142019 / #142019
     --green     links and focus                                 #0B6A4E / #63D4A8
     --err       errors                                          #A3261F / #FF8F85
     --shadow    the hard offset shadow under the placard        #142019 / #000000
   Chart tokens (validated with the dataviz palette checker against the surface, both modes)
     --c-sold    bars for trades we sell                         #B98500 / #BE8A10
     --c-desc    the part found only in the description          #1E7F5C / #33A47A
     --c-rest    trades not sold on their own                    #8C968F / #5E6B64

   Type
     --font-sign  signage face for headlines and numbers: Bahnschrift (Windows), DIN Alternate (Apple),
                  the condensed system sans on Android. No web font is shipped.
     --font-text  system UI face for reading.
     --font-raw   monospace, only for the raw city table, where it is a machine dump on purpose.
     Scale: 13 / 16 / 19 / 24 / 32 / clamp 36 to 60 px, line height 1.6 for text, 1.05 for display.

   Space: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 72 px (--s1 to --s8). Gutters 16 px on phones.
   Radius by meaning: 2px placard and stamps, 8px panels, pill for choices.
   Motion: counters on load and bars on first view only; everything else answers a tap or a hover.
   All of it is switched off under prefers-reduced-motion. */

:root {
  --paper: #f2f4ef; --surface: #ffffff; --ink: #142019; --ink-2: #46544c; --rule: #cad2cc; --tint: #e8ece6;
  --amber: #f5b800; --on-amber: #142019; --green: #0b6a4e; --err: #a3261f; --shadow: #142019;
  --c-sold: #b98500; --c-desc: #1e7f5c; --c-rest: #8c968f;
  --font-sign: "Bahnschrift", "DIN Alternate", "DIN Next", "Barlow", sans-serif-condensed, "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-raw: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.1875rem; --step-2: 1.5rem; --step-3: 2rem;
  --step-4: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --r-stamp: 2px; --r-panel: 8px; --max: 72rem; --measure: 40rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1612; --surface: #17201b; --ink: #e7ede9; --ink-2: #a9b6af; --rule: #2d3b34; --tint: #1d2822;
    --amber: #ffc21a; --on-amber: #142019; --green: #63d4a8; --err: #ff8f85; --shadow: #000000;
    --c-sold: #be8a10; --c-desc: #33a47a; --c-rest: #5e6b64;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--step-0)/1.6 var(--font-text); overflow-wrap: break-word; }
[hidden] { display: none !important; }
a { color: var(--green); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-sign); line-height: 1.1; margin: var(--s6) 0 var(--s3); text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; margin-top: var(--s2); max-width: 22ch; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; }
p, ul, ol, dl, table, details { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: var(--s1); }
code { background: var(--tint); padding: 0.1em 0.35em; border-radius: var(--r-stamp); font-size: 0.92em; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--s4); }
main.wrap { padding-block: var(--s5) var(--s7); }
main > section, main > h2 { margin-top: var(--s7); }
main > section:first-child { margin-top: 0; }
.skip { position: absolute; left: var(--s2); top: -4rem; background: var(--amber); color: var(--on-amber); padding: var(--s2) var(--s4); border: 2px solid var(--ink); z-index: 10; }
.skip:focus { top: var(--s2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.fine { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--s3); max-width: var(--measure); }
.measure, .section-intro { max-width: var(--measure); }
main p, main ul:not([class]) > li { max-width: 72ch; }
.section-intro { color: var(--ink-2); }
.lead { font-size: var(--step-1); color: var(--ink-2); max-width: var(--measure); }
.sub-h { margin-top: var(--s7); }

/* ---------- Header and footer ---------- */
.site-header { border-top: 6px solid var(--amber); border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.brand { font: 700 1.3rem/1 var(--font-sign); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2); padding-block: var(--s2); }
.brand img { width: 1.75rem; height: 1.75rem; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; padding: 0; }
@media (max-width: 30rem) { .site-header .wrap { padding-block: var(--s2); } .site-nav ul { gap: 0 var(--s3); font-size: 0.9375rem; } .site-nav a { padding: var(--s1) 0; } }
.site-nav li { margin: 0; }
.site-nav a { color: var(--ink); text-decoration: none; padding: var(--s2) 0; display: inline-block; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--amber); font-weight: 600; }
.site-footer { border-top: 1px solid var(--rule); background: var(--surface); padding-block: var(--s5); color: var(--ink-2); font-size: 0.925rem; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); padding: 0; margin: 0 0 var(--s3); }
.site-footer p { margin: 0 0 var(--s2); max-width: var(--measure); }

/* ---------- Buttons and choices ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.btn, button.btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; background: var(--amber); color: var(--on-amber);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--shadow); padding: 0.55rem 1.2rem; border-radius: var(--r-stamp);
  font: 600 var(--step-0)/1.2 var(--font-text); text-decoration: none; cursor: pointer;
}
.btn:hover { background: #ffcb33; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.btn.secondary { background: transparent; color: var(--ink); box-shadow: none; }
.btn.secondary:hover { background: var(--tint); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.chip, .tab, .opt > span, .seg-btn {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0.4rem 0.95rem;
  border: 2px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 var(--step-0)/1.2 var(--font-text); text-decoration: none; cursor: pointer;
}
.chip:hover, .tab:hover, .opt:hover > span, .seg-btn:hover { border-color: var(--ink); }
.chip[aria-current="true"], .opt input:checked + span, .seg-btn[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); border-color: var(--ink); }
.chip-n { font: 600 var(--step--1)/1 var(--font-sign); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] .chip-n { color: var(--on-amber); }
.tab { border-radius: var(--r-stamp); border-width: 0 0 3px; background: transparent; padding-inline: var(--s2); }
.tab[aria-current="true"] { border-bottom-color: var(--amber); color: var(--ink); }
.tab:not([aria-current="true"]) { color: var(--ink-2); }
.opt { position: relative; display: inline-block; margin: 0 var(--s2) var(--s2) 0; font-weight: 400; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.opt input[type="checkbox"] + span::before { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid currentColor; border-radius: 2px; }
.opt input[type="checkbox"]:checked + span::before { background: var(--on-amber); box-shadow: inset 0 0 0 2px var(--amber); }

/* ---------- Hero and the placard ---------- */
.hero { padding-top: var(--s4); }
.placard { margin-top: var(--s6); }
.placard-grid {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  background: var(--amber); color: var(--on-amber); border: 2px solid var(--ink); border-radius: var(--r-stamp);
  box-shadow: 6px 6px 0 var(--shadow);
}
.placard-metro { padding: var(--s4) var(--s5) var(--s5); }
.placard-metro + .placard-metro { border-top: 2px solid var(--on-amber); }
@media (min-width: 38rem) { .placard-metro + .placard-metro { border-top: 0; border-left: 2px solid var(--on-amber); } }
.placard h3 { margin: 0 0 var(--s3); font-size: var(--step-1); }
.placard dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat dt { font-size: var(--step--1); line-height: 1.3; }
.stat dd { margin: 0; }
.stat-n { font: 700 clamp(1.9rem, 1.2rem + 3vw, 3.25rem)/1 var(--font-sign); letter-spacing: -0.02em; display: inline-block; min-width: 3ch; }
.placard-note { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--s4); }
.placard-empty { border: 2px dashed var(--rule); padding: var(--s4); border-radius: var(--r-panel); color: var(--ink-2); margin-top: var(--s5); }

/* ---------- Bands: full-bleed backgrounds without horizontal scroll ---------- */
.band { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); padding-block: var(--s6) var(--s7); }

/* ---------- Sample explorer ---------- */
.explorer { margin-top: var(--s5); }
.ex-picker { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.ex-metros { display: flex; flex-wrap: wrap; gap: var(--s4); border-bottom: 1px solid var(--rule); }
.ex-trades { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ex-group { margin: 0; }
.ex-group figcaption { font: 600 var(--step-1)/1.3 var(--font-sign); margin-bottom: var(--s1); }
.ex-meta { color: var(--ink-2); font-size: 0.95rem; }
ol.permits { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.ex-tail ol.permits { border-radius: 0 0 var(--r-panel) var(--r-panel); border-top: 0; }
.permit { margin: 0; border-top: 1px solid var(--rule); }
.permit:first-child { border-top: 0; }
.permit details { border: 0; padding: 0; margin: 0; border-radius: 0; }
.permit summary {
  list-style: none; cursor: pointer; display: grid; gap: 0 var(--s4); padding: var(--s3) var(--s4); font-weight: 400;
  grid-template-columns: 3.6rem minmax(0, 1fr) 1.5rem; grid-template-areas: "date where icon" "date who icon" "date what icon" "date val icon";
}
.permit summary::-webkit-details-marker { display: none; }
.permit summary::after { content: "+"; grid-area: icon; font: 600 1.4rem/1 var(--font-sign); color: var(--ink-2); align-self: start; text-align: right; }
.permit details[open] summary::after { content: "\2212"; }
.permit summary:hover, .permit details[open] { background: var(--tint); }
.p-date { grid-area: date; font: 600 var(--step-0)/1.2 var(--font-sign); padding-top: 0.15rem; border-left: 4px solid var(--amber); padding-left: var(--s2); align-self: start; }
.p-where { grid-area: where; font-weight: 600; }
.p-zip { color: var(--ink-2); font-weight: 400; }
.p-who { grid-area: who; }
.p-val { grid-area: val; color: var(--ink-2); font-size: 0.925rem; font-variant-numeric: tabular-nums; }
.p-what { grid-area: what; color: var(--ink-2); font-size: 0.925rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.permit details[open] .p-what { display: none; }
.p-more { margin: 0; padding: 0 var(--s4) var(--s4) calc(3.6rem + var(--s4) * 2); display: grid; gap: var(--s2); }
.p-more div { display: grid; gap: 0; }
.p-more dt { font-size: var(--step--1); color: var(--ink-2); }
.p-more dd { margin: 0; }
@media (min-width: 52rem) {
  .permit summary { grid-template-columns: 4rem minmax(0, 1.25fr) minmax(0, 1fr) 9rem 1.5rem; grid-template-areas: "date where who val icon" "date what what what icon"; }
  .p-val { text-align: right; font-size: var(--step-0); color: var(--ink); }
  .p-more { grid-template-columns: 1fr 2fr; }
}
.ex-tail { display: grid; }
.ex-tail > * { grid-area: 1 / 1; }
.ex-locked { filter: blur(5px); opacity: 0.55; user-select: none; pointer-events: none; min-height: 12rem; }
.ex-gate {
  align-self: start; justify-self: center; width: min(100%, 34rem); margin-top: var(--s5); position: relative;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-panel); box-shadow: 6px 6px 0 var(--shadow); padding: var(--s5);
}
.ex-gate section { margin: 0; }
.ex-gate h2 { margin-top: 0; font-size: var(--step-2); }
.ex-gate .muted { font-size: var(--step--1); margin-bottom: 0; }

/* ---------- Portal versus inbox ---------- */
.pvi { margin-top: var(--s5); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.seg-btn { font-family: var(--font-text); }
.pvi-view h3 { margin-top: var(--s5); }
.portal-scroll { position: relative; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--paper); max-width: 100%; }
table.portal-row { width: max-content; font: 0.75rem/1.35 var(--font-raw); border-collapse: collapse; }
.portal-row th, .portal-row td { padding: 0.35rem 0.6rem; border-right: 1px solid var(--rule); border-top: 0; white-space: nowrap; text-align: left; vertical-align: top; }
.portal-row thead th { background: var(--tint); font-weight: 600; }
.portal-row td { background: var(--surface); }
.portal-row td.cell-wide { white-space: normal; min-width: 24rem; }
.portal-row td.cell-withheld { color: var(--ink-2); font-style: italic; }
.portal-row td.cell-blank { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 5px); min-width: 5rem; }
.inbox-card {
  display: grid; gap: var(--s3) var(--s5); margin: 0; padding: var(--s5); background: var(--surface);
  border: 2px solid var(--ink); border-left: 10px solid var(--amber); border-radius: var(--r-panel); max-width: 52rem;
}
.inbox-card div { display: grid; }
.inbox-card dt { font-size: var(--step--1); color: var(--ink-2); }
.inbox-card dd { margin: 0; font-weight: 600; }
@media (min-width: 40rem) { .inbox-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } .inbox-card div:nth-child(7) { grid-column: 1 / -1; } }

/* ---------- Trade mix chart ---------- */
.mix-wrap { margin-top: var(--s4); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0; margin: 0 0 var(--s4); color: var(--ink-2); font-size: 0.925rem; }
.legend li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.key { width: 0.9rem; height: 0.9rem; border-radius: 2px; display: inline-block; }
.key-sold { background: var(--c-sold); } .key-desc { background: var(--c-desc); } .key-rest { background: var(--c-rest); }
.mix-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mix { margin: 0; }
.mix figcaption { margin-bottom: var(--s3); }
.mix-title { display: block; font: 600 var(--step-2)/1.15 var(--font-sign); }
.mix-sub { color: var(--ink-2); font-size: 0.925rem; }
ol.bars { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--s3); margin: 0; padding: 0.2rem 0; }
.bar-label { font-size: 0.925rem; }
.bar-val { font: 600 var(--step-0)/1 var(--font-sign); font-variant-numeric: tabular-nums; text-align: right; }
.bar { display: block; height: 18px; overflow: visible; }
.bar-all { fill: var(--c-rest); }
.is-sold .bar-all { fill: var(--c-sold); }
.bar-desc { fill: var(--c-desc); stroke: var(--surface); stroke-width: 2px; }
.is-this .bar-label { font-weight: 700; }
.is-this .bar-label::after { content: " (this feed)"; font-weight: 400; color: var(--ink-2); }
.bar-row:hover { background: var(--tint); }
.mix-callout { border-left: 4px solid var(--c-desc); padding-left: var(--s3); max-width: var(--measure); }

/* ---------- Pricing calculator ---------- */
.calc { margin-top: var(--s6); display: grid; gap: var(--s5); padding: var(--s5); background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-panel); }
@media (min-width: 52rem) { .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .calc h2 { grid-column: 1 / -1; } }
.calc h2 { margin: 0; }
.calc fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); }
.calc legend { font: 600 var(--step--1)/1.3 var(--font-text); color: var(--ink-2); margin-bottom: var(--s2); padding: 0; }
.calc-metro-name { font-weight: 600; margin: 0 0 var(--s2); }
.calc-trades + .calc-trades { margin-top: var(--s4); }
/* The metro choice shows its own trades with no script at all: the n-th radio shows the n-th trade set. */
@supports selector(:has(*)) {
  .calc-metro-name { display: none; }
  .calc-trades { display: none; }
  .calc-trades + .calc-trades { margin-top: 0; }
  .calc-form:has(.calc-metros .opt:nth-of-type(1) input:checked) .calc-trades:nth-of-type(1),
  .calc-form:has(.calc-metros .opt:nth-of-type(2) input:checked) .calc-trades:nth-of-type(2),
  .calc-form:has(.calc-metros .opt:nth-of-type(3) input:checked) .calc-trades:nth-of-type(3),
  .calc-form:has(.calc-metros .opt:nth-of-type(4) input:checked) .calc-trades:nth-of-type(4) { display: block; }
}
.calc-result { background: var(--paper); border-radius: var(--r-panel); padding: var(--s5); align-self: start; }
.calc-total { margin: 0; }
.calc-n { font: 700 clamp(2.75rem, 2rem + 3vw, 4rem)/1 var(--font-sign); letter-spacing: -0.02em; }
.calc-unit { color: var(--ink-2); }
.calc-bundle { border-left: 4px solid var(--amber); padding-left: var(--s3); }
.calc-compare { font-weight: 600; }

/* ---------- Digest preview ---------- */
.digest-band { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 52rem) { .digest-band { grid-template-columns: minmax(0, 1fr) auto; } }
.digest-copy h2 { margin-top: 0; }
.digest { width: min(100%, 22rem); }
.digest-tabs { display: flex; gap: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--rule); }
.phone { width: min(100%, 22rem); border: 10px solid var(--ink); border-radius: 2rem; background: var(--ink); padding: var(--s4) 0; }
.phone-screen { background: var(--surface); border-radius: var(--s2); padding: var(--s4); min-height: 28rem; }
.digest-day + .digest-day { margin-top: var(--s6); border-top: 1px dashed var(--rule); padding-top: var(--s4); }
.js .digest-day + .digest-day { margin-top: 0; border-top: 0; padding-top: 0; }
.d-from { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--s2); }
.d-from span:first-child { font-weight: 700; color: var(--ink); }
.d-subject { font: 600 var(--step-1)/1.25 var(--font-sign); margin-bottom: var(--s1); }
.d-date { font-size: var(--step--1); color: var(--ink-2); }
.d-list { list-style: none; padding: 0; margin: 0 0 var(--s3); font-size: 0.875rem; }
.d-list li { display: grid; padding: var(--s2) 0; border-top: 1px solid var(--rule); margin: 0; }
.d-street { font-weight: 600; }
.d-type, .d-more { color: var(--ink-2); }
.d-type { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.d-more { font-size: var(--step--1); }
.d-btn { display: inline-block; background: var(--amber); color: var(--on-amber); border: 2px solid var(--ink); border-radius: var(--r-stamp); padding: var(--s2) var(--s3); font-size: 0.875rem; font-weight: 600; margin: 0; }

/* ---------- Steps, cards, notes ---------- */
ol.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
ol.steps li { counter-increment: step; margin: 0; padding: var(--s4) var(--s5) var(--s5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-panel); }
ol.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--s3); background: var(--amber); color: var(--on-amber); border: 2px solid var(--ink); border-radius: var(--r-stamp); font: 700 1.4rem/1 var(--font-sign); }
ol.steps strong { display: block; font: 600 var(--step-1)/1.25 var(--font-sign); margin-bottom: var(--s1); }
.steps-after { font-weight: 600; }
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-bottom: var(--s5); }
.card { border: 1px solid var(--rule); border-radius: var(--r-panel); padding: var(--s4) var(--s5); background: var(--surface); }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.price { font: 700 var(--step-2)/1.2 var(--font-sign); margin: var(--s1) 0 var(--s3); max-width: 30ch; }
.price small { font: 400 0.95rem var(--font-text); color: var(--ink-2); }
.price-band .price { font-size: var(--step-3); }
.note { background: var(--surface); border: 2px dashed var(--c-sold); border-radius: var(--r-panel); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.note strong { margin-right: var(--s1); }
.crumbs { font-size: 0.925rem; color: var(--ink-2); margin: 0; }
.buyers { max-width: var(--measure); }
.who { max-width: var(--measure); }
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag-list li { margin: 0; }
.tag-list a { display: inline-flex; align-items: center; min-height: 2.75rem; border: 2px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.9rem; text-decoration: none; color: var(--ink); font-weight: 600; background: var(--surface); }
.tag-list a:hover { border-color: var(--ink); }

/* ---------- Tables ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-panel); margin-bottom: var(--s4); background: var(--surface); }
.table-wrap:focus-visible, .portal-scroll:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.925rem; margin: 0; }
caption { text-align: left; padding: 0.6rem 0.75rem; color: var(--ink-2); caption-side: top; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-top: 1px solid var(--rule); vertical-align: top; }
thead th { background: var(--tint); border-top: 0; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); }
dl.fields dt { font-weight: 600; }
dl.fields dd { margin: 0; }
@media (max-width: 40rem) { dl.fields { grid-template-columns: 1fr; gap: 0; } dl.fields dd { margin-bottom: var(--s3); } }

/* ---------- Forms ---------- */
form.stack { display: grid; gap: 0.9rem; max-width: 26rem; }
label, legend { font-weight: 600; }
input[type="email"], select { width: 100%; min-height: 2.75rem; font: inherit; padding: 0.55rem 0.7rem; border: 2px solid var(--ink-2); border-radius: var(--r-stamp); background: var(--surface); color: var(--ink); }
input[type="email"]:focus-visible, select:focus-visible { border-color: var(--green); }
fieldset { border: 1px solid var(--rule); border-radius: var(--r-panel); padding: 0.6rem 0.9rem; margin: 0; }
fieldset label { display: block; font-weight: 400; padding: 0.2rem 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.5rem; margin: var(--s2) 0 0; }
.msg.error { color: var(--err); font-weight: 600; }
.msg.ok { font-weight: 600; }
details { border: 1px solid var(--rule); border-radius: var(--r-panel); padding: 0.6rem 1rem; background: var(--surface); }
summary { font-weight: 600; cursor: pointer; }
details[open] summary { margin-bottom: var(--s2); }
details.numbers { margin-top: var(--s5); }
.subscribe { border-top: 6px solid var(--amber); padding-top: var(--s2); }

/* ---------- Motion (only when the reader has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .tab, .opt > span, .seg-btn { transition: background-color 0.15s, border-color 0.15s, transform 0.1s; }
  .permit summary::after { transition: transform 0.2s; }
  .js [data-reveal] .bar rect { transform-box: fill-box; transform-origin: left center; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js [data-reveal].is-waiting .bar rect { transform: scaleX(0); }
  .js [data-reveal] .phone { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s; }
  .js [data-reveal].is-waiting .phone { transform: translateY(1.5rem); opacity: 0; }
  .is-switched { animation: show 0.25s ease-out; }
  @keyframes show { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

@media (forced-colors: active) {
  .bar-all, .bar-desc { fill: CanvasText; }
  .bar-desc { fill: Highlight; }
  .ex-locked { filter: none; }
}
@media print { .site-header, .site-footer, .skip, .actions, .ex-tail, .seg, .digest-tabs { display: none; } .ex-group[hidden] { display: block !important; } }