/* The scroll editor's stylesheet, lifted verbatim from index.html (which still
   carries its own inline copy) so the weapon editor shares the same bench.
   Palette: DESIGN.md. */
:root{
  /* Declared dark: excludes the page from Chromium auto-dark / extension
     re-styling (the boxed light selects some players saw), and renders
     native widgetry -- dropdown popups, scrollbars -- dark. */
  color-scheme:dark;

  /* Aizome. The chrome is dyed indigo -- frames, rules and bars are the deep
     dips, the accent is asagi, the pale blue-GREEN a light indigo dip really
     gives, which keeps it a different hue from --value's azure (that one is
     game vocabulary and untouchable). Gold is gone from the chrome entirely;
     the only warmth left is washi text, the Nioh rarity tint, and the seal. */
  --void:#0e0e13; --panel:#0a0a0e; --bar:#0e1118; --frame:#3d5670; --inner:#232c3d;
  --rule:#1a2130; --rule-soft:#161c28; --hair:#2f3c52; --field:#12121a; --field-bd:#2b3549;
  --accent:#79b4bb; --accent-hi:#96ccd2;
  /* --accent-dim carries every section label, every hint and the feasibility
     line: 6.9:1 on the panel, still subordinate to --accent at 8.5:1.
     --accent-line is for RULES only, never for text. */
  --accent-dim:#74a0a8; --accent-line:#3a5a60;
  /* The seal. Writing the scroll is stamping it, so the one warm block on the
     page is the Write button in shuniku red. Hover presses DARKER, the way a
     stamp presses, and never lighter -- white text clears 4.5:1 everywhere. */
  --seal:#c2452e; --seal-deep:#96321e; --seal-ink:#fdf6ec;
  --text:#e8e0cc; --body:#c9c2ae; --mute:#8a8070;
  --faint:#8e8474;         /* was #6b6355 -- 3.3:1. now 5.3:1 */
  --dim:#3d4a60; --dimmer:#2b3549;
  --enlightened:#9ddb6a; --shogun:#d69ee0; --nioh:#e0c177;
  /* --warn is shu vermilion -- the shrine-gate red -- and it is the only red
     on the page: boss glyphs, hazard costs, The Crucible. 6.5:1 on the panel. */
  --value:#7fb3e8; --grace:#9ddb6a; --warn:#e5734f;
  /* One 4-unit scale. Before this there were nine distinct vertical paddings
     inside the mission block alone, none of them related to each other. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --pad:26px; --row:10px;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* Shippori Mincho: a Japanese book face whose Latin carries the same ink.
     The hue was never going to say Japan on its own -- the letterforms do. */
  --serif:'Shippori Mincho','Spectral',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--void)}
/* the faintest cold glow high on the page: night sky over the lacquer frame */
body{margin:0;color:var(--text);font-family:var(--serif);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1400px 500px at 50% -160px,#15151f,var(--void) 70%) fixed}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0c1013}
/* The page is a workbench, so it claims the window: the chrome takes what it
   needs and the bench takes the rest. It used to cap the working area at 26rem
   and scroll inside it while leaving 820px of empty page underneath. */
.wrap{max-width:86rem;margin:0 auto;padding:var(--s4) 24px var(--s5);
  min-height:100vh;display:flex;flex-direction:column}
.frame{background:var(--panel);border:1px solid var(--frame);padding:2px;
  flex:1;display:flex;flex-direction:column;min-height:0}
.frame > .in{border:1px solid var(--inner);flex:1;display:flex;flex-direction:column;
  min-height:0}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* ---- breadcrumb bar ---- */
/* seigaiha, barely: the wave tile sits a step above the bar ground, texture
   before it is ever read as pattern */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);border-bottom:1px solid var(--hair);flex-wrap:wrap;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23202c40' stroke-width='1'%3E%3Ccircle cx='0' cy='24' r='22'/%3E%3Ccircle cx='0' cy='24' r='15'/%3E%3Ccircle cx='0' cy='24' r='8'/%3E%3Ccircle cx='48' cy='24' r='22'/%3E%3Ccircle cx='48' cy='24' r='15'/%3E%3Ccircle cx='48' cy='24' r='8'/%3E%3Ccircle cx='24' cy='12' r='22'/%3E%3Ccircle cx='24' cy='12' r='15'/%3E%3Ccircle cx='24' cy='12' r='8'/%3E%3C/g%3E%3C/svg%3E") repeat var(--bar)}
