/* ---- shell: dark chrome around a document ------------------------------- */
:root{--chr:#171a21;--chr2:#1e222b;--chrink:#c8cdd8;--chrdim:#7d8595;
--chrrule:#2b303c;--acc:#e0a13c;--accd:#a9721f}
@media(prefers-color-scheme:dark){:root{--chr:#101319;--chr2:#171a21;--acc:#e8ae52}}
body{display:block}
.shell{display:flex;align-items:flex-start;min-height:100vh}
main{flex:1 1 auto;min-width:0}
.tb{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.85rem;
background:var(--chr);border-bottom:1px solid var(--chrrule);padding:0 1rem;height:3.4rem;
font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}
.tb-mark{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;color:#fff}
.tb-mark b{font-size:1.06rem;letter-spacing:-.01em}
.tb-mark span{color:var(--chrdim);font-size:.8rem}
.tb-right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.tb-cta{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
background:var(--acc);color:#16130c;font-weight:650;font-size:.85rem;
padding:.42rem .8rem;border-radius:.45rem}
.tb-cta:hover{background:#f0b458}
.tb-cta .ic{width:17px;height:17px}
.tb-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:2.1rem;
height:2.1rem;background:none;border:0;cursor:pointer;padding:0}
.tb-burger span{display:block;height:2px;background:var(--chrink);border-radius:2px}
/* ---- sidebar ------------------------------------------------------------ */
.sb{position:sticky;top:3.4rem;flex:0 0 15.5rem;width:15.5rem;
height:calc(100vh - 3.4rem);overflow-y:auto;overscroll-behavior:contain;
background:var(--chr);border-right:1px solid var(--chrrule);padding:.9rem .7rem 2rem;
font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}
.sb-cat{margin:1.1rem .55rem .3rem;font-size:.67rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--chrdim)}
.sb-nav>.sb-cat:first-child{margin-top:.5rem}
.sb-i{display:flex;align-items:center;gap:.6rem;padding:.44rem .55rem;border-radius:.4rem;
text-decoration:none;color:var(--chrink);font-size:.875rem;line-height:1.25;
border-left:2px solid transparent}
.sb-i:hover{background:var(--chr2);color:#fff}
.sb-i.on{background:var(--chr2);color:#fff;border-left-color:var(--acc);font-weight:600}
.sb-i.on .ic{color:var(--acc)}
.sb-i .ic{width:18px;height:18px;flex:0 0 18px;color:var(--chrdim)}
.sb-i:hover .ic{color:var(--chrink)}
.sb-i>span:first-of-type{flex:1 1 auto}
.sb-b{flex:0 0 auto;font-size:.6rem;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--accd);background:#e0a13c22;border:1px solid #e0a13c44;
padding:.1rem .3rem;border-radius:.25rem}
.sb-i.on .sb-b{color:var(--acc)}
.sb-ext{color:var(--chrdim);font-size:.8rem}
.sb-key{margin:1.4rem .25rem 0;padding-top:.9rem;border-top:1px solid var(--chrrule)}
.sb-key .k{display:flex;align-items:center;gap:.45rem;padding:.16rem .3rem;
font-size:.73rem;color:var(--chrdim)}
.sb-key i{width:.6rem;height:.6rem;border-radius:2px;flex:0 0 .6rem}
/* explicit swatches: the chip classes use pale fills that vanish at 0.6rem */
.sb-key .t-primary,.sb-key .t-corroborated{background:#3f9c6f}
.sb-key .t-single{background:#c99433}
.sb-key .t-unverified{background:#c9585a}
.sb-key-more{display:inline-block;margin:.5rem .3rem 0;font-size:.73rem;
color:var(--acc);text-decoration:none}
.sb-key-more:hover{text-decoration:underline}
.sb-tog{display:flex;align-items:center;justify-content:space-between;width:100%;
background:none;border:0;cursor:pointer;font:inherit;font-family:inherit;text-align:left;
padding:0 .55rem}
.sb-tog .chev{transition:transform .15s ease;font-size:.7rem;color:var(--chrdim)}
.sb-tog[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.sb-tog:hover{color:#fff}
.sb-group[hidden]{display:none}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:#16130c;
padding:.6rem 1rem;border-radius:0 0 .4rem 0;font-family:ui-sans-serif,system-ui,sans-serif;
font-weight:700;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sb-scrim{display:none}
/* ---- content sits inside the shell now ---------------------------------- */
main{max-width:none}
main>*{max-width:70rem}
main{padding:2.2rem 2rem 5rem}
.site-note{max-width:70rem;margin:3rem 0 0;padding-top:1rem;
border-top:1px solid var(--rule);color:var(--dim);font-size:.8rem;
font-family:ui-sans-serif,system-ui,sans-serif}
.toolhint{margin:.2rem 0 1rem;font-family:ui-sans-serif,system-ui,sans-serif;
font-size:.88rem}
.toolhint a{font-weight:650}
.toolhint span{color:var(--dim)}
.site-note a{color:inherit}
.rw{margin:.5rem 0 0;padding-left:1.1rem}
.rw li{margin:.15rem 0;font-size:.93rem}
.opt-row{background:var(--card);border:1px solid var(--rule);border-radius:.5rem;
padding:.7rem .9rem;margin:.4rem 0}
.opt-row b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--acc);
font-size:.95rem}
.opt-row .vals{font-size:.76rem;color:var(--dim);margin-left:.4rem;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.opt-row p{margin:.3rem 0 0;font-size:.88rem;color:var(--dim)}
/* Permission rows: the finder built them first, the rank and office pages use
   them too. Fourth time a component has had to move here after a second
   caller appeared -- the pattern is now predictable enough that a new page
   type should assume it will need to. */
.grp{margin:1.4rem 0 0}
.grp h3{margin:0 0 .4rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
color:var(--dim);font-family:ui-sans-serif,system-ui,sans-serif}
.perm{display:flex;align-items:center;gap:.6rem;padding:.42rem .6rem;border-radius:.4rem;
border:1px solid var(--rule);margin:.25rem 0;font-size:.94rem;background:var(--card)}
.perm.yes{border-color:#3f9c6f66;background:#3f9c6f14}
.perm.no{opacity:.5}
.perm .mk{width:1.1rem;flex:0 0 1.1rem;font-weight:700}
.perm.yes .mk{color:var(--ok)}
.perm.no .mk{color:var(--dim)}
.perm .holders{margin-left:auto;font-size:.76rem;color:var(--dim);
font-family:ui-sans-serif,system-ui,sans-serif;white-space:nowrap}
/* Breadcrumbs, tag chips, prev/next and the scoring-action row. Each started life in
   one module and is now used by detail pages, long-tail question pages and duel day
   pages alike -- a component with three callers belongs to the shell. The css gate
   caught all five the moment the day pages were added. */
.crumb{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.82rem;color:var(--dim);
margin:0 0 .5rem}
.crumb a{color:var(--dim)}
.hdr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin:0 0 .3rem}
.hdr h1{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.tag{background:var(--card);border:1px solid var(--rule);border-radius:.35rem;
padding:.22rem .55rem;font-size:.8rem;font-family:ui-sans-serif,system-ui,sans-serif}
.tag b{color:var(--acc)}
.jump{display:flex;flex-wrap:wrap;gap:.3rem;margin:1rem 0 0}
.jump a{background:var(--card);border:1px solid var(--rule);border-radius:.35rem;
padding:.26rem .6rem;text-decoration:none;font-size:.86rem}
.jump a:hover{border-color:var(--acc)}
.nxt{display:flex;justify-content:space-between;gap:.6rem;margin:2rem 0 0;
font-family:ui-sans-serif,system-ui,sans-serif;font-size:.9rem}
.acts{margin:1rem 0 0}
.act{display:flex;align-items:baseline;gap:.7rem;padding:.5rem .2rem;
border-bottom:1px solid var(--rule)}
.act:last-child{border-bottom:0}
.act .p{font-variant-numeric:tabular-nums;font-weight:700;min-width:5.5rem;text-align:right;
color:var(--acc)}
.act .a{flex:1 1 auto}
.act .d{font-size:.76rem;color:var(--dim);font-family:ui-sans-serif,system-ui,sans-serif;
white-space:nowrap}

/* The upgrade calculator, embedded on planner.html and on all 43 building pages. */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;
background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:1rem 1.1rem;
margin:1.2rem 0 0}
.fld{display:flex;flex-direction:column;gap:.3rem}
.fld label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.7rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fld select,.fld input{background:var(--bg);color:var(--ink);border:1px solid var(--rule);
border-radius:.4rem;padding:.5rem .6rem;font:inherit;font-size:.95rem;min-width:0}
.fld select:focus,.fld input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.out{margin:1rem 0 0}
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem}
.res div{background:var(--card);border:1px solid var(--rule);border-radius:.55rem;
padding:.75rem .9rem}
.res dt{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.7rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin:0}
.res dd{margin:.15rem 0 0;font-size:1.45rem;font-weight:700;line-height:1.1;
font-variant-numeric:tabular-nums}
.res dd small{display:block;font-size:.72rem;font-weight:400;color:var(--dim);
font-family:ui-sans-serif,system-ui,sans-serif;margin-top:.15rem}
.gate{background:var(--warnbg);border:1px solid var(--rule);border-radius:.55rem;
padding:.75rem .95rem;margin:.6rem 0 0;font-size:.92rem}
.gaps{color:var(--dim);font-size:.83rem;margin:.6rem 0 0}

/* Shared across every tool page: the filter box, its result count, and the notice
   block. They lived in whichever module happened to define them first, so a page built
   by a different module used them undefined -- the alliance finder shipped with a
   completely unstyled search input for exactly this reason. */
.fbox{display:flex;gap:.45rem;margin:1.2rem 0 0;background:var(--card);
border:1px solid var(--rule);border-radius:.6rem;padding:.35rem}
.fbox input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:var(--ink);
font:inherit;font-size:1.05rem;padding:.6rem .7rem}
.cnt{color:var(--dim);font-size:.9rem;margin:.9rem 0 0}
.warn{background:var(--warnbg);border:1px solid var(--rule);border-left:4px solid var(--warn);
border-radius:.45rem;padding:.6rem .9rem;margin:.8rem 0 0;font-size:.9rem}
.none{color:var(--dim);margin:1rem 0 0}
/* The search box is used by the hero AND by 404.html, which was rendering it completely
   unstyled because the rule lived in the home page's own <style>. Same lesson as the
   buttons below: a component with two callers belongs to the shell. */
.hsearch{display:flex;gap:.45rem;max-width:34rem;margin:0 0 1.3rem;
background:#0c0f14cc;border:1px solid #ffffff1f;border-radius:.6rem;padding:.32rem;
backdrop-filter:blur(3px)}
.hsearch input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:#fff;
font:inherit;font-size:.95rem;padding:.5rem .6rem}
.hsearch input::placeholder{color:#7d8595}
.hsearch button{flex:0 0 auto;background:var(--acc);color:#16130c;border:0;border-radius:.42rem;
font:inherit;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.88rem;
padding:.5rem 1.05rem;cursor:pointer}
.hsearch button:hover{background:#f0b458}
/* Buttons live in the shell, not on the home page. They were defined only in the index's
   own <style>, so a detail page using .b1 -- the building pages' "Plan a run" link --
   rendered as plain text. A component used by more than one page belongs to all of them. */
.btns{display:flex;flex-wrap:wrap;gap:.55rem;font-family:ui-sans-serif,system-ui,sans-serif}
.b1,.b2{display:inline-flex;align-items:center;text-decoration:none;font-weight:650;
font-size:.92rem;padding:.62rem 1.15rem;border-radius:.45rem}
.b1{background:var(--acc);color:#16130c}
.b1:hover{background:#f0b458}
.b2{border:1px solid var(--rule);color:var(--ink)}
.b2:hover{border-color:var(--acc)}
/* Inline prose links had no colour rule at all, so they fell through to the browser
   default #0000ee -- about 1.3:1 against the dark ground, i.e. invisible. Components
   that carry their own colour (.b1/.b2/.feat/.cta/.ixc a) are class-scoped and still win. */
main a{color:var(--accd);text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px}
main a:hover{color:var(--acc)}
@media(prefers-color-scheme:dark){main a{color:var(--acc)}}
@media(max-width:940px){
 .tb-burger{display:flex}
 .sb{position:fixed;top:3.4rem;left:0;z-index:50;transform:translateX(-100%);
   transition:transform .18s ease;box-shadow:0 0 2rem #0007}
 body.nav-open .sb{transform:none}
 body.nav-open .sb-scrim{display:block;position:fixed;inset:3.4rem 0 0;z-index:45;background:#0009}
 main{padding:1.5rem 1.1rem 4rem}
 .tb-mark span{display:none}
}