/* ==========================================================================
   AXI-x Sketch v0.1 — the score.                       (extension; not SNX core)
   sketch.js writes blocks in the engine's own score and a few data attributes;
   every visible thing about the sketchbook is drawn here.
   ========================================================================== */
/* the engine's own proportion, row to microcolumn, per edition (mirrors snx.css
   at 1500 / 1280 / 768 / 375 px: XL 64/31.7, L 56/31.7, M 56/47.7, S 48/53.8): a thumbnail is the page's stage shape, not a square */
:root{--sk-rowk:1.762}
@media (min-width:1440px){:root{--sk-rowk:2.021}}
@media (max-width:1023px){:root{--sk-rowk:1.167}}
@media (max-width:639px){:root{--sk-rowk:.881}}
/* a frame is a container; a stage inside it takes its row from the frame's
   width, so the beat, the shadows and the slivers all scale with the frame */
.sk-frame{container-type:inline-size;min-width:0}
.sk-frame > .snx-stage{--snx-row:calc(100cqw/var(--snx-union)*var(--sk-rowk))}
.sk-frame > .snx-stage.snx-slivers::before,.sk-frame > .snx-stage.snx-slivers::after{width:calc(100%/var(--snx-union))}
.sk-frame > .snx-stage.snx-slivers::before{left:calc(var(--snx-sliver-a)*100%/var(--snx-union))}
.sk-frame > .snx-stage.snx-slivers::after{left:calc(var(--snx-sliver-b)*100%/var(--snx-union))}

/* ---------- the sheet: fifty mornings ---------- */
.sk-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px 8px;margin-top:14px}
.sk-cand{appearance:none;border:0;background:transparent;padding:0;margin:0;display:block;width:100%;text-align:left;cursor:pointer;color:var(--snx-ink);font:inherit;container-type:inline-size;min-width:0}
.sk-cand .sk-thumb{display:grid;--snx-row:calc(100cqw/var(--snx-union)*var(--sk-rowk));grid-auto-rows:var(--snx-row);border-width:1px}
.sk-cand .sk-thumb .snx-b,.sk-cand .sk-thumb .snx-o{display:block}
.sk-cand .sk-thumb .snx-plane1::after{transform:translate(calc(100cqw/var(--snx-union)),calc(var(--snx-row)*.375))}
.sk-label{display:block;font-family:var(--snx-mono);font-size:9px;letter-spacing:.06em;color:var(--snx-ink-60);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-label b{font-weight:600;color:var(--snx-ink)}
/* verdicts, from data the script wrote */
.sk-cand[data-verdict=kept] .sk-thumb{outline:3px solid var(--snx-ink);outline-offset:-3px}
.sk-cand[data-verdict=kept] .sk-label{color:var(--snx-ink);font-weight:600}
.sk-cand[data-verdict=reject] .sk-thumb{opacity:.82}
.sk-cand[data-verdict=veto] .sk-thumb{opacity:.42;filter:grayscale(.6)}
.sk-cand[data-verdict=veto] .sk-label{color:var(--snx-ink-40)}
.sk-cand.is-hand .sk-thumb{outline:3px dashed var(--snx-signal);outline-offset:-3px;opacity:1;filter:none}
.sk-cand.is-hand .sk-label b{color:var(--snx-ai-deep)}
.sk-cand.is-current .sk-thumb{box-shadow:0 0 0 3px var(--snx-paper),0 0 0 5px var(--snx-signal)}
.sk-cand:hover .sk-thumb{opacity:1;filter:none}
.sk-cand:focus-visible{outline:none}
.sk-cand:focus-visible .sk-thumb{box-shadow:0 0 0 3px var(--snx-paper),0 0 0 5px var(--snx-signal)}
.sk-key{display:flex;gap:14px 16px;flex-wrap:wrap;font-family:var(--snx-mono);font-size:10px;letter-spacing:.06em;color:var(--snx-ink-60);margin-top:10px}
.sk-key span{display:inline-flex;align-items:center;gap:6px}
.sk-key i{width:14px;height:14px;display:inline-block;border:1px solid var(--snx-ink-18);background:var(--snx-chalk)}

/* ---------- the desk ---------- */
.sk-desk{margin-top:14px}
.sk-desk::after{
  content:attr(data-day) ' · #' attr(data-rank) ' · ' attr(data-verdict);
  position:absolute;left:5px;top:4px;z-index:8;pointer-events:none;
  font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--snx-ink-60);
  background:rgba(251,250,241,.88);padding:2px 5px;white-space:nowrap;
}
.sk-desk[data-verdict=veto]::after{color:var(--snx-ai-deep)}
.sk-gridlines{display:none}
.reveal .sk-gridlines{display:block}
/* the critique: a bar per critic, drawn from --v */
.sk-crit td:nth-child(2){white-space:nowrap;font-family:var(--snx-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.sk-crit .bar{display:inline-block;width:72px;height:8px;background:var(--snx-paper-dim);vertical-align:middle;margin-right:8px;position:relative}
.sk-crit .bar::after{content:'';position:absolute;inset:0;width:calc(var(--v,0)*100%);background:var(--snx-navy)}
.sk-crit tr[data-pass=no] .bar::after{background:var(--snx-ink-40)}
.sk-crit tr[data-veto] .bar::after{background:var(--snx-signal)}
.sk-crit tr[data-veto] td:first-child{color:var(--snx-ai-deep)}
.sk-crit tr.total td{border-top:2px solid var(--snx-ink);font-weight:600}
.sk-crit tr.total td:first-child{color:var(--snx-ink)}

/* ---------- the tune ---------- */
.sk-tune{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:14px}
@media (max-width:639px){.sk-tune{grid-template-columns:1fr}}
.sk-tune figure{margin:0;min-width:0}
.sk-tune figcaption{font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.06em;color:var(--snx-ink-60);margin-top:8px}
.sk-tune figcaption b{color:var(--snx-ink);font-weight:600}
.sk-tune .snx-stage::after{content:attr(data-score);position:absolute;right:5px;top:4px;z-index:8;pointer-events:none;font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;color:var(--snx-ink-60);background:rgba(251,250,241,.88);padding:2px 5px;white-space:nowrap}
.sk-tune .snx-stage[data-genes]::after{content:attr(data-score) ' · ' attr(data-genes)}
/* the human's chair: the third seat, empty */
.sk-chair{border:2px dashed var(--snx-ai);background:transparent;padding:18px 22px;margin-top:14px;font-size:15px;max-width:72ch}
.sk-chair b{font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--snx-ai-deep);display:block;margin-bottom:6px}

/* ---------- editions & rejects ---------- */
.sk-ed td[data-v=kept]{color:var(--snx-ink);font-weight:600}
.sk-ed td[data-v=veto]{color:var(--snx-ink-40)}
.sk-ed td small{font-family:var(--snx-mono);font-size:10px;letter-spacing:.06em;color:var(--snx-ink-60);font-weight:400}
.sk-ed tr.best td{background:var(--snx-butter)}
.sk-rej td:last-child a{font-family:var(--snx-mono);font-size:12px;text-decoration:none;margin-right:2px}
.sk-rej td:last-child a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.sk-gen{transition:none}}