/* ============================================================
   Closer Station — "Station" theme
   One sheet of paper. Regions divided by hairlines and
   registration marks. Navy structure, steel-blue interaction.
   ============================================================ */

@font-face{font-family:Archivo;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --paper:#F0F0F0;
  --paper-2:#FFFFFF;
  --paper-3:#E7E8E9;
  --ink:#14181C;
  --ink2:#4A4F55;
  --ink3:#787F86;
  --rule:#D6D7D9;
  --rule-2:#A9ADB1;
  --navy:#1B2936;
  --navy-2:#2C3D4D;
  --steel:#4C76A0;
  --steel-hi:#3E648A;
  --steel-soft:#E7F1FB;
  --steel-edge:#B9D3EA;
  --hatch:#DCEEFF;
  --bar:#89B6DD;
  --ok:#2E7D5B;
  --ok-soft:#E4F1EB;
  --warn:#9A6B10;
  --warn-soft:#F6EEDC;
  --alert:#C0362C;
  --alert-soft:#F8E7E5;

  --disp:Archivo,'Arial Narrow',Helvetica,Arial,sans-serif;
  --ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail:238px;
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23A9ADB1' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--steel-soft)}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--rule-2); border:4px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- type ---------- */
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink3);
}
h1,h2,h3,h4{margin:0; font-family:var(--disp); font-weight:700; letter-spacing:-.012em; line-height:1.12; color:var(--ink)}
h1{font-size:31px}
h2{font-size:19px}
h3{font-size:16px}
p{margin:0 0 10px}
a{color:var(--steel-hi); text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:600}

/* ============================================================
   SHELL
   ============================================================ */
.shell{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}
@media (max-width:940px){.shell{grid-template-columns:1fr}}

aside.rail{
  border-right:1px solid var(--rule); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:940px){aside.rail{position:static; height:auto}}

.mark{display:flex; align-items:center; gap:11px; padding:20px 20px 18px}
.mark .glyph{width:20px; height:20px; background:var(--navy); flex:none}
.mark .name{
  font-family:var(--disp); font-size:15px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink);
}
.mark .name span{color:var(--ink)}

