/* Cause finder component styles, scoped to .cf.
   Expects tokens: --bg --surface --ink --muted --line --accent --accent-ink --accent-soft
   --eosin --eosin-soft --flag --flag-soft --hair --skin, and fonts --display --body --mono. */
.cf{font-family:var(--body);color:var(--ink);scroll-margin-top:96px}
.cf *{box-sizing:border-box}
.cf h1,.cf h2,.cf h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.cf h1{font-size:clamp(30px,6vw,42px);line-height:1.08;font-weight:700}
.cf h2{font-size:clamp(22px,4.6vw,28px);line-height:1.18;font-weight:700}
.cf h3{font-size:18px;font-weight:500}
.cf p{margin:0}
.cf .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cf .stack{display:flex;flex-direction:column;gap:16px}
.cf .lede{color:var(--muted);max-width:60ch}
.cf .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-block:8px}
.cf .fact{border-top:2px solid var(--accent);padding-top:10px}
.cf .fact strong{display:block;font-family:var(--display);font-size:20px}
.cf .fact span{font-size:13px;color:var(--muted)}
@media (max-width:480px){.cf .facts{grid-template-columns:1fr}}
.cf button{font:inherit;color:inherit;cursor:pointer}
.cf .btn{display:inline-block;border:0;border-radius:10px;padding:13px 20px;font-weight:600;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.cf .btn:hover{filter:brightness(1.08)}
.cf .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cf .btn.text{background:transparent;color:var(--muted);padding-inline:6px}
.cf .btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.cf :focus-visible{outline:3px solid var(--eosin);outline-offset:2px}
.cf .samples{display:flex;flex-wrap:wrap;gap:8px}
.cf .chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px}
.cf .chip:hover{border-color:var(--accent);color:var(--accent)}
.cf .progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.cf .progress i{display:block;height:100%;background:var(--accent);transition:width .25s ease}
.cf .opts{display:grid;gap:10px}
.cf .opts.visual{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cf .opt{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px}
.cf .opt:hover{border-color:var(--accent)}
.cf .opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cf .opt .mark{flex:none;width:20px;height:20px;border:1.5px solid var(--muted);display:grid;place-items:center}
.cf .opt.radio .mark{border-radius:50%}
.cf .opt.check .mark{border-radius:5px}
.cf .opt[aria-pressed="true"] .mark{border-color:var(--accent);background:var(--accent)}
.cf .opt[aria-pressed="true"] .mark::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent-ink)}
.cf .opt.radio[aria-pressed="true"] .mark::after{border-radius:50%}
.cf .visual .opt{flex-direction:column;align-items:center;text-align:center;padding:14px 10px;gap:8px}
.cf .visual .opt svg{width:84px;height:84px}
.cf .visual .opt .mark{display:none}
.cf .navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cf .hint{font-size:13px;color:var(--muted)}
.cf .flag{background:var(--flag-soft);border-left:4px solid var(--flag);padding:14px 16px;border-radius:0 10px 10px 0}
.cf .flag strong{color:var(--flag)}
.cf .flag ul{margin:6px 0 0;padding-left:18px}
.cf .cause{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.cf .pill{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.cf .pill.strong{background:var(--accent);color:var(--accent-ink)}
.cf .pill.possible{border:1px solid var(--accent);color:var(--accent)}
.cf .why{font-size:14px;color:var(--muted)}
.cf .why q{color:var(--ink)}
.cf .link{color:var(--accent);font-weight:600;text-decoration:none}
.cf .link:hover{text-decoration:underline}
.cf .tests{border:1.5px dashed var(--eosin);border-radius:14px;padding:18px;background:var(--eosin-soft)}
.cf .tests ul{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.cf .tests li{font-family:var(--mono);font-size:14px;display:flex;gap:10px}
.cf .tests li::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;border:1.5px solid var(--eosin);border-radius:3px}
.cf .tests.none{border-style:solid;border-color:var(--line);background:var(--surface)}
.cf .tests.none p{margin-top:8px}
.cf .row{display:flex;gap:10px;flex-wrap:wrap}
.cf .note{font-size:13px;color:var(--muted)}
.cf details{border-top:1px solid var(--line);padding-top:14px}
.cf summary{cursor:pointer;font-weight:600}
.cf .bars{display:grid;gap:6px;margin-top:12px}
.cf .bar{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr 34px;gap:10px;align-items:center;font-size:13px}
.cf .bar .track{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.cf .bar .track i{display:block;height:100%;background:var(--muted)}
.cf .bar.shown .track i{background:var(--accent)}
.cf .bar b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.cf .foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
@media (prefers-reduced-motion:reduce){.cf *{transition:none!important}}