/* ================================================================
   Trackr: Linear-led
   A calm, exact workspace. The rail sits on a near-black canvas, the
   work lives in one inset panel, panels are hairline-edged and quiet,
   and the user's accent marks only the current place, the main action,
   focus and data. Geist for everything; Geist Mono only for order and
   tracking numbers. Status is drawn as a journey ring (see .ring).
   Loaded after dashboard.css and slab.css; where they disagree, this wins.
   ================================================================ */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/Geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/GeistMono.woff2) format('woff2')}

:root{
  --canvas:color-mix(in srgb,var(--bg) 52%,#000);
  --bg:#0E0F12; --bg-2:#0B0C0E; --card:#131418; --card-2:#1A1B20; --card-3:#25272D;
  --line:rgba(255,255,255,.065); --line-2:rgba(255,255,255,.11);
  --text:#EEEFF1; --text-2:#A3A6AF; --text-3:#80848D;
  --accent-btn:#6E5CEB;
  --hover:color-mix(in srgb,var(--text) 4.5%,transparent);
  --press:color-mix(in srgb,var(--text) 7.5%,transparent);
  --field:color-mix(in srgb,var(--text) 3%,transparent);
  --hi:rgba(255,255,255,.04);                 /* the light along a panel's top edge */
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:12px;
  --f-display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-pop:0 0 0 1px var(--line-2),0 18px 48px -12px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.35);
  /* motion: an exponential ease-out, and a gentle spring (about 2% overshoot) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:linear(0,.034 1.5%,.13 3.2%,.27 5.1%,.5 8.4%,.72 12.3%,.86 16.3%,.94 20.6%,.99 25.4%,1.012 31%,1.018 37.5%,1.012 46%,1.003 58%,.999 72%,1);
  --t-fast:.12s; --t:.2s; --t-slow:.36s;
}
:root[data-theme="light"]{
  --canvas:color-mix(in srgb,var(--bg) 95%,#1B1D2A);
  --bg:#FFFFFF; --bg-2:#F7F7F8; --card:#FFFFFF; --card-2:#F7F7F8; --card-3:#ECECEF;
  --line:rgba(16,17,22,.08); --line-2:rgba(16,17,22,.13);
  --text:#111216; --text-2:#4C4F58; --text-3:#6A6D76;
  --accent-btn:var(--accent);
  --hi:rgba(255,255,255,0);
  --shadow-pop:0 0 0 1px var(--line-2),0 18px 48px -14px rgba(16,17,30,.22),0 4px 12px -6px rgba(16,17,30,.12);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(16,17,30,.18);
}

/* ---------- base ---------- */
body{font-family:var(--f-body);font-size:14px;line-height:1.5;letter-spacing:-.003em;font-feature-settings:"ss01" 0}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.015em}
.num,td,.oc-amt,.chip .ct{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-stretch:100%;font-size:.88em;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--text)}
html{scrollbar-color:var(--card-3) transparent;accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input,textarea{caret-color:var(--accent)}
kbd{font-family:var(--f-body);font-size:11px;line-height:17px;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:1px;border-radius:4px;
  color:var(--text-3);background:var(--field)}
a{text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- the shell: the rail on the canvas, the work in one inset panel ---------- */
body:has(#scr-app:not([hidden])){background:var(--canvas)}
.side{padding:12px 10px 10px;gap:8px}
.side .brand{padding:4px 8px 8px;gap:9px}
.brand .mark{width:24px;height:24px}
.brand h1{font-family:var(--f-display);font-weight:650;font-size:15.5px;letter-spacing:-.02em}
.jump{min-height:32px;padding:0 6px 0 9px;border-radius:var(--r);gap:8px;font-size:13px;color:var(--text-3);
  background:var(--field);border:1px solid var(--line);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.jump:hover{color:var(--text-2);background:var(--hover);border-color:var(--line-2)}
.nav{gap:1px}
.nav .grp{font-size:11.5px;font-weight:500;color:var(--text-3);padding:16px 10px 5px}
.nav button{min-height:30px;padding:5px 9px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--text-2);gap:9px;
  transition:background var(--t-fast),color var(--t-fast)}
.nav button svg.i{width:16px;height:16px;stroke-width:1.75;color:var(--text-3);transition:color var(--t-fast)}
.nav button:hover{background:var(--hover);color:var(--text)}
.nav button:hover svg.i{color:var(--text-2)}
.nav button[aria-current="page"]{background:var(--press);color:var(--text);font-weight:550}
.nav button[aria-current="page"]::before{display:none}
.nav button[aria-current="page"] svg.i{color:var(--accent)}
.nav .badge{font-size:11px;font-weight:600;min-width:17px;line-height:16px;padding:0 5px;border-radius:9px;
  background:color-mix(in srgb,var(--accent) 22%,transparent)!important;color:var(--text)!important}
.nav-foot{border-top:1px solid var(--line)}
.who{padding:6px 8px;border-radius:var(--r-sm)}
.side-links{font-size:12px}

@media (min-width:861px){
  main{margin:8px 8px 8px 0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg);
    box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px rgba(0,0,0,.25),0 8px 24px -12px rgba(0,0,0,.5)}
  main .wrap{padding:24px clamp(20px,2.6vw,40px) 72px;max-width:1520px}
  .crumbs{height:48px;padding:0 clamp(20px,2.6vw,40px);background:var(--bg);border-bottom:1px solid var(--line)}
  .crumb{font-size:13px;gap:7px}
  .crumb-view{font-weight:550}
  .crumb-acts{gap:6px}
  .crumb-acts .iconbtn{width:30px;height:30px}
}
:root[data-theme="light"] main{box-shadow:0 0 0 1px rgba(16,17,30,.04),0 8px 24px -14px rgba(16,17,30,.18)}
@media (max-width:860px){
  .topbar{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--line)}
  .tabbar{background:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
  .tabbar button{font-size:11px;font-weight:550}
  .tabbar button[aria-current="page"]{color:var(--text)}
  .tabbar button[aria-current="page"] svg{color:var(--accent)}
  .fab{border-radius:16px;box-shadow:var(--shadow-btn),0 10px 24px -8px rgba(0,0,0,.6)!important}
  .sheet{border-radius:16px 16px 0 0;border-color:var(--line-2)}
}

/* ---------- type ---------- */
.view-head{margin-bottom:22px}
.view-head h2{font-size:24px;font-weight:620;letter-spacing:-.025em;line-height:1.15}
.lede{font-size:13.5px;line-height:1.55;color:var(--text-2);max-width:72ch;margin-top:6px}
.fine{font-size:12.5px;color:var(--text-3)}
.banner{border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--partial) 30%,var(--line));
  background:color-mix(in srgb,var(--partial) 7%,transparent);color:var(--text-2);font-size:13px}
