:root{
  --ink:#0B1013; --panel:#131B20; --rule:#223038;
  --text:#E6EDF0; --dim:#8497A0; --dimmer:#5C6E77;
  --steel:#6FA8C7; --brass:#D7A13B; --rust:#B8503C; --moss:#6E9E6A;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--text);
  font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.num{font-family:Archivo,system-ui,sans-serif;letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.bar{position:sticky;top:0;z-index:20;background:#0B1013ee;backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:26px;height:58px}
.mark{font-family:Archivo;font-weight:800;font-size:18px}
.mark span{color:var(--brass)}
.mark{letter-spacing:-.02em}
nav{display:flex;gap:20px;margin-left:auto;font-size:14px;color:var(--dim);flex-wrap:wrap}
nav a{color:var(--dim);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;cursor:pointer}
nav a:hover{color:var(--text)}
nav a.on{color:var(--text);border-bottom-color:var(--brass)}
section[id],header[id]{scroll-margin-top:72px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.env{font-size:12px;color:var(--dim);border:1px solid var(--rule);border-radius:4px;padding:3px 8px}
.env i{font-style:normal;color:var(--moss)}

header.hero{padding:30px 0 22px;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:30px;align-items:start}
.rank-huge{font-size:clamp(40px,6.4vw,72px);font-weight:800;line-height:.92;margin:0}
.rank-huge em{font-style:normal;color:var(--brass)}
.sub{color:var(--dim);max-width:52ch;margin:10px 0 0;font-size:14px}

.track{margin-top:14px}
.track .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--dim);margin-bottom:5px}
.track .lab b{color:var(--text);font:500 14px Inter;font-variant-numeric:tabular-nums}
.seg{display:flex;gap:3px}
.seg div{height:17px;flex:1;background:#1B252B;border-radius:2px;overflow:hidden}
.seg div i{display:block;height:100%;background:var(--brass)}
.seg.tall div{height:21px}
.seg.steel div i{background:var(--steel)}
.seg.moss div i{background:var(--moss)}
.seg-key{display:flex;justify-content:space-between;color:var(--dimmer);font-size:11.5px;margin-top:5px}

.stat .v{font-family:Archivo;font-weight:600;font-size:23px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .v s{text-decoration:none;font-size:15px;color:var(--dim)}
.stat .k{color:var(--dim);font-size:13px}

.figpanel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:14px 16px}
.figrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center}
.figwrap{position:relative}
.figrow svg{height:252px;width:100%}
.metrics .stat{padding:6px 0;border-bottom:1px solid #1A242A}
.metrics .stat:last-child{border:0}
.mbar{height:4px;background:#1E2930;border-radius:2px;margin-top:6px;position:relative}
.mbar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--steel)}
.mbar u{position:absolute;top:-3px;width:2px;height:10px;background:#E6EDF0;text-decoration:none}
.chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.chip{background:#0E171C;border:1px solid var(--rule);color:var(--dim);border-radius:999px;
  padding:5px 12px;font:500 12.5px Inter;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--brass);color:var(--text)}
.figcap{color:var(--dimmer);font-size:12px;margin:9px 0 0;line-height:1.45}

.sexpick{display:flex;gap:10px;margin-bottom:6px}
.sexbtn{flex:1;background:#0E171C;border:1px solid var(--rule);border-radius:6px;padding:12px 8px;
  cursor:pointer;color:var(--dim);font:500 13px Inter}
.sexbtn[aria-pressed=true]{border-color:var(--brass);color:var(--text);background:#191307}
.sexbtn svg{height:52px;width:100%;margin-bottom:6px;display:block}
.slider{margin:16px 0}
.slider .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.slider .top span{font-size:12.5px;color:var(--dim)}
.slider .top b{font:600 17px Archivo;font-variant-numeric:tabular-nums}
.slider .ends{display:flex;justify-content:space-between;color:var(--dimmer);font-size:11px;margin-top:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;padding:0;border:0;
  background:#25333B;border-radius:2px;cursor:pointer}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #D7A13B55}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--brass);border:3px solid #0B1013;cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brass);
  border:3px solid #0B1013;cursor:pointer}
.segctl{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.segctl button{flex:1;background:#0E171C;border:1px solid var(--rule);color:var(--dim);border-radius:4px;
  padding:8px 6px;font:500 12.5px Inter;cursor:pointer;white-space:nowrap}
.segctl button[aria-pressed=true]{border-color:var(--brass);color:var(--text);background:#191307}
.balbar{position:relative;height:14px;border-radius:3px;margin-top:14px;
  background:linear-gradient(90deg,#31513E,#1E2930 50%,#55401D)}
.balbar u{position:absolute;top:-4px;width:3px;height:22px;background:#E6EDF0;border-radius:2px;
  text-decoration:none;transform:translateX(-1.5px)}
.balbar b{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#8497A0;opacity:.7}
.balkey{display:flex;justify-content:space-between;color:var(--dimmer);font-size:11.5px;margin-top:7px}
.macro{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.macro svg{width:100%;height:auto}
.mrow{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px solid #1A242A;font-size:13.5px}
.mrow:last-child{border:0}
.mrow i{width:10px;height:10px;border-radius:2px;flex:none}
.mrow span{color:var(--dim)}
.mrow b{margin-left:auto;font:600 15px Archivo;font-variant-numeric:tabular-nums}
.login{padding:34px 0}
.loginbox{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:34px 34px 30px;
  max-width:430px}
.loginbox .gbtn{max-width:300px}
.gbtn{display:flex;align-items:center;gap:10px;width:100%;justify-content:center;
  background:#fff;color:#1F1F1F;border:0;border-radius:4px;padding:11px 16px;
  font:600 14px Inter;cursor:pointer}
.gbtn svg{width:19px;height:19px;flex:none}
.bignum{font:600 44px Archivo;font-variant-numeric:tabular-nums;line-height:1}
.bignum s{text-decoration:none;font-size:17px;color:var(--dim);font-weight:500}

section{padding:40px 0;border-bottom:1px solid var(--rule)}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.head h2{margin:0;font-size:22px;font-weight:600}
.head p{margin:0;color:var(--dim);font-size:14px}
.head .btn{margin-left:auto}
.cols{display:grid;gap:18px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1120px){.c3{grid-template-columns:1fr 1fr}}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.card h3{margin:0 0 2px;font-size:15px;font-weight:600}
.card .note{color:var(--dim);font-size:13px;margin:0 0 12px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:6px}
svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:#1E2A31;stroke-width:1}
.ax{fill:var(--dimmer);font-size:10.5px;font-family:Inter}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  overscroll-behavior-x:contain}
.tabs::-webkit-scrollbar{display:none;height:0}
.tabs.dragging{cursor:grabbing;user-select:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
  font:500 14px Inter;padding:9px 14px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--brass)}
.pane{display:none}.pane.on{display:block}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--dim);font-size:12.5px;padding:0 10px 9px 0;border-bottom:1px solid var(--rule)}
td{padding:10px 10px 10px 0;border-bottom:1px solid #1A242A;vertical-align:middle}
td.n{font-variant-numeric:tabular-nums}
.mini{display:flex;gap:2px;width:118px}
.mini i{height:9px;flex:1;background:#1E2930;border-radius:1px}
.mini i.on{background:var(--brass)}
.tier{font-size:12.5px;color:var(--brass)}

.drop{border:1px dashed #2D3E47;border-radius:6px;padding:26px;text-align:center;background:#101A1F}
.drop b{display:block;font-family:Archivo;font-weight:600;font-size:17px}
.drop span{color:var(--dim);font-size:13.5px}
.parsed{margin-top:14px;font-size:13.5px}
.parsed div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #1A242A}
.parsed div span:last-child{font-variant-numeric:tabular-nums}
.ok{color:var(--moss)}
.btn{display:inline-block;background:var(--brass);color:#1A1206;border:0;border-radius:4px;padding:9px 16px;font:600 14px Inter;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--rule)}
.pipe{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.node{background:#101A1F;border:1px solid var(--rule);border-radius:6px;padding:14px 16px}
.node b{font-family:Archivo;font-size:15px}
.node p{margin:4px 0 0;color:var(--dim);font-size:13px}
.arrow{color:var(--dimmer);font-size:20px;text-align:center}
.rowlist{font-size:13.5px;color:var(--dim)}
.rowlist div{padding:6px 0;border-bottom:1px solid #1A242A;display:flex;justify-content:space-between}
.rowlist div span:last-child{color:var(--text);font-variant-numeric:tabular-nums}

.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px}
label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:5px}
input,select{width:100%;background:#0E171C;border:1px solid var(--rule);border-radius:4px;
  color:var(--text);font:500 15px Inter;padding:9px 10px;font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:2px solid var(--brass);outline-offset:-1px}
.readout{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid #1A242A}
.readout b{font-family:Archivo;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.readout span{color:var(--dim);font-size:13.5px}

.sheet{position:fixed;inset:0;background:#060A0Ccc;display:none;z-index:40;padding:28px 18px;overflow:auto}
.sheet.on{display:block}
.sheet-in{max-width:900px;margin:0 auto;background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:20px 22px 26px}
.sheet-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sheet-top h3{margin:0;font-size:19px}
.group{margin-top:22px}
.group h4{margin:0 0 10px;font:500 13px Inter;color:var(--brass)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.ex{background:#0E171C;border:1px solid var(--rule);border-radius:6px;padding:10px;cursor:pointer;text-align:center}
.ex:hover,.ex:focus{border-color:var(--brass);outline:none}
.ex svg{width:100%;height:56px;margin-bottom:6px}
.ex span{font-size:12.5px;color:var(--dim);display:block;line-height:1.3}
.ex.sel{border-color:var(--brass);background:#1A1508}
footer{padding:28px 0 60px;color:var(--dimmer);font-size:13px}
@media(max-width:880px){.hero-grid,.c2,.c3,.fields{grid-template-columns:1fr}.pipe{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}}

body.signed-out .bar,body.signed-out header.hero,body.signed-out section:not(.login),
body.signed-out footer{display:none}
body.signed-in #login{display:none}
#login{display:none}
body.signed-out #login{display:block}

.linkx{background:none;border:0;color:var(--dimmer);font:600 15px Inter;cursor:pointer;padding:0 2px;margin-left:8px}
.linkx:hover{color:var(--rust)}

.ver{font:500 11px Inter;font-style:normal;color:var(--dimmer);margin-left:9px;
  letter-spacing:0;vertical-align:middle}

/* hover feedback on anything clickable */
#board tr[data-ex]{cursor:pointer;transition:background .12s ease}
#board tr[data-ex]:hover td{background:#18232A}
#board tr[data-ex]:hover td:first-child{box-shadow:inset 2px 0 0 var(--brass)}
.btn{transition:filter .12s ease,border-color .12s ease,color .12s ease}
.btn:hover{filter:brightness(1.1)}
.btn.ghost:hover{border-color:var(--brass);color:var(--text)}
.tabs button:hover{color:var(--text)}
.chip:hover,.segctl button:hover,.sexbtn:hover{border-color:#3A4C57;color:var(--text)}
.drop{transition:border-color .12s ease,background .12s ease}
.drop:hover{border-color:var(--brass);background:#121D23;cursor:pointer}
.mrow,.rowlist div{transition:color .12s ease}
button:focus-visible,a:focus-visible,[data-ex]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text)}
th.sortable .arrow{color:var(--brass);font-size:10px;margin-left:4px}
tr.grouprow td{color:var(--brass);font:500 12px Inter;letter-spacing:.04em;text-transform:uppercase;
  padding-top:16px;border-bottom:1px solid var(--rule)}

.addrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media(max-width:880px){.addrow{grid-template-columns:1fr 1fr}}

.iconx{margin-left:auto;background:none;border:1px solid var(--rule);border-radius:6px;
  color:var(--dim);font:400 20px/1 Inter;width:34px;height:34px;cursor:pointer}
.iconx:hover{border-color:var(--brass);color:var(--text)}
.minih{margin:0 0 10px;font:500 13px Inter;color:var(--brass)}
.sheet-foot{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--rule)}
.check{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--dim);font-size:13.5px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--brass);cursor:pointer}
input:disabled{opacity:.4;cursor:not-allowed}

.figwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.45;filter:grayscale(.2) contrast(1.05);pointer-events:none}
.figwrap svg{position:relative}

.bigstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.bigstats .v{font:600 30px Archivo;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.bigstats .v s{text-decoration:none;font-size:14px;color:var(--dim);font-weight:500;margin-left:3px}
.bigstats .k{color:var(--dim);font-size:12.5px;margin-top:3px}
@media(max-width:880px){.bigstats{grid-template-columns:1fr 1fr}}
.flowlab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.flowlab span{color:var(--dim);font-size:12.5px}
.flowlab b{font:600 15px Archivo;font-variant-numeric:tabular-nums}
.flowbar{display:flex;height:24px;background:#151F25;border-radius:4px;overflow:hidden}
.flowbar i{display:block;height:100%}
.flowbar i+i{border-left:1px solid #0B1013}
.flowkey{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--dim);font-size:12px}
.flowkey b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

.gcard{padding:26px 26px 22px}
.gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:880px){.gauges{grid-template-columns:1fr 1fr;gap:20px}}
.gauge{text-align:center}
.gauge svg{width:100%;max-width:158px;height:auto;margin:0 auto;display:block}
.gauge .gname{color:var(--dim);font-size:13px;margin-top:2px}
.gauge .gsub{color:var(--dimmer);font-size:11.5px;margin-top:2px}
.gsplit{margin:26px 0 20px;padding-top:22px;border-top:1px solid var(--rule)}

.viewonly input[type=range],.viewonly .ends{display:none}
.viewonly .slider{margin:12px 0}
.viewonly .sexbtn{pointer-events:none}
.viewonly .sexbtn[aria-pressed=false]{opacity:.35}
.viewonly .slider .top{padding-bottom:10px;border-bottom:1px solid #1A242A;margin-bottom:0}

.ctlgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
  margin:24px 0 4px;padding-top:22px;border-top:1px solid var(--rule)}
.ctlgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.ctlgrid{grid-template-columns:1fr 1fr}}
.ctlval b{font:600 26px Archivo;font-variant-numeric:tabular-nums}
.ctlval span{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.ctlgrid .slider{margin:0 0 12px}
.segctl.tight{gap:4px;margin:0}
.segctl.tight button{padding:9px 4px;font-size:11.5px;line-height:1.25}
.macrogrid{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1.1fr);gap:26px;align-items:center}
@media(max-width:980px){.macrogrid{grid-template-columns:1fr}}
.macrogrid #macro-pie svg{max-width:190px;margin:0 auto;display:block}

.segctl.tight button svg{height:30px;width:100%;display:block;margin:0 auto;color:var(--dim)}
.segctl.tight button[aria-pressed=true] svg{color:var(--brass)}
.segctl.tight button span{display:block;font-size:11px;line-height:1.2}

.bars{display:grid;gap:13px}
.barrow{display:grid;grid-template-columns:96px minmax(0,1fr) 78px;align-items:center;gap:16px;font-size:13px;color:var(--dim)}
.barrow .track{height:16px;background:#1E2930;border-radius:3px;overflow:hidden}
.barrow .track i{display:block;height:100%;background:var(--steel);border-radius:3px}
.barrow .val{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.balrow{margin-bottom:22px}
.balrow:last-child{margin-bottom:4px}
.blabel{color:var(--dim);font-size:13px;margin-bottom:7px}
.balrow .bar{position:relative;height:18px;background:#1E2930;border-radius:3px;overflow:hidden}
.balrow .bar i{display:block;height:100%;background:var(--brass)}
.balrow .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#0B1013;opacity:.9}
.balrow .ends{display:flex;justify-content:space-between;color:var(--dimmer);font-size:11.5px;margin-top:7px}

.rangewrap{position:relative}
.rangewrap .mid{position:absolute;left:50%;top:-5px;width:2px;height:14px;background:#3E505B;
  transform:translateX(-1px);pointer-events:none;border-radius:1px}
.ends.three span:nth-child(2){color:var(--dim)}

#macro-templates button svg{height:26px;width:100%;display:block;margin:0 auto;color:var(--dim)}
#macro-templates button[aria-pressed=true] svg{color:var(--brass)}
#macro-templates button span{display:block;font-size:12px;line-height:1.2}
#macro-templates button{padding:9px 4px}

#train-src button svg{height:30px;width:100%;display:block;margin:0 auto;color:var(--dim)}
#train-src button[aria-pressed=true] svg{color:var(--brass)}
#train-src button span{display:block;font-size:11.5px;line-height:1.2}
#train-src button{padding:9px 4px}


.intakeblock{margin:26px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.intakeblock #macro-templates{margin-top:16px}

.advice{display:grid;grid-template-columns:minmax(120px,25%) minmax(0,1fr);gap:26px;
  align-items:center;margin-top:24px;padding-top:22px;border-top:1px solid var(--rule);
  min-height:150px}
@media(max-width:700px){.advice{grid-template-columns:96px minmax(0,1fr);gap:18px}}
.avatar{width:100%;max-width:210px;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;margin:0 auto}
.avatar svg{width:100%;height:100%;display:block}

.advicelist{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.advicelist li{color:var(--dim);font-size:13.5px;line-height:1.5;padding-left:16px;position:relative}
.advicelist li:before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:#3E505B}
.advicelist li.warn{color:var(--brass)}
.advicelist li.warn:before{background:var(--brass)}

#phys-ctl button{padding:12px 8px}
#phys-ctl button svg{height:44px;width:100%;display:block;margin:0 auto 7px;color:var(--dim)}
#phys-ctl button[aria-pressed=true] svg{color:var(--brass)}
#phys-ctl .pl{display:block;font-size:13px}
#phys-ctl .ps{display:block;color:var(--dimmer);font-size:11px;margin-top:3px}

.advtitle{font:600 27px Archivo;letter-spacing:-.02em;margin:0 0 10px;line-height:1.1}
.advtitle.warn{color:var(--brass)}
.advtitle.bad{color:var(--rust)}
.advtitle.good{color:var(--moss)}
.advtitle.sublime{color:#4FB286}
.advtitle.disaster{color:#8C2F22}

.dropveil{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:#060A0Ce6;backdrop-filter:blur(3px)}
.dropveil.on{display:flex}
.dropveil-in{border:2px dashed var(--brass);border-radius:14px;padding:46px 64px;text-align:center;
  color:var(--brass);background:#101A1F}
.dropveil-in svg{width:56px;height:56px;margin-bottom:14px}
.dropveil-in b{display:block;font:600 22px Archivo;color:var(--text);letter-spacing:-.02em}
.dropveil-in span{display:block;color:var(--dim);font-size:13.5px;margin-top:6px}

.cal{margin-bottom:18px}
.calhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.calhead b{font:600 15px Archivo;flex:1;text-align:center}
.calhead button{background:#0E171C;border:1px solid var(--rule);color:var(--dim);border-radius:5px;
  width:30px;height:28px;cursor:pointer;font-size:14px;line-height:1}
.calhead button:hover{border-color:var(--brass);color:var(--text)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calgrid span{text-align:center;color:var(--dimmer);font-size:10.5px;padding-bottom:4px}
.calgrid button{background:#0E171C;border:1px solid transparent;border-radius:5px;color:var(--text);
  font:500 12.5px Inter;padding:7px 0;cursor:pointer}
.calgrid button:hover{border-color:var(--rule)}
.calgrid button.off{color:var(--dimmer);background:transparent}
.calgrid button.today{border-color:var(--rule);color:var(--brass)}
.calgrid button.sel{background:var(--brass);color:#1A1206;border-color:var(--brass);font-weight:600}
.fld input[type=range]{margin-top:9px}

.steps{color:var(--dim);font-size:13px;padding-left:18px;margin:0;line-height:1.7}

#bmr-methods button svg{height:26px;width:100%;display:block;margin:0 auto 6px;color:var(--dim)}
#bmr-methods button[aria-pressed=true] svg{color:var(--brass)}
#bmr-methods button span{display:block;font-size:12px;line-height:1.2}
#bmr-methods button{padding:10px 6px}

.acct{display:flex;align-items:center;gap:8px}

.log{background:#0B1116;border:1px solid var(--rule);border-radius:6px;padding:12px 14px;margin-top:14px;
  color:var(--dim);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  height:230px;overflow:auto}

.logwrap{position:relative;margin-top:14px}
.logwrap .log{margin-top:0}
.copybtn{position:absolute;top:8px;right:8px;background:#16222A}

/* one scrollbar style everywhere */
*{scrollbar-width:thin;scrollbar-color:#31434E transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#2A3A44;border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3E5563;background-clip:content-box}
*::-webkit-scrollbar-thumb:active{background:var(--brass);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
.tabs::-webkit-scrollbar{height:0}
.log::-webkit-scrollbar-thumb{background:#31434E;background-clip:content-box}

.deploybtn{padding:6px 14px;font-size:13px;background:#E08A2E;color:#1A1206}
.deploybtn:hover{filter:brightness(1.08)}
.deploybtn:disabled{opacity:.55;cursor:default;filter:none}

.invite{display:grid;grid-template-columns:1fr 1.3fr auto;gap:8px;margin-top:14px}
.invite input{padding:8px 10px;font-size:13.5px}
@media(max-width:700px){.invite{grid-template-columns:1fr}}
.who{display:flex;flex-direction:column;gap:2px}
.who b{font:500 13.5px Inter;color:var(--text)}
.who span{color:var(--dimmer);font-size:11.5px}

.sesslabel{display:inline-block;vertical-align:-6px;margin-right:6px;color:var(--brass)}
.sesslabel svg{height:20px;width:26px;display:block}
.calhead .yr{font-size:12px}

.editrow{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:6px;align-items:center;width:100%}
.editrow input{padding:7px 9px;font-size:13px}
.editrow .btn{padding:7px 12px;font-size:13px}
#admin-users div[data-row]{align-items:center}

.rowacts{display:inline-flex;align-items:center;gap:4px}
.rowacts .linkx{font-size:15px}

.verdictcard{display:grid;grid-template-columns:minmax(90px,16%) minmax(0,1fr);gap:22px;align-items:center}
.verdictcard h3{margin:0 0 8px;font:600 21px Archivo;letter-spacing:-.02em}
.avatar.small{max-width:130px}
@media(max-width:700px){.verdictcard{grid-template-columns:76px minmax(0,1fr);gap:16px}}

#body-verdict.good,#level-verdict.good{color:var(--moss)}
#body-verdict.sublime,#level-verdict.sublime{color:#4FB286}
#body-verdict.warn,#level-verdict.warn{color:var(--brass)}
#body-verdict.bad,#level-verdict.bad{color:var(--rust)}
#body-verdict.disaster,#level-verdict.disaster{color:#8C2F22}


/* ---------- mobile audit ---------- */

/* top bar: logo and account on one line, the menu scrolls under it */
@media(max-width:820px){
  .bar .wrap{height:auto;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:6px}
  .mark{font-size:16px;order:1}
  .acct{order:2;margin-left:auto}
  nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:18px;
    padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{height:0}
  nav a{white-space:nowrap;padding-bottom:4px}
  section[id],header[id]{scroll-margin-top:104px}
  .env{font-size:11.5px}
  .deploybtn{padding:5px 11px;font-size:12px}
}

/* energy controls: one under the other, so the icons get room */
@media(max-width:820px){
  .ctlgrid{grid-template-columns:1fr;gap:22px}
  .ctlgrid > div{padding-bottom:20px;border-bottom:1px solid var(--rule)}
  .ctlgrid > div:last-child{border-bottom:0;padding-bottom:0}
  .segctl.tight button svg{height:30px}
  .gauges{grid-template-columns:1fr 1fr;gap:16px}
}

/* level board: keep the exercise and its level, drop the rest */
@media(max-width:820px){
  #board-table th:nth-child(2),#board-table td:nth-child(2),
  #board-table th:nth-child(3),#board-table td:nth-child(3),
  #board-table th:nth-child(4),#board-table td:nth-child(4){display:none}
  #board-table td:first-child{padding-right:6px}
  #board .lvl{white-space:nowrap}
  .legend{flex-wrap:wrap;gap:10px}
}

/* readings table can scroll sideways rather than crush */
@media(max-width:820px){
  .tablewrap{overflow-x:auto}
  #hist-table{min-width:560px}
}

/* dialogs */
@media(max-width:820px){
  .sheet-in{max-width:100% !important;padding:18px 16px 16px}
  .sheet{padding:10px}
  .fields{grid-template-columns:1fr !important}
  .sheet-foot{flex-wrap:wrap;gap:8px}
  .sheet-foot .btn{flex:1 1 auto}
  .calgrid button{padding:9px 0}
  .editrow{grid-template-columns:1fr;gap:6px}
}

/* headings and cards */
@media(max-width:820px){
  .head{flex-wrap:wrap;gap:8px}
  .head h2{font-size:26px}
  .head .btn,.head .chip{margin-left:0 !important}
  .card{padding:18px 16px}
  .advice{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .advtitle{font-size:23px}
  .verdictcard{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .verdictcard h3{font-size:19px}
  .rank-huge{font-size:52px}
  .metrics{gap:14px}
  .figrow{grid-template-columns:120px minmax(0,1fr);gap:16px}
}

@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{padding:0 16px}
  .drop{padding:26px 14px}
  .macrogrid{gap:18px}
  .rowlist div{gap:10px}
  .logwrap .log{height:200px;font-size:11.5px}
  .tabs{gap:6px}
  .tabs button{padding:8px 12px;font-size:13px}
}

.who-short{display:none}
@media(max-width:820px){
  .env .who-long{display:none}
  .env .who-short{display:inline}
}

.testback{background:#7FB4D0;color:#06131B;padding:6px 12px;font-size:13px}
body.testing .bar{box-shadow:inset 0 -2px 0 #16313F}
@media(max-width:820px){.testback{padding:5px 10px;font-size:12px}}

#bmr-methods button:disabled{opacity:.45;cursor:default}
#bmr-methods button:disabled:hover{border-color:var(--rule)}
.needscan{display:block;color:var(--dimmer);font-size:10.5px;margin-top:2px}

.advtitle.confetti,#level-verdict.confetti,#body-verdict.confetti,
.advtitle.shades,#level-verdict.shades,#body-verdict.shades{color:#4FB286}
.advtitle.grin,#level-verdict.grin,#body-verdict.grin{color:var(--moss)}