/* style.css -- styles for the passphrase recovery diagnostic page
   Copyright (C) 2026 tristanjo. Part of btcrecover, GNU GPL v2 or later.

   Served from the same origin as the page and loading nothing from anywhere else, which is
   what the page's no-network claim is about -- no web fonts, no icon CDNs. The premium feel
   comes from the type scale, spacing, depth and a single considered accent, not a webfont
   the browser would have to fetch. See webapp/README.md. */

/* Light is the default. Dark arrives two ways -- the OS asks for it, or the visitor
   presses the switch -- and both need the same values, so the two dark blocks are
   deliberate duplicates. A test keeps them identical. */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#eef0f3; --line:#e4e7ec;
  --ink:#151922; --ink-2:#565e6c; --ink-3:#666d7a;
  --accent:#4b44c9; --accent-soft:#eceafb; --on-accent:#ffffff;
  --ok:#0f7a52; --warn:#9a6700; --hot:#b23a0c; --bad:#be2f45;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* soft layered elevation -- how a white card floats on the toned ground */
  --shadow:0 1px 2px rgba(20,22,34,.04), 0 10px 26px -14px rgba(20,22,34,.16);
  --shadow-lift:0 2px 4px rgba(20,22,34,.05), 0 18px 44px -18px rgba(20,22,34,.24);
  /* Where the content column ends, so the two floating controls line up with it rather
     than the window. 100% (not 100vw) resolves without the scrollbar on a fixed element. */
  --gutter:max(18px, calc((100% - 1200px) / 2 + 22px));
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1116; --surface:#171a21; --surface-2:#20242d; --line:#2a2f3a;
    --ink:#eceef2; --ink-2:#a2aab8; --ink-3:#828b99;
    --accent:#8983f2; --accent-soft:#282647; --on-accent:#0f1116;
    --ok:#3fd08a; --warn:#f5b93b; --hot:#fb8b4c; --bad:#f27389;
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 12px 30px -14px rgba(0,0,0,.55);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 50px -18px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1116; --surface:#171a21; --surface-2:#20242d; --line:#2a2f3a;
  --ink:#eceef2; --ink-2:#a2aab8; --ink-3:#828b99;
  --accent:#8983f2; --accent-soft:#282647; --on-accent:#0f1116;
  --ok:#3fd08a; --warn:#f5b93b; --hot:#fb8b4c; --bad:#f27389;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 12px 30px -14px rgba(0,0,0,.55);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 50px -18px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:34px 22px 96px}

/* ---- header: the name is the address ---- */
/* One uniform wordmark: every part the size .com already was, and nothing heavier than it.
   passphrase stays ink, finder keeps the accent, .com stays muted -- the hierarchy is in
   the colour now, not in size or weight.
   It sits in its own chip -- same border, surface and radius as the two boxed controls on
   the right -- so the header reads as one row of pieces and the name holds its ground next
   to the buttons instead of being overpowered by them. */
h1{display:inline-flex;align-items:baseline;margin:0;font-size:20px;
  text-transform:uppercase;letter-spacing:.01em;
  font-weight:600;line-height:1;
  border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 15px;
  box-shadow:var(--shadow)}
h1 .mark{color:var(--ink)}
h1 .mark b{color:var(--accent);font-weight:600}
h1 .tld{color:var(--ink-3);font-weight:600;letter-spacing:.01em;margin-left:.02em}
.ko{color:var(--ink-2);margin:7px 0 0 2px;font-size:16px;font-weight:300;letter-spacing:.01em}
.topline{border:0;border-top:1px solid var(--line);margin:18px 0 18px}
.sub{color:var(--ink-2);margin:0 0 22px;font-size:16.5px;max-width:70ch;line-height:1.7}
.danger{color:var(--bad);font-weight:600}

/* ---- the two floating controls, aligned to the content column ---- */
.theme{position:fixed;top:34px;right:var(--gutter);z-index:40;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--ink-2);line-height:0;box-shadow:var(--shadow);
  transition:color .16s ease,border-color .16s ease,transform .16s ease}
.theme:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
@media (max-width:900px){.theme{top:10px}}

/* 간단히 / 자세히 -- explanations fold; controls, verdicts and warnings never do */
.modeswitch{position:fixed;top:34px;right:calc(var(--gutter) + 50px);z-index:40;
  display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);padding:3px}
.modeswitch button{border:0;border-radius:999px;background:none;color:var(--ink-3);
  padding:6px 15px;font-size:14px;line-height:1.3;font-weight:600;
  transition:background .16s ease,color .16s ease}