.statement{font-family:var(--f-display);font-size:31px;font-weight:560;letter-spacing:-.03em;line-height:1.16;color:var(--text-3);
  max-width:30ch;text-wrap:balance}
.statement .hl{color:var(--text);font-weight:640}
.statement .dim{color:var(--text-3)}
.dash-meta{gap:6px;margin:10px 0 0;font-size:13px;color:var(--text-3)}
.dash-top{margin-bottom:20px}
@media (max-width:860px){ .statement{font-size:25px} .view-head h2{font-size:21px} }

/* ---------- controls ---------- */
.btn{font-family:var(--f-body);font-weight:550;font-size:13px;min-height:32px;padding:0 12px;border-radius:var(--r-sm);gap:7px;letter-spacing:-.005em;
  transition:background var(--t-fast),border-color var(--t-fast),filter var(--t-fast),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast)}
.btn.small{min-height:28px;padding:0 10px;font-size:12.5px;border-radius:var(--r-sm)}
.btn:not(.ghost):not(.danger):not(.discord):not(.ms-btn){box-shadow:var(--shadow-btn)}
.btn:not(.ghost):not(.danger):not(.discord):not(.ms-btn):hover{filter:brightness(1.08)}
.btn:active:not(:disabled),.iconbtn:active:not(:disabled),.chip:active,.fab:active{transform:scale(.97)}
.btn.ghost{background:var(--field);border:1px solid var(--line-2);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--hover);border-color:color-mix(in srgb,var(--text) 18%,transparent)}
.btn:disabled{opacity:.5}
.iconbtn{width:30px;height:30px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--line-2);color:var(--text-2);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.iconbtn:hover{background:var(--hover);color:var(--text)}

/* segmented controls: one pill track with a lifted thumb (the thumb slides, see app-motion.js) */
.seg{position:relative;display:inline-flex;gap:0;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--field);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;max-width:100%;isolation:isolate}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;flex:none;font-family:var(--f-body);font-size:12.5px;font-weight:500;padding:4px 11px;min-height:26px;
  border:0;border-radius:var(--r-sm);color:var(--text-3);background:none;box-shadow:none;text-transform:none;letter-spacing:0;
  transition:color var(--t) var(--ease-out)}
.seg button:hover{color:var(--text-2)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--text);background:var(--card-3);
  box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.25)}
.seg .cnt{font-variant-numeric:tabular-nums;color:var(--text-3);margin-left:3px}
.seg.has-thumb button[aria-pressed="true"],.seg.has-thumb button[aria-selected="true"]{background:none;box-shadow:none}
.seg-thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:0;width:0;border-radius:var(--r-sm);background:var(--card-3);
  box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.25);pointer-events:none;
  transition:transform var(--t-slow) var(--ease-spring),width var(--t-slow) var(--ease-spring)}
