/* The guided flow. Tokens come from studio.css; this only adds the walk.
   🔑 ONE COLUMN, ONE QUESTION. The editor is a control panel because editing is
   fiddly; this is the opposite — at any moment there is exactly one thing being
   asked, and everything else is either behind you on the rail or not yet due. */

/* 🔴 THE STATUS BAR MUST NOT FLOAT OVER THE CARDS. This was
   `body.guide{overflow:auto}`, which overrode studio.css's `overflow:hidden`
   and made the whole BODY the scroller. A `position:sticky;bottom:0` footer in
   a scrolling body hovers at the viewport bottom the entire time you scroll,
   sitting on top of whatever content is under it — "waiting for you" covering
   the middle row of cards.
   ⚠️ Padding on `main` does NOT fix this: it only reserves space at the END of
   the document, so it clears the bar when you are scrolled to the bottom and
   does nothing at all mid-scroll. That was my first attempt and it was wrong.
   The fix is structural — body stays a flex column that does not scroll, MAIN
   scrolls, and the footer is an ordinary row that nothing can hide behind. */
body.guide{overflow:hidden}

/* ── the rail ─────────────────────────────────────────────────────────────
   Each stop shows its own fill, so a long stage reads as MOVING rather than
   stuck. That is the whole point: the complaint being designed against is
   "am I waiting for something, or has it died?" */
.rail{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rail .stop{display:flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:20px;border:1px solid var(--line);background:var(--panel2);
  font-size:11.5px;color:var(--ink3);position:relative;overflow:hidden;
  white-space:nowrap}
.rail .stop b{font-weight:600}
.rail .stop.done{color:var(--ink2);border-color:var(--accent-dim)}
.rail .stop.done::before{content:"✓";color:var(--ok);font-size:11px}
.rail .stop.now{color:var(--ink);border-color:var(--accent);
  background:var(--accent-dim)}
/* the fill is a real element, not a background animation, so a stalled stage
   visibly stops moving instead of looping forever */
.rail .stop .fill{position:absolute;inset:0 auto 0 0;width:0;
  background:var(--accent);opacity:.20;transition:width .4s linear}
.rail .stop.now .fill{animation:none}
.rail .stop .lbl{position:relative}

/* ── stage body ───────────────────────────────────────────────────────── */
/* 🔴 MUST RESET `display`. studio.css styles the bare `main` element as the
   EDITOR's three-column grid (300px 1fr 268px), so this page inherited it and
   every stage rendered inside the 300px tools column — the card grid collapsed
   to one narrow strip. Reusing another page's stylesheet means inheriting its
   element selectors too. */
.guidemain{display:block;max-width:1080px;margin:0 auto;width:100%;
  /* the scroll container — see the note on `body.guide` above */
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 20px 44px}
.stagebox h2{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.stagebox .lede{color:var(--ink2);margin:0 0 18px;max-width:64ch}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:8px 14px;font:inherit;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#08131b;
  font-weight:600}
.btn.ghost{background:transparent;color:var(--ink2)}
.btn:disabled{opacity:.45;cursor:default}
input[type=text],textarea{background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;font:inherit;
  width:100%}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent)}
label.fld{display:block;margin:0 0 12px}
label.fld span{display:block;font-size:12px;color:var(--ink2);margin:0 0 5px}

/* ── working state ────────────────────────────────────────────────────────
   A spinner says "something is happening"; this says WHAT is happening, how
   long it has been, and roughly how long it should take. */
.working{display:flex;flex-direction:column;gap:12px;padding:22px 0}
.workbar{height:6px;border-radius:4px;background:var(--panel2);overflow:hidden}
.workbar i{display:block;height:100%;background:var(--accent);width:0;
  transition:width .5s ease}
.worklog{font-size:12.5px;color:var(--ink2);min-height:1.4em}
.worklog .tick{color:var(--ink3)}
.overdue{color:var(--warn)}

/* ── option grids ─────────────────────────────────────────────────────── */
.opts{display:grid;gap:11px;margin:4px 0 18px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.opt{text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:12px;cursor:pointer;color:var(--ink);font:inherit;
  display:flex;flex-direction:column;gap:6px}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--accent-dim)}
.opt .t{font-weight:600}
.opt .w{color:var(--ink2);font-size:12px;line-height:1.45}
.opt .tags{display:flex;gap:4px;flex-wrap:wrap}
.opt .tag{font-size:10.5px;color:var(--ink3);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px}