.crumb{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:14px}
.crumb .up{color:var(--accent-dim)}
.crumb a.up:hover{color:var(--accent)}
.crumb .patch{color:var(--accent-dim);font-size:12px;letter-spacing:.02em;padding-left:8px;
  border-left:1px solid var(--accent-dim);cursor:help}
@media (max-width:640px){.crumb .patch{display:none}}
.loaded{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.loaded .lbl{font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.16em;text-transform:uppercase}
.loaded .fn{font-family:var(--mono);font-size:13px;color:var(--text)}
button{font-family:var(--mono);font-size:12px;background:transparent;color:var(--accent);
  border:1px solid var(--frame);padding:7px 12px;cursor:pointer;border-radius:0}
button:hover:not(:disabled){background:var(--accent);color:#0c1013}
button.go{font-size:13px;background:linear-gradient(to bottom,var(--seal),var(--seal-deep));
  color:var(--seal-ink);border-color:var(--seal-deep);
  padding:13px 24px;letter-spacing:.06em;text-transform:uppercase}
button.go:hover:not(:disabled){background:var(--seal-deep);color:var(--seal-ink)}
/* The moment of a successful write: the hanko comes down onto the button
   itself -- lands oversized, presses through (the button dips under it),
   overshoots a hair, holds as an impression, then lifts away. */
button.go{position:relative}
button.go.stamped{animation:stamp .5s cubic-bezier(.2,.7,.3,1)}
@keyframes stamp{0%,20%{transform:scale(1)}45%{transform:scale(.93)}100%{transform:scale(1)}}
button.go.stamped::after{content:"印" / "";position:absolute;left:50%;top:50%;
  width:50px;height:50px;margin:-25px 0 0 -25px;display:grid;place-items:center;
  pointer-events:none;z-index:5;border:3px solid var(--seal-ink);
  color:var(--seal-ink);font:600 32px/1 var(--serif);
  /* the rebound is authored in the keyframes (.92 -> 1.06 -> 1), so the
     easing itself stays a plain decel -- an elastic curve here would stack
     a second spring on the designed one */
  animation:hanko .5s cubic-bezier(.22,.9,.3,1) both,hankolift .45s ease-in 1.6s forwards}
@keyframes hanko{0%{opacity:0;transform:rotate(-8deg) scale(3)}
  45%{opacity:1;transform:rotate(-8deg) scale(.92)}
  70%{transform:rotate(-8deg) scale(1.06)}
  100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes hankolift{to{opacity:0;transform:rotate(-8deg) scale(1.25)}}
@media(prefers-reduced-motion:reduce){
  button.go.stamped{animation:none}
  button.go.stamped::after{content:none}   /* the toast's mark is the record */
}
button.go:disabled{background:none;color:var(--dim);border-color:var(--inner);cursor:not-allowed}

/* ---- drop ---- */
/* One action, so one strip. This was a 383px stage -- 32% of the viewport --
   for a file picker used once per session, while the work below it scrolled.
   The backup warning keeps its prominence: it leads the strip. */
.stage{border-bottom:1px solid var(--inner)}
/* Compact, but unmistakably a drop target: the dashed rule is the affordance
   everyone already reads, and the tray icon plus a real button say the two
   ways in. The strip was 383px as a box and 74px as a text bar -- neither
   said "drop here". */
.drop{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s1) var(--s4);
  align-items:center;margin:var(--s3) var(--pad);padding:var(--s3) var(--s4);
  cursor:pointer;background:#0d0d12;border:2px dashed var(--frame);
  transition:border-color .15s,background .15s}
.drop:hover{background:#14141b;border-color:var(--accent-dim)}
.drop.hot{background:#0f1a2a;border-color:var(--accent);border-style:solid}
.drop .tray{width:30px;height:30px;color:var(--accent-dim);grid-row:span 2}
.drop:hover .tray,.drop.hot .tray{color:var(--accent)}
.drop .lead{font-size:18px;color:var(--text)}
.drop .sub{grid-column:2;font-family:var(--sans);font-size:13px;color:var(--mute)}
.drop .warn{font-family:var(--sans);font-size:13px;font-weight:600;color:#f0b0a0;
  white-space:nowrap;text-align:right}
.drop .note{grid-column:3;font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.03em;white-space:nowrap;text-align:right}
/* the path must be breakable or it sets the whole grid's minimum width */
.drop .sub code{font-family:var(--mono);font-size:11px;color:var(--mute);
  word-break:break-all;user-select:all}
.drop .pick-btn{grid-row:span 2;pointer-events:none}
/* Four columns of nowrap text cannot fit a phone: stack to tray + text, and
   let the warning and the button take their own rows. */
@media(max-width:700px){
  .drop{grid-template-columns:auto 1fr}
  .drop .warn,.drop .note{grid-column:2;text-align:left;white-space:normal}
  .drop .pick-btn{grid-row:auto;grid-column:2;justify-self:start;pointer-events:none}
}

/* Dropping anywhere on the page works, so say so the moment a file is over it. */
.dropveil{position:fixed;inset:0;z-index:50;display:none;place-items:center;
  background:rgba(8,8,12,.88);backdrop-filter:blur(2px)}
.dropveil.on{display:grid}
.dropveil div{border:2px dashed var(--accent);padding:var(--s6) 48px;
  font-size:22px;color:var(--accent);background:#14141b;text-align:center}
.dropveil small{display:block;margin-top:var(--s2);font-family:var(--mono);
  font-size:12px;color:var(--accent-dim);letter-spacing:.08em}

/* ---- backup warning under the drop zone ---- */
.backup{max-width:34rem;margin:var(--s4) auto 0;padding:14px 18px;text-align:left;
  border:1px solid #4a2f28;background:#171014;color:#eaa294;
  font-family:var(--sans);font-size:14px;line-height:1.6}
.backup b{font-weight:600;color:#f0b0a0}
.savepath{max-width:34rem;margin:14px auto 0;text-align:left;
  font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.8}
.savepath span{display:block;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dim)}
.savepath code{color:var(--mute);word-break:break-all;user-select:all}

/* ---- two benches ----
   Split by TASK. The scroll's identity and the Write action lift out into a
   persistent bar; each bench then owns the whole canvas beneath it.

   THE RIGHT PANE NEVER SCROLLS. It holds the thing being built (the five
   slots) or the thing that was found (the mission), and the audit's worst
   finding was a panel titled "5 effect slots" showing none of them because
   reaching the mission controls had scrolled them away. The grid row is sized
   by the right pane; the left absorbs all the scrolling, because a catalogue
   of 50 effects is inherently long. Pure CSS: the left list is absolutely
   positioned, so it contributes nothing to its parent's natural height. */
.editor{display:flex;flex-direction:column;flex:1;min-height:0}

.scrollbar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s3) var(--pad);border-bottom:1px solid var(--hair);
  background:linear-gradient(to bottom,#121624,#0c0f16)}
.sb{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
.sb i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.14em;text-transform:uppercase}
.sb.grow{flex:1;min-width:0}
.sb #level{font-family:var(--serif);font-size:21px;color:var(--text);width:2.8em}
.sb #item{font-family:var(--serif);font-size:19px;color:var(--enlightened);
  max-width:100%;text-overflow:ellipsis}
.sb #rarity{font-family:var(--serif);font-size:18px;color:var(--accent)}
.pips{display:flex;gap:5px;align-items:center}
.pips s{width:9px;height:9px;display:block;text-decoration:none;
  border:1px solid var(--accent-line);transform:rotate(45deg)}
/* a filled slot is a small seal impression; the grace slot stays green */
.pips s.f{background:var(--seal);border-color:var(--seal)}
.pips s.g{background:var(--grace);border-color:var(--grace)}
.seedchip{font-family:var(--mono);font-size:12px;color:var(--accent-hi);
  border:1px solid var(--accent-line);padding:var(--s1) var(--s2)}

.tabs{display:flex;padding:0 var(--pad);border-bottom:1px solid var(--hair);background:var(--bar)}
.tabs button{border:0;border-bottom:2px solid transparent;background:none;
  padding:var(--s3) var(--s4);font-family:var(--mono);font-size:13px;color:var(--mute);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.tabs button:hover:not(:disabled){background:none;color:var(--accent)}
.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button em{font-style:normal;font-size:12px;color:var(--faint);
  margin-left:var(--s2);letter-spacing:0;text-transform:none}
.tabs button[aria-selected=true] em{color:var(--accent-dim)}

.pane{display:none}
.pane.on{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);
  align-items:stretch;flex:1;min-height:0}
.side{display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--inner)}
.listwrap{position:relative;flex:1;min-height:220px}
.listwrap > .list{position:absolute;inset:0;overflow:auto;border-top:0}
.critbody{padding:0 var(--pad) var(--s4);display:flex;flex-direction:column;
  gap:var(--s6)}
/* the criteria rows carry no marker, so their headings sit at the gutter */
.critbody .grp > .sect{--lead:0px}
.main{min-width:0;display:flex;flex-direction:column;min-height:0;position:relative}
/* The pane's empty reach carries the night parade instead of reading as dead
   space. The empty-alt syntax keeps it out of screen readers. */
.main::after{content:"百鬼夜行" / "";position:absolute;right:20px;bottom:16px;
  writing-mode:vertical-rl;font-family:var(--serif);font-size:46px;line-height:1;
  letter-spacing:.3em;color:rgba(121,180,187,.08);pointer-events:none;user-select:none}
.mainbody{padding:0 var(--pad) var(--s4);flex:1;min-height:0;overflow:auto;
  display:flex;flex-direction:column;gap:var(--s6)}
/* a group is its heading plus what the heading introduces: tight inside,
   generous outside, so proximity does the grouping instead of borders */
.grp{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:var(--s3) var(--pad);margin-top:auto;
  border-top:1px solid var(--hair);background:var(--bar);
  font-family:var(--mono);font-size:12px;color:var(--accent-dim)}

@media(max-width:1000px){
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), so one nowrap
     row inside the stacked column sets the page width past the phone */
  .pane.on{grid-template-columns:minmax(0,1fr)}
  .side{border-right:0;border-bottom:1px solid var(--inner)}
  .listwrap{position:static;min-height:0}
  .listwrap > .list{position:static;max-height:340px}
  .main::after{content:none}   /* stacked panes have no empty reach to fill */
}

/* centred label between rules */
.sect{display:flex;align-items:center;gap:16px}
.sect::before,.sect::after{content:"";flex:1;height:1px}
.sect::before{background:linear-gradient(to right,rgba(61,86,112,0),var(--frame))}
.sect::after{background:linear-gradient(to left,rgba(61,86,112,0),var(--frame))}
.sect b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--accent);
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.sect .cnt{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.sect.head-l{padding:var(--s4) var(--pad) var(--s3);min-height:52px;
  padding-left:calc(var(--pad) + var(--lead, 0px))}
/* each pane's heading registers to the text column it labels */
.side .sect.head-l,.side .grp > .sect{--lead:30px}
.main .sect.head-l,.main .grp > .sect{--lead:56px}
.grp > .sect{padding-left:var(--lead, 0px)}
.sect.head-l::before{display:none}

#q{width:100%;background:var(--field);border:1px solid var(--field-bd);padding:11px 12px;
  font-family:var(--mono);font-size:13px;color:var(--text);outline:none;border-radius:0}
/* the id out-specifies the global :focus-visible, so the filter needs its own
   focus cue or keyboard users lose their place at the top of the catalogue */
#q:focus{border-color:var(--accent)}
#q::placeholder{color:var(--mute)}
.qwrap{padding:0 var(--pad) 12px}

/* ---- effect list ---- */
.list{flex:1;overflow:auto;border-top:1px solid var(--rule);
  scrollbar-width:thin;scrollbar-color:#2e3a4e transparent}
.list::-webkit-scrollbar{width:10px}
.list::-webkit-scrollbar-thumb{background:#2e3a4e}
/* A real <button>: the catalogue used to be click-handled divs, so no effect
   could be added without a mouse. The global button rule has to be undone
   here, not worked around. */
.mod{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:baseline;
  width:100%;text-align:left;font:inherit;background:none;border:0;
  border-bottom:1px solid var(--rule-soft);padding:var(--row) var(--pad);cursor:pointer}
.mod:hover:not(:disabled){background:#14141b}
.mod:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.mod .gl{color:var(--frame);font-size:11px}
.mod.star .gl{color:var(--accent)}
.mod b{font-weight:400;font-size:17px;color:var(--body)}
.mod .rng{font-family:var(--mono);font-size:13px;color:var(--mute);white-space:nowrap}
.mod:disabled{opacity:.42;cursor:default}
.mod:disabled:hover{background:none}
.hint{padding:var(--s3) var(--pad);border-top:1px solid var(--hair);background:var(--bar);
  font-family:var(--mono);font-size:12px;color:var(--accent-dim)}

/* ---- scroll panel ---- */
.panel-head{padding:4px var(--pad) 10px}
.title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.title .lv{font-family:var(--mono);font-size:12px;color:var(--accent-dim);
  letter-spacing:.16em;text-transform:uppercase}
.title #level{font-family:var(--serif);font-size:24px;color:var(--text);width:2.8em}
.title #item{font-family:var(--serif);font-size:21px;color:var(--enlightened);
  flex:1;min-width:0;max-width:100%;text-align:left;text-overflow:ellipsis}
input,select{font:inherit;color:inherit;background:transparent;border:0;
  border-bottom:1px solid transparent;padding:0;border-radius:0;cursor:pointer;
  caret-color:var(--accent)}
input:hover,select:hover{border-bottom-color:var(--accent-dim)}
input:focus,select:focus{border-bottom-color:var(--accent)}
option{background:#14141b;color:var(--text)}
input[type=number]{font-family:var(--serif);-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* A 32px touch floor without moving a pixel: pad the hit area and pull the
   box back with the same negative margin. The inline selects are the densest
   controls on the page and were ~22px tall. */
.sb select,.sb input,.kv .v select,#grace,.epick select,.mrow select{
  padding:6px 0;margin:-6px 0}
.pick .x,.mrow .x{padding:6px 10px;margin:-6px -10px}
.epick button{padding:6px 8px;margin:-6px -4px}

.kv{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  border-bottom:1px solid var(--rule);padding-bottom:5px;margin-top:6px}
.kv .k{font-size:17px;color:var(--body)}
.kv .v{font-family:var(--serif);font-size:20px;color:var(--text);text-align:right}
.kv .v select{font-size:20px;color:var(--accent);text-align:right}
.derived{font-family:var(--mono);font-size:13px;color:var(--accent-dim)}

.body{padding:0 var(--pad);flex:1;overflow:auto;
  scrollbar-width:thin;scrollbar-color:#2e3a4e transparent}
.body::-webkit-scrollbar{width:10px}
.body::-webkit-scrollbar-thumb{background:#2e3a4e}
.grp > .sect{padding:0}

/* ---- five slots ---- */
#chosen{display:flex;flex-direction:column}
.pick{display:grid;grid-template-columns:18px 18px 1fr auto 22px;gap:10px;
  align-items:baseline;padding:var(--row) 0;border-bottom:1px solid var(--rule)}
.pick .n{font-family:var(--mono);font-size:12px;color:var(--dim)}
.pick .gl{color:var(--accent);font-size:12px}
.pick b{font-weight:400;font-size:19px;color:var(--value)}
.pick .v{font-family:var(--serif);font-size:19px;color:var(--text);text-align:right}
.pick .v select{font-family:var(--serif);font-size:19px;text-align:right}
.pick .x{font-family:var(--mono);font-size:12px;color:var(--mute);text-align:right;
  cursor:pointer;background:none;border:0;padding:0;line-height:1}
.pick .x:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.pick .x:hover{color:var(--warn)}
.pick.grace b{color:var(--grace)}
.pick.blank .n,.pick.blank .gl{color:var(--dimmer)}
.pick.blank b{font-family:var(--mono);font-size:13px;color:var(--mute);letter-spacing:.08em}
.pick.blank .v{font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.14em;text-transform:uppercase}

.gwrap{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline;
  padding:var(--row) 0;border-bottom:1px solid var(--rule)}
.gwrap .gl{color:var(--dimmer);font-size:12px}
.gwrap #grace{font-size:19px;color:var(--grace);width:100%;text-align:left}
.gdesc{padding:0 0 8px 28px;font-family:var(--sans);font-size:14px;
  color:var(--mute);line-height:1.6}
.gdesc:empty{padding:0}

.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px var(--pad);border-top:1px solid var(--hair);background:var(--bar);flex-wrap:wrap}
.actions .status{font-family:var(--mono);font-size:12px;color:var(--accent-dim)}

/* ---- mission seed picker ---- */
.stag{font-family:var(--mono);font-size:11px;color:var(--warn);border:1px solid var(--warn);
  padding:3px 8px;letter-spacing:.16em;text-transform:uppercase}
.mrow{display:grid;grid-template-columns:18px 1fr 22px;gap:5px 10px;
  align-items:baseline;padding:var(--row) 0;border-bottom:1px solid var(--rule)}
.mrow .gl{color:var(--frame);font-size:12px}
.mrow select{font-family:var(--serif);font-size:17px;color:var(--body);max-width:100%}
.mrow select.fam{color:var(--value);width:100%}
.mctl{grid-column:2/-1;display:grid;grid-template-columns:minmax(0,1fr) auto 4.2em;
  gap:10px;align-items:baseline}
.mrow .marg select{color:var(--grace);font-size:15px}
.mrow .mrank select{font-family:var(--mono);font-size:13px;color:var(--text);
  width:100%;text-align:right}
.mrow .x{font-family:var(--mono);font-size:12px;color:var(--mute);text-align:right;
  cursor:pointer;background:none;border:0;padding:0;line-height:1}
.mrow .x:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.mrow .x:hover{color:var(--warn)}
.mcost{font-family:var(--mono);font-size:12px;white-space:nowrap;text-align:right}
.mcost.ben{color:var(--grace)}
.mcost.haz{color:var(--warn)}
.mtoggles{display:flex;gap:var(--s5);flex-wrap:wrap}
.mtoggles label{display:flex;gap:var(--s2);align-items:baseline;font-size:16px;color:var(--body);cursor:pointer}
.mtoggles input{accent-color:var(--accent);cursor:pointer;width:15px;height:15px}
.mtoggles .sub{font-family:var(--mono);font-size:12px;color:var(--faint)}
.mfeas{font-family:var(--mono);font-size:12px;color:var(--accent-dim);
  line-height:1.6;min-height:18px}
.mfeas.bad{color:var(--warn)}
.mfeas.good{color:var(--grace)}
.mseek{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
/* asking for more than one seed multiplies the scan, so the control sits
   beside the button that pays for it rather than in a settings pane */
.mwant{display:flex;align-items:baseline;gap:var(--s2)}
.mwant i{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--accent-dim);letter-spacing:.16em;text-transform:uppercase}
/* the candidate list: one row per seed, the chosen one carries the accent */
/* The preview note grew a "· N found" suffix, and .sect .cnt is nowrap, so on
   a narrow window the header pushed the page sideways. Let this one note
   shrink and ellipsize instead of widening the document. */
#mprevnote{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mcands{display:flex;flex-direction:column;gap:1px;margin-bottom:var(--s4);
  background:var(--rule)}
/* two rows: identity line, then the fight order underneath it */
.mcand{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:3px var(--s3);width:100%;text-align:left;
  background:var(--panel);border:0;border-left:2px solid transparent;
  padding:var(--s3) var(--s4);font:inherit;color:var(--body);cursor:pointer}
.mcand .ce{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px var(--s3);
  font-family:var(--sans);font-size:12px;color:var(--body)}
.mcand .ce.dim{color:var(--faint)}
/* the wave number leads each group, so the order reads left to right */
.mcand .cw{display:inline-flex;align-items:baseline;gap:5px}
.mcand .cw i{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--accent-dim)}
.mcand .cw b{font-weight:400;color:var(--warn)}
/* These are rows, not controls, so they must not take the global button
   inversion (asagi fill + near-black text) -- that rule is `button:hover:
   not(:disabled)` and outranks a bare `.mcand:hover`, which left the row
   pale blue while the child spans kept their own light colours and went
   unreadable. Same escape the tabs use: match its specificity and add the
   class. */
.mcand:hover:not(:disabled),
.mcand:focus-visible{background:#14141b;color:var(--text)}
.mcand:hover:not(:disabled) .cr{color:var(--body)}
.mcand[aria-selected=true]{border-left-color:var(--accent);color:var(--text)}
.mcand[aria-selected=true]:hover:not(:disabled){background:#14141b}
.mcand .cu{font-family:var(--mono);font-size:13px;color:var(--accent-hi)}
.mcand .cr{font-family:var(--sans);font-size:13px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mcand .ca{font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.1em;text-transform:uppercase}
/* the searching state lives in the preview column: it IS the preview loading */
.msearch{padding:18px 0 4px;border-top:1px solid var(--rule)}
.readout{font-family:var(--mono);font-size:22px;color:var(--accent);letter-spacing:.12em;
  display:block;text-align:center;padding:10px 0 14px}
.mbarwrap{height:3px;background:var(--rule);position:relative}
.mbar{position:absolute;inset:0 auto 0 0;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(to right,var(--accent-dim),var(--accent));transition:transform .2s linear}
.mstat{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0 0;
  font-family:var(--mono);font-size:12px;color:var(--faint)}
.mskel{padding-top:14px}
.mskel .mline{border-bottom:1px solid var(--rule-soft);animation:pulse 1.6s ease-in-out infinite}
.mskel .mline:nth-child(2){animation-delay:.25s}
.mskel .mline:nth-child(3){animation-delay:.5s}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.75}}
@media(prefers-reduced-motion:reduce){.mskel .mline{animation:none}}
/* ---- the mission card ---- */
.mfound{padding:4px 0 4px;
  animation:cardin .28s ease-out both}
@keyframes cardin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mfound .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:4px}
.mfound .uidv{font-family:var(--mono);font-size:15px;color:var(--accent-hi)}
.mfound .tag{font-family:var(--mono);font-size:11px;color:var(--accent-dim);
  letter-spacing:.12em;text-transform:uppercase}
.mk{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:8px 0 5px}
.mk span:first-child{font-size:16px;color:var(--body)}
.mk span:last-child{font-size:18px;color:var(--text)}
/* span.ter, not .ter: it must tie `.mk span:last-child` on specificity and
   win on order, or the Crucible readout silently renders in plain text. */
.mk span.ter{color:var(--warn)}
.msub{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) 0 var(--s1);flex-wrap:wrap}
.msub b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--accent);
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.msub span{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.06em}
.mline{display:grid;grid-template-columns:18px 1fr auto auto;gap:10px;
  align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule-soft);
  transition:opacity .32s ease-out,transform .32s ease-out;transition-delay:var(--d,0ms)}
