/* ed-check.css: shared stylesheet for the Emotional Downshift check pages
   (anxiety/anger/grief-deep.html, drive.html, drive-check.html, connections.html).
   One source of truth for the check-page look: tokens, light/dark themes, topbar,
   cards, options, result card, disclaimer, footer. Page-specific rules stay in a
   small inline <style> on each page and override this file.
   The deep checks are generated by initiatives/emotionaldownshift/tools/build-deep-checks.py
   and link this file; edit here to restyle them (no rebuild needed for pure CSS changes). */
@font-face{
      font-family:'Satoshi';
      src:url('fonts/Satoshi-Variable.woff2') format('woff2');
      font-weight:300 900; font-style:normal; font-display:swap;
    }
    @font-face{
      font-family:'Fraunces';
      src:url('fonts/Fraunces.woff2') format('woff2');
      font-weight:100 900; font-style:normal; font-display:swap;
    }
    :root, [data-theme="light"] {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
      --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9; --color-surface-offset:#edeae5; --color-border:#d4d1ca; --color-text:#28251d; --color-text-muted:#66645e; --color-primary:#01696f; --color-primary-hover:#0c4e54; --color-primary-highlight:#cedcd8; --color-warning:#964219; --color-success:#437a22; --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 8px 24px rgba(0,0,0,.08); --font-body:'Satoshi', sans-serif; --font-display:'Fraunces', Georgia, serif;
    }
    [data-theme="dark"] {
      --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d; --color-surface-offset:#22211f; --color-border:#393836; --color-text:#cdccca; --color-text-muted:#9b9a97; --color-primary:#4f98a3; --color-primary-hover:#227f8b; --color-primary-highlight:#313b3b; --color-warning:#bb653b; --color-success:#6daa45; --shadow-sm:0 1px 2px rgba(0,0,0,.2); --shadow-md:0 12px 32px rgba(0,0,0,.35);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
    body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.62; font-size: var(--text-base); -webkit-font-smoothing:antialiased; }
    a { color: inherit; text-decoration: none; }
    .wrap { max-width: 780px; margin: 0 auto; padding: var(--space-6); }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-8); }
    .logo { display:flex; align-items:center; gap:var(--space-3); font-weight:700; }
    .logo svg { width:34px; height:34px; color:var(--color-primary); }
    .theme-btn { border:1px solid var(--color-border); cursor:pointer; border-radius:999px; padding:.7rem .95rem; font-size:var(--text-sm); background:var(--color-surface); color:var(--color-text); }
    .backlink { font-size: var(--text-sm); color: var(--color-text-muted); }
    .backlink:hover { color: var(--color-primary); }

    .hero { background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface)); border:1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-10)); box-shadow: var(--shadow-md); margin-bottom: var(--space-8); }
    .eyebrow { font-size:var(--text-xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--color-primary); margin-bottom: var(--space-3); }
    h1 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; margin-bottom: var(--space-3); font-weight:600; letter-spacing:-.005em; }
    .lead { color: var(--color-text-muted); font-size: var(--text-base); }

    .card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
    .card.unanswered { border-color: var(--color-warning); }
    .progress { font-size: var(--text-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
    .qtext { font-weight:700; font-size: var(--text-base); margin-bottom: var(--space-1); }
    .qhint { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
    .opt { display:block; width:100%; text-align:left; cursor:pointer; font-family:var(--font-body); font-size: var(--text-sm); line-height:1.5; color: var(--color-text); background: var(--color-surface-2); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: .85rem 1rem; margin-top: var(--space-2); transition: .15s; }
    .opt:hover { border-color: var(--color-primary); background: var(--color-primary-highlight); }
    .opt.selected { border-color: var(--color-primary); background: var(--color-primary-highlight); box-shadow: inset 0 0 0 1px var(--color-primary); }
    .part-head { margin: var(--space-8) 0 var(--space-4); }
    .part-head h2 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); font-weight:600; letter-spacing:-.005em; }
    .part-head p { color: var(--color-text-muted); font-size: var(--text-sm); }

    .situation-label { font-weight:700; margin-bottom: var(--space-1); }
    .situation-hint { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
    textarea, select { width:100%; padding: .9rem 1rem; border-radius: var(--radius-lg); border:1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-sm); }
    textarea { min-height: 84px; resize: vertical; }
    label.mini { display:block; font-weight:600; font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-2); }

    .submit-btn { display:block; width:100%; border:none; cursor:pointer; border-radius:999px; padding: 1rem 1.4rem; font-family: var(--font-body); font-size: var(--text-base); font-weight:700; background: var(--color-primary); color:#fff; transition:.2s; }
    .submit-btn:hover { background: var(--color-primary-hover); }
    .missing-note { display:none; margin-top: var(--space-3); color: var(--color-warning); font-size: var(--text-sm); text-align:center; }

    .result-card { background: var(--color-surface-offset); border:1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-8)); margin-bottom: var(--space-5); }
    .pill { display:inline-block; padding:.35rem .8rem; border-radius:999px; font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom: var(--space-3); margin-right:.4rem; }
    .pill-fear { background: rgba(1,105,111,.12); color: var(--color-primary); }
    .pill-rage { background: rgba(150,66,25,.12); color: var(--color-warning); }
    .pill-panic { background: rgba(90,74,140,.14); color: #6a5a9e; }
    .pill-seeking { background: rgba(67,122,34,.12); color: var(--color-success); }
    .pill-level { background: var(--color-surface); color: var(--color-text-muted); border:1px solid var(--color-border); }
    .result-card h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height:1.1; margin-bottom: var(--space-3); font-weight:600; letter-spacing:-.005em; }
    .result-card h3 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
    .result-card p { margin-bottom: var(--space-3); }
    .result-card p:last-child { margin-bottom: 0; }
    .result-card ul { padding-left: 1.1rem; }
    .result-card li + li { margin-top:.4rem; }
    .insight { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-5); }
    .situation-echo { font-style: italic; color: var(--color-text-muted); font-size: var(--text-sm); }
    .result-cta { display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-5); }
    .btn { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--color-border); cursor:pointer; border-radius:999px; padding:.8rem 1.3rem; font-size:var(--text-sm); font-weight:600; background:var(--color-surface); color:var(--color-text); transition:.2s; }
    .btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
    .btn.solid { background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
    .btn.solid:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color:#fff; }
    .retake { text-align:center; margin-top: var(--space-2); }
    .retake button { background:none; border:none; cursor:pointer; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--text-sm); text-decoration: underline; }

    .disclaimer { margin-top: var(--space-10); color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.7; }
    footer { margin-top: var(--space-10); padding-top: var(--space-5); border-top:1px solid var(--color-border); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
    footer a:hover { color: var(--color-primary); }
  
    .deep-note { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-surface-offset); border-radius: var(--radius-md); font-size: var(--text-sm); }
    .plan { margin: var(--space-4) 0 0; padding-left: 1.15rem; }
    .plan li { margin-bottom: var(--space-3); }
    .band { display:inline-block; margin-bottom: var(--space-2); }

    /* Unified site nav (same menu + look as the brand pages, in check-page tokens).
       Markup: <header class="sitenav"><div class="sitenav-in"> wordmark + burger + <nav id="mainnav"> links + theme-btn. */
    .sitenav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--color-border); }
    .sitenav-in { max-width:1000px; margin:0 auto; padding:.4rem var(--space-6); min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
    .sitenav .wordmark { font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-.005em; color:var(--color-text); white-space:nowrap; }
    .sitenav .wordmark span { color:var(--color-primary); }
    .sitenav nav { display:flex; gap:var(--space-2); align-items:center; justify-content:flex-end; }
    .sitenav nav a { font-size:var(--text-sm); color:var(--color-text-muted); padding:.35rem .5rem; white-space:nowrap; }
    .sitenav nav a:hover { color:var(--color-primary); }
    .sitenav nav a.active { color:var(--color-primary); font-weight:700; }
    .sitenav .theme-btn { margin-left:var(--space-2); }
    .burger { display:none; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); cursor:pointer; border-radius:999px; padding:.45rem .8rem; font-size:1.3rem; line-height:1; }
    @media (max-width: 820px){
      .sitenav-in { flex-wrap:wrap; }
      .burger { display:inline-flex; align-items:center; }
      .sitenav nav { display:none; width:100%; flex-direction:column; align-items:stretch; justify-content:flex-start; padding-bottom:var(--space-3); }
      .sitenav nav.open { display:flex; }
      .sitenav nav a { padding:.7rem .5rem; }
    }

    /* Back link row at the top of content/tool pages */
    .backrow { display:inline-block; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
    .backrow:hover { color: var(--color-primary); }