/* Card Studio — dark working UI. The card is the subject; chrome stays quiet. */
:root{
  --bg:#0F1114; --panel:#171A1F; --panel2:#1E222A; --line:#2A2F38;
  --ink:#E4E8EE; --ink2:#98A2B0; --ink3:#6B7684;
  --accent:#5FA8D3; --accent-dim:#1B2E3C;
  --ok:#6FBF87; --warn:#D9A441; --bad:#D97A6C;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
  font:13.5px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:14px;margin:0;font-weight:650;letter-spacing:.02em}
.spacer{flex:1}
.hint{color:var(--ink3);font-size:11.5px}

.bar{display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.gpu{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.gpu .dot{width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.gpu.held .dot{background:var(--ok)} .gpu.busy .dot{background:var(--warn)}

/* ---- staged modes ----
   Three headspaces, one at a time. The tab strip is the only place the current
   stage is stated, so it is sized to be read at a glance rather than hunted. */
.modes{display:flex;gap:0;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;background:#0F1216}
.modes .mode{border:0;border-radius:0;background:none;padding:5px 13px;
  font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;
  border-right:1px solid var(--line)}
.modes .mode:last-child{border-right:0}
.modes .mode b{font-size:9.5px;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;background:var(--line);color:var(--ink2)}
.modes .mode:hover{color:var(--ink)}
.modes .mode.on{background:var(--accent-dim);color:var(--ink);font-weight:600}
.modes .mode.on b{background:var(--accent);color:#081016}
.pane{display:none}
.pane.on{display:block}
.lede{margin:0 0 10px;color:var(--ink2);font-size:12px;line-height:1.55}
button.wide{width:100%}

main{flex:1;display:grid;grid-template-columns:300px 1fr 268px;min-height:0}
.col{min-height:0;overflow:auto}
.tools{background:var(--panel);border-right:1px solid var(--line);padding:12px}
.layers{background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column}

details{border:1px solid var(--line);border-radius:6px;margin-bottom:8px;
  background:var(--panel2)}
summary{cursor:pointer;padding:8px 10px;font-weight:600;font-size:12.5px;
  user-select:none;letter-spacing:.01em}
details[open] summary{border-bottom:1px solid var(--line)}
details>*:not(summary){margin:8px 10px}

.fld{display:flex;flex-direction:column;gap:4px}
.fld>span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.fld.tiny{max-width:88px}
input,select,textarea{background:#12151A;color:var(--ink);
  border:1px solid var(--line);border-radius:5px;padding:6px 8px;
  font:inherit;font-size:12.5px;width:100%}
textarea{resize:vertical}
input[type=file]{padding:5px;font-size:11.5px;color:var(--ink2)}
input[type=range]{padding:0}
.row{display:flex;gap:6px;align-items:flex-end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);
  white-space:nowrap}
.chk input{width:auto}

button{font:inherit;cursor:pointer;border-radius:5px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink2);padding:6px 10px;font-size:12px}
button:hover{color:var(--ink);border-color:var(--accent)}
button.primary{background:var(--accent);color:#081016;border:0;font-weight:650}
button.go{background:var(--accent-dim);border-color:var(--accent);color:var(--ink);
  white-space:nowrap}
button.mini{font-size:11.5px;padding:4px 8px}
button.danger:hover{border-color:var(--bad);color:var(--bad)}
button:disabled{opacity:.45;cursor:default}
a.mini{text-decoration:none;display:inline-block}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- stage ---- */
.stage{display:flex;flex-direction:column;background:#0A0C0F}
.stagewrap{flex:1;display:grid;place-items:center;padding:14px;min-height:0}
.canvas{position:relative;aspect-ratio:2010/2814;height:100%;max-height:100%;
  background:#15181D;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;box-shadow:0 12px 40px #0008}
.canvas .lyr{position:absolute;transform-origin:center center;
  user-select:none;-webkit-user-drag:none}
.canvas .lyr.sel{outline:1.5px dashed var(--accent);outline-offset:1px}
/* Which of several selected layers the properties panel is editing. */
.canvas .lyr.anchor{outline-style:solid}
.canvas .lyr.drag{cursor:grabbing}
.handle{position:absolute;width:14px;height:14px;background:var(--accent);
  border:2px solid #081016;border-radius:3px;z-index:999;touch-action:none}
.handle.h-nw{cursor:nwse-resize} .handle.h-se{cursor:nwse-resize}
.handle.h-ne{cursor:nesw-resize} .handle.h-sw{cursor:nesw-resize}
/* Pinned to the edge because the real corner is off the card -- hollow, so it
   never reads as the actual corner position. */
.handle.off{background:#0B0E12;border-color:var(--accent);
  box-shadow:0 0 0 1px #081016}
/* Live size while dragging. Percentages alone do not answer "am I upscaling
   this?", so the rendered pixel size sits underneath them. */
.dims{position:absolute;z-index:1000;transform:translate(-50%,-118%);
  background:#0B0E12ee;border:1px solid var(--accent);border-radius:6px;
  padding:3px 8px;font:600 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);pointer-events:none;text-align:center;white-space:nowrap}
.dims b{display:block;font-weight:500;color:var(--ink3);font-size:10px}
.guides{position:absolute;inset:0;pointer-events:none}
.guides .band{position:absolute;left:0;right:0;background:rgba(95,168,211,.13);
  border-top:1px solid rgba(95,168,211,.4);border-bottom:1px solid rgba(95,168,211,.4)}
.stagebar{display:flex;align-items:center;gap:10px;padding:6px 14px;
  border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto}

/* ---- layer list ---- */
.lhead{display:flex;align-items:baseline;gap:8px;padding:9px 10px;
  border-bottom:1px solid var(--line)}
.llist{list-style:none;margin:0;padding:6px;overflow:auto;flex:1;min-height:60px}
.llist li{display:flex;align-items:center;gap:7px;padding:5px 6px;
  border:1px solid transparent;border-radius:5px;cursor:pointer;font-size:12px}
.llist li:hover{background:var(--panel2)}
.llist li.sel{background:var(--accent-dim);border-color:var(--accent)}
.llist li img{width:30px;height:42px;object-fit:cover;border-radius:3px;
  background:#0c0e11;border:1px solid var(--line);flex:0 0 auto}
.llist li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.llist li .eye{opacity:.75;font-size:12px;padding:2px 4px;border-radius:4px}
.llist li .eye.off{opacity:.28}
.llist li .pin{font-size:9.5px;color:var(--ink3);letter-spacing:.06em}
.elgrid{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.lprops{border-top:1px solid var(--line);padding:9px;display:flex;
  flex-direction:column;gap:7px}

/* 🔴 A CLASS SELECTOR BEATS [hidden]. `.result{display:grid}` overrode the UA
   stylesheet's `[hidden]{display:none}`, so the render overlay sat permanently
   on top of the app -- it looked like the studio was stuck in an empty popup.
   Same trap for .lprops. This must stay ABOVE those rules. */
[hidden]{display:none!important}

/* ---- cut-parts viewer ---- */
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(560px,94vw);z-index:55;
  background:var(--panel);border-left:1px solid var(--line);padding:12px;
  overflow:auto;display:flex;flex-direction:column;gap:10px;
  box-shadow:-16px 0 40px #0009}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px}
.acell{background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.acell:hover{border-color:var(--accent)}
.acell .thumb{aspect-ratio:2010/2814;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.acell .thumb.check{background-color:#c9c9ce;
  background-image:linear-gradient(45deg,#aeaeb4 25%,transparent 25%,transparent 75%,#aeaeb4 75%),
    linear-gradient(45deg,#aeaeb4 25%,transparent 25%,transparent 75%,#aeaeb4 75%);
  background-size:100% 100%,18px 18px,18px 18px;
  background-position:center,0 0,9px 9px}
.acell .cap{padding:4px 6px;font-size:10.5px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- global queue bar ---- */
.qbar{position:relative;min-width:230px;height:22px;padding:0 9px;
  border:1px solid var(--line);border-radius:11px;background:#0F1216;
  overflow:hidden;display:flex;align-items:center;cursor:pointer}
.qbar #qFill{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width .5s ease}
.qbar b{position:relative;font:600 11px/1 ui-sans-serif,system-ui;
  color:var(--ink);letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.qbar.busy{border-color:var(--accent)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.qlist li{display:flex;align-items:baseline;gap:7px;padding:5px 7px;
  border-radius:5px;background:var(--panel2);font-size:12px}
.qlist li.done .qs{color:var(--ok)}
.qlist li.running{border:1px solid var(--accent)}
.qlist li.running .qs{color:var(--accent)}
.qlist li.error .qs{color:var(--bad)}
.qlist .qs{width:12px}
.qlist .hint{margin-left:auto;text-align:right;max-width:52%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A row you can get back into. The affordance is spelled out rather than
   implied, because "live run" and "finished card" land you in two different
   places and guessing which is not the user's job. */
.qlist li.openable{cursor:pointer}
.qlist li.openable:hover{background:var(--accent-dim);
  outline:1px solid var(--accent)}
.qlist li .go{flex:0 0 auto;margin-left:8px;font-size:10.5px;color:var(--ink3);
  white-space:nowrap}
.qlist li.openable:hover .go{color:var(--accent)}
.qlist li.waiting{border:1px solid var(--warn)}
.qlist li.waiting .qs,.qlist li.waiting .go{color:var(--warn)}

/* ---- conjure ---- */
.cjlog{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink3);background:#0F1216;border:1px solid var(--line);
  border-radius:5px;padding:6px 8px;max-height:120px;overflow:auto;
  white-space:pre-wrap;word-break:break-word;margin:0}
.acell .cap.dim{color:var(--ink3);padding-top:0}

/* The working stage. The agent runs for minutes, so it gets the whole window
   rather than a line in the sidebar -- otherwise there is no way to tell
   progress from a hang. */
.cjstage{position:fixed;inset:0;z-index:75;background:#080A0Ceb;
  display:grid;place-items:center;padding:20px}
.cjstage-in{width:min(1080px,96vw);max-height:94vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 30px 90px #000b}
.cjhead{display:flex;align-items:flex-start;gap:10px}
.cjstage h2{margin:0;font-size:19px;font-weight:650;letter-spacing:.01em}
.cjdetail{margin:3px 0 0;color:var(--ink2);font-size:13px}
.cjdetail.bad{color:var(--bad)}

.cjbar{height:7px;border-radius:4px;background:#0E1116;overflow:hidden;
  border:1px solid var(--line)}
.cjbar span{display:block;height:100%;width:2%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--ok));
  transition:width .45s ease}

.cjsteps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;
  margin:0;padding:0;font-size:11.5px;color:var(--ink3)}
.cjsteps li{display:flex;align-items:center;gap:5px}
.cjsteps li::before{content:"○";font-size:10px}
.cjsteps li.done{color:var(--ok)} .cjsteps li.done::before{content:"●"}
.cjsteps li.now{color:var(--accent);font-weight:600}
.cjsteps li.now::before{content:"◉"}

.cjcard{border:1px solid var(--line);border-radius:7px;padding:8px 10px;
  background:var(--panel2);display:flex;flex-direction:column;gap:2px}
.cjcard strong{font-size:14px}
.cjcard p{margin:2px 0 0}

/* Raw artwork, shown as found. No matte and no checkerboard here -- these are
   pictures to look at, not cut-outs. */
.cjgrid{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.cjcell{margin:0;background:#0D1014;border:1px solid var(--line);
  border-radius:7px;overflow:hidden;display:flex;flex-direction:column}
.cjcell img,.cjcell .ph{width:100%;height:186px;object-fit:contain;
  background:#0A0C0F;display:block}
.cjcell figcaption{padding:4px 6px;font-size:10.5px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cjcell figcaption b{color:var(--ink2)}
.cjcell.pick{cursor:pointer}
.cjcell.pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.cjcell{transition:transform .12s ease,border-color .12s ease}
.cjcell.chosen{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
/* Once a pick is in, the rest of the grid steps back so the choice is
   unmistakable — the old styling was a 2px inset outline that the next redraw
   threw away, which read as "the click did nothing". */
.cjcell{position:relative}
.cjcell .tick{position:absolute;left:6px;top:6px;z-index:2;
  background:var(--ok);color:#06140A;font-size:10px;font-weight:700;
  letter-spacing:.04em;border-radius:4px;padding:2px 7px}
.cjgrid.picked .cjcell{opacity:.4}
.cjgrid.picked .cjcell.chosen{opacity:1;transform:none}
.cjgrid.picked .cjcell.pick:hover{transform:none}
@media (prefers-reduced-motion:reduce){.cjcell,.cjbar span{transition:none}}

/* ---- draw to split ---- */
/* Sits above every layer and takes all the pointer events while active, so a
   stroke can never be misread as dragging the layer underneath. */
.paint{position:absolute;inset:0;width:100%;height:100%;z-index:900;
  cursor:crosshair;touch-action:none}
.stagebar.draw{background:var(--accent-dim);border-top:1px solid var(--accent)}
.stagebar.draw .dl{font-size:12px;color:var(--ink)}
.stagebar.draw .fld{flex-direction:row;align-items:center;gap:6px;max-width:none}
.stagebar.draw .fld>span{white-space:nowrap}
.stagebar.draw input[type=range]{width:110px}
button.on{background:var(--accent);color:#081016;border-color:var(--accent)}

/* ---- hover preview + solo ---- */
/* Hovering a row dims every OTHER layer, so a row of near-identical cut-outs
   resolves instantly. Transition only opacity -- animating filter on a dozen
   full-card PNGs drops frames. */
.canvas .lyr{transition:opacity .12s ease}
.canvas .lyr.dim{opacity:.18!important}
.canvas .lyr.hov{outline:2px solid var(--ok);outline-offset:1px}
.badge{font-size:10px;letter-spacing:.1em;font-weight:700;color:#081016;
  background:var(--warn);border-radius:3px;padding:2px 6px}
.peek{position:fixed;right:272px;z-index:70;width:210px;pointer-events:none;
  background:var(--panel);border:1px solid var(--accent);border-radius:8px;
  padding:6px;box-shadow:0 14px 40px #000a;display:flex;
  flex-direction:column;gap:4px}
.peek img{width:100%;aspect-ratio:2010/2814;object-fit:contain;border-radius:4px;
  background-color:#c9c9ce;
  background-image:linear-gradient(45deg,#aeaeb4 25%,transparent 25%,transparent 75%,#aeaeb4 75%),
    linear-gradient(45deg,#aeaeb4 25%,transparent 25%,transparent 75%,#aeaeb4 75%);
  background-size:18px 18px;background-position:0 0,9px 9px}
.peek b{font-size:11px;color:var(--ink2);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- drag to reorder ---- */
.llist li .grip{color:var(--ink3);font-size:11px;cursor:grab;letter-spacing:-2px}
.llist li .lock{font-size:10px;opacity:.7}
.llist li.dragging{opacity:.4}
.llist li.solo{box-shadow:inset 2px 0 0 var(--warn)}
.llist li img.furn{object-fit:contain;background:#0c0e11}
/* The insertion line, drawn on the row you would land above or below. */
.llist li.over-a{box-shadow:0 -2px 0 var(--accent)}
.llist li.over-b{box-shadow:0 2px 0 var(--accent)}

/* ---- the stock seam ---- */
.guides .seam{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed rgba(217,164,65,.85)}
.guides .seam span{position:absolute;right:4px;top:2px;font-size:9px;
  letter-spacing:.08em;color:rgba(217,164,65,.9);text-transform:uppercase}

/* ---- right-click menu ---- */
.ctx{position:fixed;z-index:80;min-width:206px;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  box-shadow:0 18px 44px #000b;display:flex;flex-direction:column}
.ctx button{border:0;background:none;text-align:left;padding:6px 9px;
  border-radius:4px;font-size:12px;color:var(--ink2)}
.ctx button:hover{background:var(--accent-dim);color:var(--ink)}
.ctx button.danger:hover{background:#3A1F1C;color:var(--bad)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 2px}

/* ---- result ---- */
.result{position:fixed;inset:0;background:#000c;display:grid;place-items:center;
  z-index:60;padding:20px}
.result-in{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:12px;max-height:94vh;display:flex;flex-direction:column;gap:8px}
.result img{max-height:82vh;max-width:88vw;border-radius:5px}

/* ---- multi-selection ---- */
.llist li.sel:not(.anchor){background:#16242E;border-color:#33566B}
#mprops strong{font-size:12.5px}

/* ---- the web image picker ---- */
/* ⚠️ `input,select,textarea{width:100%}` is right in a stacked sidebar and
   wrong in a toolbar row: the count dropdown claimed the whole bar and
   squeezed the phrase box -- the one control this panel exists for -- down to
   a sliver. Sized explicitly here rather than by weakening the global rule. */
.pickbar{align-items:center}
.pickbar .grow{flex:1 1 auto;min-width:0}
.pickbar select{width:auto;flex:0 0 auto}
.pickbar button{flex:0 0 auto}
.cjcell.raw figcaption b{color:var(--ink3);font-weight:500}
.cjcell.bad{border-color:var(--bad);opacity:.5}
.cjtoolbar{display:flex;align-items:center;gap:10px}
.cjtoolbar p{margin:0}

/* ---- edit asset ---- */
.editwrap{display:grid;grid-template-columns:1fr 250px;gap:14px;min-height:0}
.editstage{position:relative;background:#0A0C0F;border:1px solid var(--line);
  border-radius:8px;display:grid;place-items:center;overflow:hidden;
  min-height:40vh;max-height:64vh;touch-action:none;cursor:crosshair}
.editimgwrap{position:relative;display:inline-block;line-height:0}
.editstage img{max-width:100%;max-height:64vh;display:block;
  -webkit-user-drag:none;user-select:none}
/* The crop box is positioned against the IMAGE, not the stage, or a letterboxed
   picture puts the box somewhere the crop will not happen. */
.cropbox{position:absolute;border:1.5px solid var(--accent);
  box-shadow:0 0 0 9999px #080A0Ca8;pointer-events:none}
.cropbox i{position:absolute;width:11px;height:11px;background:var(--accent);
  border:2px solid #081016;border-radius:2px;pointer-events:auto}
.cropbox i[data-h=nw]{left:-6px;top:-6px;cursor:nwse-resize}
.cropbox i[data-h=ne]{right:-6px;top:-6px;cursor:nesw-resize}
.cropbox i[data-h=sw]{left:-6px;bottom:-6px;cursor:nesw-resize}
.cropbox i[data-h=se]{right:-6px;bottom:-6px;cursor:nwse-resize}
.editside{display:flex;flex-direction:column;gap:8px;overflow:auto}
.editside hr{border:0;border-top:1px solid var(--line);width:100%;margin:2px 0}
.editside p{margin:0}

/* ---- frame picker ---- */
.fgrid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.fcell{margin:0;background:#0D1014;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;cursor:pointer;display:flex;
  flex-direction:column;transition:border-color .12s ease,transform .12s ease}
.fcell:hover{border-color:var(--accent);transform:translateY(-2px)}
.fcell.on{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
.fcell img{width:100%;aspect-ratio:2010/2814;object-fit:contain;display:block;
  background:#3A3E46}
.fcell figcaption{padding:6px 8px;display:flex;flex-direction:column;gap:1px}
.fcell figcaption b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fcell .hint{font-size:10px;letter-spacing:.06em}

/* ---- choosing the real card ----
   Wider cells than the art grid on purpose: the rules text and the reason are
   what the choice is actually made on, so they get room to be read rather than
   truncated into a caption. */
.cardgrid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cardcell{margin:0;background:#0D1014;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;display:flex;flex-direction:column;
  position:relative;transition:border-color .12s ease,transform .12s ease}
.cardcell.pick{cursor:pointer}
.cardcell.pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.cardcell.chosen{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
.cardcell img,.cardcell .ph{width:100%;height:132px;object-fit:cover;
  display:block;background:#0A0C0F}
.cardcell .tick{position:absolute;left:6px;top:6px;z-index:2;
  background:var(--ok);color:#06140A;font-size:10px;font-weight:700;
  letter-spacing:.04em;border-radius:4px;padding:2px 7px}
.cardcell figcaption{padding:7px 9px;display:flex;flex-direction:column;gap:3px}
.cardcell figcaption b{font-size:13px}
.cardcell .cost{font-size:11px;color:var(--ink2)}
.cardcell .tl{font-size:11px;color:var(--ink2)}
.cardcell .rules{font-size:11px;color:var(--ink3);line-height:1.45}
.cardcell .why{font-size:11.5px;color:var(--accent);font-style:normal;
  border-top:1px solid var(--line);padding-top:5px;margin-top:2px;
  line-height:1.45}
.cardgrid.picked .cardcell{opacity:.4}
.cardgrid.picked .cardcell.chosen{opacity:1}

/* ---- live runs: the way back in after a reload ---- */
.chip{border-radius:11px;padding:3px 11px;font-size:11.5px;
  border-color:var(--accent);color:var(--ink);background:var(--accent-dim);
  white-space:nowrap}
.chip.waiting{background:var(--warn);color:#160F02;border-color:var(--warn);
  font-weight:650}
.cjruns{display:flex;flex-wrap:wrap;gap:6px}
.runpill{display:flex;align-items:baseline;gap:6px;border-radius:6px;
  padding:4px 9px;font-size:11.5px;background:#0F1216}
.runpill em{font-style:normal;color:var(--ink3);font-size:10.5px}
.runpill.on{border-color:var(--accent);background:var(--accent-dim);
  color:var(--ink)}
.runpill.waiting{border-color:var(--warn)}
.runpill.waiting em{color:var(--warn)}
.runpill.queued{opacity:.65}

/* ---- what the model said about one picture ---- */
.vpeek{position:fixed;z-index:90;width:262px;pointer-events:none;
  background:var(--panel);border:1px solid var(--accent);border-radius:8px;
  padding:9px 11px;box-shadow:0 16px 44px #000b;
  display:flex;flex-direction:column;gap:6px}
.vpeek .vhead{display:flex;align-items:baseline;gap:8px}
.vpeek .vhead b{font-size:17px;font-weight:700;color:var(--ink)}
.vpeek .vhead b.unjudged{font-size:12px;font-weight:600;color:var(--ink3);
  letter-spacing:.04em;text-transform:uppercase}
.vpeek .vhead span{margin-left:auto;font-variant-numeric:tabular-nums}
.vpeek dl{margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:2px 10px;font-size:11.5px}
.vpeek dt{color:var(--ink3)}
.vpeek dd{margin:0;color:var(--ink2);text-align:right}
.vpeek p{margin:0;font-size:11.5px;color:var(--ink2);line-height:1.45;
  border-top:1px solid var(--line);padding-top:6px}
.vpeek p:empty{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── frame tag filter ──────────────────────────────────────────────────────
   The catalogue is 42 families now that the editor and the guided flow share
   one source. Same tag vocabulary in both, so a word that narrows the list in
   one narrows it the same way in the other. */
.ftags{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 12px}
.ftags 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}
.ftags button:hover{border-color:var(--accent)}
.ftags button.on{border-color:var(--accent);color:var(--ink);
  background:var(--accent-dim)}
/* what the border LOOKS like — the actual basis for choosing one */
.fcell .fnote{display:block;font-size:10.5px;color:var(--ink3);
  line-height:1.35;margin:2px 0}