.mline.pending{opacity:0;transform:translateX(-10px)}
.mline .gl{color:var(--accent);font-size:11px}
.mline .nm{font-size:17px;color:var(--value)}
.mline .nm em{font-style:normal;color:var(--grace)}
.mline .vl{font-size:17px;color:var(--text)}
.mline.dim .nm,.mline.dim .vl{color:var(--dim)}
.esel{display:grid;grid-template-columns:1fr;gap:var(--s2)}
.esel input{background:var(--field);border:1px solid var(--rule-soft);color:var(--text);
  font-family:var(--sans);font-size:15px;padding:var(--s2) var(--s3);border-radius:3px;width:100%}
.esel input::placeholder{color:var(--mute)}
.esel input:focus{outline:none;border-color:var(--accent)}
.melist{max-height:190px;overflow-y:auto;border:1px solid var(--rule-soft);
  border-radius:3px;margin-bottom:var(--s2)}
.melist button{display:flex;width:100%;justify-content:space-between;align-items:baseline;
  gap:var(--s2);background:none;border:0;border-bottom:1px solid var(--rule-soft);
  color:var(--value);font-family:var(--sans);font-size:14px;text-align:left;
  padding:var(--s2) var(--s3);cursor:pointer}
.melist button:last-child{border-bottom:0}
.melist button:hover,.melist button:focus{background:var(--field);color:var(--accent);outline:none}
.melist button em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--faint)}
.melist .none{padding:var(--s2) var(--s3);font-size:13px;color:var(--mute)}
.melist .vrow{padding-left:var(--s4);color:var(--body)}
.melist .vrow b{font-weight:400;color:var(--grace)}
/* One requirement per row rather than an inline-flex chip cloud. The wave is a
   LIVE control on the row, not a label baked in at insert time -- picking the
   wave used to come before picking the enemy, and could not be changed after. */