.modeswitch button.on{background:var(--accent);color:var(--on-accent)}
.modeswitch button:not(.on):hover{color:var(--ink)}
body.simple .detail{display:none}
@media (max-width:900px){.modeswitch{top:10px}}

/* On a narrow screen the wordmark spans nearly the full width and would run under the two
   floating controls (measured: it does). Drop the whole header below them so they never
   collide -- the controls stay pinned top-right, the page starts underneath. */
@media (max-width:560px){.wrap{padding-top:62px}}


/* ---- two experiences, one switch ----------------------------------------------------
   간단히 is a guided, single-focus flow with a hero at the top -- for someone frightened
   who wants the shortest path to an answer. 자세히 is the full two-column workspace with
   every option in view. Same DOM, same logic; only the presentation differs by mode. */

/* The hero belongs to 간단히 only. In 자세히 the compact .sub paragraph does the same job
   without taking the whole screen. */
.hero{display:none}
body.simple .hero{display:block;text-align:center;padding:48px 0 36px}
body.simple .sub{display:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 28%,var(--line));
  padding:6px 14px;border-radius:999px;margin-bottom:22px}
.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.heroh{font-size:46px;line-height:1.12;letter-spacing:-.036em;font-weight:800;margin:0;
  text-wrap:balance;color:var(--ink)}
/* Within one hue -- indigo to a lighter indigo -- not the rainbow gradient that reads as
   a template. Kept because it lifts the one line the page is built around. */
.heroh .g{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#8b83f0));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.herosub{font-size:17.5px;color:var(--ink-2);margin:20px auto 0;max-width:36ch;line-height:1.62;
  text-wrap:balance}
@media (max-width:560px){.heroh{font-size:34px}}

/* 간단히: one centered column, the estimate following the flow rather than beside it.
   자세히 keeps the 1fr / 400px workspace defined above. */
body.simple .wrap{max-width:772px}
/* The two floating controls line up with the content column via --gutter, which is measured
   for the wide 1200px column. 간단히 narrows the column to 772px, so the controls have to
   follow inward or they strand out in the right margin. Re-measure the gutter against 772
   here; .theme (a child of body) and .modeswitch (inside .wrap) both inherit it. */
body.simple{--gutter:max(18px, calc((100% - 772px) / 2 + 22px))}
body.simple .grid{grid-template-columns:1fr;gap:20px}
body.simple .net{max-width:none}


/* ---- 간단히 = a full wizard, one stage at a time ------------------------------------
   Three stages -- 지갑 / 기억 / 결과 -- each its own screen. The estimate follows in the
   wallet-stage nav so the live feedback is not lost between screens. In 자세히 none of
   this applies: without body.simple the .wz cards all show as the two-column dashboard. */
.wizrail{display:none}
body.simple .wizrail{display:flex;align-items:flex-start;justify-content:center;
  gap:0;margin:0 auto 30px;max-width:440px}
.wr-dot{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:64px}
.wr-dot > span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;background:var(--surface-2);
  color:var(--ink-3);border:1px solid var(--line);transition:all .2s ease}