:root[data-theme="light"] .seg button[aria-pressed="true"],:root[data-theme="light"] .seg-thumb,
:root[data-theme="light"] .seg button[aria-selected="true"]{background:#fff;box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(16,17,30,.1)}
:root[data-theme="light"] .seg.has-thumb button[aria-pressed="true"]{background:none;box-shadow:none}

.chip{font-family:var(--f-body);border-radius:var(--r-sm);min-height:28px;padding:0 9px;gap:6px;font-size:12.5px;font-weight:500;
  background:transparent;border:1px solid var(--line-2);color:var(--text-2);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.chip:hover{background:var(--hover);color:var(--text)}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--text)}
.chip .ct{font-size:11.5px;color:var(--text-3);background:none;padding:0}
select,.input,.search,.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.fl input,.fl select,.items-ed .ir input{
  background:var(--field);border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:32px;color:var(--text);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
select:hover,.input:hover,.search:hover{border-color:color-mix(in srgb,var(--text) 18%,transparent)}
.search:focus-within,.input:focus,select:focus,.form input:focus,.form select:focus,.form textarea:focus,.fl input:focus,.fl select:focus,.items-ed .ir input:focus{
  border-color:color-mix(in srgb,var(--accent) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);outline:none}
::placeholder{color:var(--text-3);opacity:1}
.tag{font-size:12px;font-weight:500;color:var(--text-3)}
.form label,.fl{font-weight:500;color:var(--text-2)}

/* ---------- surfaces ---------- */
.card,.panel,.lp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--hi)}
:root[data-theme="light"] .card,:root[data-theme="light"] .panel,:root[data-theme="light"] .lp{box-shadow:0 1px 2px rgba(16,17,30,.04)}
.lp{padding:16px 18px 16px}
.lp-h,.card-h{margin-bottom:12px;align-items:baseline}
.lp-h h3,.card-h h3{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.lp-h .fine{font-size:12px}
.modal{background:rgba(5,6,8,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
:root[data-theme="light"] .modal{background:rgba(20,21,28,.32)}
.modal-inner{background:var(--card);border:0;border-radius:var(--r-xl);box-shadow:var(--shadow-pop)}
.modal-inner h3{font-size:17px;font-weight:620;letter-spacing:-.02em}
.toast,.update-bar{background:var(--card-2);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-pop);font-size:13px}
.empty{color:var(--text-3)}

/* KPI cards in the other views: label, figure, one line (no slab, no band) */
.card.kpi,.tile.slabel{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:15px 16px 14px;
  background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--hi)}
.card.kpi .top{display:flex;align-items:center;justify-content:space-between}
.card.kpi .k,.tile.slabel .k{font-size:12.5px;font-weight:500;color:var(--text-2)}
.card.kpi .v,.tile.slabel .v{order:2;margin:8px 0 0;font-family:var(--f-display);font-size:26px;font-weight:620;letter-spacing:-.035em;line-height:1.05;
  text-align:left;color:var(--text);white-space:nowrap}
.card.kpi .v small,.tile.slabel .v small{font-size:.56em;font-weight:500;color:var(--text-3);letter-spacing:-.01em;margin-left:1px}
.card.kpi .s,.tile.slabel .s{order:3;margin-top:5px;font-size:12px;line-height:1.4;color:var(--text-3)}
.card.kpi .s a,.card.kpi .aco-kpi-link{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-2)}
.card.kpi.tone-canc .v,.tile.slabel.bad .v{color:var(--canc)}
.grid:has(> .kpi){gap:12px;padding:0}
@media (max-width:420px){ .card.kpi .v{font-size:22px} .card.kpi{padding:13px 12px 12px} }
html.compact .card.kpi .v{font-size:22px}

/* ================================================================
   journey rings: an order's status, drawn as a ring that fills as it
   travels. ordered a quarter, shipped half, out for delivery three
   quarters, delivered closed with a check, cancelled crossed.
   ================================================================ */