.epicks{display:flex;flex-direction:column;gap:var(--s2)}
.epicks:empty{padding:0}
.epick{display:grid;grid-template-columns:14px 1fr auto 20px;gap:var(--s2);align-items:center;
  border:1px solid var(--rule-soft);background:var(--field);padding:var(--s2) var(--s3);
  border-radius:3px}
.epick .gl{font-size:11px;color:var(--accent)}
.epick.boss .gl{color:var(--warn)}
.epick .nm{font-size:15px;color:var(--value);min-width:0;overflow:hidden;text-overflow:ellipsis}
.epick select{font-family:var(--mono);font-size:12px;color:var(--accent-dim);
  border-bottom:1px dotted var(--accent-line);padding:0 0 1px;cursor:pointer}
.epick select:hover,.epick select:focus{color:var(--accent);border-bottom-style:solid}
.epick button{background:none;border:0;color:var(--mute);cursor:pointer;font-size:14px;padding:0 2px}
.epick button:hover{color:var(--warn)}
.mwhy{font-family:var(--sans);font-size:13px;color:var(--body);line-height:1.7;padding:var(--s4) 0 0}
.mwhy > b{display:block;font-family:var(--mono);font-size:12px;font-weight:400;
  color:var(--accent);letter-spacing:.18em;text-transform:uppercase;padding-bottom:var(--s2)}