.navgroup{padding:4px 12px}
.navgroup > .eyebrow{padding:14px 8px 8px; display:block}
.rail nav{display:flex; flex-direction:column}
.rail nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  font:inherit; font-size:13.5px; font-weight:500; color:var(--ink2);
  background:none; border:none; padding:9px 12px; cursor:pointer;
}
.rail nav button:hover{background:var(--paper-3); color:var(--ink)}
.rail nav button.on{background:var(--navy); color:#fff}
.rail nav button .dot{width:6px; height:6px; background:var(--rule-2); flex:none}
.rail nav button.on .dot{background:#fff}
.rail nav button .tag{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink3)}
.rail nav button.on .tag{color:#ffffff8c}
.railfoot{margin-top:auto; padding:12px; border-top:1px solid var(--rule)}

.top{
  display:flex; align-items:center; gap:16px; padding:16px 26px;
  border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.top .ctx{display:flex; flex-direction:column; gap:2px; min-width:0}
.top .ctx .t{font-family:var(--disp); font-size:17px; font-weight:700; letter-spacing:-.01em}
.grow{flex:1}
main.stage{padding:26px; max-width:1560px}

/* ---------- status chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink3);
  border:1px solid var(--rule); padding:4px 9px; background:var(--paper-2);
}
.chip .led{width:6px; height:6px; background:var(--rule-2)}
.chip.live{border-color:var(--alert); color:var(--alert)}
.chip.live .led{background:var(--alert); animation:pulse 1.8s ease-in-out infinite}
.chip.ok{border-color:var(--ok); color:var(--ok)} .chip.ok .led{background:var(--ok)}
.chip.blue{border-color:var(--steel); color:var(--steel-hi)} .chip.blue .led{background:var(--steel)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ============================================================
   REGIONS — one sheet, hairlines, registration marks
   ============================================================ */
.card{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  padding:22px 24px;
}
.card::after{
  content:""; position:absolute; inset:-5px; pointer-events:none;
  background-image:var(--plus),var(--plus),var(--plus),var(--plus);
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
}
.card + .card{margin-top:16px}
.card > h2{margin-bottom:5px}
.lede{color:var(--ink2); font-size:13.5px; max-width:74ch; margin:0 0 16px}
.lede b{color:var(--ink)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-size:13px; font-weight:500; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:2px;
  padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{border-color:var(--rule-2)}
.btn.pri{background:var(--steel); border-color:var(--steel); color:#fff; font-weight:600}
.btn.pri:hover{background:var(--steel-hi); border-color:var(--steel-hi)}
.btn.ghost{background:none}
.btn.danger{color:var(--alert); border-color:var(--rule)}
.btn.danger:hover{border-color:var(--alert); background:var(--alert-soft)}
.btn.sm{padding:5px 10px; font-size:12px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.row{display:flex; gap:9px; align-items:center; flex-wrap:wrap}

.seg{display:inline-flex; border:1px solid var(--rule); background:var(--paper-2); border-radius:2px}
.seg button{
  font:inherit; font-size:12.5px; font-weight:500; color:var(--ink2);
  background:none; border:none; padding:7px 13px; cursor:pointer; white-space:nowrap;
}
.seg button + button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--navy); color:#fff; font-weight:600}

/* ---------- pickers ---------- */
.split{display:grid; grid-template-columns:296px 1fr; gap:20px; align-items:start}
@media (max-width:1080px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--rule); padding:14px; background:var(--paper)}
.panel input[type=search], .fld{
  width:100%; font:inherit; font-size:13.5px; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--rule); border-radius:2px; padding:9px 11px;
}
.panel input[type=search]::placeholder,.fld::placeholder{color:var(--ink3)}
.fld:focus,.panel input:focus{border-color:var(--steel); outline:none}
.list{display:flex; flex-direction:column; margin-top:12px; max-height:64vh; overflow-y:auto}
.list button{
  font:inherit; font-size:13px; text-align:left; color:var(--ink2); background:none;
  border:none; border-bottom:1px solid var(--rule); padding:10px 11px; cursor:pointer; line-height:1.4;
}
.list button:hover{background:var(--paper-3); color:var(--ink)}
.list button.on{background:var(--navy); color:#fff; font-weight:500}
.list button .lane{
  display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); margin-top:3px;
}
.list button.on .lane{color:#ffffff9e}
.hint{color:var(--ink3); font-size:12px; margin:11px 2px 2px}

/* ---------- method switcher ---------- */
.methods{display:flex; gap:0; flex-wrap:wrap; margin-bottom:18px; border:1px solid var(--rule); width:fit-content; background:var(--paper-2)}
.methods button{
  font:inherit; font-size:12.5px; font-weight:500; color:var(--ink2);
  background:none; border:none; padding:8px 14px; cursor:pointer; white-space:nowrap;
}
.methods button + button{border-left:1px solid var(--rule)}
.methods button:hover{background:var(--paper-3); color:var(--ink)}
.methods button.on{background:var(--navy); color:#fff; font-weight:600}

/* ---------- fit / warn ---------- */
.fitwarn{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px}
@media (max-width:820px){.fitwarn{grid-template-columns:1fr}}
.fw{background:var(--paper-2); border:1px solid var(--rule); padding:12px 14px; font-size:13px; color:var(--ink2); line-height:1.5}
.fw b{display:block; font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px}
.fw.good{border-left:3px solid var(--ok)} .fw.good b{color:var(--ok)}
.fw.bad{border-left:3px solid var(--warn)} .fw.bad b{color:var(--warn)}

/* ---------- the walk ---------- */
.trail{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; align-items:center}
.trail span{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); border:1px solid var(--rule); background:var(--paper-2); padding:4px 9px;
}
.trail span.cur{background:var(--navy); border-color:var(--navy); color:#fff}
.trail i{color:var(--rule-2); font-style:normal; font-size:11px}

.node{border:1px solid var(--rule); background:var(--paper-2); padding:24px}
.node .mv{font-family:var(--disp); font-size:24px; font-weight:700; letter-spacing:-.015em; margin:0 0 16px}
.says{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.says li{
  background:var(--steel-soft); border-left:3px solid var(--steel);
  padding:15px 18px; font-size:17px; line-height:1.5; color:var(--ink); max-width:70ch;
}
.why{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule); color:var(--ink2); font-size:12.5px; max-width:72ch}
.why b{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3)}

.branches{margin-top:22px}
.branches > .eyebrow{margin-bottom:10px; display:block}
.bbtns{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
.bbtns button{
  font:inherit; font-size:15.5px; text-align:left; color:var(--ink);
  background:none; border:none; border-bottom:1px solid var(--rule);
  padding:15px 4px; cursor:pointer; display:flex; align-items:center; gap:12px; line-height:1.4;
}
.bbtns button:hover{background:var(--steel-soft); padding-left:12px; padding-right:12px}
.bbtns button .arw{margin-left:auto; color:var(--steel); font-size:16px; flex:none}

.endbox{margin-top:20px; background:var(--paper-2); border:1px solid var(--rule); padding:16px 18px; font-size:13.5px; color:var(--ink2)}
.endbox b{display:block; font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px}
.endbox.win{border-left:3px solid var(--ok)} .endbox.win b{color:var(--ok)}
.endbox.park{border-left:3px solid var(--steel)} .endbox.park b{color:var(--steel-hi)}
.endbox.walk{border-left:3px solid var(--rule-2)} .endbox.walk b{color:var(--ink2)}
.endbox.loop{border-left:3px solid var(--warn)} .endbox.loop b{color:var(--warn)}

/* ---------- whole map ---------- */
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.mnode{background:var(--paper); padding:14px 16px}
.mnode.start{background:var(--steel-soft)}
.mnode .id{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
.mnode .mv{font-family:var(--disp); font-size:16px; font-weight:700; margin:4px 0 7px}
.mnode .sy{color:var(--ink2); font-size:12.5px; margin-bottom:9px; line-height:1.45}
.mnode .to{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink3)}
.mnode .to b{color:var(--steel-hi); font-family:var(--mono); font-size:10px; font-weight:400}

/* ---------- call map phases ---------- */
.phase{border:1px solid var(--rule); background:var(--paper); margin-bottom:-1px}
.phase > .head{display:flex; align-items:center; gap:16px; padding:14px 18px; cursor:pointer; user-select:none}
.phase > .head:hover{background:var(--paper-3)}
.phase .num{font-family:var(--disp); font-size:17px; font-weight:700; color:var(--steel-hi); min-width:26px}
.phase .nm{font-family:var(--disp); font-size:16px; font-weight:700}
.phase .jb{color:var(--ink3); font-size:12.5px}
.phase .mins{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink3); white-space:nowrap}
.phase .body{padding:2px 18px 18px; border-top:1px solid var(--rule)}
.qs{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.qs li{background:var(--steel-soft); border-left:3px solid var(--steel); padding:11px 15px; font-size:14.5px; max-width:76ch; line-height:1.5}
.watchline{margin-top:13px; font-size:12.5px; color:var(--ink2)}
.watchline b{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--warn)}
.exp{margin-top:18px; padding-top:16px; border-top:1px solid var(--rule)}
.exp .eyebrow{display:block; margin:18px 0 8px}
.exp .eyebrow:first-child{margin-top:0}
.moves{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--ink2)}
.moves b{color:var(--ink)}
.cues{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink2)}
.skipbox{background:var(--alert-soft); border-left:3px solid var(--alert); padding:11px 14px; font-size:13.5px; color:var(--ink2)}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px; margin-bottom:20px; background:var(--rule); border:1px solid var(--rule)}
.stat{background:var(--paper); padding:15px 18px}
.stat .k{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3)}
.stat .v{font-family:var(--disp); font-size:33px; font-weight:700; letter-spacing:-.03em; margin:4px 0 2px; color:var(--ink); line-height:1.05}
.stat .v.pos{color:var(--ok)} .stat .v.neg{color:var(--alert)}
.stat .sub{font-size:11.5px; color:var(--ink3)}
.stat .meter{height:3px; background:var(--rule); margin-top:9px}
.stat .meter i{display:block; height:3px; background:var(--navy)}

