/*
 * styles.css — cEDH deck posteriors.
 * Ported from reference/cedh-posteriors.html. Fonts come from /fonts/fonts.css
 * (self-hosted Bricolage Grotesque) with the system fallback stack below.
 * No inline styles anywhere: everything that used to be an inline style
 * attribute is a class here (see "hardening additions" at the end).
 */
:root{
  --bg:#F1F0F6; --surface:#FFFFFF; --ink:#1E1B2E; --muted:#686580; --line:#DAD7E5; --grid:#ECEAF2;
  --accent:#5B3FD0; --warn:#B3261E;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14121D; --surface:#1E1B2B; --ink:#ECEAF5; --muted:#A3A0BA; --line:#353149; --grid:#28253A;
    --accent:#A996FF; --warn:#FF8A80; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14121D; --surface:#1E1B2B; --ink:#ECEAF5; --muted:#A3A0BA; --line:#353149; --grid:#28253A;
  --accent:#A996FF; --warn:#FF8A80; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;line-height:1.45;font-size:16px;
}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{max-width:1200px;margin:0 auto;padding:28px 18px 56px}
header{margin-bottom:24px}
header > .tagline,header > .lede{max-width:760px}
h1{font-size:clamp(28px,4.2vw,52px);line-height:1.04;letter-spacing:-0.025em;margin:0 0 10px;font-weight:700;text-wrap:balance}
/* Keep "Deck Stats Comparison" together so any wrap falls after "cEDH"; below 360px let the tail wrap too. */
.h1-tail{white-space:nowrap}
@media (max-width:359px){.h1-tail{white-space:normal}}
.lede{margin:0;color:var(--muted);font-size:17px;max-width:62ch}
h2{font-size:20px;letter-spacing:-0.01em;margin:0 0 4px;font-weight:600}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}

.layout{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){
  .layout{grid-template-columns:350px minmax(0,1fr);align-items:start}
  .decks-panel{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);max-height:calc(100vh - 32px);overflow:auto}
}
.block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.stack{display:grid;gap:18px;min-width:0}

/* decks */
.deck{border-left:4px solid var(--c);background:var(--bg);border-radius:4px 10px 10px 4px;padding:10px 12px 12px;margin-bottom:12px}
.deck-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.deck-head input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:17px;padding:4px 2px;border-bottom:1px dashed transparent}
.deck-head input:hover,.deck-head input:focus{border-bottom-color:var(--line)}
.icon-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:20px;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer}
.icon-btn:hover{background:var(--surface);color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end}
.fields label{display:grid;gap:3px;font-size:13px;line-height:1.25;color:var(--muted);min-width:0}
.fields input{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.fields input[aria-invalid="true"]{border-color:var(--warn)}
/* Each card holds both input rows; only the current metric's row is shown
   (display:none also takes the hidden row's inputs out of the tab order). */
#decks[data-metric="win"] .pair-conv,
#decks[data-metric="conv"] .pair-win{display:none}
.decks-panel .metric-note{margin-top:-8px;font-weight:500}
.err{color:var(--warn);font-size:13px;margin:6px 0 0;min-height:0}
.err:empty{display:none}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.hint{font-size:13px;color:var(--muted);margin:12px 0 0}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:end}
.control{display:grid;gap:5px}
.control > span{font-size:13px;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg)}
.seg button{font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
/* The metric choice is its own strip under the header, so it is the first
   choice at every width (above both columns on desktop, before Decks on phones). */
.metric-block{margin-bottom:18px;padding:12px 18px}
.metric-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.metric-label{font-size:16px;font-weight:600;color:var(--ink)}
.seg.seg-primary button{font-size:16px;padding:9px 18px}
.seg.seg-primary button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
/* Prior: the first setting; its segmented control wraps on narrow screens. */
.prior-control{flex:1 1 100%;min-width:0}
.seg.seg-wrap{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border-radius:18px}
.prior-note{margin:0;font-size:13px;color:var(--muted)}
.mass{display:flex;align-items:center;gap:8px}
.mass input[type=range]{width:120px;accent-color:var(--accent)}
.mass input[type=number]{width:74px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 7px}

/* charts */
.chart-wrap{position:relative;width:100%}
.chart-wrap canvas{display:block}
.overlay{position:absolute;inset:0;pointer-events:none}
.readout{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);min-height:20px;margin-top:6px}
.readout b{color:var(--ink);font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:-1px}
.table-scroll{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
th,td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--grid);white-space:nowrap}
th{font-weight:500;color:var(--muted)}
th:first-child,td:first-child{text-align:left}
td:first-child{font-weight:600}

/* comparison */
.compare-head{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:16px}
.compare-head select{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:42vw}
.compare-head .vs{color:var(--muted)}
.verdict{display:grid;gap:10px;margin-bottom:22px}
.pnum{font-size:clamp(60px,13vw,112px);font-weight:700;letter-spacing:-0.04em;line-height:.9;color:var(--cb)}
.verdict p{margin:0;font-size:18px;max-width:46ch}
.split{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--grid)}
.split span{display:block;height:100%;transition:width .35s ease}
.split-labels{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.compare-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){.compare-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
h3{font-size:16px;font-weight:600;margin:0 0 4px}
.legend{font-size:13px;color:var(--muted);margin:8px 0 0}
.empty{color:var(--muted);padding:12px 0}
details{font-size:15px}
details summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);max-width:72ch}
@media (prefers-reduced-motion:reduce){.split span{transition:none}}

/* ---------- hardening additions (former inline styles) ---------- */
.compare-title{margin:0}
.sub.tight{margin-bottom:8px}

/* ---------- export / import ---------- */
.data-row{margin-top:10px}
.btn.small{font-size:13px;padding:5px 11px;color:var(--muted)}
.btn.small:hover{color:var(--ink)}
a.btn{display:inline-block;text-decoration:none;line-height:1.45}
.data-dialog{
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow:auto;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;padding:18px;
}
.data-dialog::backdrop{background:rgba(20,18,29,.45)}
.data-dialog h2{margin-bottom:6px}
.data-dialog textarea{
  display:block;width:100%;resize:vertical;min-height:160px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:16px;line-height:1.4;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
}
.file-pick{display:grid;gap:4px;margin-top:12px;font-size:13px;color:var(--muted)}
.file-pick input{font:inherit;font-size:16px;color:var(--ink);max-width:100%}
.dialog-actions{margin-top:14px;justify-content:flex-end}

/* ---------- footer ---------- */
.site-footer{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:24px;font-size:13px;color:var(--muted)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink)}
.mail-btn{border:0;background:transparent;padding:0;margin:0;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline dashed;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;text-align:left}
.mail-btn:hover{color:var(--ink)}
.mail-status{font-size:12px;color:var(--muted);user-select:all;overflow-wrap:anywhere}
@media (min-width:920px){.site-footer{margin-left:calc(350px + 18px)}.site-footer.standalone{margin-left:0}}

/* ---------- phone-width fix ----------
   The prototype's .stack grid used an implicit auto column, so the summary
   table's min-width pushed every block wider than a phone screen. A
   shrinkable column lets the table scroll inside .table-scroll as intended. */
.stack{grid-template-columns:minmax(0,1fr)}

/* ---------- empty states ---------- */
.tagline{margin:0 0 12px;color:var(--muted);font-size:18px;font-style:italic;letter-spacing:-0.005em}
table.is-empty{min-width:0}
table tr.empty-row td{color:var(--muted);font-weight:400;text-align:left;border-bottom:0;padding:10px 8px}