.wv{display:grid;grid-template-columns:20px 1fr;gap:8px;color:var(--value);font-size:14px;padding:2px 0}
.wv i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--faint)}
.mfound .note{font-family:var(--sans);font-size:13px;color:var(--mute);padding:var(--s4) 0 var(--s2)}
.readout.spin{animation:flick .9s steps(2) infinite}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){
  .mfound{animation:none}
  .mline{transition:none}
  .mline.pending{opacity:1;transform:none}
  .readout.spin{animation:none}
}

/* ---- save summary + messages ---- */
.saveinfo{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s6);padding:var(--s4) var(--pad);
  border-bottom:1px solid var(--inner);background:#0d0d12}
.si{display:flex;flex-direction:column;gap:2px}
.si i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:.14em;text-transform:uppercase}
.si b{font-weight:400;font-family:var(--mono);font-size:13px;color:var(--text)}
.si b.num{color:var(--accent)}
/* Messages float over the bench instead of inserting a band above it: the
   level-change notice used to reflow the whole page under the pointer. The
   anchor is zero-height, so showing or clearing a message moves nothing. */
#msg{position:relative;height:0;z-index:40}
.msg{position:absolute;top:var(--s2);left:50%;transform:translateX(-50%);
  width:max-content;max-width:min(90vw,46rem);cursor:pointer;
  font-family:var(--sans);font-size:14px;padding:var(--s3) var(--s5);white-space:pre-wrap;
  border:1px solid var(--hair);background:#12151e;color:var(--body);
  box-shadow:0 10px 28px rgba(0,0,0,.6);animation:msgin .18s ease-out}
