.site-header, .site-footer { flex:none; padding:18px 28px; border-color:var(--hair); }
.site-footer { border-top:1px solid var(--hair); text-align:center; color:var(--muted); font-size:13px; }
.card { background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
/* Card-as-list-container: zero padding so child rows extend to the
   edges, with `overflow:hidden` so the rounded corners clip the
   first/last rows. Replaces the repeated `card p-0 style="overflow:hidden"`
   pattern. */
.card.card-list { padding:0; overflow:hidden; }
.hr { height:1px; background:var(--hair); border:0; margin:16px 0; }
.row { display:flex; align-items:center; }
.between { display:flex; align-items:center; justify-content:space-between; }
.stack { display:flex; flex-direction:column; }
/* Inline-style replacement: a wrapping flex row whose children flex to
   ~220px wide before wrapping, then take a full row each on phones.
   Replaces ad-hoc `style="min-width:200px"` patterns in management
   forms. Children opt out of full-width wrapping with `.form-row-fit`. */
.form-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.form-row > * { flex:1 1 220px; min-width:0; }
.form-row > .form-row-fit { flex:0 0 auto; }
/* Tight variant: children take their natural width on desktop instead
   of stretching to fill the row. Use for rows of small number-pickers
   that look stranded when expanded to ~33% column width each. */
.form-row.form-row-tight > * { flex:0 1 auto; max-width:260px; }
@media (max-width:720px) {
  .form-row > * { flex:1 1 100%; }
  .form-row.form-row-tight > * { flex:1 1 100%; max-width:none; }
}
.gap-4{gap:4px} .gap-6{gap:6px} .gap-8{gap:8px} .gap-12{gap:12px}
.gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px}