/* ---------- tables ---------- */
.scroll{overflow-x:auto}
table.grid{width:100%; border-collapse:collapse; font-size:13px}
table.grid th{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  text-align:left; color:var(--ink3); padding:9px 8px; border-bottom:1px solid var(--rule-2); white-space:nowrap;
}
table.grid td{padding:5px 6px; border-bottom:1px solid var(--rule); vertical-align:middle}
table.grid tr:hover td{background:var(--paper-3)}
table.grid input, table.grid select{
  width:100%; min-width:66px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:2px; padding:6px 8px;
}
table.grid input:focus, table.grid select:focus{border-color:var(--steel); outline:none}
table.grid input[type=number]{font-family:var(--mono); text-align:right}
table.grid td.n{font-family:var(--mono); text-align:right; color:var(--ink); white-space:nowrap}
table.grid td.n.accent{color:var(--steel-hi)}
table.grid td.s{font-weight:500; white-space:nowrap}
table.grid tr.tot td{border-top:1px solid var(--rule-2); border-bottom:none; font-weight:700; background:var(--paper-3)}
table.grid tr.tot td.n{color:var(--navy)}
.empty{color:var(--ink3); padding:18px 6px; font-size:13px}

/* ---------- misc ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.mini{background:var(--paper-2); border:1px solid var(--rule); padding:14px 16px; font-size:13.5px; color:var(--ink2)}
.mini .lbl{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px}
.mini ul{margin:0; padding-left:17px}
.mini li{margin-bottom:5px}
.note{margin-top:18px; padding-top:13px; border-top:1px solid var(--rule); color:var(--ink3); font-size:12.5px; max-width:74ch}
.note b{color:var(--ink2)}
.step{margin-bottom:20px}
.step .lbl{font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin-bottom:9px; display:flex; gap:9px; align-items:baseline}
.step .lbl .n{font-family:var(--disp); color:var(--steel-hi); font-size:13px}
.closeline{background:var(--ok-soft); border-left:3px solid var(--ok); padding:12px 15px; font-size:15px; max-width:70ch}
.rest{color:var(--ink2); font-size:13.5px; max-width:76ch; margin:0}
.sits{display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:1px; margin-bottom:18px; background:var(--rule); border:1px solid var(--rule)}
.sit{
  font:inherit; font-size:13px; text-align:left; color:var(--ink2); background:var(--paper);
  border:none; padding:13px 15px; cursor:pointer; line-height:1.4;
}
.sit:hover{background:var(--paper-3); color:var(--ink)}
.sit.on{background:var(--navy); color:#fff; font-weight:500}
.pane[hidden]{display:none}
.msg{font-size:13px; padding:11px 14px; margin-bottom:12px; border:1px solid var(--rule)}
.msg.ok{border-left:3px solid var(--ok); color:var(--ok); background:var(--ok-soft)}
.msg.err{border-left:3px solid var(--alert); color:var(--alert); background:var(--alert-soft)}
.authbox{max-width:420px}
.authbox .fld{margin-bottom:10px}
footer.foot{padding:20px 26px 34px; color:var(--ink3); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em}

/* ---------- live call ---------- */
.prog{display:flex; gap:2px; margin-bottom:22px}
.prog i{flex:1; height:4px; background:var(--rule)}
.prog i.done{background:var(--steel)}
.prog i.cur{background:var(--navy)}
.livehead{display:flex; align-items:flex-end; gap:18px; margin-bottom:20px; flex-wrap:wrap}
.livehead h1{font-size:34px}
.setup{max-width:540px}
.setup .fld{margin-bottom:10px}
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit;
  font-size:15px; color:var(--ink); background:var(--paper-2); border:1px solid var(--rule);
  padding:15px 18px; margin-bottom:-1px; cursor:pointer; line-height:1.4;
}
.opt:hover{background:var(--steel-soft); border-color:var(--steel-edge); position:relative; z-index:1}
.opt .arw{margin-left:auto; color:var(--steel)}

