/* Dataset page styles (owned by the dataset stage). Shared components live in site.css. */

.ds-pad{padding-top:var(--s-7)}
.ds-k{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}

/* step headers: big Black Italic number, title, optional control on the right */
.ds-step-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3) var(--s-5);align-items:end;padding-bottom:var(--s-5);margin-bottom:var(--s-6);border-bottom:1.5px solid var(--ink)}
.ds-no{font-size:clamp(3.6rem,6vw,6.5rem);line-height:.78;padding-right:6px}
.ds-h{font-size:var(--t-h3);line-height:.9}
.ds-h:focus{outline:none}
.ds-h:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.ds-step-t p{margin-top:10px;color:var(--ink-2);max-width:46rem}
.ds-step-h>.chip{align-self:end;margin-bottom:4px}

/* empty state */
.ds-empty-wrap{padding-bottom:var(--s-8)}
.ds-empty{gap:var(--s-5)}
.ds-empty>p{max-width:34rem;color:var(--ink-2);font-size:var(--t-lede);line-height:1.4}
.ds-howto{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);width:min(100%,54rem);text-align:left;margin:var(--s-3) 0}
.ds-howto li{display:flex;gap:12px;align-items:flex-start;border-top:1.5px solid var(--ink);padding-top:var(--s-3);color:var(--ink-2)}
.ds-howto b{font-size:2.6rem;line-height:.8;color:var(--ink)}
.ds-empty .ctas{justify-content:center}

/* ---------- 01 event list ---------- */
.ds-list{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));align-items:start}
.ds-none{padding:var(--s-6) 0}
.ds-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4) var(--s-5);background:var(--kicker);border:1.5px solid var(--ink);border-radius:var(--radius);padding:var(--s-5)}
.ds-card.is-labelled{box-shadow:var(--shadow-hard)}
.ds-thumb{position:relative;align-self:start;aspect-ratio:160/286;background:var(--paper-3);border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.ds-thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) brightness(1.02)}
.ds-thumb .ds-t{position:absolute;left:0;bottom:0;z-index:1;background:var(--ink);color:var(--paper);font:700 .7rem/1 var(--f-label);letter-spacing:.06em;padding:5px 6px 4px}
.ds-nothumb{position:absolute;inset:0;background:var(--paper-3)}
.ds-body{min-width:0}
.ds-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px var(--s-3)}
.ds-when{color:var(--ink);padding-top:5px}
.ds-src{margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-th{margin-top:var(--s-4)}
.ds-trick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:clamp(2rem,2.5vw,2.75rem);line-height:.88;margin-top:6px}
.ds-trick .chip{font-style:normal}
.ds-rule{margin-top:6px}
.ds-m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--rule)}
.ds-m dt{font:700 .7rem/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ds-m dd{margin-top:6px;font:900 italic 1.5rem/1 var(--f-display);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-m dd .u{font-size:.62em;margin-left:3px}
.ds-m dd .lc{text-transform:none}
.ds-m dd .est{margin-left:5px;vertical-align:3px}
.ds-model{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:var(--s-4);padding:10px 12px 9px;background:var(--paper-2);border-left:6px solid var(--lake)}
.ds-model b{font:900 italic 1.4rem/1 var(--f-display);text-transform:uppercase}
.ds-model .num{font:700 .95rem/1 var(--f-label);letter-spacing:.06em}
.ds-diff{flex-basis:100%;color:var(--ink-2)}
.ds-lab{grid-column:1/-1;padding-top:var(--s-4);border-top:1px solid var(--rule)}
.ds-lab .seg{margin-top:10px}
.ds-lab .seg span{padding:11px 14px 10px;font-size:.82rem}
.ds-acts{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin-top:6px}
.ds-newform{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
.ds-newform .input{flex:1 1 220px;width:auto;min-width:0}
.ds-newform .err{flex-basis:100%}
.ds-newform .err:empty{display:none}
.ds-novec{grid-column:1/-1;color:var(--signal-text);font-weight:700}

/* ---------- 02 train ---------- */
.ds-train{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7);align-items:start}
.ds-counts{list-style:none;margin-top:var(--s-3);border-top:1.5px solid var(--ink)}
.ds-counts li{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr) 5.5rem 8.5rem;gap:var(--s-4);align-items:center;padding:12px 0 11px;border-bottom:1px solid var(--rule)}
.ds-counts li.ds-c-none{display:block;color:var(--muted);font-size:var(--t-small)}
.ds-c-name{font:900 italic 1.5rem/1 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
.ds-c-n{text-align:right;font:700 .95rem/1 var(--f-label);letter-spacing:.04em}
.ds-counts .chip{justify-self:end}
.ds-bar{position:relative;height:12px;background:var(--paper-3)}
.ds-bar i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--ink)}
.ds-bar b{position:absolute;top:-5px;bottom:-5px;left:var(--m,0%);width:4px;margin-left:-2px;background:var(--signal);transform:skewX(var(--slant))}
.ds-legend{margin-top:var(--s-4)}
.ds-go{display:grid;gap:var(--s-4);justify-items:start;padding:var(--s-6);background:var(--kicker);border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard)}
.ds-why{font-size:var(--t-lede);line-height:1.4;color:var(--ink)}
/* locked until the label counts are met: outlined and dashed, never a live-looking fill */
.ds-go .btn:disabled{background:transparent;color:var(--muted);opacity:1;clip-path:none;box-shadow:none;border:2px dashed var(--muted);cursor:not-allowed}
.ds-go .btn:disabled:hover{background:transparent}
.ds-na{color:var(--muted)}