/* cards carry their official art, because choosing by name is choosing blind */
.cards{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  color:var(--ink);font:inherit;text-align:left;padding:0}
.card:hover{border-color:var(--accent)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* 🔑 THE WHOLE CARD, UNCROPPED. This was the art crop at 626/457 with
   `object-fit:cover`; a real Magic card is 488/680, and `cover` cut the title
   and the text box straight off — the two things you are choosing on. */
.card img{width:100%;display:block;aspect-ratio:488/680;object-fit:contain;
  background:#0b0d10}
.card .body{padding:9px 11px;display:flex;flex-direction:column;gap:5px}
.card .nm{font-weight:600;font-size:13px}
.card .cost{color:var(--ink2);font-size:11.5px;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}
.card .cost .tl{flex:1 1 100%}

/* mana pips: the colours are the card's own, not the page's, so they hold on
   either theme */
.mana{display:inline-flex;gap:2px}
.mana .pip{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;font-size:10px;font-weight:700;
  font-style:normal;line-height:1;box-shadow:0 0 0 1px #0006 inset}

/* the printed rules text — what actually makes one card fit and another not */
.card .oracle{font-size:11.5px;line-height:1.5;color:var(--ink2);
  border-top:1px solid var(--line);padding-top:6px;margin-top:1px}
.card .oracle p{margin:0 0 4px}
.card .oracle p:last-child{margin-bottom:0}
.card .pt{font-size:11.5px;color:var(--ink);font-weight:600;
  align-self:flex-end;font-variant-numeric:tabular-nums}
.card .why{color:var(--ink2);font-size:12px;line-height:1.45}
/* A factual match is visibly not the model's prose reason. */
.card .why.matched{color:var(--ink3);font-style:italic}

/* the raw art pile — no scores, because nothing has judged them */
.pile{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pile figure{margin:0;position:relative;border:1px solid var(--line);
  border-radius:7px;overflow:hidden;cursor:pointer;background:var(--panel2)}
.pile figure:hover{border-color:var(--accent)}
.pile figure.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pile img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.pile figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;
  font-size:10.5px;color:var(--ink2);background:#0b0d10cc}

/* frames: the picture IS the label */
.frames{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.frames figure{margin:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;cursor:pointer;background:var(--panel2)}
.frames figure:hover{border-color:var(--accent)}
.frames figure.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.frames img{width:100%;display:block;aspect-ratio:5/7;object-fit:contain;
  background:#e9e9ec}
.frames figcaption{padding:5px 7px;font-size:11.5px}
.frames .fnote{color:var(--ink3);font-size:10.5px;display:block}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.filters button{background:transparent;border:1px solid var(--line);
  color:var(--ink2);border-radius:20px;padding:3px 10px;font:inherit;
  font-size:11.5px;cursor:pointer}
.filters button.on{border-color:var(--accent);color:var(--ink);
  background:var(--accent-dim)}

/* ── guidance ─────────────────────────────────────────────────────────────
   Open the first time a step is met, closed after. Guidance that cannot be
   dismissed becomes noise on the second run. */
.help{margin:0 0 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);overflow:hidden}
.help summary{cursor:pointer;padding:9px 13px;font-size:12.5px;
  color:var(--accent);user-select:none}
.help summary::marker{color:var(--ink3)}
.helpbody{padding:0 13px 12px;max-width:70ch}
.helpbody p{margin:0 0 8px;font-size:12.5px;color:var(--ink2);line-height:1.55}
.helpbody .hwhat{color:var(--ink);font-weight:600}
.helpbody .hwrong{color:var(--ink3)}

/* ── failure ──────────────────────────────────────────────────────────── */
.failbox{border:1px solid var(--bad);border-radius:10px;padding:18px 20px;
  background:#1b1416}
.failbox h2{margin:0 0 6px;font-size:17px;color:var(--bad)}

/* An ordinary flex row now, not sticky: it cannot cover anything, so it needs
   no z-index and the content needs no reserved gutter. */
.statusbar{flex:0 0 auto;display:flex;gap:10px;align-items:center;
  padding:7px 14px;background:var(--panel);border-top:1px solid var(--line)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

@media (prefers-reduced-motion:reduce){
  .workbar i,.rail .stop .fill{transition:none}
}

/* ── the build strip ───────────────────────────────────────────────────────
   The build is minutes long. Every intermediate picture is made anyway, so
   showing each as it lands turns a blank wait into something to watch — and
   makes a stall obvious, because you can see exactly which step it stopped
   at rather than guessing from a bar. */
.shots{display:grid;gap:10px;margin:18px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.shots figure{margin:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--panel2);display:flex;
  flex-direction:column}
.shots figure.pending{border-style:dashed;opacity:.55}
.shots img{width:100%;display:block;aspect-ratio:1;object-fit:contain;
  background:#0b0d10}
/* the placeholder keeps the slot the same size, so nothing jumps when the
   picture arrives */
.shotwait{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#12151a,#12151a 8px,
    #0e1116 8px,#0e1116 16px)}
.shotwait::after{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shots figcaption{padding:6px 8px;font-size:11.5px;color:var(--ink2);
  line-height:1.35}
.shots figure.got figcaption{color:var(--ink)}
.shotnote{font-size:12px;color:var(--ink3);margin:2px 0 0;max-width:62ch}

@media (prefers-reduced-motion:reduce){ .shotwait::after{animation:none} }

/* ── the finished card(s) ─────────────────────────────────────────────────
   A build you cannot see until you open another page is one you have to take
   on trust. Both halves of a transforming card are shown, because both were
   made and either can be wrong. */
.faces{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 20px}
.faces figure{margin:0;max-width:250px}
.faces img{width:100%;display:block;border-radius:9px;border:1px solid var(--line);
  background:#0b0d10;aspect-ratio:488/680;object-fit:contain}
.faces figcaption{margin-top:6px;font-size:12.5px;color:var(--ink2)}

/* printing details fold into the border step rather than taking a stop */
.help.printing .fld{margin-bottom:10px}
.help.printing select{background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;font:inherit;
  width:100%}
.help.printing small.hint{display:block;margin-top:4px;color:var(--ink3);
  font-size:11.5px}