.ring{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;color:var(--ord)}
.ring svg{width:100%;height:100%;overflow:visible}
.ring .tr{fill:none;stroke:currentColor;stroke-opacity:.28;stroke-width:1.6}
.ring .ar{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:8px 8px}
.ring .dot{fill:currentColor}
.ring .mk{fill:none;stroke:var(--card);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ring.ordered{color:var(--ord)} .ring.shipped,.ring.out{color:var(--ship)} .ring.delivered{color:var(--deliv)} .ring.cancelled{color:var(--canc)}
.ring.big{width:18px;height:18px}

/* ================================================================
   dashboard
   ================================================================ */
.dash-controls{gap:10px;margin-bottom:16px}
.dash-controls .row{gap:6px}
/* the metric strip: four figures in one panel, divided by hairlines */
.dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--hi);overflow:hidden}
:root[data-theme="light"] .dash-metrics{box-shadow:0 1px 2px rgba(16,17,30,.04)}
.dash-metrics > .tiles{display:contents}
.metric{position:relative;display:flex;flex-direction:column;min-width:0;padding:16px 18px 0;border-left:1px solid var(--line)}
.dash-metrics > .metric:first-child{border-left:0}
.metric .k{font-size:12.5px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:6px}
.metric .v{margin-top:7px;font-family:var(--f-display);font-size:29px;font-weight:620;letter-spacing:-.04em;line-height:1;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.metric .v small{font-size:.55em;font-weight:500;letter-spacing:-.01em;color:var(--text-3);margin-left:1px}
.metric .s{margin-top:7px;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric.bad .v{color:var(--canc)}
.metric .spark{display:block;height:38px;margin:10px -18px 0;width:calc(100% + 36px)}
.metric .spark svg{display:block;width:100%;height:100%}
.metric .spark .sl{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.metric.bad .spark .sl{stroke:var(--canc)}
.metric .keep{display:flex;height:4px;margin:14px 0 17px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--canc) 55%,transparent);gap:2px}
.metric .keep i{display:block;height:100%;background:var(--deliv);border-radius:2px;transition:width .7s var(--ease-out)}
.metric .keep i + i{background:var(--canc)}
.metric .split{display:flex;gap:12px;margin-top:6px;font-size:12px;color:var(--text-3)}
.metric .split b{font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.metric .split .cut b{color:var(--canc)}

/* the chart beside where orders stand */
.dash-main{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:14px;margin-bottom:14px;align-items:stretch}
.chart-panel{display:flex;flex-direction:column;min-width:0}
.chart-panel .lchart{height:200px;flex:1;min-height:180px}
.lchart .yl{font-family:var(--f-body);font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.laxis{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ltip{background:var(--card-2);border:0;box-shadow:var(--shadow-pop);border-radius:var(--r);font-size:12px;padding:8px 10px}
.stage-strip{display:flex;flex-direction:column;padding:16px 18px 10px}
.pipe{display:flex;gap:2px;height:8px;margin:2px 0 10px;border-radius:4px;overflow:hidden}
.pipe i{display:block;min-width:4px;border-radius:0}
.pipe .st-ordered{background:var(--ord)} .pipe .st-shipped{background:var(--ship)} .pipe .st-delivered{background:var(--deliv)} .pipe .st-cancelled{background:var(--canc)}
.stages{display:flex;flex-direction:column;gap:0;grid-template-columns:none}
.stages button,.stages button:first-child{display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"r l n" "r m n";
  align-items:center;column-gap:12px;row-gap:0;width:100%;padding:9px 8px;margin:0 -8px;width:calc(100% + 16px);border:0;border-top:1px solid var(--line);
  border-radius:0;background:none;text-align:left;color:var(--text);cursor:pointer;transition:background var(--t-fast)}
.stages button:first-child{border-top:0}
.stages button:hover{background:var(--hover)}
.stages button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 11%,transparent);border-radius:var(--r-sm);box-shadow:none}
.stages .ring{grid-area:r}
.stages .l{grid-area:l;font-size:13.5px;font-weight:550}
.stages .m{grid-area:m;font-size:12px;color:var(--text-3)}
.stages .n,.dash-side .stages .n{grid-area:n;font-family:var(--f-display);font-size:22px;font-weight:620;letter-spacing:-.035em;color:var(--text)}

/* retailers: one ranked row each */
.board.two{gap:14px;margin-bottom:14px}
.shelf{display:flex;flex-direction:column;gap:0}
.shelf button,.shelf button:first-child{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"av n a" "av m a" "st st st";
  column-gap:12px;row-gap:1px;align-items:center;width:calc(100% + 16px);margin:0 -8px;padding:10px 8px;border:0;border-top:1px solid var(--line);
  border-radius:0;background:none;color:var(--text);text-align:left;cursor:pointer;transition:background var(--t-fast)}
.shelf button:first-child{border-top:0}
.shelf button:hover{background:var(--hover);transform:none}
.shelf button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 11%,transparent);border-radius:var(--r-sm);box-shadow:none}
.shelf button>:first-child{grid-area:av;width:30px;height:30px;border-radius:7px}
.shelf .n{grid-area:n;font-size:13.5px;font-weight:550}
.shelf .m{grid-area:m;font-size:12px;color:var(--text-3)}
.shelf .a{grid-area:a;justify-self:end;font-family:var(--f-display);font-size:16px;font-weight:600;letter-spacing:-.025em}
.shelf .st{grid-area:st;height:3px;margin-top:8px;border-radius:2px;background:var(--line)}
.shelf .st i{background:var(--deliv);border-radius:2px;transition:width .7s var(--ease-out)}