.wr-dot em{font-style:normal;font-size:12.5px;color:var(--ink-3);font-weight:600}
.wr-dot.on > span{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 3px 10px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
.wr-dot.on em{color:var(--ink)}
.wr-dot.done > span{background:var(--accent-soft);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.wr-line{flex:1;height:2px;background:var(--line);margin:17px 6px 0;border-radius:2px;
  transition:background .2s ease}
.wr-line.done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* One stage visible at a time. senscard/normcard keep their own hidden attribute. */
body.simple .wz{display:none}
body.simple[data-wiz="wallet"] .wz-wallet:not([hidden]),
body.simple[data-wiz="recall"] .wz-recall:not([hidden]),
body.simple[data-wiz="result"] .wz-result:not([hidden]){display:block}

/* Stage navigation. Hidden in 자세히 and on the stages they do not belong to. */
.wiznav{display:none;gap:12px;align-items:center;margin-top:20px}
body.simple[data-wiz="wallet"] .wiznav-wallet{display:flex;justify-content:space-between}
body.simple[data-wiz="result"] .wiznav-result{display:flex;justify-content:flex-start}
.wiznav .primary{margin-left:auto}
.wiznav-est{color:var(--ink-3);font-size:14.5px}
.wiznav-est b{color:var(--ink);font-weight:700}

/* ---- layout ---- */
.grid{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* Cards float on the toned ground with soft elevation rather than a hard outline -- the
   single biggest move from "form on paper" to "product". A hairline still keeps the edge
   crisp on a bright screen. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;
  margin-bottom:24px;box-shadow:var(--shadow)}
.card:last-child{margin-bottom:0}
.card h2{font-size:17px;margin:0 0 16px;color:var(--ink);font-weight:650;
  display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
/* the step number, so a beginner can see there is an order to this */
.step{display:inline-flex;flex:none;width:26px;height:26px;border-radius:50%;
  align-items:center;justify-content:center;font-size:14px;font-weight:700;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 2px 6px -1px color-mix(in srgb,var(--accent) 55%,transparent)}

label{display:block;font-size:14.5px;color:var(--ink-2);margin:16px 0 6px;font-weight:500}
.card-body > :first-child, .card > label:first-of-type{margin-top:0}

::placeholder{color:var(--ink-3);opacity:.6}
.hasexample::placeholder{font-family:var(--mono);font-size:14px}

/* Inputs sit inset in the card -- a filled well rather than an outlined box, which reads
   softer and more considered. The border is a hairline until focus lifts it to the accent. */
input[type=text],input[type=number],select{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);
  font:inherit;font-size:16px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
input[type=text]:hover,input[type=number]:hover,select:hover{background:var(--surface)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:1;min-width:0}
.row.tight>*{flex:0 0 auto}

/* ---- buttons ---- */
button{font:inherit;font-size:15px;padding:9px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);cursor:pointer;font-weight:500;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease}
button:hover{border-color:var(--accent);color:var(--accent)}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  font-weight:650;padding:12px 18px;font-size:16px;
  box-shadow:0 2px 10px -2px color-mix(in srgb,var(--accent) 50%,transparent)}
button.primary:hover{color:var(--on-accent);
  box-shadow:0 4px 16px -3px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-1px)}
button.ghost{border:none;background:none;color:var(--ink-3);padding:4px 8px}
button.ghost:hover{color:var(--bad)}

/* An address row and the button that adds or removes one. */
.addr-line{display:flex;align-items:center;gap:8px}
.addr-line + .addr-line{margin-top:8px}
#moreaddrs .addr-line{margin-top:8px}
.addmore{flex:none;width:44px;height:44px;padding:0;font-size:20px;line-height:1;
  border-radius:12px;color:var(--accent);border-color:var(--line);background:var(--surface-2)}
.addmore:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.addmore.drop{color:var(--ink-3)}
.addmore.drop:hover{background:var(--bad);border-color:var(--bad);color:#fff}

/* A comma list, shown as the pieces it actually is. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:100%;min-height:46px;
  padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  cursor:text;transition:border-color .16s ease,box-shadow .16s ease}
.chips:focus-within{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}
.chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:4px 7px 4px 11px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:14px;font-weight:500;line-height:1.5;word-break:break-all}
.chip button{all:unset;cursor:pointer;width:18px;height:18px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  opacity:.75}
.chip button:hover{opacity:1;background:rgba(0,0,0,.22)}
.chipin{flex:1 1 90px;min-width:90px;border:0;outline:none;background:none;padding:5px 2px;
  color:var(--ink);font:inherit;font-size:15px}

/* Download is the action; loading a saved file is the quiet neighbour beside it. */
.dl-row{display:flex;gap:9px}
.dl-row .primary{flex:1}
.iconbtn{flex:none;width:48px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink-2);background:var(--surface-2)}
.iconbtn:hover{color:var(--accent);border-color:var(--accent)}

/* A section that folds inside a card -- the typo options -- with a caret and a count. */
.subfold-row{display:flex;align-items:center;gap:6px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.subfold{flex:0 1 auto;display:inline-flex;align-items:center;gap:8px;padding:0;border:0;
  background:none;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer}
.subfold .subcount{color:var(--accent);font-weight:600;font-size:14px}
.subfold .foldcaret{border:5px solid transparent;border-top-color:var(--ink-3);
  margin-top:3px;transition:transform .16s ease}
.subfold[aria-expanded="false"] .foldcaret{transform:rotate(-90deg)}
#typos{margin-top:12px}

.slot{border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:11px;
  background:var(--surface-2)}
.slot-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.slot-head select{flex:0 0 130px;font-size:15px;padding:6px 9px}
.badge{font:600 13px/1 var(--mono);padding:4px 8px;border-radius:7px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2);
  cursor:pointer;margin-right:12px}
.chk input{margin:0;accent-color:var(--accent)}

