-text-color`; the same names
are used here so the two can be compared without a translation step.
THEY BELONG TO THE TYPE, NOT TO THE ROW. Colouring by POSITION
(`(i % 8) + 1`) makes Heat one colour under a direct hit and another under a
field, and lets two runs of the same build disagree about what colour Heat
is. A colour keyed on the type cannot
do that, and it is the same colour the wiki and the game use. */
:root{
--dt-impact: #3d5e5e;
--dt-puncture: #5c5247;
--dt-slash: #7a5254;
--dt-cold: #17658c;
--dt-electricity: #610fb3;
--dt-heat: #994d00;
--dt-toxin: #006611;
--dt-blast: #b32a00;
--dt-corrosive: #4d6600;
--dt-gas: #006633;
--dt-magnetic: #4747d1;
--dt-radiation: #806000;
--dt-viral: #b71658;
--dt-true: #664d00;
--dt-void: #085e50;
--dt-tau: #b30000;
}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])){
--dt-impact: #80c4c4;
--dt-puncture: #c6b098;
--dt-slash: #e69ca0;
--dt-cold: #5bbcec;
--dt-electricity: #b37fe7;
--dt-heat: #fb9733;
--dt-toxin: #00cc22;
--dt-blast: #dd704e;
--dt-corrosive: #93c203;
--dt-gas: #00cc66;
--dt-magnetic: #9797e6;
--dt-radiation: #ceac49;
--dt-viral: #f093b9;
--dt-true: #dda700;
--dt-void: #15c8ab;
--dt-tau: #f06666;
}}
:root[data-theme="dark"]{
--dt-impact: #80c4c4;
--dt-puncture: #c6b098;
--dt-slash: #e69ca0;
--dt-cold: #5bbcec;
--dt-electricity: #b37fe7;
--dt-heat: #fb9733;
--dt-toxin: #00cc22;
--dt-blast: #dd704e;
--dt-corrosive: #93c203;
--dt-gas: #00cc66;
--dt-magnetic: #9797e6;
--dt-radiation: #ceac49;
--dt-viral: #f093b9;
--dt-true: #dda700;
--dt-void: #15c8ab;
--dt-tau: #f06666;
}
/* ---- THE dropdown ---------------------------------------------------- */
/* One trigger shape for every choose-one control. It
deliberately matches the native `select` rule above —
same border, radius, caret position — so replacing a select moves nothing
on the page; only what OPENS from it changes. */
.dd{display:inline-flex;align-items:center;gap:6px;background:var(--plane);color:var(--text);
border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;cursor:pointer;
max-width:100%;text-align:left}
.dd:hover{border-color:var(--accent)}
.dd .dd-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dd .dd-c{color:var(--muted);font-size:10px;flex:none}
.dd .dd-i{width:20px;height:20px;border-radius:4px;object-fit:cover;flex:none}
/* Inside a dense tool strip the replacement for a select keeps that strip's
smaller metrics rather than the page default. */
.picker-tools .dd,.quick-calc .dd{padding:3px 8px;font-size:12px}
.quick-calc .dd{max-width:150px}
.topbar .dd{height:28px;padding:0 8px;font-size:12px;margin-left:auto}
/* WHAT IS NOT MODELLED YET, wherever a perk is chosen. Amber rather than red:
it is not broken and not an error — the game has it and the sim cannot price
it yet, which is a different thing from the BROKEN badge beside it. */
.caveat.unmod{color:var(--gold)}
/* The builder's evolution tiles use for their marks (`.bx` BROKEN does),
so the unmodelled chip has to lose the italic it would otherwise inherit. */
/* The weapon's own "what this does not model" banner: a heading and one line
per gap, so several gaps read as a list rather than as one long sentence. */
.unmod-h{font-weight:600}
.unmod-l{margin-left:1.1em;opacity:.9}
.unmod-l::before{content:"· "}
.exchip.unmod{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);
border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
/* THE OTHER ADMISSION, and it is deliberately NOT gold: gold is a todo, and a
todo asks to be watched. An EDGE is settled — muted, stated once, no alarm. */
/* A TARGET THAT TAKES YOUR BUFFS AWAY. Loud on purpose: everything below it is
ticked and not running, and a player reading only the checkboxes would be
scoring a fight they are not in. */
.wfb-null{margin:6px 0 2px;padding:6px 8px;border-radius:6px;font-size:12px;
background:rgba(200,90,90,.14);color:#d98c8c;
border:1px solid color-mix(in srgb,#d98c8c 34%,transparent)}
.exchip.scope{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--dim);
border:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.exchip.livebug{background:color-mix(in srgb,var(--bad,#e06c75) 12%,transparent);
color:var(--bad,#e06c75);
border:1px solid color-mix(in srgb,var(--bad,#e06c75) 40%,transparent)}
/* A MISPRINT IS NOT A FAULT — the effect works and its card is wrong about it,
which is the opposite advice to `.livebug` beside it. So it reads as a NOTE
rather than a warning: the accent colour, not the bad one. */
.exchip.misprint{background:color-mix(in srgb,var(--acc,#c8a165) 12%,transparent);
color:var(--acc,#c8a165);
border:1px solid color-mix(in srgb,var(--acc,#c8a165) 40%,transparent)}
/* ---- topbar navigation: the site's OWN pages ---------------------------
Against the wordmark, before the search — these are destinations, not the
"this project, elsewhere" links that follow. */
.topnav{display:flex;gap:2px;flex:0 0 auto}
.tnav{padding:4px 9px;border-radius:7px;color:var(--text-2);font-size:12px;text-decoration:none;white-space:nowrap}
.tnav:hover{background:var(--line);color:var(--text)}
.tnav.sel{background:var(--line);color:var(--text);font-weight:600}
/* ---- the topbar menu: one set of controls, two shapes ------------------
`display:contents` is the whole trick. Above 700px `.topmenu` and
`.tblinks` are not boxes at all — their children ARE the bar's flex items,
so the desktop row is the row that existed before the wrapper was added and
nothing is duplicated. Which means `order:` has to be spelled out, because
promoted children default to 0 and would otherwise jump the wordmark. */
.topmenu,.topmenu .tblinks{display:contents}
.topbar-inner .brand{order:1}
.topbar-inner .topnav{order:2}
.topbar-inner .wsearch{order:3}
.topbar-inner .tblinks>*{order:4}
/* `.topbar-inner .ghost-btn` sets `display:inline-flex` for every button in
the bar and outranks a single class, so hiding this one has to match that
specificity — the same trap the icon links' width fell into above. */
.menu-toggle{order:5;font-size:15px;line-height:1}
.topbar-inner .menu-toggle{display:none}
/* ---- the topbar overflow: `⋯` -----------------------------------------
The bar carries what a reader ACTS on; everything else is one click away
. Below 700px this whole thing is `display:contents` and
its children flatten into the phone menu — one copy of every control at both
widths, which is the same trick `.topmenu` plays one level up. */
.tbmore{position:relative}
.tbmore-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:60;
min-width:190px;flex-direction:column;gap:2px;padding:6px;
background:var(--surface);border:1px solid var(--line);border-radius:10px;
box-shadow:0 8px 28px rgba(0,0,0,.35)}
.tbmore.open .tbmore-panel{display:flex}
.tbmore-btn{font-size:15px;line-height:1}
/* A MARK WORKS IN A ROW OF MARKS; A PANEL IS A LIST, AND A LIST HAS NAMES.
The 28px icon rule above is `.topbar-inner .x-link` (0,2,0), so winning it
back inside the panel takes the same specificity plus one — the same trap
that rule itself was written to escape. */
.topbar-inner .tbmore-panel .ghost-btn{width:100%;height:30px;gap:9px;padding:0 8px;
justify-content:flex-start;border-color:transparent}
.topbar-inner .tbmore-panel .ghost-btn:hover{background:var(--plane)}
.tbl{display:none}
.tbmore-panel .tbl{display:inline;font-size:12px;color:var(--text-2)}
/* The language dropdown's `margin-left:auto` is what pushes the right-hand
group over on the bar; inside the panel there is nothing to push. */
.tbmore-row{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px}
.tbmore-row .tbl{flex:1 1 auto}
.topbar .tbmore-panel .dd{margin-left:0}
/* THE COMMUNITY SLOT IS A HOLE, NOT A BOX: `applyCommunityOrder()` moves a
mark into it, and it must sit where the mark itself would have. Which means
the promoted child needs the ORDER — `.topbar-inner .tblinks>*` reaches the
slot, and a slot that is `display:contents` is not a flex item, so the value
lands on nothing while its child defaults to 0 and sorts in front of the
WORDMARK. Caught on a screenshot, not by geometry: the mark was still
on screen and still inside the viewport, so nothing measuring reachability
could see it. Same trap this file warns about two rules up. */
.tbcomm{display:contents}
.topbar-inner .tbcomm>*{order:4}
@media (max-width:700px){
/* Below here the wrapper becomes a real box, hanging off the bar. The
anchor is the bar itself so the panel tracks the sticky header. */
.topbar-inner{position:relative}
.topbar-inner .menu-toggle{display:inline-flex}
/* `right:18px` is the bar's own side padding, so the panel's right edge
lines up with the button that opened it instead of with the screen. */
.topmenu{display:none;position:absolute;top:calc(100% + 8px);right:18px;z-index:60;
min-width:196px;max-width:calc(100vw - 36px);flex-direction:column;gap:8px;padding:8px;
background:var(--surface);border:1px solid var(--line);border-radius:10px;
box-shadow:0 8px 28px rgba(0,0,0,.35)}
.topbar.menu-open .topmenu{display:flex}
/* The panel's own order. Inside it the two children are `.topnav` and
`.tblinks`, and the desktop `order:` values were written for the BAR —
`.tblinks` itself has none there, so it sorted to 0 and the icons came out
above the destinations with the divider stranded at the top. */
.topmenu .topnav{order:1}
.topmenu .tblinks{order:2}
/* Destinations read as a list — full-width rows with a tap target, not the
4px-tall chips they are when they sit against the wordmark. */
.topmenu .topnav{flex-direction:column;gap:2px}
.topmenu .tnav{padding:9px 10px;font-size:13px}
/* ...and "this project, elsewhere" stays a ROW of marks. Six labels down a
phone menu would be six lines of chrome above nothing; the icons are
already the vocabulary the desktop bar uses. */
.topmenu .tblinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
border-top:1px solid var(--line);padding-top:8px}
/* The language dropdown's `margin-left:auto` is what pushes the right-hand
group over on a desktop; inside the panel there is nothing to push. */
.topbar .topmenu .dd{margin-left:0}
/* The overflow stops being one: its children join the phone menu directly,
so the `⋯` has nothing left to open and the panel is not a box. */
.tbmore,.tbmore-panel,.tbmore.open .tbmore-panel{display:contents}
.topbar-inner .tbmore-btn{display:none}
/* `.topbar-inner .tblinks>*` sets order:4 on the row's own children; the
overflow's promoted children default to 0 and would jump ahead of the ask.
They sort after it instead — the ask is LAST of what the reader came for
and first of what spilled out of the bar. */
.topbar-inner .tbmore-panel>*,.topbar-inner .tbmore-panel .tbcomm>*,
.topbar-inner .tbmore-row>*{order:5}
/* Back to a ROW of marks, which is what the phone menu has always been:
names down a narrow panel would be six lines of chrome above nothing. */
.tbmore-panel .tbl{display:none}
.topbar-inner .tbmore-panel .ghost-btn{width:28px;height:28px;padding:0;
justify-content:center;border-color:var(--line)}
.tbmore-row{display:contents}
}
/* ---- the ask, beneath a finished result -------------------------------
Muted, static, below the last fold — it states the work in numbers the
reader can check against the Detail table above it, and only then asks.
Never a modal, never a banner, and it does not move: the topbar being
chrome was always the rule, and it still is. */
.sim-ask{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);
color:var(--muted);font-size:12px;line-height:1.6}
.sim-ask a{color:var(--gold);text-decoration:none;white-space:nowrap}
.sim-ask a:hover{text-decoration:underline}
/* ---- the board -------------------------------------------------------- */
.bench-sub{max-width:70ch;margin:0 0 14px;color:var(--text-2);font-size:15px;line-height:1.55}
/* The terms, between the chips and the standard they belong to. */
.bench-note{max-width:70ch;margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
#bench-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
/* WHICH BUILDS, under WHICH FIGHT — the second row reads as subordinate to the
first because it is: a ruler is the standard, this only narrows who is shown
under it. */
#bench-view{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px}
#bench-view .bchip{font-size:.86em;padding:3px 9px}
.bchip{padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:transparent;
color:var(--text-2);font-size:12px;cursor:pointer;font-family:inherit}
.bchip:hover{color:var(--text)}
.bchip.sel{background:var(--line);color:var(--text);font-weight:600}
.brules{margin:0 0 12px;border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.brules summary{cursor:pointer;color:var(--text-2);font-size:12px;list-style:none}
.brules summary::-webkit-details-marker{display:none}
.brules summary::before{content:"▸ ";color:var(--text-2)}
.brules[open] summary::before{content:"▾ "}
.bstd{margin:9px 0 0;color:var(--text);font-size:12.5px;line-height:1.65;max-width:78ch}
.brules ul{margin:8px 0 2px;padding-left:18px}
.brules li{margin:5px 0;color:var(--text-2);font-size:12.5px;line-height:1.6;max-width:78ch}
.bench-meta{margin-bottom:8px;color:var(--text-2);font-size:12px}
.bench-rows{display:flex;flex-direction:column;gap:2px}
.brow{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
color:var(--text);text-decoration:none}
.brow:hover{background:var(--line)}
.brow .brank{flex:0 0 44px;color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.brow .bimg{flex:0 0 auto;width:34px;height:34px;object-fit:contain}
.brow .bname{flex:1 1 auto;font-size:13px}
/* ON EVERY ROW, including a weapon with one way to be played. A tag that
appears on the neighbour and not here reads as "no mode" rather than as
"one mode", and this is the page where weapons are compared. */
.brow .bmode{margin-left:6px;padding:1px 6px;border:1px solid var(--line);border-radius:6px;
color:var(--text-2);font-size:11px;white-space:nowrap}
/* A weapon the sim knows it does not fully model, marked where weapons are
COMPARED. Quiet on purpose — it is a footnote on the number, not a warning
about the row — and it carries the whole list in its title. */
.brow .bgap{margin-left:5px;color:var(--warn,#c8a24a);font-size:11px;cursor:help}
.brow .bscore{flex:0 0 auto;font-size:13px;font-variant-numeric:tabular-nums}
/* An unmeasured weapon is not a low score — it is the invitation, and it reads
as one rather than as a zero at the bottom of a ranking. */
.brow.none{opacity:.62}
.brow .bnone{color:var(--text-2);font-size:12px}
/* THE FIRST PAINT. Everything else is hidden until the wasm has answered, so
without this the page is blank for as long as that takes — and a blank page
is indistinguishable from a broken one, which is how it got reported. */
.booting{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;
font-size:22px;letter-spacing:.08em;color:var(--text-2);background:var(--bg);z-index:50}
.booting .bdot{animation:bootdot 1.2s infinite}
.booting .bdot:nth-child(2){animation-delay:.15s}
.booting .bdot:nth-child(3){animation-delay:.3s}
@keyframes bootdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* Motion is decoration here; the word alone says the same thing. */
@media (prefers-reduced-motion:reduce){ .booting .bdot{animation:none} }
/* WARFRAME ABILITY BUFFS (scenario section 3). A grid of cards rather than a
field row: each one carries a name, what it is worth at YOUR strength, how
long it runs, and a link to the page the number came off — five facts, which
is more than a label and an input can hold. */
.wfb-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
/* EARLY ACCESS, on screen. The block is honest about being ahead of the frame
layer it will move into, in the muted voice the other caveats use — this is
information, not a warning. */
.wfb-early{color:var(--text-2);font-size:11px;flex:1 1 240px}
.wfb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.wfb{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
/* A TICKED buff is the one that changes a number, so it is the one that gets
the accent — the rest of the grid is a catalogue. */
.wfb.on{border-color:var(--accent)}
/* SUPERSEDED: ticked, and something stronger of the same family is running.
Dimmed rather than hidden, because it is still YOUR selection — the line
below says why it pays nothing. */
.wfb.dead{opacity:.62;border-color:var(--line)}
.wfb-n{font-weight:600}
.wfb-f{color:var(--text-2);font-size:11px;margin-left:5px}
/* THE NUMBER, on its own line and big enough to read: it is what the block is
for, and a card that only named the ability would leave the strength multiply
to the reader. */
.wfb-v{margin-top:4px;font-size:16px;font-weight:650;color:var(--gold);font-variant-numeric:tabular-nums}
.wfb-e{margin-top:2px;color:var(--text-2);font-size:11px;line-height:1.45}
/* The card's ADMISSIONS — the same `⊘ partly modelled` / `⚑ unintended` chips a
mod and an arcane carry, so an ability that leaves something out looks the
way every other family does. Empty on every buff that has nothing to admit,
and the margin comes with the chips rather than with the box. */
.wfb-u{display:flex;flex-wrap:wrap;gap:4px}
.wfb-u:not(:empty){margin-top:5px}
.wfb-dead{margin-top:3px;color:var(--gold);font-size:11px}
.wfb-w{display:inline-block;margin-top:6px;color:var(--text-2);font-size:11px;text-decoration:none}
.wfb-w:hover{color:var(--accent)}
/* A CHOSEN element (Resupply's gear wheel). Small and inline: it is a property
of the buff you already ticked, not a second decision. */
.wfb-el{display:block;margin-top:4px;color:var(--text-2);font-size:11px}
.wfb-el select{margin-left:5px;font-size:11px}
/* THE ACCOUNT OF ONE HIT — a ledger, so it reads down a column and the
products line up. Monospace figures on the right, because the whole point is
that a reader can multiply them. */
/* A BLOCK FOLDS. The caret turns, the body goes; the heading stays so the page
keeps its shape and you can find the thing you closed. */
.fold>.fold-h{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.fold>.fold-h .fold-c{display:inline-block;transition:transform .12s;color:var(--muted);font-size:11px}
.fold.shut>.fold-h .fold-c{transform:rotate(-90deg)}
.fold.shut>.fold-b{display:none}
/* A SECTION FOLDS, AND IT IS A BOX SO THAT ITS HEADING READS AS A CONTROL.
The numbered headings inside a block are where the page's length actually
is — the simulator's seven, the optimizer's five axes and its two halves —
and a bare label gives a reader no reason to think it can be shut. A
bordered header row does, at the cost of one nesting level.
EVERY CHILD BUT THE HEADING GOES, rather than a `.fold-b` the markup has to
remember to wrap: a section that gains an element tomorrow folds with it.
IMPORTANT, because a child's own `#id{display:grid}` outranks any class
selector and kept the Buffs section's cards on screen while it was shut. */
.fold.sect{border:1px solid var(--line);border-radius:10px;margin:12px 0;
padding:0 12px 12px;background:var(--surface)}
.fold.sect.shut{padding-bottom:0}
.fold.sect.shut> :not(.fold-h){display:none!important}
.fold.sect>.fold-h .fold-c{font-size:13px;color:var(--text-2)}
.fold.sect>.fold-h{margin:0 -12px 10px;padding:8px 12px;flex-wrap:wrap;align-items:baseline;
border-bottom:1px solid var(--line);background:var(--panel3);border-radius:9px 9px 0 0}
.fold.sect.shut>.fold-h{margin-bottom:0;border-bottom:0;border-radius:9px}
/* A long hint wraps under the title instead of stretching the row. */
.fold.sect>.fold-h>.sim-hint{margin-left:0;min-width:0}
.fold.sect>.opt-half-h>.sim-hint{flex:1 0 100%}
/* The heading's own controls (the Buffs section's "all") keep their click. */
.fold>.fold-h button{align-self:center}
/* A BLOCK FOLDS FROM THE HEADER IT ALREADY HAS, and the row gains nothing but
the caret: `.bh` is what a reader reaches for anyway, and the buttons in it
(auto Forma, clear) keep their own clicks. Only on the weapon page — a
support or download section is three lines and has nothing to hide. */
.config-page .block>.bh{cursor:pointer;user-select:none}
.bh .fold-c{display:inline-block;transition:transform .12s;color:var(--text-2);font-size:13px}
.block.shut>.bh .fold-c{transform:rotate(-90deg)}
.block.shut>.bh{border-bottom:0}
.block.shut>.bb{display:none}
/* THE BUILD FINDER FOLDS TO ITS TITLE AND COUNT: the query and the view
switch in its head steer a table that is no longer on screen. */
.finder>.fd-head.fold-h{gap:10px}
.finder>.fd-head.fold-h .fold-c{font-size:13px;color:var(--text-2)}
.finder.shut>.fd-head{border-bottom:0}
.finder.shut> :not(.fd-head),
.finder.shut>.fd-head> :not(.fold-c):not(.fd-title):not(.fd-count){display:none}
/* WHAT EACH MODE IS. A definition list under the Mode control: one entry per
mode this weapon has, the picked one marked. It sits inside the builder's
own block, so it takes the block's width and wraps rather than pushing the
mod grid sideways — a phone reads this too (check_mobile). */
.fold[data-fold="mode-def"]{margin-top:6px}
.fold[data-fold="mode-def"]>.fold-h{font-size:11px;font-weight:600;color:var(--text-2);margin:0}
.modedef{padding:4px 0;border-top:1px solid var(--line)}
.modedef:first-child{border-top:0}
.modedef-n{font-size:11px;font-weight:600;color:var(--text)}
.modedef.on .modedef-n{color:var(--gold)}
.modedef-on{font-size:10px;font-weight:400;color:var(--muted)}
.modedef-l{font-size:11px;line-height:1.45;color:var(--text-2);max-width:60ch}
/* EVERY HIT, SORTED. Tabular figures, because the whole point is comparing a
column down its length. */
.kpi .ksub{font-size:10px;color:var(--muted)}
/* An option the scan has not reached yet. Muted and non-committal on purpose:
it is the one state that must not read as a number. */
.gainchip.pend { opacity: .45; letter-spacing: .1em; }
/* A ONE-LINE NOTICE FROM THE PAGE ITSELF — see `noteInline`. Fixed to the top,
because what it reports (a save that did not happen) is true wherever you
have scrolled to; click it to dismiss. */
.page-note{position:fixed; left:50%; transform:translateX(-50%); top:10px; z-index:9998;
max-width:min(92vw,560px); padding:9px 14px; border-radius:9px; cursor:pointer;
background:color-mix(in srgb,var(--critical) 14%,var(--surface));
border:1px solid color-mix(in srgb,var(--critical) 45%,transparent);
color:var(--text); font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.28)}
/* ---- THE ARENA AS AN EDITOR -------------------------------
A canvas you pan and zoom, with its chrome floating on it.
ONE LOGIC LINE: the LEFT column is what you are about to DO (the tools, the
brush the active tool acts with, the switches that change how it behaves),
the TOP RIGHT is what you have SELECTED, and the bottom is the read-outs.
Nothing appears in two places, and neither side does the other's job -- one
card being both at once is why neither would be findable. */
.arena{container-type:inline-size}
/* THE FLOOR IS NOT PROSE, so it does not live inside the reading column: the
page caps itself at 760px, which is right for text and wrong for a thing you
lay a formation out on.
THE BLOCK BREAKS OUT, NOT THE ARENA. Widening the arena alone put it outside
its own section, and `.block` is `overflow:hidden` so that its rounded
corners clip the header's background — so the floor's left and right edges,
which is exactly where its two panels live, were cut off. Moving the breakout up one level keeps the clip doing its
job at the section's own, wider bounds.
`:has()` rather than an id, so a block that gains a floor tomorrow gets the
room without anybody remembering to grant it. The parent is centred, so 50%
of it is the viewport's middle and the arithmetic is exact. */
@media (min-width:900px){
.block:has(.arena){width:min(1220px,94vw); margin-inline:calc(50% - min(610px,47vw))}
}
.arc-wrap{position:relative; width:100%; height:min(66vh,620px); min-height:380px;
border-radius:10px; overflow:hidden; border:1px solid var(--line);
background:var(--panel3)}
.arc-wrap:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.arc-cv{display:block; width:100%; height:100%; touch-action:pan-y}
.arc-cv.arc-select{cursor:default}
.arc-cv.arc-place,.arc-cv.arc-erase,.arc-cv.arc-aim{cursor:crosshair}
.arc-cv.arc-hand{cursor:grab}
.arc-cv.arc-panning{cursor:grabbing}
.arc-cv.arc-moving{cursor:move}
/* ---- LEFT: the verb ---------------------------------------------------- */
.arc-left{position:absolute; left:8px; top:8px; bottom:8px; width:272px;
display:flex; flex-direction:column; gap:6px; pointer-events:none}
.arc-left > *{pointer-events:auto}
.arc-rail{display:flex; gap:3px; padding:4px; align-self:flex-start;
background:var(--surface); border:1px solid var(--line); border-radius:9px;
box-shadow:0 2px 10px rgba(0,0,0,.14)}
.arc-tool{width:32px; height:32px; display:grid; place-items:center; border-radius:6px;
border:1px solid transparent; background:none; color:var(--text-2); cursor:pointer}
.arc-tool:hover:not(:disabled){background:var(--panel2); color:var(--text)}
.arc-tool[aria-pressed="true"]{color:var(--accent);
background:color-mix(in srgb,var(--accent) 15%,transparent);
border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.arc-tool:disabled{opacity:.4; cursor:default}
.arc-tool:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.arc-tool svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round}
/* THE BRUSH: what the place tool acts with. It is the tallest thing here and
the only one that may scroll, because an enemy card carries a vulnerability
column, a status-immunity list and a caveat, and all of them are worth
reading -- the old floating card cut them off. */
/* IT HUGS ITS CONTENT. `flex:1 1 auto` made it fill the column, so a card three
lines long sat at the top of a panel six hundred pixels tall — and the empty
white below it read as something failing to load. It grows to what it holds
and only scrolls past the room there is. */
.arc-brush{flex:0 1 auto; min-height:0; max-height:calc(100% - 104px); overflow:auto;
background:var(--surface); border:1px solid var(--line); border-radius:9px;
box-shadow:0 2px 10px rgba(0,0,0,.14)}
.arc-brush:empty{display:none}
/* AND IT WRAPS RATHER THAN SCROLLING SIDEWAYS. Every one of these is a
`min-width:0`: a flex item's default minimum is its CONTENT, so an enemy's
stat line — which is one long unbroken sentence — pushed the card wider than
the column and took the panel's own edges off the screen with it. */
.arc-brush,.arc-side,.arc-side *{min-width:0}
.arc-side{display:flex; flex-direction:column; gap:6px; padding:7px; font-size:12px}
.arc-side .en-row{margin:0; display:block}
.arc-side .en-card{width:100%; padding:5px 6px; gap:7px; align-items:flex-start}
.arc-side .en-img{width:38px; height:38px; flex:0 0 auto}
.arc-side .en-txt{flex:1 1 auto; overflow-wrap:anywhere}
.arc-side .en-name{font-size:13px}
.arc-side .en-meta{font-size:10.5px; line-height:1.4; white-space:normal}
.arc-side .en-wiki{display:inline-block; margin-top:4px; font-size:11px}
.arc-fields{display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center;
font-size:11.5px}
.arc-fields label{display:flex; align-items:center; gap:4px; margin:0}
.arc-fields input[type=number]{width:70px}
/* WHAT THE CARD ABOVE REACHES. Quiet, because it is a statement of scope
rather than a warning — nothing is wrong when it is showing. */
.arc-note{margin:0; font-size:10.5px; line-height:1.45; color:var(--muted)}
.arc-opts,.arc-chips{display:flex; gap:4px; padding:4px; align-self:flex-start;
background:var(--surface); border:1px solid var(--line); border-radius:9px;
box-shadow:0 2px 10px rgba(0,0,0,.14)}
.arc-chips:empty{display:none}
.arc-opt{padding:4px 9px; border-radius:6px; border:1px solid var(--line);
background:var(--panel3); color:var(--muted); cursor:pointer; font:inherit;
font-size:11.5px; line-height:1.2}
.arc-opt:hover:not(:disabled){color:var(--text)}
.arc-opt[aria-pressed="true"],.arc-opt.on{color:var(--accent);
background:color-mix(in srgb,var(--accent) 14%,transparent);
border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.arc-opt:disabled{opacity:.4; cursor:default}
.arc-opt:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* ---- RIGHT: the noun --------------------------------------------------- */
.arc-insp{position:absolute; right:8px; top:8px; width:min(34%,238px);
padding:8px 10px; border-radius:9px; background:var(--surface);
border:1px solid var(--line); box-shadow:0 2px 10px rgba(0,0,0,.14);
font-size:12px}
.ai-h{margin:0 0 6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); font-weight:600}
/* WHO IT IS, above the geometry. The art is small on purpose — it is here to
be recognised at a glance, not studied; the card in the left column is where
a unit is read properly. */
.ai-who{display:flex; gap:8px; align-items:flex-start; padding-bottom:7px; margin-bottom:6px;
border-bottom:1px solid var(--line)}
.ai-who img{width:34px; height:34px; object-fit:contain; flex:0 0 auto}
.ai-who > div{min-width:0}
.ai-who b{display:block; font-size:12.5px; line-height:1.3}
/* THE KEY TO THE FLOOR — the same hue the body is drawn in. Beside the NAME,
because a colour with nothing to read it against is decoration. */
.ai-sw{display:inline-block; width:8px; height:8px; border-radius:2px;
margin-right:5px; vertical-align:baseline; flex:0 0 auto}
.ai-who span{display:block; font-size:10.5px; line-height:1.45; color:var(--muted)}
.ai-row{display:flex; justify-content:space-between; gap:12px; padding:1.5px 0}
.ai-row span:first-child{color:var(--text-2)}
.ai-hint{margin:7px 0 0; font-size:11px; color:var(--muted)}
.arc-read{position:absolute; right:8px; bottom:8px; padding:5px 9px; border-radius:8px;
background:var(--surface); border:1px solid var(--line); font-size:11.5px;
color:var(--text-2); box-shadow:0 2px 10px rgba(0,0,0,.14)}
/* A NARROW PANEL IS NARROW WHATEVER THE VIEWPORT IS. The simulator's column can
be a couple of hundred pixels on a wide screen, so the measurement is of the
CONTAINER: the chrome stops floating and the three groups stack. */
@container (max-width:620px){
.arc-wrap{height:auto; min-height:0; display:flex; flex-direction:column}
.arc-left{position:static; width:auto; flex-direction:row; flex-wrap:wrap;
align-items:flex-start; order:-1; padding:6px; gap:5px}
.arc-brush{flex:1 1 100%; max-height:190px}
.arc-insp{position:static; width:auto; order:2; border-radius:0;
border-width:1px 0 0; box-shadow:none}
.arc-cv{height:min(50vh,360px); flex:0 0 auto; order:1}
.arc-read{display:none}
}
@media (max-width:640px){
.arc-tool{width:29px; height:29px}
}
/* THE BUILD ON SCREEN. Footer weight and then some: it is for a bug report,
not for a reader. */
.build-stamp{color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums;
user-select:all; cursor:text}
/* WHAT THE WARFRAME BRINGS — the squad's aura and the frame's archon shards.
A LIST of rows rather than a field grid, because each row is a control with
its own count, its own Tauforged flag and its own remove; a `1fr` grid would
floor every track at min-content and hang the removes off a phone, which is
`check_mobile.mjs`'s own lesson. */
.sq-h{font-size:12px; letter-spacing:.04em; text-transform:uppercase;
color:var(--dim); margin-top:4px}
.sq-h .sim-hint{text-transform:none; letter-spacing:0}
.sq-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
/* The dropdown is the row: it takes what is left after the small controls, and
never less than a name's worth. */
.sq-row > .dd{flex:1 1 200px; min-width:0}
.sq-n{display:inline-flex; align-items:center; gap:4px; color:var(--dim);
font-size:12px; white-space:nowrap}
.sq-n input{width:44px}
.sq-mute{opacity:.55}
.sq-tau{white-space:nowrap}
/* PAYS NOTHING HERE, and it reads that way — dimmed, with the reason beside it.
Never hidden: a socket that quietly does nothing is worse than one that says
so, which is docs/UNMODELLED.md's own rule. */
.sq-dead > .dd, .sq-dead .sq-tau{opacity:.55}
.sq-why{font-size:11px; color:var(--dim); flex:1 1 100%}
.sq-none{font-size:12px; color:var(--dim)}
.sq-add{display:flex}
.sq-add > .dd{flex:1 1 auto}
/* THE NUMBERS A FIGHT POPS. A DOM overlay over the result's arena, not paint on
its canvas: the scene repaints on every resize and every heat change, and a
number wants a CSS animation rather than a per-frame redraw. It never eats a
click — the scene underneath still picks a body. */
.rp-pops{position:absolute; inset:0; pointer-events:none; overflow:hidden}
/* THE HALO IS THEMED, and it has to be: a damage-type colour is a mid-tone, so
it needs an OUTLINE to be legible, and an outline that is dark on a dark page
is invisible. Four shadows rather than one — a ring, not a drop — because a
number sits on top of a body and has no side to lean away from. */
:root{--pop-halo:#fff}
:root:not([data-theme="light"]){--pop-halo:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pop-halo:#000}}
:root[data-theme="dark"]{--pop-halo:#000}
.rp-pop{
position:absolute; transform:translate(-50%,-50%);
font-variant-numeric:tabular-nums; font-weight:800; font-size:13px;
white-space:nowrap; color:var(--pop-dt, var(--fg));
text-shadow:
0 0 3px var(--pop-halo), 0 0 3px var(--pop-halo),
1px 1px 0 var(--pop-halo), -1px 1px 0 var(--pop-halo),
1px -1px 0 var(--pop-halo), -1px -1px 0 var(--pop-halo);
}
/* PARKED ON A FRAME, A NUMBER STAYS. Scrubbing is READING — you stopped on this
instant to see what happened in it — so the numbers rise once and hold. Only
PLAYBACK floats them away, which is the behaviour that makes a fight look
like a fight. */
.rp-pop{animation:pop-rise .28s ease-out forwards}
.rp-pops.live .rp-pop{animation:pop-float 1.1s ease-out forwards}
@keyframes pop-rise{
0%{opacity:0; transform:translate(-50%,-50%) scale(.7)}
70%{opacity:1; transform:translate(-50%,-66%) scale(1.06)}
100%{opacity:1; transform:translate(-50%,-62%) scale(1)}
}
@keyframes pop-float{
0%{opacity:0; transform:translate(-50%,-50%) scale(.7)}
12%{opacity:1; transform:translate(-50%,-60%) scale(1.08)}
30%{transform:translate(-50%,-72%) scale(1)}
100%{opacity:0; transform:translate(-50%,-140%) scale(.95)}
}
/* WHAT KIND OF NUMBER, at a glance — the same distinction the game draws with
size and colour. A crit is bigger, a headcrit bigger again and gold; a status
tick is small and takes its element's colour; a blast radial is dimmer than
the detonation that threw it, because it is the same event seen from further
away. */
.rp-pop.p-crit{font-size:15px}
.rp-pop.p-head{font-size:14px}
.rp-pop.p-headcrit{font-size:19px; color:var(--gold, #e8c46a)}
.rp-pop.p-status{font-size:11px; opacity:.92}
.rp-pop.p-blast{font-size:13px}
.rp-pop.p-area{font-size:11px; opacity:.8}
.rp-pop.p-field,.rp-pop.p-extra,.rp-pop.p-arcane{font-size:11px; opacity:.9}
/* …AND WHAT DID NOT FIT, said rather than swallowed. */
.rp-pop.p-more{font-size:11px; font-weight:600; color:var(--dim); opacity:.85}
/* THE SCENE HAS TO BE A POSITIONING CONTEXT for any of the above to land. */
#rp-scene{position:relative}
/* PROGRESS WHERE THE WORK IS BEING READ. The quick calc counted itself at the
top of the page and the LIST it was ranking said nothing — and a list that
does not move for thirty seconds is read as broken, not as busy. Same strip in every list a scan ranks. */
.scan-strip{
position:sticky; top:0; z-index:3;
display:flex; align-items:center; gap:8px;
padding:5px 10px; background:var(--bg2, var(--bg));
border-bottom:1px solid var(--line);
font-size:11px; color:var(--dim); white-space:nowrap;
}
.scan-bar{
flex:1 1 auto; min-width:40px; height:4px; border-radius:2px;
background:var(--line); overflow:hidden;
}
.scan-bar>i{
display:block; height:100%; background:var(--gold, #e8c46a);
/* The width is set per repaint (every 250 ms while scanning), so the
transition is what makes it read as movement rather than as a jump. */
transition:width .25s linear;
}
.scan-txt{font-variant-numeric:tabular-nums; flex:0 0 auto}
/* THE DESKTOP UPDATE NOTICE — drawn only by the desktop shell (`mountDesktopUpdater`).
Bottom-right rather than a full-width bar: an update is not urgent, and a
strip across the page reads like an error. It sits under `.page-note`
(z 9998) so a real message is never covered by a housekeeping one. */
.dtup{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:10px;
padding:9px 10px 9px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
box-shadow:0 8px 28px rgba(0,0,0,.35);font-size:13px;color:var(--text);
max-width:min(440px,calc(100vw - 32px))}
.dtup[hidden]{display:none}
.dtup-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtup-e{color:var(--critical);white-space:normal}
.dtup-b{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:7px;
padding:4px 11px;font:inherit;cursor:pointer;white-space:nowrap}
.dtup-b:hover{background:var(--gold);color:var(--surface)}
.dtup-x{border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1;
padding:2px 4px;cursor:pointer}
.dtup-x:hover{color:var(--text)}
/* THE DESKTOP DOWNLOAD, on its own page. Gold-outlined rather than filled: it
is an offer, not the thing the site is for. */
.dl-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-btn{border:1px solid var(--gold);color:var(--gold);border-radius:8px;
padding:7px 16px;text-decoration:none;white-space:nowrap;font-weight:600}
.dl-btn:hover{background:var(--gold);color:var(--surface)}
/* WHERE THE FILE COMES FROM, beside the button rather than under it. This site
does not host the executable, and a reader about to run a downloaded binary
is entitled to see whose drive it is on BEFORE they click. Quiet by default
and it lights up on hover, because it is an identification first and a link
second. */
.dl-src{display:inline-flex;align-items:center;gap:5px;font-size:13px;
color:var(--muted);text-decoration:none;white-space:nowrap}
.dl-src:hover{color:var(--text-2)}
.dl-src svg{flex:none;opacity:.85}
.dl-why{color:var(--text-2);font-size:13px;margin-top:6px}
/* /download — a reading page, so it takes the support page's measure and its
list styling rather than growing a second set. */
.dl-page{max-width:1060px;margin:0 auto;padding:28px 18px}
.dl-page .block{max-width:760px}
.dl-offer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
/* THE WHOLE FIGHT — a reading surface first, so it is dense and quiet. Folded
shut by default; the ordinary reader is not asked to care. */
.whole-fight{grid-column:1/-1;margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.whole-fight > summary{cursor:pointer;font-size:11.5px;color:var(--muted);list-style:none;padding:2px 0}
.whole-fight > summary::-webkit-details-marker{display:none}
.whole-fight > summary::before{content:"▸ ";color:var(--muted)}
.whole-fight[open] > summary::before{content:"▾ "}
.whole-fight > summary:hover{color:var(--text)}
.wf-group{margin:6px 0 10px}
.wf-g-h{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.wf-row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;gap:4px 10px;
align-items:center;font-size:11.5px;padding:2px 0;border-bottom:1px solid rgba(128,128,128,.12)}
.wf-row code{color:var(--text-2);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.wf-val{font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wf-row.forced .wf-val b{color:var(--gold)}
.wf-was{color:var(--muted);font-size:10.5px;margin-left:6px}
/* The REASON spans the row: it is a sentence, and squeezing it into a column
would make the one thing a forced row exists to say the hardest to read. */
.wf-why{grid-column:1/-1;font-size:10.5px;color:var(--muted);line-height:1.35;padding-bottom:2px}
.wf-absent{color:var(--muted)}
.wf-ctl input[type=number]{width:6.5em}
/* THE HOUSE RULES: one column per weapon class, so a reader can see at a glance
that this fight has an opinion about Arch-Guns while standing on a Burston.
`auto-fit` rather than a fixed count — a phone gets one column per row and
the grid still fits, which is `check_mobile`'s rule. */
.wf-hr{grid-template-columns:minmax(0,11em) minmax(0,1fr);align-items:start}
.hr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5em),1fr));
gap:6px 10px;min-width:0}
.hr-col{min-width:0}
.hr-h{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hr-col.here .hr-h{color:var(--gold)}
.hr-col .check{display:flex;align-items:center;gap:4px;font-size:11px;min-width:0}
.hr-col .check code{font-size:10.5px}
/* A box that is writing a RULE rather than the fight's own field says so
without a legend: the reader is looking at a control whose scope is the whole
class, which is not what any other checkbox on this page means. */
.check.ruled{color:var(--gold)}
/* ---- THE COMBAT RECORD -------------------------------------------------
One row per number the game pops. It is the WIDEST thing on the panel by
design — every column is a fact a reader checks a number against — so it
scrolls inside itself and the page never scrolls sideways for it. */
/* THE PEEK: the panel's own narrow view of the record. ONE renderer, two
widths — the columns a single column has no room for are dropped here rather
than in a second markup path, which is what keeps the two from drifting. */
.rec-peek{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:2px 0 6px}
.rec-peek table.rec-t{min-width:0;width:100%}
.rec-peek .rec-proc,.rec-peek .rec-wep,.rec-peek .rec-buff,.rec-peek .rec-dbf,
.rec-peek .rec-state{display:none}
.rec-peek thead th{font-size:10px}
.rec-peek td{padding:5px 8px}
.rec-peek .rec-calc{min-width:0}
.rec-peek .lg-mit,.rec-peek .lg-exact{display:none}
.rec-peek tr:last-child td{border-bottom:0}
.rec-peek-n{font-size:11px;color:var(--muted);margin:0 0 8px}
.rec-idle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.rec-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0 8px}
.rec-tools .tlabel{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rec-tools .pchip .ct{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.rec-sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.rec-count{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:6px}
/* WHICH SCREENFUL — drawn above the table and below it, because a reader who
has scrolled five hundred rows is the one who wants the next five hundred. */
.rec-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0;
font-variant-numeric:tabular-nums}
.rec-pager .tlabel{font-size:11px;color:var(--muted);letter-spacing:.03em}
.rec-pager .pchip[disabled]{opacity:.35;cursor:default}
/* THE RECORD IN ITS OWN WINDOW. The child document is this stylesheet over one
host element, so it needs only the page margin the app's own layout supplies
here — and the table gets the whole viewport to be long in. */
/* THE RECORD'S OWN WINDOW. It is a page of this site and is dressed like one:
the topbar's wordmark over a heading that says which fight the rows are
about, and the table given the whole width — which is the reason the window
exists. */
.recwin-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);
position:sticky;top:0;z-index:20}
.recwin-title{font-size:13px;font-weight:700;letter-spacing:.02em}
.recwin-sub{font-size:12px;color:var(--muted);margin-left:auto;
font-variant-numeric:tabular-nums}
.recwin-top .ghost-btn{height:28px;padding:0 9px;display:inline-flex;
align-items:center;justify-content:center;align-self:center}
.recwin{padding:14px 16px;max-width:none}
/* THE TABLE GETS THE REST OF THE WINDOW. Its own header is sticky, so growing
this does not cost the reader the column names. 250px is the chrome above it
— the window's heading, the tools row and the count. */
.recwin .rec-scroll{max-height:calc(100vh - 250px)}
/* THE ONE BLOCK THAT NEEDS THE SCREEN.
The record is a ten-column ledger and the column it exists for — where the
number comes from — is the widest of them, so inside the page's own reading
column it is the one always half off the right edge. Every other block on
this panel is a summary and belongs at reading width; this one is a table
somebody is auditing, and it gets the window. Below 900px it goes back to
the column, and below 720px a row becomes a card. */
@media (min-width:900px){
.rec-scroll{width:calc(100vw - 56px);max-width:calc(100vw - 56px);
margin-left:calc(50% - 50vw + 28px)}
.rec-tools,.rec-count{width:calc(100vw - 56px);margin-left:calc(50% - 50vw + 28px)}
}
.rec-scroll{overflow-x:auto;max-height:520px;overflow-y:auto;
border:1px solid var(--line);border-radius:10px}
table.rec-t{width:100%;min-width:1080px;border-collapse:separate;border-spacing:0;font-size:12px}
.rec-t thead th{position:sticky;top:0;z-index:2;background:var(--panel3);text-align:left;
font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;
padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.rec-t thead th.num{text-align:right}
.rec-t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.rec-t tbody tr:hover td{background:var(--panel2)}
.rec-t td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rec-t td.rec-t{width:72px;text-align:right;font-variant-numeric:tabular-nums;
color:var(--text-2);white-space:nowrap;border-left:3px solid transparent}
.rec-t .z{color:var(--muted)}
/* WHICH POOL THE NUMBER CAME OUT OF, as a stripe — a hit on a shielded body
pops two rows and the eye has to pair them at a glance. */
tr.rec-shield td.rec-t{border-left-color:var(--s1)}
tr.rec-health td.rec-t{border-left-color:var(--good)}
tr.rec-overguard td.rec-t{border-left-color:var(--gold)}
tr.rec-evt td{background:color-mix(in srgb,var(--accent) 6%,transparent);font-size:11.5px}
tr.rec-evt td.rec-t{border-left-color:var(--accent)}
tr.rec-reload_start td,tr.rec-reload_end td{background:color-mix(in srgb,var(--s1) 8%,transparent)}
tr.rec-transform_start td,tr.rec-transform_end td{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.rec-cause{display:block;font-size:10px;color:var(--muted)}
/* ---- THE RECORD ON A PHONE -------------------------------------------
A ten-column ledger with a 1080px minimum cannot be READ through a 326px
window. It was technically there — the block drew, the button worked, the
table scrolled sideways — and the column the whole panel exists for, the one
that says where the number came from, sat furthest off the right edge, so a
reader on a phone could see a damage figure and never its arithmetic.
So on a narrow screen a ROW BECOMES A CARD: the header row goes away, each
cell stacks with its own heading (`data-label`, filled by `recordRow`), and
nothing scrolls sideways. It is taller per row, which is the trade a phone
forces — and the filter chips above are what a reader shortens the list
with. */
@media (max-width:720px){
.rec-scroll{overflow-x:visible;max-height:none}
table.rec-t{min-width:0;display:block}
.rec-t thead{display:none}
.rec-t tbody{display:block}
.rec-t tr{display:block;padding:6px 0 8px;border-bottom:2px solid var(--line)}
.rec-t td{display:flex;gap:8px;align-items:baseline;border-bottom:0;
padding:2px 8px;width:auto !important;min-width:0 !important}
/* A CELL WITH NOTHING IN IT IS NOT A LINE. On a desktop an empty cell is an
empty column; stacked, it is a heading followed by a dash on every row. */
.rec-t td:empty{display:none}
.rec-t td::before{content:attr(data-label);flex:0 0 5.5em;color:var(--muted);
font-size:10px;text-transform:uppercase;letter-spacing:.04em;line-height:1.5}
.rec-t td:not([data-label])::before{content:none}
/* THE TIME IS THE CARD'S TITLE rather than one more labelled line. */
.rec-t td.rec-t{width:auto;text-align:left;border-left:4px solid transparent;
font-weight:700;font-size:12.5px}
.rec-t td.num{text-align:left}
.rec-t td.num b{font-size:15px}
.rec-calc{min-width:0}
.rec-buff,.rec-dbf,.rec-wep{width:auto}
.rec-t td.rec-calc{flex-wrap:wrap}
.rec-t td.rec-calc::before{flex-basis:100%}
/* An event row spans columns on a desktop; stacked, a colspan is just a
block and the empty ones are gone by the rule above. */
tr.rec-evt td[colspan],tr.rec-miss td[colspan]{display:block}
}
tr.rec-miss td{background:color-mix(in srgb,var(--critical) 8%,transparent);font-size:11.5px}
tr.rec-miss td.rec-t{border-left-color:var(--critical)}
.rec-pool{display:block;font-size:10px;color:var(--muted);font-weight:400}
.rec-crit{display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:3px;
font-size:9.5px;font-weight:700;background:color-mix(in srgb,var(--s4) 26%,transparent);color:var(--s4)}
.rec-head{color:var(--s1);font-weight:600}
/* Where the number comes from: base, the factors that MOVED, the two totals. */
.rec-calc{min-width:440px}
/* ---- THE LEDGER, LAYER BY LAYER ------------------------------------------
Three shapes, and the shape is the information: a BRACKET lists its terms, a
SNAP shows its grid, and only a MUL gets a multiplication sign. A quotient
has no shape here, which is what stops `×5.706 Condition Overload` — the
base bracket divided by itself — from coming back. */
/* TWO COLUMNS, NOT THREE. A lane of its own on the right puts the running
total at the edge a 1080px table is cut off at — the one number a reader
checks against the next layer's start, off screen. It rides in the body and
wraps with it. */
.lg{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:2px 10px;
align-items:baseline;padding:3px 0;border-top:1px solid var(--line)}
.lg:first-child{border-top:0}
.lg-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
white-space:nowrap;min-width:6.5em}
.lg-body{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:baseline;min-width:0}
.lg-out{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-2);
white-space:nowrap;padding:0 5px;border-radius:4px;
background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good-text)}
.lg-b .lg-lbl{color:var(--accent)}
.lg-b{border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-left:8px}
/* A SUM OF WHOLE NUMBERS. Marked like a bracket because it is the same kind of
claim — this number is built from these — and muted, because the part it
exists to show is a fraction of a point beside a seed in the hundreds. */
.lg-s .lg-lbl{color:var(--accent)}
.lg-s{border-left:2px solid color-mix(in srgb,var(--accent) 25%,transparent);padding-left:8px}
.lg-term{display:inline-flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.lg-term .lg-op{font-style:normal;color:var(--muted)}
.lg-term b{font-weight:400;color:var(--muted);font-size:10.5px}
.lg-term em{font-style:normal;color:var(--muted);font-size:10px;opacity:.75}
.lg-sum{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.lg-x{font-style:normal;color:var(--accent);font-weight:600;margin-right:2px}
.lg-m .lg-lbl{font-size:12px;color:var(--text);text-transform:none;letter-spacing:0;
font-variant-numeric:tabular-nums;min-width:4.5em}
.lg-m .lg-body b{font-weight:400;color:var(--muted);font-size:10.5px}
.lg-of{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.lg-scale{color:var(--muted);font-size:10px;white-space:nowrap}
/* THE SNAP SPANS THE WHOLE CELL. It is a seven-column table and it was living
in the layer's 1fr body lane, which a grid is entitled to squeeze — so the
before and after columns, which are the mechanic, were the ones clipped. */
.lg-q{display:block}
.lg-q .lg-lbl{display:inline-block;min-width:6.5em}
.lg-q .lg-body{display:block;margin-top:2px}
table.lg-snap{border-collapse:collapse;font-size:10.5px;font-variant-numeric:tabular-nums;
white-space:nowrap}
table.lg-snap td{padding:0 7px 0 0;color:var(--muted);white-space:nowrap}
table.lg-snap td.num{text-align:right;color:var(--text-2)}
table.lg-snap td.sn{color:var(--accent);font-weight:600}
table.lg-snap td.pc{color:var(--muted);padding-right:8px}
table.lg-snap td.to{color:var(--text)}
table.lg-snap td.ar{color:var(--line);padding:0 2px}
.lg-base .lg-out,.lg-base .lg-lbl{color:var(--text)}
.lg-mit{display:flex;flex-wrap:wrap;gap:3px;padding:4px 0 2px;border-top:1px solid var(--line)}
.lg-end{border-top:1px solid var(--line)}
.lg-end .lg-out{color:var(--good-text);font-size:14px}
.lg-exact{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.rec-b0,.rec-mid,.rec-eq{display:inline-block;padding:1px 5px;border-radius:4px;margin-right:3px;
font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-b0{background:color-mix(in srgb,var(--text-2) 15%,transparent)}
.rec-mid{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.rec-eq{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good-text)}
.rec-f{display:inline-flex;align-items:baseline;gap:3px;padding:1px 5px;border-radius:4px;
margin-right:3px;background:var(--panel2);border:1px solid var(--line);white-space:nowrap;
font-variant-numeric:tabular-nums}
.rec-f i{font-style:normal;color:var(--muted);font-size:10px}
.rec-b0.sub{background:transparent;border:1px dashed var(--line);font-weight:600}
.rec-b0 i{font-style:normal;color:var(--muted);font-size:10px;margin-left:4px;font-weight:400}
.rec-f.base{border-style:dashed}
.rec-pel{display:inline-block;font-size:10px;color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.rec-half{display:block;font-size:10px;color:var(--text-2);font-weight:600}
.rec-stk{display:flex;flex-wrap:wrap;gap:3px}
.rec-s em{font-style:normal;opacity:.62;font-size:9.5px;margin-left:1px}
.rec-s{display:inline-flex;align-items:baseline;gap:2px;padding:0 5px;height:16px;line-height:16px;
border-radius:3px;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.rec-s.up{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.rec-s.on{background:color-mix(in srgb,var(--s7) 20%,transparent);color:var(--s7)}
/* A PROC AND A TRIGGER SHARE A COLUMN AND NOT A COLOUR: one lands on the
target, one lands on you, and the two state columns they explain are
coloured the same way. */
.rec-p.on{background:color-mix(in srgb,var(--s7) 20%,transparent);color:var(--s7)}
.rec-p.up{background:color-mix(in srgb,var(--gold) 24%,transparent);color:var(--gold)}
.rec-p{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:3px;
font-size:10px;font-weight:600;margin:0 2px 2px 0;
background:color-mix(in srgb,var(--s8) 20%,transparent);color:var(--s8)}
.rec-buff,.rec-dbf{width:140px}
.rec-wep{width:110px}
/* NO COLUMN IS SQUEEZED INTO A STACK OF LETTERS. `.rec-calc` asks for 340px
inside a 1080px table, and the two narrow columns beside it lost so much
room that a two-character Chinese label wrapped one character per line —
"头 部" over two rows and the proc chips turned on their side (seen on the
Chinese page). A minimum keeps them readable; the table already
scrolls sideways inside its own container, which is where the extra width
comes from. */
.rec-t td:nth-child(3){min-width:66px;white-space:nowrap}
.rec-proc{min-width:86px;vertical-align:top}
.rec-p{white-space:nowrap}
.rec-t td.num{min-width:104px}
/* THE WEAPON COLUMN SETS THE ROW HEIGHT, so it decides how much of the ledger
fits on a screen. Five facts stacked one per line made every row 129px tall
for 40px of content — a 20,000-row stream is then two million pixels of
scroll. They are short, so they flow. */
.rec-wep{width:168px}
.rec-mag{display:inline-block;margin:0 6px 0 0}
.rec-gauge{width:56px;vertical-align:middle;display:inline-block;margin:0 6px 1px 0}
.rec-f.mit{border-color:color-mix(in srgb,var(--critical) 40%,transparent);
background:color-mix(in srgb,var(--critical) 9%,transparent)}
/* THE FACTORS THAT DID NOTHING, as a count you can hover. They are noise on a
row and their NAMES are a clue — "the Bane is there and it paid ×1.00" is
why a build is not working. */
.rec-inert{display:inline-block;font-size:10px;color:var(--muted);border-bottom:1px dotted var(--muted);
cursor:help;margin-left:2px}
.rec-form{display:inline-flex;align-items:center;height:15px;padding:0 5px;border-radius:3px;
font-size:9.5px;font-weight:700;line-height:1}
.rec-form.base{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--text-2)}
.rec-form.inc{background:color-mix(in srgb,var(--gold) 26%,transparent);color:var(--gold)}
.rec-gauge{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.rec-gauge>i{display:block;height:100%;background:var(--gold);border-radius:2px}
.rec-mag.firing{color:var(--text)}
.rec-mag.idle{opacity:.62}
.rec-mag{display:block;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.rec-state{width:180px}
.rec-state span{display:block;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-state i{font-style:normal;color:var(--muted);font-size:10px;margin-right:4px}
/* `.rec-proc` IS A CELL RULE, not a chip rule: as a chip rule on the `| `,
every row with no proc draws an empty coloured 16px box where its procs
would have been, and every row with one draws the chip inside a second box
the same colour. The chip is `.rec-p`; the CELL is this, and it is a width
and nothing else. */
.rec-org{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;
font-size:10.5px;font-weight:700;line-height:1;white-space:nowrap;
background:color-mix(in srgb,var(--text-2) 13%,transparent);color:var(--text-2)}
.rec-o-multishot{background:color-mix(in srgb,var(--s5) 20%,transparent);color:var(--s5)}
.rec-o-punch_through{background:color-mix(in srgb,var(--s1) 18%,transparent);color:var(--s1)}
.rec-o-status{background:color-mix(in srgb,var(--s7) 18%,transparent);color:var(--s7)}
.rec-o-chain,.rec-o-splash,.rec-o-radial{background:color-mix(in srgb,var(--s3) 18%,transparent);color:var(--s3)}
/* The shield-gate window, which nothing this app fires takes — drawn so the
claim can be checked the day melee lands (MEASUREMENTS M61). */
.rec-gate{color:var(--s1)}
/* THE CALCULATOR'S OWN STATUS, bottom right and out of the way. It is a TAB
until it is opened: the reader wants it in two moments — while a scan runs
and after one that failed — and furniture the rest of the time is what makes
a warning invisible when it finally matters. */
.calc-status{position:fixed;right:12px;bottom:12px;z-index:60;font-size:12px;
display:flex;flex-direction:column;align-items:flex-end;gap:0}
.calc-status .cs-tab{font:inherit;font-size:12px;padding:5px 10px;cursor:pointer;
border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text-2)}
.calc-status .cs-tab:hover{border-color:var(--accent)}
/* A LOSS IS GOLD, NOT RED. It is not an error — the pool rebuilds on the next
question — it is a fact the reader could not previously see at all. */
.calc-status.bad .cs-tab{border-color:var(--gold);color:var(--gold)}
.calc-status .cs-lost{color:var(--gold);font-variant-numeric:tabular-nums}
.calc-status.open .cs-tab{border-bottom-left-radius:0;border-bottom-right-radius:0}
.calc-status .cs-body{width:min(280px,80vw);padding:8px 10px;background:var(--panel2);
border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;
display:flex;flex-direction:column;gap:5px}
.calc-status .cs-row{display:flex;justify-content:space-between;gap:10px}
.calc-status .cs-row span{color:var(--text-2)}
.calc-status .cs-row b{color:var(--text);font-weight:600;text-align:right;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.calc-status .cs-why{color:var(--gold);line-height:1.35}
/* ---- THE JUMP MENU ---------------------------------------------------
A floating index of the sections on the page. It is a GRIP until it is
opened, like the status tab above: the reader wants it when they are looking
for something, and furniture the rest of the time is what makes a page feel
crowded. It DRAGS, so whichever corner is free on this window is where it
can live; `left`/`top` are written by `renderJump` and clamped to the
viewport on every resize, because a remembered position on a wide monitor is
off-screen on a laptop. */
/* BELOW THE TOPBAR'S OWN PANELS (z 60): a menu the reader parked must never
cover the dropdown they just opened. Shut it is a pill naming where you are;
open it is a card whose whole header is the handle. */
.jump{position:fixed;z-index:55;font-size:12px}
.jump-grip{display:flex;align-items:center;gap:7px;font:inherit;font-size:12px;line-height:1;
padding:6px 12px 6px 8px;cursor:grab;touch-action:none;max-width:min(230px,calc(100vw - 24px));
border:1px solid var(--line);border-radius:999px;color:var(--text-2);
background:color-mix(in srgb,var(--panel2) 88%,transparent);backdrop-filter:blur(8px);
box-shadow:0 4px 16px rgba(0,0,0,.22)}
.jump-grip:hover{border-color:var(--accent);color:var(--text)}
.jg-h{color:var(--muted);font-size:14px;line-height:1;user-select:none}
.jg-i{font-size:13px}
.jg-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.jg-n:empty{display:none}
.jump.dragging .jump-grip,.jump.dragging .jump-head{cursor:grabbing}
.jump.open .jump-grip{display:none}
.jump-panel{display:none;flex-direction:column;width:min(260px,calc(100vw - 24px));
border:1px solid var(--line);border-radius:12px;overflow:hidden;
background:color-mix(in srgb,var(--panel2) 92%,transparent);backdrop-filter:blur(10px);
box-shadow:0 12px 36px rgba(0,0,0,.32)}
.jump.open .jump-panel{display:flex}
.jump-head{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;cursor:grab;
user-select:none;touch-action:none;border-bottom:1px solid var(--line);background:var(--panel3)}
.jh-t{flex:1 1 auto;font-weight:600;color:var(--text)}
.jump-x{font:inherit;font-size:12px;line-height:1;padding:4px 6px;border:0;border-radius:6px;
background:none;color:var(--muted);cursor:pointer}
.jump-x:hover{background:var(--surface);color:var(--text)}
.jump-body{max-height:min(62vh,520px);overflow-y:auto;padding:8px}
.jump-mods{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.jump-mod{font-size:11px;padding:3px 8px;border-radius:999px;text-decoration:none;
border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
.jump-mod:hover{border-color:var(--accent);color:var(--text)}
.jump-mod.sel{color:var(--text);border-color:var(--accent)}
/* One row per fold on the page. A BLOCK is the outdented row and its sections
are indented under it, which is the page's own shape said in one column. */
.jump-row{display:flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:12px;
text-align:left;padding:4px 6px;border:0;border-radius:6px;background:none;
color:var(--text-2);cursor:pointer}
.jump-row:hover{background:var(--surface);color:var(--text)}
.jump-row.blk{font-weight:600;color:var(--text);margin-top:3px}
.jump-row.sub{padding-left:18px}
.jump-row.deep{padding-left:30px}
.jump-row .jr-n{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* THE CARET IS THE FOLD CONTROL AND THE ROW IS THE JUMP: a click on the caret
shuts or opens that section in place and moves nothing. */
.jump-row .jr-c{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;margin:-2px -2px -2px 0;font-size:13px;line-height:1;color:var(--text-2);
border:1px solid var(--line);border-radius:5px;background:var(--surface);cursor:pointer}
.jump-row .jr-c:hover{border-color:var(--accent);color:var(--text)}
.jump-row.is-shut{color:var(--muted)}
.jump-row.here{color:var(--text);background:color-mix(in srgb,var(--accent) 13%,transparent);
box-shadow:inset 2px 0 0 var(--accent)}
.jump-foot{display:flex;gap:5px;margin-top:7px;padding-top:6px;border-top:1px solid var(--line)}
.jump-foot .ghost-btn{flex:1 1 0;font-size:11px;padding:3px 6px}
/* THE WARFRAME BUILDER. The weapon builder's slots, rows and dropdowns, and only
what a frame has that a weapon does not: five shard sockets and ability
cards. The aura sits where a weapon's stance does. */
.wf-caps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.wf-capbox{flex:1 1 180px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--surface)}
.wf-capbox.off{opacity:.55}
.wf-capbox .wf-caph{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.wf-capbox .wf-capsrc{font-size:11px;color:var(--text-2);line-height:1.4}
.wf-cap{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:600;
border:1px solid var(--line);color:var(--text)}
.wf-cap.invulnerable,.wf-capbox.invulnerable .wf-caph{color:#e8a33d}
.wf-cap.status_cleanse,.wf-capbox.status_cleanse .wf-caph{color:#2fb36d}
.wf-cap.damage_cap,.wf-capbox.damage_cap .wf-caph{color:#3d8bfd}
.wf-cap.status_immunity,.wf-capbox.status_immunity .wf-caph{color:#9b59d0}
.wf-gate{border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--surface);margin:0 0 12px}
.wf-gate .wf-caph{font-size:12px;font-weight:700;margin-bottom:3px}
.wf-gate .wf-capsrc{font-size:11.5px;color:var(--text-2);line-height:1.5}
.wf-gate table{border-collapse:collapse;font-size:11.5px;margin-top:5px;width:100%}
.wf-gate td,.wf-gate th{padding:3px 6px;border-top:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums}
.wf-gate th{color:var(--muted);font-weight:600}
.wf-gate .ok{color:var(--good-text)}
.wf-gate .warn{color:var(--gold)}
.op-schools{display:flex;flex-wrap:wrap;gap:6px}
.op-school{font:inherit;font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);cursor:pointer}
.op-school.sel{border-color:var(--accent);color:var(--accent);font-weight:700}
.op-nodes{display:flex;flex-direction:column;gap:8px}
.op-node{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--panel2);opacity:.65}
.op-node.on{opacity:1;border-left:3px solid var(--accent)}
/* A WAYBOUND IS NOT A CHOICE: always on, and no control beside it. */
.op-node.wb{opacity:1;border-left:3px solid var(--line)}
.op-node .mn{font-size:13px;font-weight:600}
.op-node .me,.wf-operator .me{font-size:12px;color:var(--text-2);line-height:1.45}
.op-when{font-size:11px;color:var(--muted);margin-top:4px}
.op-when label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.op-when input{margin:0;flex:none}
.wf-operator{display:flex;flex-direction:column;gap:6px}
.wf-operator .wf-op-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-artifact{display:flex;flex-direction:column;gap:8px}
.op-artifact-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-artifact-head img{width:44px;height:44px;object-fit:contain}
.op-artifact-head .mn{font-size:14px;font-weight:700}
#wf-aura-block{margin-bottom:10px}
#wf-aura-block .exlabel{margin-top:0}
.wf-shards{display:flex;flex-direction:column;gap:6px}
.wf-shard{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wf-swatch{width:12px;height:12px;border-radius:3px;border:1px solid var(--line);flex:none}
.wielder-detail{margin-top:10px}
.wld-pane{display:flex;flex-direction:column;gap:6px;min-width:0}
.wld-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
iframe.wld-frame{width:100%;height:480px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
/* A PAGE FRAMED BY A WEAPON'S WIELDER: the shell's chrome is the outer page's. */
.embed .topbar,.embed .footer,.embed .jump,.embed .nona-fab,.embed .nona{display:none!important}
.wf-tau{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2)}
.wf-helminth{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.wf-hl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.wf-abilities{display:flex;flex-direction:column;gap:10px}
.wf-ab{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel2)}
.wf-ab.infused{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.wf-ab-h{display:flex;align-items:center;gap:9px}
.wf-key{width:19px;height:19px;border-radius:50%;background:var(--plane);border:1px solid var(--line);
font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.wf-ab-icon{width:34px;height:34px;border-radius:50%;padding:5px;background:#1c2431;flex:none;object-fit:contain}
.wf-ab .mn{font-size:13px;font-weight:600}
.wf-costs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin-top:2px}
.wf-costs .sbase{color:var(--muted);text-decoration:line-through}
.wf-ab-desc{font-size:12px;color:var(--text-2);line-height:1.45;margin:6px 0}
.wf-ab-stats{grid-template-columns:minmax(0,1fr)}
.wf-ab-stats .sbase{color:var(--muted);font-weight:400}
.wf-ab-stats .wf-der .k{color:var(--gold)}
.wf-scale{font-size:9px;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 3px}
.wf-ab-none{font-size:11px;color:var(--muted)}
.wf-adm{font-size:11px;color:var(--text-2)}
.wf-adm.inert{color:var(--gold)}
/* NONA (九九), the in-page agent: a button in the corner and a panel beside the
page, never over the build she is changing — the reader watches both. */
.nona-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;height:44px;min-width:44px;padding:0 16px;border-radius:22px;border:none;background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nona{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(400px,100vw);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:-6px 0 18px rgba(0,0,0,.12);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.nona-head{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.nona-name{font-weight:700;font-size:15px;margin-right:auto}
.nona-chat{flex:1;display:flex;flex-direction:column;min-height:0}
.nona-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.nona-msg{font-size:13px;line-height:1.5;max-width:92%;word-wrap:break-word}
.nona-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-radius:12px 12px 2px 12px;padding:7px 11px;white-space:pre-wrap}
.nona-msg.assistant{align-self:flex-start;background:var(--panel2);border-radius:12px 12px 12px 2px;padding:7px 11px}
.nona-msg.assistant p{margin:0 0 6px}.nona-msg.assistant p:last-child{margin:0}
.nona-msg.assistant ul{margin:0 0 6px;padding-left:18px}
.nona-msg.assistant code{font-size:12px;background:var(--panel3);padding:0 3px;border-radius:3px}
.nona-msg.tool{align-self:flex-start;font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);padding-left:4px}
.nona-msg.tool::before{content:"· "}
.nona-msg.tool.ok::before{content:"✓ ";color:var(--good)}
.nona-msg.tool.no::before{content:"✕ ";color:var(--critical)}
.nona-msg.note{align-self:center;font-size:11px;color:var(--text-2)}
.nona-msg.error{align-self:stretch;font-size:12px;color:var(--critical);border:1px solid var(--critical);border-radius:8px;padding:6px 9px}
.nona-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-end}
.nona-foot textarea{flex:1;resize:none;font:inherit;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--plane);color:var(--text)}
.nona-foot .run-btn{margin:0;width:auto;padding:9px 14px;font-size:13px}
.nona-foot .run-btn.busy{background:var(--critical)}
.nona-settings{padding:14px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.nona-settings label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2)}
.nona-settings input,.nona-settings select{font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--plane);color:var(--text)}
.nona-fine{font-size:11px;color:var(--muted);margin:0}
.nona-settings .run-btn{margin-top:4px}
/* The page's own dropdown opens ABOVE the panel it was opened from. */
.nona-open .popover{z-index:62}
.nona-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nona-lbl{font-size:12px;color:var(--text-2);width:100%}
.nona-detect{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nona-status{font-size:12px;color:var(--muted)}
.nona-status.good{color:var(--good-text)}
.nona-status.bad{color:var(--critical)}
.nona-settings .dd{width:100%}
.nona-settings .run-btn:disabled{opacity:.5;cursor:not-allowed}
.nona-convs{display:flex;gap:6px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line)}
.nona-convs .dd{flex:1;min-width:0}
.nona-msg.usage{align-self:flex-start;font-size:10.5px;color:var(--muted);margin-top:-4px;padding-left:4px}
.nona-foot-note{font-size:10.5px;color:var(--muted);padding:0 12px 8px}
.nona-unmeasured{text-decoration:underline dotted var(--gold);text-underline-offset:3px;cursor:help}
.nona-msg.card{align-self:stretch;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel3);font-size:12.5px}
.nona-card-h{margin-bottom:4px;color:var(--text-2)}
.nona-diff{font-size:12px;margin:2px 0}
.nona-diff.add{color:var(--good-text)}
.nona-diff.del{color:var(--critical)}
.nona-card-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nona-suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.nona-suggest .pchip{height:auto;padding:5px 10px;line-height:1.3;white-space:normal}
.nona-msg.memory{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--text-2);border-left:3px solid var(--gold);padding:4px 8px;background:var(--panel3);border-radius:0 8px 8px 0}
.nona-suggest .pchip.resume{border-color:var(--accent)}
.nona-suggest .pchip.incog{color:var(--muted)}
.nona-memory{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.nona-mem-row{display:flex;align-items:center;gap:6px}
.nona-mem-k{font-size:11px;color:var(--muted);min-width:64px}
.nona-mem-row input{flex:1;min-width:0}
.nona-mem-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nona-mem-b label.check{padding-top:0}
/* THE WEAPON'S BENCHMARK TAB. The matrix states one cell per line; nothing in
it compares two lines, because two rulers are two environments. */
.wb-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.wb-tab th{text-align:left;font-weight:600;color:var(--text-2);font-size:11.5px;
padding:4px 8px;border-bottom:1px solid var(--line)}
.wb-row{cursor:pointer}
.wb-row td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--text)}
.wb-row:hover td{background:var(--panel3)}
.wb-row.sel td{background:var(--panel2);font-weight:600}
.wb-mode,.wb-rank{color:var(--text-2)}
.wb-score{font-variant-numeric:tabular-nums}
.wb-rank{text-align:right;font-variant-numeric:tabular-nums}
.wb-detail{margin-top:12px}
.wb-terms{margin:0 0 8px;color:var(--text-2);font-size:11.5px}
.wb-cards{display:flex;flex-wrap:wrap;gap:5px}
.wb-card{font-size:11.5px;border:1px solid var(--line);border-radius:6px;
padding:2.5px 7px;background:var(--panel2);color:var(--text)}
.wb-card.wb-evo{background:transparent;color:var(--text-2)}
.wb-ceiling{margin:10px 0 0;color:var(--text-2);font-size:12px}
.wb-empty{margin:0;color:var(--text-2);font-size:12.5px;max-width:64ch}
/* THE PAGE'S OWN ANSWER, above the modules — A SLOT, NOT A BOX. What goes in
it is one `.fold.sect`, which draws its own border, padding and ground; a
frame here too is two frames around one collapsed line, which is what the
reader who opens this page every day sees of it. */
.doc{margin:0}
.doc a{color:var(--accent)}
/* THE ENTRANT CLASS, its own row under the build filters: two answers that are
never added together read worse side by side with three that are. */
.bclass{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
/* ---- PART VALUE ANALYSIS (#shapley-block) ---- */
.shp-parts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.shp-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.shp-group .sb-h{min-width:5em}
.shp-part{display:inline-flex;flex-direction:row;align-items:center;gap:4px;font-size:13px;color:var(--text);cursor:pointer}
.shp-part input{width:auto;margin:0}
.shp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px}
.shp-controls label{flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.shp-controls input[type=number]{width:5em}
.shp-cost{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.shp-over,.shp-note{color:var(--critical);font-size:12px}
.shp-note{margin:6px 0}
.shp-stale{margin:6px 0;padding:4px 8px;border-radius:6px;background:var(--panel2);color:var(--gold);font-size:12px}
.shp-meta{color:var(--text-2);font-size:12px;margin-top:8px}
.shp-scope{color:var(--muted);font-size:12px}
.shp-total{margin:6px 0 8px}
.shp-scroll{overflow-x:auto;max-width:100%}
.shp-table,.shp-matrix{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}
.shp-table th,.shp-table td,.shp-matrix th,.shp-matrix td{padding:3px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.shp-table tbody th,.shp-matrix tbody th{text-align:left;font-weight:500}
.shp-table thead th,.shp-matrix thead th{color:var(--text-2);font-weight:500;font-size:12px}
.shp-table td small{color:var(--muted);font-size:10px;margin-left:3px}
.shp-phi{font-weight:600}
.shp-dim{opacity:.45}
.shp-h{margin:14px 0 4px;font-size:13px}
.shp-matrix td{min-width:4.2em}
.shp-i.syn{background:color-mix(in srgb,var(--good) var(--a),transparent)}
.shp-i.dil{background:color-mix(in srgb,var(--critical) var(--a),transparent)}
.shp-diag{background:var(--panel2)}
/* THE WEAPON'S BRIEF — the only part of a weapon page that is about the
weapon, and it ships in the served HTML so a reader that never runs
JavaScript still gets every figure. It folds from its own heading like any
section; the body stays in the document either way, which is what lets it
be closed by default without hiding anything from a machine. */
.w-brief{margin:0 0 14px}
.w-brief>.fold-h>.w-cn{color:var(--muted);font-size:12px}
.w-brief>.fold-h>.sim-hint{color:var(--text-2)}
.w-tab{border-collapse:collapse;width:100%;font-size:12px;
font-variant-numeric:tabular-nums;margin:0 0 10px}
.w-tab:last-child{margin-bottom:0}
.w-tab caption{caption-side:top;text-align:left;color:var(--muted);
font-size:11px;padding:0 0 6px}
.w-tab th,.w-tab td{padding:5px 10px 5px 0;vertical-align:top;
border-bottom:1px solid var(--line);text-align:left}
.w-tab tr:last-child>*{border-bottom:0}
.w-tab th{color:var(--muted);font-weight:500;white-space:nowrap}
.w-tab td{color:var(--text-2)}
.w-tab .w-num{color:var(--gold);font-weight:600;text-align:right;
white-space:nowrap;padding-right:14px}
/* THE ANSWER TABLE IS THE WIDE ONE and a build is a long cell, so it scrolls
in a box of its own rather than pushing the page sideways. */
.w-answers{display:block;overflow-x:auto;white-space:normal}
.w-answers thead th{color:var(--text-2);font-weight:600}
.w-answers tbody td:first-child{color:var(--text);white-space:nowrap}
/* WHAT THE NUMBER DOES NOT ACCOUNT FOR. It is absent on a weapon with nothing
to admit, so text here is a signal rather than a filled slot. */
.w-notes{margin:10px 0 0;font-size:12px;color:var(--muted)}
.w-notes b{color:var(--text-2);font-weight:600}
.w-notes ul{margin:5px 0 0;padding-left:18px}
.w-notes li{margin:3px 0}
/* WHO ELSE IS FIRING — the roster (`28-fight-roster.js`). A LIST of rows for
the same reason the squad's shards are one: each seat is a weapon, a preset
and a remove, and a field grid would floor every track at min-content and
push the remove off a phone (`check_mobile.mjs`). */
.rs{display:flex; flex-direction:column; gap:8px}
.rs-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
/* THE WEAPON IS THE ROW and the preset is half of it: both grow, the weapon
twice as fast, so a long name is readable before a preset name is squeezed. */
.rs-row > .dd{flex:2 1 180px; min-width:0}
.rs-row > .dd[id^="dd-seat-preset"]{flex:1 1 120px}
/* THE SEAT NUMBER, and it is the ONE thing every row shares with the result
panel's per-seat table: the same 1, 2, 3 in the same order, so a reader
comparing the two is comparing the same list. */
.rs-n{display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:20px; border-radius:10px; font-size:11px;
background:var(--line); color:var(--muted)}
.rs-you .rs-n{background:var(--accent); color:var(--surface)}
.rs-me{font-weight:600}
.rs-hint{color:var(--muted); font-size:12px; flex:1 1 100%; min-width:0}
.rs-row .rs-hint{flex:0 1 auto}
.rs-x{padding:2px 8px; line-height:1}
.rs-add{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
/* ---- ONE ACTOR'S SHEET, above the rows it is folded out of -------------
WCL gives a page per actor and SimC a line per action; this is both, and it
is made of the record — so it sits ON the record rather than beside it. */
.ac-sheet{border:1px solid var(--line);border-radius:10px;background:var(--surface);
margin:0 0 12px;overflow:hidden}
.ac-h{display:flex;align-items:baseline;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);
background:var(--panel3);flex-wrap:wrap}
.ac-side{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:1px 7px;border-radius:999px}
.ac-ally{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.ac-foe{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.ac-name{font-size:13px;font-weight:700}
.ac-sub{font-size:11px;color:var(--muted)}
.ac-tot{margin-left:auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ac-tab{width:100%;border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.ac-tab th{text-align:left;font-weight:600;color:var(--muted);font-size:10.5px;text-transform:uppercase;
letter-spacing:.04em;padding:6px 12px;border-bottom:1px solid var(--line)}
.ac-tab td{padding:5px 12px;border-bottom:1px solid var(--line)}
.ac-tab tr:last-child td{border-bottom:0}
.ac-tab .num{text-align:right}
/* THE BAR IS BEHIND THE NAME, not beside it: a share is a property of the row
it labels, and a column of its own costs the widest column its width. */
.ac-bar{position:relative;min-width:120px}
.ac-bar i{position:absolute;left:12px;top:50%;transform:translateY(-50%);height:15px;
border-radius:3px;background:var(--accent);opacity:.22}
.ac-bar span{position:relative}
.ac-none{color:var(--muted);text-align:center;padding:12px}
.ac-n{margin:0;padding:8px 12px;border-top:1px solid var(--line);
font-size:11px;color:var(--muted);line-height:1.6}
|