/* top products beside retailers and what's on the move */
.board.two:has(> .top-products){grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:start}
.board-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.top-products .lp-h{justify-content:flex-start;column-gap:10px}
.tp-all{margin-left:auto;font-size:12.5px;font-weight:550;color:var(--accent);text-decoration:none}
.tp-all:hover{text-decoration:underline}
.tp-list{display:flex;flex-direction:column}
.tp-row{display:grid;grid-template-columns:16px 40px minmax(0,1fr) auto;grid-template-areas:"rk th n a" "rk th m s" ". . bar bar";
  column-gap:12px;row-gap:2px;align-items:center;width:calc(100% + 16px);margin:0 -8px;padding:10px 8px;border:0;border-top:1px solid var(--line);
  border-radius:0;background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:background var(--t-fast)}
.tp-row:first-child{border-top:0}
.tp-row:hover{background:var(--hover)}
.tp-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
.tp-rk{grid-area:rk;font-size:12px;font-weight:550;color:var(--text-3);text-align:center}
.tp-row:nth-child(-n+3) .tp-rk{color:var(--text-2)}
.tp-row .tp-th{grid-area:th;width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.tp-row .tp-th img{object-fit:contain;padding:3px}
.tp-row .tp-th.logo img{padding:0}
.tp-n{grid-area:n;min-width:0;font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-m{grid-area:m;display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--text-3)}
.tp-m>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-m .tp-rav{width:14px;height:14px;border-radius:4px;font-size:7px;flex:none}
.tp-a{grid-area:a;justify-self:end;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.02em}
.tp-s{grid-area:s;justify-self:end;font-size:12px;font-weight:550;color:var(--text-3)}
.tp-s.good{color:var(--deliv)} .tp-s.mid{color:var(--partial)} .tp-s.low{color:var(--canc)}
.tp-bar{grid-area:bar;height:3px;margin-top:7px;border-radius:2px;background:var(--line);overflow:hidden}
.tp-bar i{display:block;height:100%;border-radius:2px;background:var(--accent);opacity:.75;transition:width .7s var(--ease-out)}
.top-products .empty-state{padding:22px 0}
/* proxies: providers ranked, then drop by drop */
.px-panel{margin-bottom:14px}
.px-head,.px-row{display:grid;grid-template-columns:22px minmax(0,1.6fr) repeat(5,minmax(0,.7fr));column-gap:12px;align-items:center}
.px-head{padding:0 0 8px;font-size:11.5px;color:var(--text-3);border-bottom:1px solid var(--line)}
.px-head .r,.px-c{text-align:right}
.px-row{padding:11px 0;border-top:1px solid var(--line)}
.px-head + div .px-row:first-child{border-top:0}
.px-row.none{color:var(--text-3)}
.px-rk{font-size:12px;font-weight:550;color:var(--text-3);text-align:center}
.px-n{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.px-n b{font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.px-kind{font-size:11px;font-weight:550;color:var(--text-2);padding:1px 6px;border-radius:var(--r-sm);background:var(--field);border:1px solid var(--line)}
.px-c{font-size:13.5px;font-weight:550;color:var(--text)}
.px-c.de{color:var(--text-2)}
.px-c.good{color:var(--deliv)} .px-c.mid{color:var(--partial)} .px-c.low{color:var(--canc)}
.px-row:nth-child(1) .px-rk{color:var(--accent)}
.lp-h .px-q{margin:0 0 0 auto;flex:0 1 260px}
.px-panel .lp-h{align-items:center}
.px-drops{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.px-drop{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;background:color-mix(in srgb,var(--text) 1%,transparent)}
.px-dh{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.px-dp{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-dr{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.px-dn{display:flex;align-items:center;gap:6px;min-width:0;font-weight:550}
.px-dv{color:var(--text-2)}
.px-dr.best .px-dn{color:var(--text)}
.px-best{font-size:10.5px;font-weight:600;color:var(--deliv);padding:1px 6px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--deliv) 13%,transparent)}
@media (max-width:760px){
  .px-head{display:none}
  .px-row{grid-template-columns:18px repeat(5,minmax(0,1fr));row-gap:8px;padding:12px 0}
  .px-n{grid-column:2 / -1}
  .px-c{text-align:left;font-size:13px}
  .px-c::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:500;color:var(--text-3);margin-bottom:1px}
  .px-row .px-c.co{grid-column:2}
  .px-drops{grid-template-columns:minmax(0,1fr)}
  .lp-h .px-q{flex:1 1 100%;margin:6px 0 0}
}

/* every product, from "View all" */
.tp-modal .tp-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.tp-modal .tp-tools .search{flex:1 1 220px;margin:0}
.tp-modal .tp-list{max-height:min(62vh,640px);overflow-y:auto;overscroll-behavior:contain;padding:0 8px;margin:0 -8px}
.tp-none{padding:18px 0;text-align:center}
@media (max-width:1100px){ .board.two:has(> .top-products){grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .tp-row{grid-template-columns:14px 36px minmax(0,1fr) auto;column-gap:10px}
  .tp-row .tp-th{width:36px;height:36px}
  .tp-modal .tp-tools .seg{width:100%}
}

/* on the move */
.transit button{border-radius:var(--r-sm);transition:background var(--t-fast)}
.transit button:hover{background:var(--hover)}
.transit .u{font-variant-numeric:tabular-nums;color:var(--text-2)}

/* coming today: one quiet strip with a live dot */
.today{display:flex;align-items:center;gap:0;width:100%;margin:0 0 16px;padding:0;text-align:left;cursor:pointer;font:inherit;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 1px 0 var(--hi);
  transition:border-color var(--t-fast),background var(--t-fast)}
.today:hover{border-color:var(--line-2);background:color-mix(in srgb,var(--text) 1.5%,var(--card))}
.today-n{align-self:stretch;min-width:88px;padding:12px 16px;background:none;border-right:1px solid var(--line)}
.today-n b{font:620 34px/1 var(--f-display);letter-spacing:-.04em}
.today-n span{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3)}
.today-k{font-size:12px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--accent)}
.today-tag{font-size:12px;font-weight:550;border-radius:var(--r-sm);background:var(--field);border:1px solid var(--line)}
.today-tag.ofd i{background:var(--deliv);box-shadow:0 0 0 3px color-mix(in srgb,var(--deliv) 22%,transparent)}
.today-tag.ofd i{animation:live-dot 2.4s ease-in-out infinite}
@keyframes live-dot{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--deliv) 0%,transparent)}}
.today-go{font-size:12.5px;font-weight:550}
.today.is-tomorrow .today-n{background:none;border-right-color:var(--line)}
.pkg.is-today{border-color:color-mix(in srgb,var(--deliv) 40%,var(--line-2));box-shadow:inset 0 1px 0 var(--hi)}
.today-pill{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:var(--r-sm);padding:2px 7px;
  background:color-mix(in srgb,var(--deliv) 18%,transparent);color:var(--deliv)}