/* ---------- KPI reconciliation ---------- */
.warnflag{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:14px;
  color:var(--warn); cursor:default;
}
table.grid td.flag{width:26px; text-align:center; padding-right:0}
.reconcile{
  margin:14px 0 0; padding:11px 14px; font-size:12.5px; color:var(--ink2);
  background:var(--warn-soft); border-left:3px solid var(--warn);
}
.reconcile b{color:var(--ink)}
.reconcile .warnflag{font-size:13px}

/* ---------- post to the team ---------- */
.postbox{
  width:100%; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:2px;
  padding:14px 16px; resize:vertical; white-space:pre; overflow-x:auto;
}
.postbox:focus{border-color:var(--steel); outline:none}

/* ---------- rep card ---------- */
.repcard{margin:0 12px 4px; padding:14px 12px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.repline{display:flex; align-items:center; gap:11px; margin-bottom:11px}
.repline .avatar{
  width:34px; height:34px; flex:none; background:var(--steel-soft);
  background-image:repeating-linear-gradient(45deg,var(--steel-edge) 0 2px,transparent 2px 6px);
  border:1px solid var(--steel-edge);
}
.repline .rname{font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.repline .rrole{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3)}
.rankrow{display:flex; justify-content:space-between; font-size:11px; color:var(--ink2); margin-bottom:6px}
.rankrow span:last-child{color:var(--ink3)}
.repcard .meter{height:3px; background:var(--rule)}
.repcard .meter i{display:block; height:3px; background:var(--steel)}
.xpline{font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink3); margin-top:7px}