.msg.err{color:#eaa294;background:#171014;border-color:#4a2f28}
.msg.ok{color:#cfe0bd;background:#0f1410;border-color:#2b3a26}
@keyframes msgin{from{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%,0)}}
/* the impression the stamp leaves: lands a touch large and settles, tilted
   the small honest amount a hand-pressed seal always is */
.msg .sealmark{display:inline-block;font-style:normal;font-family:var(--serif);
  font-size:16px;line-height:1;color:var(--seal);border:1.5px solid var(--seal);
  padding:4px;margin-top:2px;transform:rotate(-4deg);
  animation:sealin .3s ease-out .12s backwards}
/* The Done notice is a record, not a text lump: the seal keeps its own
   column so every line shares one left edge; the effects are aligned rows;
   the replace-your-file instruction stands apart as the action line. */
.msg.done{display:flex;gap:14px;align-items:flex-start;text-align:left;
  white-space:normal;min-width:min(90vw,30rem)}
.done-body{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.done-head{font-family:var(--serif);font-size:17px;color:var(--text)}
.fxr{display:grid;grid-template-columns:14px 1fr auto;gap:0 12px;align-items:baseline;
  font-family:var(--mono);font-size:12px;color:var(--body)}
.fxr i{font-style:normal;color:var(--accent-dim);font-size:11px}
.fxr b{font-weight:400;color:var(--text)}
.fxr.g,.fxr.g b,.fxr.g i{color:var(--grace)}
.done-meta{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.03em}
.done-act{font-family:var(--sans);font-size:13px;color:var(--body);line-height:1.55;
  border-top:1px solid var(--rule);padding-top:8px}
.done-act b{font-weight:600;color:var(--text)}
@keyframes sealin{from{opacity:0;transform:rotate(-4deg) scale(1.5)}
  to{opacity:1;transform:rotate(-4deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.msg{animation:none}.msg .sealmark{animation:none}}
.hide{display:none}
.mempty{font-family:var(--sans);font-size:14px;color:var(--faint);line-height:1.7;
  margin:auto 0;padding:var(--s5) 0;max-width:34ch}
.mfound .head{padding-bottom:2px}

/* colophon: players deep-link here and never see the index, so the page
   itself says who made it and where the rest lives */
.colophon{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s2) 2px 0;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:.04em}
.colophon a{color:var(--accent-dim)}
.colophon a:hover{color:var(--accent)}
.colophon code{font-family:inherit;color:var(--mute)}
.mnear{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;align-items:baseline}
.mnear>span:last-child{min-width:0;text-align:right;overflow-wrap:anywhere;color:var(--accent-hi)}
.mnear-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.mnear-tag{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dim);border:1px solid var(--hair);padding:1px 6px;white-space:nowrap}
.mnear-note{padding:6px 0 12px;font:12px/1.5 var(--sans);color:var(--faint)}
@media(max-width:620px){.mnear{grid-template-columns:1fr;gap:6px}.mnear>span:last-child{max-width:100%;text-align:left}}