/* ---------- the ledger of orders ---------- */
.orders-card{padding:0;overflow:visible}
.otools{padding:16px 18px 12px}
.otools h3{font-size:15px!important;font-weight:620;letter-spacing:-.02em}
.otools .search{min-height:34px}
.ohead,.ihead{font-size:12px;font-weight:500;color:var(--text-3);background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.orow{border-bottom:1px solid var(--line)}
.orow>summary{transition:background var(--t-fast)}
.orow>summary:hover,.orow[open]>summary{background:var(--hover)}
.oc-prod .nm{font-size:13.5px;font-weight:550;letter-spacing:-.005em}
.oc-num,.oc-ord,.trk,.pkg .num,.odetail .mono{font-family:var(--f-mono)}
.oc-amt{font-family:var(--f-body);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.oc-m{display:flex;align-items:center;gap:7px}
.spill{font-weight:550}
.odetail{background:color-mix(in srgb,var(--text) 2%,transparent)}
.thumb,.oc-prod .thumb{border-radius:7px}

/* ---------- command palette ---------- */
.pal{border-radius:var(--r-xl);box-shadow:var(--shadow-pop);background:var(--card)}
.pal-in input{font-size:15px}
.pal-i{border-radius:var(--r-sm);min-height:36px;font-size:13.5px}
.pal-i[aria-selected="true"]{background:var(--press);color:var(--text)}
.pal-i[aria-selected="true"] svg{color:var(--accent)}

/* ---------- views: retire the slab costume where it lingers ---------- */
.slab,.slab::after{display:none}
.hero-label.tile.slabel .cert,.tile.slabel .cert{display:none}
.acop-rate{font-family:var(--f-display);font-weight:620;letter-spacing:-.02em}
.ad-sum-c b,.ad-big b,.pf-n,.jrate{font-family:var(--f-display);font-weight:620;letter-spacing:-.03em}

/* ================================================================
   responsive
   ================================================================ */
@media (max-width:1180px){ .dash-main{grid-template-columns:minmax(0,1fr)} }
@media (max-width:980px){
  .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-metrics > .metric:nth-child(3),.dash-metrics > .tiles > .metric:nth-child(2){border-left:0}
  .dash-metrics > .tiles > .metric:nth-child(n+2){border-top:1px solid var(--line)}
}
@media (max-width:860px){
  main .wrap{padding:16px 16px 96px}
  .metric{padding:13px 14px 0}
  .metric .v{font-size:23px}
  .metric .spark{margin:8px -14px 0;width:calc(100% + 28px);height:30px}
  .metric .keep{margin:11px 0 13px}
  .metric .split{gap:8px}
}
html.compact .metric{padding-top:12px}
html.compact .metric .v{font-size:24px}
html.compact .metric .spark{height:30px}

/* ================================================================
   motion: state, not decoration. Off with reduced motion.
   ================================================================ */
@media (prefers-reduced-motion:no-preference){
  /* dialogs, sheets and the palette open on a spring */
  .modal:not([hidden]) .modal-inner{transition:transform var(--t-slow) var(--ease-spring),opacity var(--t) var(--ease-out)}
  .modal:not([hidden]){transition:opacity var(--t) var(--ease-out)}
  @starting-style{
    .modal:not([hidden]){opacity:0}
    .modal:not([hidden]) .modal-inner{opacity:0;transform:translateY(8px) scale(.97)}
  }
  .sheet-bg:not([hidden]) .sheet{transition:transform .42s var(--ease-spring)}
  @starting-style{ .sheet-bg:not([hidden]) .sheet{transform:translateY(100%)} }
  .pal-bg:not([hidden]) .pal{animation:none;transition:transform var(--t-slow) var(--ease-spring),opacity var(--t-fast) var(--ease-out)}
  @starting-style{ .pal-bg:not([hidden]) .pal{opacity:0;transform:translateY(-6px) scale(.98)} }
  .toast:not([hidden]){transition:transform var(--t-slow) var(--ease-spring),opacity var(--t) var(--ease-out)}
  @starting-style{ .toast:not([hidden]){opacity:0;transform:translate(-50%,8px)} }
  /* a view settles in when you switch to it */
  [data-view-panel]:not([hidden]){animation:view-in var(--t) var(--ease-out)}
  @keyframes view-in{from{opacity:.001;transform:translateY(4px)}}
  /* the first dashboard load settles in once, in reading order */
  .first-load #view-dashboard .dash-top,.first-load #view-dashboard .dash-controls,.first-load #view-dashboard .dash-metrics,
  .first-load #view-dashboard .dash-main,.first-load #view-dashboard .board,.first-load #view-dashboard .orders-card{
    animation:settle .5s var(--ease-out) both}
  .first-load #view-dashboard .dash-controls{animation-delay:.04s}
  .first-load #view-dashboard .dash-metrics{animation-delay:.08s}
  .first-load #view-dashboard .dash-main{animation-delay:.12s}
  .first-load #view-dashboard .board{animation-delay:.16s}
  .first-load #view-dashboard .orders-card{animation-delay:.2s}
  @keyframes settle{from{opacity:0;transform:translateY(6px)}}
  /* the spend line draws itself, the sparklines too */
  .chart-panel .lchart path.line-in{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease-out) .05s forwards}
  .chart-panel .lchart path.area-in{animation:fade .6s var(--ease-out) .25s both}
  .metric .spark:not(.still) .sl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s var(--ease-out) .1s forwards}
  .metric .spark:not(.still) .sa{animation:fade .6s var(--ease-out) .3s both}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fade{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .today-tag.ofd i{animation:none}
}