/* Utility atoms: used instead of inline style attributes. */
.p-0{padding:0}
.p-12{padding:12px} .p-14{padding:14px} .p-16{padding:16px} .p-18{padding:18px}
.p-20{padding:20px} .p-22{padding:22px} .p-24{padding:24px} .p-28{padding:28px}
.page-pad{padding:24px var(--page-pad)}
.mt-4{margin-top:4px} .mt-6{margin-top:6px} .mt-8{margin-top:8px}
.mt-12{margin-top:12px} .mt-14{margin-top:14px} .mt-16{margin-top:16px}
.mt-22{margin-top:22px} .mt-24{margin-top:24px} .mt-32{margin-top:32px} .mt-36{margin-top:36px}
.mb-4{margin-bottom:4px} .mb-6{margin-bottom:6px} .mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px} .mb-14{margin-bottom:14px} .mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px} .mb-32{margin-bottom:32px}
.m-0{margin:0}
.ml-auto{margin-left:auto}
.fs-10{font-size:10px} .fs-11{font-size:11px} .fs-12{font-size:12px}
.fs-13{font-size:13px} .fs-14{font-size:14px}
.fw-600{font-weight:600}
.ta-center{text-align:center} .ta-right{text-align:right}
.flex-1{flex:1}
.wrap{flex-wrap:wrap}
.jc-center{justify-content:center} .jc-end{justify-content:flex-end}
.ai-end{align-items:flex-end} .ai-start{align-items:flex-start} .ai-baseline{align-items:baseline}
.link-reset{text-decoration:none;color:inherit}
/* Cards used as links: hint they're clickable on hover/focus. */
a.card.link-reset { display:block; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.card.link-reset:hover { border-color:var(--accent); box-shadow:var(--shadow-2); transform:translateY(-1px); }
a.card.link-reset:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
[x-cloak]{display:none!important}
.inline{display:inline} .block{display:block} .hidden{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;padding:8px 14px;background:var(--ink);color:var(--cream);border-radius:8px;text-decoration:none;font-size:13px}
.app-main{display:contents}
.w-full{width:100%}
.w-stamp{min-width:140px}
.with-divider-top{border-top:1px solid var(--hair);padding-top:16px}
.text-warn{color:var(--warn)} .text-ok{color:var(--ok)}
.lbl{display:block;margin-bottom:6px}
.card-warn{border-color:var(--warn)}
.card-ok{border-color:var(--ok);background:linear-gradient(135deg,var(--paper),#E8F0DE)}
.card-accent{border-color:var(--accent);background:linear-gradient(135deg,var(--paper),var(--accent-soft))}
.card-soft{background:linear-gradient(135deg,var(--paper),#FFF4E6)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
/* 2-column form grid that collapses to one column at the phone /
   large-phone breakpoint. Replaces ad-hoc inline `grid-template-
   columns:1fr 1fr` patterns in form templates. Pair with `.gap-12`
   or `.gap-16` for the row gap. */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:720px){.form-grid-2{grid-template-columns:1fr}}
.icon-chip{width:40px;height:40px;border-radius:10px}

.muted { color:var(--muted); }
/* App shell */
.site-header { display:flex; align-items:center; gap:28px; padding:18px 28px;
  border-bottom:1px solid var(--hair); background:var(--paper); }
.app { min-height:100vh; }
.app-top { display:flex; align-items:center; gap:28px; padding:16px 28px;
  border-bottom:1px solid var(--hair); background:rgba(251,247,238,0.92); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20; flex-wrap:wrap; row-gap:8px; }
.app-nav { display:flex; gap:18px; flex:1; }
.app-nav a { text-decoration:none; color:var(--muted); font-size:14px; padding:8px 2px;
  border-bottom:2px solid transparent; }
.app-nav a.active { color:var(--ink); border-color:var(--accent); }
.app-actor { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.app-actor .actor-email { font-family:var(--f-mono); color:var(--ink-2); font-size:12px;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-actor a.signout { color:var(--muted); text-decoration:none; font-size:12px;
  padding:4px 10px; border:1px solid var(--hair-2); border-radius:999px;
  transition:color .15s ease, border-color .15s ease; }
.app-actor a.signout:hover { color:var(--ink); border-color:var(--ink-2); }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; letter-spacing:-0.01em; }
.brand .serif { font-family:var(--f-display); font-size:24px; }

/* Dashboard grid */
.dash-grid { display:grid; grid-template-columns:300px 1fr; gap:24px; padding:24px var(--page-pad); }
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.side-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.side-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--cream-2); }
.side-row > *:nth-child(2) { flex:1; font-size:13px; }
.stat-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px dashed var(--hair); }
.stat-row:last-child { border-bottom:0; }
.stat-n { font-size:var(--stat-n); line-height:1; color:var(--ink); }
.display-sm { font-family:var(--f-display); font-size:26px; letter-spacing:-0.01em; margin:0; }
.display-md { font-family:var(--f-display); font-size:clamp(34px,4.2vw,52px); line-height:1.05; letter-spacing:-0.02em; margin:8px 0 4px; }
.lead { color:var(--ink-2); max-width:560px; margin:0 0 22px; font-size:18px; line-height:1.55; }
.section-label { display:flex; align-items:center; gap:10px; margin-bottom:4px; }

/* Wizard */
.wizard { display:flex; flex-direction:column; }
.top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px;
  padding:18px 28px; border-bottom:1px solid var(--hair);
  background:rgba(251,247,238,0.88); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; }
.top-right { display:flex; align-items:center; gap:12px; }
.rail { display:flex; gap:8px; align-items:center; }
.rail .seg { height:4px; flex:1; background:var(--hair); border-radius:999px; overflow:hidden; }
.rail .seg .fill { display:block; height:100%; background:var(--ink); width:0; transition:width .4s ease; }
.rail .seg.done .fill { width:100%; }
.rail .seg.active .fill { background:var(--accent); width:8%; }
.rail-wrap { max-width:520px; width:100%; }
.rail-counter { text-align:right; margin-top:4px; font-size:10px; letter-spacing:.12em; }
.rail-labels { display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--f-mono); font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.rail-labels .active { color:var(--accent-2); }
.rail-labels .done { color:var(--ink-2); }
.page { max-width:1120px; margin:0 auto; padding:54px 32px 64px; }
.page.narrow { max-width:1040px; }