/* Page scaffold (the fermi/flow centred column) + duel-specific surface.
   Shared bits from tokens/about/controls/mobile.css. */
.wrap{max-width:var(--w-focus);margin:0 auto;padding-inline:16px;display:flex;flex-direction:column;gap:20px}
main{display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:22px}
/* Section wayfinding is an uppercase micro-label closing on a 2px ink rule
   (Claude Design 33), not display type — display scale belongs to the verdict. */
.card h2{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}

/* setup */
.setuplabel{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
#question,#items{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--border);border-radius:0;padding:10px 12px}
#items{resize:vertical;line-height:1.6}
.setupwarn{color:var(--st-risk-ink);font-size:13px;margin:10px 0 0}

/* duel: two-up cards that STACK under 640px (a relayout, not a pan) */
.framing{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,sans-serif;font-size:20px;font-weight:700;margin:2px 0 16px;text-wrap:balance}
.duelcards{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
/* VS is ink, not brand red: red is spent on the kicker number, the verdict
   figure and the one primary button (6b rule 6). Mockup 33 reds it; prod is
   deliberately stricter. */
.duelcards .vs{align-self:center;color:var(--ink);font-size:24px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em}
.pickcard{font:inherit;font-size:17px;font-weight:600;color:var(--ink);text-align:left;
  background:var(--bg);border:1.5px solid var(--border);border-radius:0;padding:20px 18px;
  min-height:88px;cursor:pointer;overflow-wrap:anywhere;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
@media (prefers-reduced-motion: no-preference){
  .pickcard{transition:border-color .1s,background .1s}
}
.pickcard:hover,.pickcard:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg));outline:none}
.pickcard .ckick{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--muted)}
.pickcard .cname{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  overflow-wrap:anywhere}
.pickcard .cpick{margin-top:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink);border:1px solid var(--ink);padding:7px 15px}
.pickcard:hover .cpick,.pickcard:focus-visible .cpick{background:var(--ink);color:var(--bg)}
@media (max-width:640px){
  .duelcards{grid-template-columns:1fr}
  .duelcards .vs{padding:2px 0;text-align:center}
}
/* progress: uppercase micro over a plain ink hairline meter — no rounding, no gradient */
.progress{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:22px 0 8px;padding-top:13px;border-top:1px solid var(--border)}
.progress .pnote,.progress .ppct{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ptrack{position:relative;height:2px;background:var(--border);border-radius:0}
.pfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:0}
@media (prefers-reduced-motion: no-preference){
  .pfill{transition:width .2s}
}

/* readout — the verdict block itself is shared (assets/page.css .verdict-block) */
.readcols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.readcols.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.readcols{grid-template-columns:1fr}}
.orderlist{list-style:none;margin:0;padding:0;counter-reset:none}
.orow{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.orow:last-child{border-bottom:none}
.orow .rank{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--muted);min-width:1.6em}
.orow .olabel{flex:1;overflow-wrap:anywhere}
.orow .oscore{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--muted)}
.orow.settled .olabel{color:var(--ink)}
.orow.mushy .olabel{color:var(--muted)}
.statepill{display:inline-flex;align-items:center;min-height:22px;padding:2px 6px;border:1px solid var(--border);
  font-size:9px;font-weight:700;letter-spacing:.07em;line-height:1.1;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.statepill.settled{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.statepill.mushy{border-style:dashed;color:var(--st-risk-ink)}
.orow.tie .rank{color:var(--accent-ink)}

/* loops */
.loop{border:1px solid var(--border);border-radius:0;padding:14px;margin-bottom:12px;
  background:color-mix(in srgb,var(--err) 4%,var(--card))}
.loop .knot{font-size:12px;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.05em}
.loop .cycle{font-weight:600;color:var(--accent-ink);margin:0 0 10px;overflow-wrap:anywhere}
.edges{display:flex;flex-wrap:wrap;gap:8px}
.tagbtn{font:inherit;font-size:12.5px;min-height:44px;padding:6px 12px;border:1px dashed var(--border);
  border-radius:0;background:var(--card);color:var(--muted);cursor:pointer}
.tagbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.tagchip{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:0;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);
  font-size:12.5px;font-weight:600}
.synth{font-size:13.5px;color:var(--ink);margin:10px 0 0;font-style:italic}
.reduel{font:inherit;font-size:12.5px;min-height:44px;margin-top:10px;padding:6px 14px;
  border:1px solid var(--border);border-radius:0;background:var(--card);color:var(--ink);cursor:pointer}
.tagedit{display:flex;gap:8px;align-items:center;margin-top:8px}
.tagedit input{font:inherit;font-size:16px;padding:6px 10px;border:1px solid var(--border);
  border-radius:0;background:var(--bg);color:var(--ink);min-height:44px}

.method{color:var(--muted);font-size:12.5px}

@media (pointer:coarse){
  .btn,.chip{min-height:44px;display:inline-flex;align-items:center}
}

/* Phone edge system — "16px prose / 10px surface" (Camp A, assets/workspace.css):
   the reading gutter lives on the base .wrap (unconditional — prose sat flush
   through the 640→max-width tablet band too); ≤640 cards full-bleed as native
   sheets (side borders + radius dropped, top/bottom hairlines kept). */
@media (max-width:640px){
  .card{margin-inline:-16px;border-inline:none;border-radius:0;padding-inline:12px}
}