/* every view's figures share one strip, like the dashboard's: hairlines between, clipped at the edges */
.grid:has(> .card.kpi){gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hi);margin-bottom:16px}
:root[data-theme="light"] .grid:has(> .card.kpi){box-shadow:0 1px 2px rgba(16,17,30,.04)}
.grid > .card.kpi{border:0;border-radius:0;background:none;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
:root[data-theme="light"] .grid > .card.kpi{box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.ring.problem{color:var(--partial)}
.spill{gap:6px}
.spill .ring{width:14px;height:14px}

/* ================================================================
   finish-review fixes
   ================================================================ */
/* statuses outside the ledger: the ring and the word, no filled pill */
.aco-st{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border-radius:0;font-family:var(--f-body);font-size:12px;font-weight:550;letter-spacing:0}
.aco-st .ring{width:14px;height:14px}
.acop-mono,.trk-link .mono,.pkg .mono{font-family:var(--f-mono)}
.trk-link{display:inline-flex;align-items:center;gap:4px}
.trk-link .ext{width:13px;height:13px;transform:rotate(-45deg)}
.chip svg.i{width:14px;height:14px}

/* Accounts: one hairline list, not a stack of boxes */
#accounts:has(.acct){background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 1px 0 var(--hi)}
#accounts .acct{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;background:none;padding:12px 18px;transition:background var(--t-fast)}
#accounts .acct:first-child{border-top:0}
#accounts .acct:hover{background:var(--hover)}
#accounts .acct .nm{font-weight:550;font-size:13.5px}
#accounts .acct .meta{font-size:12px;color:var(--text-3)}

/* empty states: a mark, what's true, the next thing to do. No box around them. */
.panel:has(> .empty-state:only-child){background:none;border:0;box-shadow:none}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 20px 40px}
.empty-state .es-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:12px;color:var(--text-2);
  background:var(--field);border:1px solid var(--line)}