.hint{font-size:14px;color:var(--ink-3);margin-top:7px;line-height:1.7}

/* The four stages a digit run goes through, side by side. */
.stages{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.stages span{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:5px 10px}
.stages i{font-style:normal;font-weight:600;color:var(--ink-2)}
.stages em{font-style:normal;color:var(--ink-3);font-size:13px}
.stages .arrow{color:var(--ink-3);font-weight:400}

.measure-btn{width:100%;padding:11px 14px;border:1px solid var(--accent);border-radius:12px;
  background:transparent;color:var(--accent);font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;line-height:1.4;transition:background .16s ease,color .16s ease}
.measure-btn:hover{background:var(--accent);color:var(--on-accent)}
.measuring{color:var(--accent);font-weight:600}

/* ---- modal ---- */
.modal{display:none;position:fixed;inset:0;z-index:50;
  background:color-mix(in srgb,#0b0d12 55%,transparent);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:18px;max-width:680px;width:100%;max-height:86vh;overflow-y:auto;padding:28px;
  box-shadow:var(--shadow-lift)}
.modal-box h3{margin:0 0 6px;font-size:21px;letter-spacing:-.015em;font-weight:700}
.modal-box h4{margin:22px 0 7px;font-size:16px;font-weight:650}
.modal-box p,.modal-box li{font-size:15px;color:var(--ink-2);line-height:1.7;margin:7px 0}
.modal-box ul,.modal-box ol{margin:7px 0;padding-left:20px}
.modal-box ol li{margin:8px 0}
.modal-box pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:13px;overflow-x:auto;font:14px/1.55 var(--mono);color:var(--ink);margin:9px 0}
.modal-box .no{color:var(--ok);font-weight:600}
.modal-actions{display:flex;justify-content:flex-end;margin-top:22px}
.modal-actions button{padding:9px 20px}

/* ---- the diagnostic result: the number is a hero moment ---- */
.stat{font:750 44px/1.1 var(--mono);letter-spacing:-.035em;word-break:break-all;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.stat small{font:400 14.5px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink-3);
  display:block;margin-top:9px;letter-spacing:0}

.verdict{border-radius:14px;padding:16px 18px;margin-bottom:16px;border:1px solid}
.v-ok{background:color-mix(in srgb,var(--ok) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--ok) 35%,var(--line));color:var(--ok)}
.v-warn{background:color-mix(in srgb,var(--warn) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--warn) 35%,var(--line));color:var(--warn)}
.v-hot{background:color-mix(in srgb,var(--hot) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--hot) 35%,var(--line));color:var(--hot)}
.v-bad{background:color-mix(in srgb,var(--bad) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--bad) 35%,var(--line));color:var(--bad)}
.verdict b{display:block;font-size:18px;margin-bottom:4px;font-weight:700;letter-spacing:-.01em}
.verdict span{font-size:15px;color:var(--ink-2);line-height:1.6}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 2px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
th{color:var(--ink-3);font-weight:500;font-size:13.5px;letter-spacing:.01em}
td.num{text-align:right;font-family:var(--mono);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Three claims, one per line -- what happens to what you type, how to check it, and what
   is still true if the check is wrong. */
.net{font-size:14.5px;color:var(--ink-2);line-height:1.8;
  background:color-mix(in srgb,var(--ok) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line));
  border-radius:16px;padding:14px 18px;margin-bottom:24px;box-shadow:var(--shadow)}
.net p{margin:0}
.net strong{color:var(--ok);font-weight:650}
.net #netcount{color:var(--ok);font-family:var(--mono);font-weight:700}
.netmore{font:inherit;font-size:14px;padding:2px 10px;margin-left:4px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 45%,var(--line));background:none;color:var(--ok);
  cursor:pointer;font-weight:600;transition:background .16s ease,color .16s ease}
.netmore:hover{background:var(--ok);color:var(--surface)}
.netmore:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px;
  font:14px/1.5 var(--mono);overflow-x:auto;max-height:260px;margin:0}
.foot{color:var(--ink-3);font-size:14px;margin-top:22px;line-height:1.75}