/* ---------- dashboard ---------- */
.dashgrid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:start}
@media (max-width:1080px){.dashgrid{grid-template-columns:1fr}}
.card.focus{background:var(--paper-2)}
.ramp{display:flex; flex-direction:column; gap:14px; margin-top:12px}
.rampline .rl{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px}
.rampline .nm{font-size:13.5px; font-weight:500}
.rampline .vl{font-family:var(--disp); font-size:16px; font-weight:700; color:var(--ink)}
.rampline .meter{height:3px; background:var(--rule)}
.rampline .meter i{display:block; height:3px; background:var(--navy)}
.rampline .rsub{font-size:11px; color:var(--ink3); margin-top:4px}

/* ---------- leaderboard ---------- */
table.grid tr.me td{background:var(--steel-soft)}
table.grid tr.me:hover td{background:var(--steel-soft)}
.youtag{
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--navy); color:#fff; padding:2px 6px; margin-left:6px; vertical-align:1px;
}

/* ---------- switch ---------- */
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:var(--ink2)}
.switch input{appearance:none; width:38px; height:21px; background:var(--rule-2); border-radius:99px; position:relative; cursor:pointer; flex:none}
.switch input:checked{background:var(--steel)}
.switch input::after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; background:#fff; border-radius:99px; transition:left .14s}
.switch input:checked::after{left:19px}

/* ---------- sign-in ---------- */
.btn.goog{width:100%; justify-content:center; padding:12px 14px; font-size:14px; font-weight:600; border-color:var(--rule2)}
.btn.goog:hover{border-color:var(--navy); background:var(--pressed)}
.or{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink3)}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--rule)}
.or span{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap}