/* StackSpan shared styles. Page-specific rules stay inline in each page. */
:root {
  color-scheme:light dark;
  --bg:#fffbf5; --surface:#fff; --text:#1c1917; --heading:#1c1917; --text-2:#292524; --text-3:#44403c; --muted:#57534e;
  --line:#e7e0d6; --brand:#c2410c; --brand-dark:#9a3412; --brand-soft:#fff7ed; --brand-border:#fdba74; --tag-bg:#ffedd5;
  --cta-text:#fff; --navy:#0f172a; --navy-line:transparent; --on-navy:#fff; --on-navy-2:#e2e8f0; --on-navy-link:#fdba74;
  --ok:#047857; --ok-bg:#ecfdf5; --danger:#991b1b; --danger-bg:#fef2f2; --danger-line:#fecaca;
  --neutral-bg:#f5f0e8; --solid:#166534; --solid-bg:#dcfce7; --info:#0e7490; --info-bg:#ecfeff;
  --media-bg:transparent; --radius:0.75rem; --radius-btn:0.6rem;
  /* legacy names used by page styles */
  --slate-50:var(--bg); --slate-200:var(--line); --slate-500:var(--muted); --slate-600:var(--text-3);
  --slate-800:var(--text); --slate-900:var(--heading); --page:var(--bg); --card:var(--surface);
  --body:var(--text-3); --ink:var(--heading); --ink-2:var(--text);
}
* { box-sizing: border-box; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { border-width:0 0 1px; }
.site-footer { border-width:1px 0 0; margin-top:auto; }
.logo span { color:var(--brand); }
.nav a:hover { color:var(--brand); }
.eyebrow { color:var(--brand); font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin:0; }
.btn:hover { background:var(--brand-dark); }
.safety { background:var(--danger-bg); border:1px solid var(--danger-line); border-radius:0.75rem; padding:1rem 1.15rem; margin:1.25rem 0; }
.btn-secondary:hover { border-color:var(--brand); color:var(--brand) !important; }
.safety strong { color:var(--danger); }
.shop-stack { display:flex; flex-direction:column; align-items:flex-start; gap:0.4rem; }
.start strong { color:var(--brand-dark); }
.grid3 { display:grid; gap:1rem; margin-top:2rem; }
.cols { display:grid; gap:1rem; margin:1.25rem 0; }
@media (min-width:640px){ .grid3 { grid-template-columns:repeat(3,1fr);} }
@media (min-width:720px) { .cols { grid-template-columns:1fr 1fr; } }
.panel li { margin:0.3rem 0; font-size:0.95rem; }
.footer-inner .name { font-weight:600; color:var(--text-2); margin:0; }
.faq { margin:1.5rem 0; }
.how-we-pick { background:var(--surface); border:1px solid var(--line); border-radius:0.75rem; padding:1.15rem 1.2rem; margin:1.5rem 0; }
.next-cards { display:grid; gap:0.85rem; margin:1.25rem 0; }
.cards { display:none; }
.how-we-pick h2 { margin:0 0 0.65rem; font-size:1.1rem; color:var(--ink); }
@media (min-width:640px) { .next-cards { grid-template-columns:1fr 1fr; } }
.how-we-pick ul { margin:0; padding-left:1.15rem; color:var(--body); }
.list a.primary { border-color:var(--brand-border); background:var(--brand-soft); font-weight:600; }
.next-cards a:hover { border-color:var(--brand); text-decoration:none; }
.how-we-pick li { margin:0.35rem 0; }
.buy-skip { margin:0.65rem 0 0; font-size:0.9rem; color:var(--body); }
.list a:hover { border-color:var(--brand); color:var(--brand); }
.buy-skip strong { color:var(--ink); }
.elders { display:grid; gap:1rem; margin:1rem 0 1.5rem; }
.card-cue { display:inline-block; margin-top:0.65rem; font-size:0.85rem; font-weight:600; color:var(--brand); }
.card-media[data-slot="diagram-warmup-cues"] { aspect-ratio: 4 / 1; max-width: 640px; }
.card-media[data-slot="diagram-sit-stand-walk"] { aspect-ratio: 3 / 1; max-width: 720px; }
.chip-row { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0.55rem 0 0.15rem; }
@media (min-width:640px) { .elders { grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); } }
.card-media[data-slot="diagram-gel-vs-stretcher"] { aspect-ratio: 2 / 1; max-width: 640px; }
.chip { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; font-weight:600; letter-spacing:0.02em; padding:0.2rem 0.5rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-dark); }
.elders .card { margin:0; }
.card-media[data-slot^="diagram-"] img, .card-media.diagram img { object-fit: contain; }
.elder .meta { font-size:0.85rem; color:var(--slate-500); margin-top:0.3rem; }
.tag-editors { background:var(--navy) !important; color:var(--on-navy) !important; }
.elder .meta .tag { margin-left:0.25rem; }
.quick-picks { margin:1.25rem 0 1.5rem; }
.card-media[data-slot="diagram-fit-check"] { aspect-ratio: 2 / 1; max-width: 560px; }
.quick-picks > h2 { margin:0 0 0.75rem; }
.text-link { font-size:0.85rem; font-weight:600; }
.table-thumb { width:56px; height:56px; object-fit:contain; display:block; background:var(--bg); border-radius:0.4rem; }
.legend-note { font-size:0.88rem !important; color:var(--slate-500) !important; }
td.thumb { width:64px; padding-right:0.35rem; }
.start-with { display:grid; gap:0.85rem; margin:1rem 0 1.5rem; }
@media (min-width:640px){ .start-with { grid-template-columns:repeat(3,1fr); } }
.card-media.diagram picture {display:contents}
.start-with .card h3 { margin:0; font-size:1rem; color:var(--ink); }
.how .tag { min-width:5.5rem; text-align:center; margin-right:0.35rem; }
.card-media[data-slot="diagram-toe-box-shape"],.card-media[data-slot="diagram-foot-trace"] {aspect-ratio:2/1;max-width:640px}
.start-with .card p { margin:0.4rem 0 0; color:var(--body); font-size:0.9rem; }
.safety ul { color:var(--slate-600); padding-left:1.2rem; margin:0.6rem 0; }
.card-media[data-slot="diagram-foot-shapes"],.card-media[data-slot="diagram-transition-ramp"] {aspect-ratio:3/1;max-width:720px}
.safety li { margin:0.35rem 0; }
.band-navy { background:var(--navy); color:var(--on-navy-2); border-radius:0.75rem; padding:1.15rem 1.2rem; margin:1.5rem 0; }
.card-media[data-slot="diagram-sandbag-moves"] {aspect-ratio:4/1;max-width:720px}
.band-navy a { color:var(--on-navy-link); }
.band-navy h2, .band-navy strong { color:var(--on-navy); }
.fascia-cards { display:grid; gap:1rem; margin:1.25rem 0; }
@media (max-width:480px){ .card-media[data-slot="diagram-sandbag-moves"] {aspect-ratio:1/1;max-width:360px} }
.card-media[data-status="pending"] { display:none; }
.tier { font-weight:600; color:var(--ink); white-space:nowrap; }
@media (min-width:720px){ .fascia-cards { grid-template-columns:repeat(3,1fr); } }
/* Diagram batch 2026-10-12 */
.card-media[data-slot="diagram-drop-stack-strip"] {aspect-ratio:3/1;max-width:720px}
.card-media[data-slot="lead-fascia-seated-ball"] {aspect-ratio:16/9;max-width:720px}
.card-media[data-slot="diagram-shoe-shape-anatomy"] {aspect-ratio:1080/760;max-width:720px}
@media (max-width:480px){ .card-media[data-slot="diagram-shoe-shape-anatomy"] {aspect-ratio:720/1240;max-width:360px} }
.card-media[data-slot="diagram-beginner-ladder"] {aspect-ratio:1080/560;max-width:720px}
@media (max-width:480px){ .card-media[data-slot="diagram-beginner-ladder"] {aspect-ratio:720/1000;max-width:360px} }
.card-media[data-slot="diagram-fascia-tool-use"] {aspect-ratio:1080/590;max-width:720px}
@media (max-width:480px){ .card-media[data-slot="diagram-fascia-tool-use"] {aspect-ratio:720/1340;max-width:360px} }
.card-media.diagram img {max-width:720px;width:100%;height:auto;margin-inline:auto;display:block}
.fascia-cards .card { background:var(--surface); border:1px solid var(--slate-200); border-radius:0.75rem; padding:1rem; margin:0; }
.fascia-cards .card h3 { margin:0.65rem 0 0; font-size:1.05rem; }
.byline { font-size:0.85rem; color:var(--muted); margin:0.5rem 0 0; }