.empty-state .es-i svg.i{width:18px;height:18px}
.empty-state .es-t{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.empty-state .es-s{margin:0 0 8px;max-width:44ch;font-size:13px;color:var(--text-3)}

/* disclosure: a drawn chevron, not the browser's triangle */
#view-settings details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
#view-settings details > summary::-webkit-details-marker{display:none}
#view-settings details > summary::before{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(-45deg);transition:transform var(--t) var(--ease-out)}
#view-settings details[open] > summary::before{transform:rotate(45deg)}

/* segmented tracks that scroll fade at the edge they continue past */
.seg.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.seg.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.seg.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

/* the journey list keeps one left edge at every width */
.stages button:nth-child(n){padding-left:8px}

/* phone: Add order is the top bar's one primary; nothing floats over the content */
.top-add{display:none}
.sheet-acts{display:none}
@media (max-width:860px){
  .fab{display:none!important}
  .top-add{display:inline-flex;min-height:30px;padding:0 10px 0 8px;gap:4px}
  .top-add svg.i{width:15px;height:15px}
  .dash-share{font-size:14px;min-height:42px}
  .dash-share svg{color:var(--text-2)}
  .sheet-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
  .sheet-acts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:var(--r-lg);border:1px solid var(--line);
    background:var(--field);color:var(--text);font:inherit;font-size:12.5px;font-weight:550;cursor:pointer}
  .sheet-acts svg.i{width:19px;height:19px;color:var(--text-2)}
}
/* a table wider than its panel scrolls inside it, and fades at the edge it continues past */
.pf-table-w{scrollbar-width:thin;scrollbar-color:var(--card-3) transparent}
.pf-table-w.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
#focus-products{border-color:var(--line)!important;border-radius:var(--r)!important}
#focus-products > .row{border-bottom:1px solid var(--line)!important;padding:6px 4px!important}
#focus-products > .row:last-child{border-bottom:0!important}
#focus-products .chip{min-height:26px;padding:0 7px}
/* the today strip's lead-in is a label, not a mark: the accent keeps to its four jobs */
.today-k{color:var(--text-2)}
.today:hover .today-go{color:var(--text)}
/* Inboxes > Connect > AYCD: the box takes the form's place (the address/password fields are for server inboxes) */
#add-form.is-aycd > :not(.provider-seg):not(#aycd-box){display:none}
.aycd-box{display:flex;flex-direction:column;gap:12px}
.aycd-box[hidden],#aycd-web[hidden],#aycd-app[hidden],.aycd-fields[hidden],#aycd-how[hidden]{display:none}
.aycd-fields{display:flex;flex-direction:column;gap:12px}
#aycd-app{display:flex;flex-direction:column;gap:12px}
.aycd-steps{margin:0;padding-left:18px;display:grid;gap:4px}
.aycd-grid{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}
/* AYCD mailhook: a value to copy into AYCD (the receiver URL, the signing secret) */
#hook-none[hidden],#hook-ready[hidden],#aycd-tools-out[hidden]{display:none}
#aycd-tools-out{font-family:var(--f-mono);font-size:12px;width:100%}
.copyfield{display:flex;gap:6px;align-items:center;margin-top:6px}
.copyfield input{flex:1;min-width:0;font-family:var(--f-mono);font-size:12.5px}
.copyfield .btn{flex:none}
.form label.switch{flex-direction:row;align-items:center;font-size:13.5px;color:var(--text)}
.aycd-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);margin-top:10px}
.aycd-line .ldot{flex:none}
.livebox[hidden]{display:none}
/* Inboxes: a scan's progress bar (scanBar in dashboard.js) */
.scanbar{margin-top:10px;display:grid;gap:6px}
.scanbar-top{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-2)}
.scanbar-pct{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.scanbar-track{height:6px;border-radius:999px;background:var(--card-3);overflow:hidden}
.scanbar-fill{height:100%;border-radius:inherit;background:var(--accent);min-width:6px}
.scanbar-note{font-size:12px;color:var(--text-3)}