/* The multiplication behind the count, drawn as boxes. */
.shape{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px;margin-top:16px}
.sbox{flex:1 1 92px;min-width:92px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.sbox b{font-size:18px;font-family:var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.sbox span{font-size:13px;color:var(--ink-2)}
.sbox em{font-style:normal;font-size:13px;color:var(--ink-3);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbox.total{background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}
.sbox.total span{color:var(--accent)}
.sx{display:flex;align-items:center;color:var(--ink-3);font-size:16px;padding:0 2px}

/* A "?" that explains a label in place. Focusable, so it works without a mouse. */
.q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  margin-left:5px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--surface-2);color:var(--ink-3);font:600 13px/1 inherit;cursor:help;
  vertical-align:middle;flex:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.q:hover,.q:focus-visible{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);outline:none}
.qwrap{position:relative;display:inline-flex;align-items:center}
.qwrap .bubble{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:30;width:max-content;max-width:260px;padding:10px 13px;border-radius:11px;
  background:var(--ink);color:var(--bg);font-size:14px;line-height:1.6;font-weight:400;
  text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity .14s;
  box-shadow:var(--shadow-lift)}
.qwrap.rightmost .bubble{left:auto;right:0;transform:none}
@media (max-width:600px){
  .qwrap .bubble,.qwrap.rightmost .bubble{position:fixed;left:12px;right:12px;top:auto;
    width:auto;max-width:none;transform:none}
}
.qwrap:hover .bubble,.q:focus-visible + .bubble{opacity:1;visibility:visible}
.bubble b{color:var(--bg)}

/* Real candidates, shown as chips. */
.samples{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.samples code{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:4px 8px;font:14px var(--mono);color:var(--ink)}
.samples code.more{background:transparent;border-style:dashed;color:var(--ink-3)}

/* Links here are in-page actions, not places to navigate to -- no underline, on a page
   whose promise is that nothing leaves. */
a{color:var(--accent);text-decoration:none;font-weight:600}
a:hover{color:var(--ink);text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bubble a{color:var(--bg);text-decoration:underline}

/* Two fields that sit inside a sentence rather than under a label. */
input.inline-field,select.inline-field{width:auto;padding:3px 8px;font-size:14px;
  line-height:1.5;vertical-align:baseline;border-radius:8px}
select.inline-field{padding-right:6px}

/* Fold a card away. The triangle points down when open, right when shut. */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;user-select:none;margin:-6px -8px 0;padding:6px 8px;border-radius:12px;
  transition:background .16s ease}
.card-head:hover{background:var(--surface-2)}
.card-head:hover .fold{color:var(--ink)}
.card-head h2{margin:0}
.card-head + .card-body{margin-top:16px}
.fold{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.fold:hover{background:var(--surface-2);color:var(--ink)}
.fold:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fold::before{content:"";border:5px solid transparent;border-top-color:currentColor;
  margin-top:5px;transition:transform .16s}
.fold[aria-expanded="false"]::before{transform:rotate(-90deg) translateX(3px)}

/* A heading inside a card, for a group that is part of the same question. */
.subhead{display:flex;align-items:center;font-weight:600;font-size:15px;
  margin:22px 0 5px;padding-top:18px;border-top:1px solid var(--line)}

/* ---- footer ---- */
.rule{border:0;border-top:1px solid var(--line);margin:40px 0 0}
.bottom{padding:22px 0 8px;color:var(--ink-3);font-size:14px;line-height:1.75;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bottom p{margin:0}
.bottom .copyright{color:var(--ink-2);margin-bottom:3px;font-weight:600}
.bottom .copyright b{font-weight:700}
.bottom a{color:var(--ink-2)}
/* Support sits apart from the work, in the footer, so it never competes with the task. */
.donatebtn{flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:var(--shadow);
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}
.donatebtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);
  transform:translateY(-1px)}
.donatebtn svg{color:var(--accent)}
@media (max-width:560px){.bottom{flex-direction:column;align-items:stretch}
  .donatebtn{justify-content:center}}

/* Donations: QR + address, in a modal opened from the footer. */
.donate-row{display:flex;gap:16px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.qr{flex:none;background:#fff;padding:10px;border-radius:12px;border:1px solid var(--line);
  line-height:0}
.addr{display:inline-block;font:14px/1.5 var(--mono);background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;word-break:break-all;
  user-select:all}
.addr-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.copy{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);cursor:pointer;flex:none}
.copy:hover{color:var(--accent);border-color:var(--accent)}
.copy:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.copied{font-size:14px;color:var(--ok);font-weight:600}

/* A soft focus ring everywhere something can be typed into or pressed. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A gentle settle on load. Off entirely for anyone who asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  .grid > div > .card, .net{animation:rise .5s cubic-bezier(.16,.84,.44,1) both}
  .grid > div > .card:nth-child(2){animation-delay:.05s}
  .grid > div > .card:nth-child(3){animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}