/* ---------- 03 results ---------- */
.ds-res{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
.ds-res>div>.notice{margin-bottom:var(--s-5)}
[data-ds-res-body]>.notice{margin-bottom:var(--s-5)}
.ds-acc{font-size:clamp(5.5rem,10vw,10rem);line-height:.8;margin-top:var(--s-4)}
.ds-acc-sub{margin-top:var(--s-4);font:700 1.1rem/1.3 var(--f-label);letter-spacing:.04em}
.ds-acc-train{margin-top:6px}
.ds-pc{margin-top:var(--s-6)}
.ds-pc .mrows{margin-top:var(--s-3)}
.ds-pc .mrow .k{color:var(--ink)}
.ds-pc .mrow .v .u{font:700 .8rem/1 var(--f-label);letter-spacing:.06em;margin-left:10px;color:var(--muted)}
.ds-cm{margin-top:var(--s-3);table-layout:fixed;min-width:22rem}
.ds-cm th{white-space:normal}
.ds-cm thead th{text-align:center;padding:10px 6px}
.ds-cm thead th:first-child{text-align:left;padding-left:0}
.ds-cm tbody th{font:900 italic 1.25rem/1 var(--f-display);text-transform:uppercase;letter-spacing:0;padding:12px 12px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
.ds-cm td,.ds-cm td.num{text-align:center;padding:14px 6px 12px;border:1px solid var(--rule);font:900 italic 1.7rem/1 var(--f-display)}
.ds-cm td.hit{background:var(--ink);color:var(--paper)}
.ds-cm td.miss{background:var(--paper-3);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ds-cm td.zero{color:var(--muted);font:700 1rem/1 var(--f-label)}
.ds-cm tbody tr:hover{background:transparent}
.ds-wrong{margin-top:var(--s-5)}
.ds-wrong ul{margin-top:var(--s-2);padding-left:1.2em;color:var(--ink-2)}
.ds-wrong li+li{margin-top:6px}
.ds-explain{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-4) var(--s-7);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1.5px solid var(--ink)}
.ds-h3{font-size:var(--t-h3);line-height:.9}
.ds-explain .stack p{max-width:46rem;color:var(--ink-2)}
.ds-save{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.ds-saved{margin-top:var(--s-7)}
.ds-saved:focus{outline:none}
.ds-backup{padding-top:var(--s-6);padding-bottom:var(--s-8)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ds-train,.ds-res,.ds-explain{grid-template-columns:1fr}
}
@media (max-width:899px){
  .ds-step-h{grid-template-columns:auto minmax(0,1fr)}
  .ds-step-h>.ds-filter,.ds-step-h>.chip{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .ds-step-h{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .ds-no{font-size:3.4rem;line-height:.8}
  .ds-howto{grid-template-columns:1fr}
  [data-ds-sum] .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .ds-card{grid-template-columns:72px minmax(0,1fr);gap:var(--s-3) var(--s-4);padding:var(--s-4)}
  .ds-trick{font-size:1.9rem}
  .ds-m{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-m dd{font-size:1.35rem}
  .ds-lab .seg span{padding:11px 12px 10px;font-size:.78rem;letter-spacing:.08em}
  .ds-counts li{grid-template-columns:minmax(0,1fr) auto auto;gap:8px var(--s-3)}
  .ds-counts .ds-bar{grid-column:1/-1;order:4}
  .ds-go{padding:var(--s-5)}
  .ds-cm td{font-size:1.4rem}
}