/* Auto dark mode (Palette A). Follows the OS setting; a future toggle would set data-theme from /assets/theme-init.js. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14110f; --surface:#1f1b18; --text:#ede8e3; --heading:#f5f0eb; --text-2:#e0d9d2; --text-3:#d6cec6; --muted:#a8a29e;
    --line:#3a332d; --brand:#fb923c; --brand-dark:#fdba74; --brand-soft:#2a1d14; --brand-border:#7c3a12; --tag-bg:#3a2414;
    --cta-text:#1c1208; --navy:#1e293b; --navy-line:#334155; --on-navy:#fff; --on-navy-2:#e2e8f0; --on-navy-link:#fdba74;
    --ok:#6ee7b7; --ok-bg:#0f2a20; --danger:#fca5a5; --danger-bg:#2a1414; --danger-line:#7f1d1d;
    --neutral-bg:#2a2420; --solid:#86efac; --solid-bg:#14301e; --info:#67e8f9; --info-bg:#0c2a30;
    --media-bg:#efe9e1;
  }
  /* Navy band and Editors' chip: lift off the dark page */
  html .band-navy, html .tag-editors { box-shadow:inset 0 0 0 1px var(--navy-line); }
  /* Photos, diagrams and navy-stroke icons sit on a light "paper" panel */
  html .card-media, html .table-thumb, html .photo img,
  html img[src^="/assets/icons/"], html img[src^="/assets/diagrams/"], html img[src^="/images/products/"] {
    background:var(--media-bg) !important; box-shadow:inset 0 0 0 1px rgb(0 0 0 / 0.06);
  }
  html .chip img { border-radius:999px; box-shadow:0 0 0 2px var(--media-bg); }
  /* Kit signup form stays a light card */
  html .signup {
    color-scheme:light;
    --bg:#fffbf5; --surface:#fff; --text:#1c1917; --heading:#1c1917; --text-2:#292524; --text-3:#44403c; --muted:#57534e;
    --line:#e7e0d6; --brand:#c2410c; --brand-dark:#9a3412; --brand-soft:#fff7ed; --cta-text:#fff;
    --slate-50:var(--bg); --slate-200:var(--line); --slate-500:var(--muted); --slate-600:var(--text-3);
    --slate-800:var(--text); --slate-900:var(--heading); --page:var(--bg); --card:var(--surface);
    --body:var(--text-3); --ink:var(--heading); --ink-2:var(--text);
    background:#fff; color:#1c1917;
  }
}