/* site.css · tax.stratahawk.net · SH-UIUX 2026-11-09 · the two pages' own rules.
   Loads after tokens.css, shell.css and loading.css. Tokens only; no hex. No inline styles anywhere (CSP). */

html, body { height:100%; }
body { margin:0; background:var(--bg-page); color:var(--text-primary); font-family:var(--font-sans);
  font-size:var(--text-base); line-height:var(--leading-normal); display:flex; flex-direction:column; }

/* ── the bar: the app's own, 56 px ─────────────────────────────────────────── */
.site-bar { display:flex; align-items:center; gap:var(--space-5); height:56px; padding:0 var(--space-6);
  background:var(--bg-banner); border-bottom:1px solid rgba(255,255,255,.08); }
.site-bar .brand-mark { background:var(--blue-900); border:1px solid rgba(255,255,255,.18); }
.site-bar .brand-mark svg { stroke:#e6e9ed; stroke-width:60px; }
.site-bar .section { color:var(--n-text-2, #b9cfe0); font-size:var(--text-sm); padding-left:var(--space-5);
  border-left:1px solid rgba(255,255,255,.18); line-height:1.2; }
.site-bar .btn.theme { margin-left:auto; background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.site-bar .btn.theme:hover { background:rgba(255,255,255,.08); }
@media (max-width:600px) { .site-bar .section { display:none; } }

/* ── the gate: one card, centred in the page ───────────────────────────────── */
.gate { flex:1; display:grid; place-items:center; padding:var(--space-8) var(--gutter-phone); }
.gate-card { width:100%; max-width:380px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--space-9) var(--space-8) var(--space-8);
  display:grid; gap:var(--space-5); justify-items:stretch; }
.gate-card .mark { width:48px; height:48px; justify-self:center; }
.gate-card h1 { margin:0; text-align:center; font-size:var(--text-xl); font-weight:var(--weight-bold); }
.gate-card .lede { margin:0; text-align:center; color:var(--text-secondary); font-size:var(--text-sm); }
.gate-card label { display:block; font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:var(--space-2); }
.gate-card input { width:100%; box-sizing:border-box; min-height:var(--target-min); padding:0 var(--space-5);
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-input); color:var(--text-primary); font:inherit; }
.gate-card input:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.gate-card input[aria-invalid="true"] { border-color:var(--danger-fg); }
.gate-card .wrong { margin:calc(-1 * var(--space-3)) 0 0; color:var(--danger-fg); font-size:var(--text-sm); }
.gate-card .btn { min-height:var(--target-min); justify-content:center; }

/* ── the download page ─────────────────────────────────────────────────────── */
.page { width:100%; max-width:1120px; margin:0 auto; box-sizing:border-box; padding:var(--space-10) var(--gutter) var(--space-11); }
.page h1 { font-size:var(--text-2xl); font-weight:var(--weight-bold); margin:0 0 var(--space-4); text-wrap:balance; }
.page .lede { margin:0 0 var(--space-6); max-width:62ch; color:var(--text-secondary); }
.counties { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin:0 0 var(--space-8); font-size:var(--text-sm); color:var(--text-secondary); }
.counties .chip { cursor:default; }
.counties .chip:hover { border-color:var(--border); }
.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--space-8); align-items:start; }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } .page { padding-left:var(--gutter-phone); padding-right:var(--gutter-phone); } }

.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-6); }
.card h2 { margin:0; font-size:var(--text-lg); font-weight:var(--weight-semibold); }
.card p { margin:0; }
.stack { display:grid; gap:var(--space-5); }

.get { display:flex; gap:var(--space-5); align-items:center; flex-wrap:wrap; }
.get .btn-primary { min-height:var(--target-min); padding-inline:var(--space-7); }
.get .meta { color:var(--text-secondary); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .get .btn-primary { width:100%; justify-content:center; } }

/* the notice: the letter card with a warning rail — kicker · title · lines · the picture */
.notice { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3) var(--space-6);
  padding:var(--space-5) var(--space-6); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-card); box-shadow:inset 3px 0 0 var(--warning-fg); }
.notice .kicker { grid-column:1; font-size:var(--text-2xs); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--text-muted); font-weight:var(--weight-semibold); }
.notice .title { grid-column:1; font-weight:var(--weight-semibold); }
.notice .line { grid-column:1; color:var(--text-secondary); font-size:var(--text-sm); }
.notice .line b { color:var(--text-primary); font-weight:var(--weight-semibold); }
.notice .pic { grid-column:2; grid-row:1 / span 4; align-self:start; width:240px; max-width:100%; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg-subtle); aspect-ratio:4/3; display:grid; place-items:center;
  color:var(--text-muted); font-size:var(--text-xs); text-align:center; padding:var(--space-4); box-sizing:border-box; }
.notice .pic img { display:block; width:100%; height:auto; border-radius:var(--radius-xs); }
.notice.signed { grid-template-columns:1fr; box-shadow:inset 3px 0 0 var(--success-fg); }
@media (max-width:600px) { .notice { grid-template-columns:1fr; } .notice .pic { grid-column:1; grid-row:auto; width:100%; } }

/* check your copy */
.kv { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-3) var(--space-6); font-size:var(--text-sm); }
.kv dt { color:var(--text-secondary); margin:0; }
.kv dd { margin:0; font-variant-numeric:tabular-nums; }
.kv dd.mono { font-family:var(--font-mono); font-size:var(--text-xs); word-break:break-all; }
.cmd { display:flex; gap:var(--space-4); align-items:center; padding:var(--space-4) var(--space-5);
  background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); }
.cmd code { flex:1; min-width:0; font-family:var(--font-mono); font-size:var(--text-xs); word-break:break-all; }
.cmd .btn { flex:none; min-height:var(--target-min-dense); padding:0 var(--space-5); font-size:var(--text-sm); }
.acts { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.acts .btn { min-height:var(--target-min-dense); }
@media (max-width:600px) { .acts .btn { width:100%; justify-content:center; } }

/* states inside the download card */
.state { display:flex; align-items:center; gap:var(--space-4); color:var(--text-secondary); font-size:var(--text-sm); }
.state .btn { min-height:var(--target-min-dense); }

/* the picture column */
.shot { display:grid; gap:var(--space-3); }
.shot .frame { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-sunken); box-shadow:var(--shadow-card); }
.shot .frame img { display:block; width:100%; height:auto; }
.shot .frame .ph { aspect-ratio:16/11; display:grid; place-items:center; color:var(--text-muted); font-size:var(--text-sm); text-align:center; padding:var(--space-6); }
.shot figcaption { font-size:var(--text-sm); color:var(--text-muted); }

.foot { margin-top:var(--space-10); display:flex; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; align-items:center;
  color:var(--text-muted); font-size:var(--text-sm); }
.muted { color:var(--text-muted); font-size:var(--text-sm); }
.hide { display:none !important; }

/* the wordmark stays at every width on this site (shell.css hides it on narrow app screens to make room for the search) */
.site-bar .brand-name { display:inline !important; }