/* ================================================================
   Trackr: "Graded slab"
   Every headline figure is graded like a slabbed card: an off-white label
   with the accent as its band, a name line, a big condensed grade and,
   where it matters, a cert line, sitting in a clear acrylic case.
   Everything else stays a quiet, standard app: graphite panels, hairline
   case edges, one type family (Archivo, whose width axis gives the
   condensed grades), status colours only for status.
   Loaded after dashboard.css; it overrides the older layers there.
   ================================================================ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/BricolageGrotesque.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/Archivo.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#101115; --bg-2:#0C0D10; --card:#15161B; --card-2:#1B1C22; --card-3:#26272E;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#ECECEF; --text-2:#A6A8B1; --text-3:#82848E;
  --canvas:color-mix(in srgb,color-mix(in srgb,var(--bg) 60%,#000) 94%,var(--accent));
  /* the slab: a label on a clear case */
  --label:#ECEAE3; --label-ink:#16171B; --label-ink-2:#585A62; --label-rule:#D3D0C6; --label-red:#B3262D; --label-green:#14794A;
  --case-fill:rgba(255,255,255,.045); --case-edge:rgba(255,255,255,.15); --case-hi:rgba(255,255,255,.06);
  --r-lg:12px; --r:8px; --r-sm:6px;
  --accent-btn:#6E5CEB;   /* the accent deep enough to carry white text (4.5:1) */
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow-pop:0 28px 70px -22px rgba(0,0,0,.8),inset 0 0 0 1px var(--case-edge);
}
:root[data-theme="light"]{
  --bg:#F6F6F7; --bg-2:#EEEEF0; --card:#FFFFFF; --card-2:#F7F7F8; --card-3:#EBEBEE;
  --line:rgba(15,15,25,.08); --line-2:rgba(15,15,25,.14);
  --text:#121318; --text-2:#4A4C55; --text-3:#6B6D76;
  --canvas:color-mix(in srgb,color-mix(in srgb,var(--bg) 91%,#1B1D2A) 95%,var(--accent));
  --label:#F2EFE6; --label-rule:#DAD6CB; --accent-btn:var(--accent);
  --case-fill:rgba(255,255,255,.75); --case-edge:rgba(15,15,25,.13); --case-hi:rgba(255,255,255,.9);
  --shadow-pop:0 28px 70px -24px rgba(15,15,30,.35),inset 0 0 0 1px var(--case-edge);
}

body{font-family:var(--f-body);font-size:14px;font-stretch:100%;letter-spacing:0}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.01em}
html{scrollbar-color:var(--card-3) transparent}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--text)}
.mono{font-family:var(--f-body);font-stretch:92%;font-size:.96em;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.num,td{font-variant-numeric:tabular-nums}
kbd{font:inherit;font-size:11px;line-height:16px;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;color:var(--text-3);background:var(--card)}

/* ---------- the shell: a rail on the canvas, the work in one inset panel ---------- */
body:has(#scr-app:not([hidden])){background:var(--canvas)}
.side{background:transparent;border-right:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px 12px 12px;gap:10px}
.side .brand{padding:4px 8px 6px}
.brand h1{font-weight:750;font-size:17px;font-stretch:92%;letter-spacing:-.01em}
.brand .mark{width:28px;height:28px}
.jump{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:0 8px 0 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text-3);font-size:13px;
  transition:color .15s,border-color .15s}
.jump:hover{color:var(--text-2);border-color:color-mix(in srgb,var(--text) 22%,transparent)}
.jump .lbl{flex:1;text-align:left}
.nav{gap:1px}
.nav .grp{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-3);padding:14px 10px 4px}
.nav button{min-height:32px;padding:6px 10px;border-radius:7px;font-size:13.5px;font-weight:450;color:var(--text-2);gap:10px}
.nav button svg.i{width:16px;height:16px;stroke-width:1.7}
.nav button:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.nav button[aria-current="page"]{background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);font-weight:550;box-shadow:none}
.nav button[aria-current="page"]::before{left:-12px;top:7px;bottom:7px;width:2px;background:var(--accent)}
.nav button[aria-current="page"] svg{color:var(--accent)}
.nav .badge{font-size:11px;min-width:18px;line-height:17px;padding:0 5px;border-radius:5px;background:var(--accent);color:var(--accent-ink)}
.side-foot{gap:8px}
.nav-foot{padding-top:8px;border-top:1px solid var(--line)}
.who{background:none;border:0;padding:6px 8px;font-size:13px}
.who .nm{font-weight:550}
.side-links{padding:0 8px;gap:7px}
.side-links .app-ver{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}   /* never past the sidebar's edge */
.side-links a:not(.app-ver){flex:none}

main{padding:0}
.crumbs{display:none}
@media (min-width:861px){
  .shell{height:100vh;min-height:0}
  .side{height:100vh}
  main{margin:8px 8px 8px 0;height:calc(100vh - 16px);overflow:auto;overscroll-behavior:contain;background:var(--bg);
    border:1px solid var(--line);border-radius:14px;box-shadow:inset 0 1px 0 var(--case-hi);scrollbar-width:thin}
  main .wrap{padding:22px clamp(18px,2.4vw,34px) 64px}
  .crumbs{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:20;height:52px;
    padding:0 clamp(18px,2.4vw,34px);background:var(--bg);border-bottom:1px solid var(--line)}
  .crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3);min-width:0}
  .crumb-view{color:var(--text);font-weight:600}
  .crumb-acts{display:flex;align-items:center;gap:8px}
  .crumb-acts .iconbtn{width:30px;height:30px}
  .ohead{top:52px}
}
@media (max-width:1180px) and (min-width:861px){
  :root{--side:72px}
  .side{padding:14px 10px}
  .jump{width:44px;justify-content:center;padding:0}
  .jump .lbl,.jump kbd{display:none}
  .nav-foot{border-top:0}
}
@media (max-width:860px){
  body{background:var(--bg)}
  main .wrap{padding:16px 16px 0}
  .topbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .tabbar{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--line)}
  .tabbar button{font-weight:550;font-size:11px}
  .tabbar button[aria-current="page"]{color:var(--text)}
  .fab{width:48px;height:48px;border-radius:14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)!important}
  .sheet{border-radius:16px 16px 0 0}
}

/* ---------- type and page heads ---------- */
.view-head{margin-bottom:20px}
.view-head h2{font-size:26px;font-weight:700;font-stretch:90%;letter-spacing:-.015em;line-height:1.1}
.lede{font-size:13.5px;color:var(--text-2);max-width:78ch}
.fine{font-size:12.5px}
.statement{font-family:var(--f-display);font-size:30px;font-weight:600;font-stretch:88%;letter-spacing:-.015em;line-height:1.12;
  color:var(--text-2);margin:0;max-width:34ch}
.statement .hl{color:var(--text);font-weight:800;white-space:nowrap}
.statement .dim{color:var(--text-3)}
.dash-meta{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0;font-size:13px;color:var(--text-3)}
.statement-sub{font-size:13px;margin-top:6px}
.dash-top{margin-bottom:18px;align-items:flex-end}
@media (max-width:860px){ .statement{font-size:24px} .view-head h2{font-size:22px} }

/* ---------- controls: one quiet, standard set ---------- */
.btn{font-family:var(--f-body);font-weight:600;font-size:13.5px;min-height:34px;padding:0 13px;border-radius:7px;letter-spacing:0}
.btn.small{min-height:30px;padding:0 10px;font-size:12.5px;border-radius:7px}
.btn:not(.ghost):not(.danger):not(.discord):not(.ms-btn),.fab,.badge,.nav .badge{background:var(--accent-btn)!important;color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:var(--line-2)}
.btn.ghost:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.iconbtn{width:32px;height:32px;border-radius:7px;background:transparent;border-color:var(--line-2)}
.iconbtn:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.seg{gap:2px;border-bottom:1px solid var(--line)}
.seg button{font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:7px 10px 9px;color:var(--text-3)}
.seg button[aria-pressed="true"]{color:var(--text);background:none;box-shadow:inset 0 -2px 0 var(--accent)}
.chip{font-family:var(--f-body);border-radius:7px;min-height:30px;font-size:12.5px;background:transparent;border-color:var(--line-2);color:var(--text-2)}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--text)}
.chip .ct{font-family:var(--f-body);font-variant-numeric:tabular-nums;border-radius:4px}
select,.input,.search,.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.fl input,.fl select,.items-ed .ir input{
  background:color-mix(in srgb,var(--text) 3.5%,transparent);border:1px solid var(--line-2);border-radius:7px;min-height:34px;color:var(--text)}
select option{background:var(--card);color:var(--text)}
.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:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);outline:none}
.tag{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-3)}
.form label,.fl{font-weight:550;color:var(--text-2)}
.mtag{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.badge{font-family:var(--f-body)}

/* ---------- surfaces: clear cases with a hairline edge ---------- */
.card,.panel,.lp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--case-hi)}
.lp{padding:16px 18px 18px}
.lp-h{margin-bottom:12px}
.lp-h h3,.card-h h3{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:650;color:var(--text)}
.lp-h .fine{font-family:var(--f-body);font-size:12.5px}
.modal{background:rgba(6,7,10,.6)}
.modal-inner{background:var(--card);border:0;border-radius:14px;box-shadow:var(--shadow-pop)}
.toast,.update-bar{background:var(--card-2);border:1px solid var(--line-2);border-radius:9px;box-shadow:var(--shadow-pop)}

/* ---------- the slab label ---------- */
.tile.slabel,.card.kpi{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"k k" "s v" "c c";column-gap:14px;row-gap:8px;align-items:end;
  background:var(--label);color:var(--label-ink);border:0;border-radius:8px;padding:16px 14px 12px;min-width:0}
.tile.slabel::before,.card.kpi::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--accent)}
.tile.slabel.bad::before,.card.kpi.tone-canc::before{background:var(--canc)}
.tile.slabel .k,.card.kpi .top{grid-area:k;align-self:start}
.tile.slabel .k,.card.kpi .k{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;font-stretch:88%;color:var(--label-ink)}
.card.kpi .ic{display:none}
.tile.slabel .v,.card.kpi .v{grid-area:v;margin:0;font-family:var(--f-display);font-size:32px;font-weight:820;font-stretch:72%;letter-spacing:-.005em;
  line-height:.92;color:var(--label-ink);text-align:right;white-space:nowrap;background:none;-webkit-text-fill-color:currentColor}
.tile.slabel .v small,.card.kpi .v small{font-size:.44em;font-weight:650;font-stretch:90%;color:var(--label-ink-2);margin-left:2px}
.tile.slabel .s,.card.kpi .s{grid-area:s;margin:0;font-size:12px;line-height:1.3;color:var(--label-ink-2);min-width:0;white-space:normal;overflow:visible}
.tile.slabel a,.card.kpi a,.card.kpi .aco-kpi-link{color:var(--label-ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.tile.slabel.bad .v,.card.kpi.tone-canc .v{color:var(--label-red)}
#inv-pnl-card.tone-pos .v:not(.muted),#sl-net-card.tone-pos .v:not(.muted){color:var(--label-green)}   /* green only where it means profit */
.card.kpi .v.muted{color:var(--label-ink-2)}
.card.kpi .meter,.card.kpi .spark{display:none}   /* a label carries its grade, not a status bar */
.tile.slabel .cert{grid-area:c;display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:7px;border-top:1px solid var(--label-rule);
  font-size:12px;color:var(--label-ink-2);font-variant-numeric:tabular-nums}
.tile.slabel .cert b{color:var(--label-ink);font-weight:700}
.tile.slabel .cert .cut b{color:var(--label-red)}
/* the small labels beside the hero: name across the top, then what it covers and the grade */
.tiles .tile.slabel .v{font-size:30px}
/* a label on its own sits in a clear case: a ring of acrylic and its edge */
.tiles .tile.slabel,.card.kpi{box-shadow:0 0 0 5px var(--case-fill),0 0 0 6px var(--case-edge),0 14px 30px -18px rgba(0,0,0,.55)}
.grid:has(> .kpi){gap:22px;padding:6px}
.card.kpi:hover{box-shadow:0 0 0 5px var(--case-fill),0 0 0 6px var(--case-edge),0 14px 30px -18px rgba(0,0,0,.55);transform:none}
/* a card too narrow for the figure beside its note stacks them (big phones, the app in a narrow window) */
.card.kpi{container-type:inline-size}
@container (max-width:360px){
  .card.kpi .v{grid-column:1 / -1;grid-row:2;text-align:left;font-size:28px}
  .card.kpi .s{grid-column:1 / -1;grid-row:3}
}
html.compact .tile.slabel .v,html.compact .card.kpi .v{font-size:26px}
html.compact .tile.slabel,html.compact .card.kpi{padding:13px 12px 10px}

/* ---------- dashboard: the graded stick rate, in a case that holds its chart ---------- */
.dash-hero{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.38fr);gap:22px;margin-bottom:20px;align-items:stretch}
.dash-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.dash-side .stage-strip{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.dash-side .stages .n{font-size:36px}
.pipe{display:flex;gap:3px;height:12px;margin:2px 0 16px}
.pipe i{display:block;min-width:6px;border-radius:3px}
.pipe .st-ordered{background:var(--ord)} .pipe .st-shipped{background:var(--ship)} .pipe .st-delivered{background:var(--deliv)} .pipe .st-cancelled{background:var(--canc)}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:6px 6px 2px}
.slab{position:relative;border-radius:16px;padding:7px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 8%,transparent),color-mix(in srgb,var(--text) 3%,transparent));
  box-shadow:inset 0 0 0 1px var(--case-edge),inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),0 22px 44px -26px rgba(0,0,0,.8)}
.slab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease-out;
  background:radial-gradient(380px circle at var(--gx,30%) var(--gy,0%),color-mix(in srgb,#fff 11%,transparent),transparent 62%)}
.slab.lit::after{opacity:1}
.hero-label.tile.slabel{grid-template-areas:"k v" "s v" "c c";row-gap:3px;border-radius:10px 10px 4px 4px;padding:20px 18px 14px}
.hero-label.tile.slabel .k{font-size:17px}
.hero-label.tile.slabel .v{font-size:58px}
.hero-label.tile.slabel .s{font-size:12.5px}
.slab-window{margin-top:7px;border-radius:4px 4px 10px 10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px 12px}
.slab-window .lchart{height:150px}
.laxis{font-family:var(--f-body);font-size:11.5px;font-variant-numeric:tabular-nums}
.lchart .yl{font-family:var(--f-body);font-size:11px;font-variant-numeric:tabular-nums}
.stage-strip{padding:14px 16px 12px}
.stages{gap:0}
.stages button{border:0;border-left:1px solid var(--line);border-radius:0;background:none;padding:6px 14px 8px;gap:8px}
.stages button:first-child{border-left:0;padding-left:4px}
.stages button:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.stages button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:none;border-radius:8px}
.stages .n{font-family:var(--f-display);font-weight:800;font-stretch:76%;font-size:30px}
.stages .l{font-size:13.5px;font-weight:650}
.stages .m{font-size:12px}
.m4.big{grid-template-columns:repeat(4,12px);gap:3px}
.m4.big i{width:12px;height:12px;border-radius:3px}
.shelf button{background:var(--card-2);border-color:transparent}
.shelf .a{font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:22px}
.shelf .m{font-family:var(--f-body);font-variant-numeric:tabular-nums}
@media (max-width:1280px){ .dash-hero{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .stages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .stages button:nth-child(3){border-left:0;padding-left:4px}
  .tiles{grid-template-columns:minmax(0,1fr);margin:6px}
  .hero-label.tile.slabel .v{font-size:48px}
  .slab-window .lchart{height:150px}
}

/* ---------- the ledger of orders ---------- */
.ohead,.ihead{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-3);background:var(--card)}
.orow{box-shadow:none}
.orow>summary:hover,.orow[open]>summary{background:color-mix(in srgb,var(--text) 4%,transparent)}
.oc-prod .nm{font-family:var(--f-body);font-size:13.5px;font-weight:600;letter-spacing:0}
.oc-amt{font-family:var(--f-body);font-weight:700;font-stretch:86%;font-size:14px}
.oc-amt .x{font-weight:600}
.spill{font-weight:600}
.thumb,.oc-prod .thumb{border-radius:6px}
.odetail{background:color-mix(in srgb,var(--text) 3%,transparent)}
.odetail .box{border-radius:var(--r)}

/* ---------- command palette ---------- */
.pal-bg{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(6,7,10,.55)}
.pal-bg[hidden]{display:none}
.pal{width:min(620px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;overflow:hidden;background:var(--card);border-radius:14px;box-shadow:var(--shadow-pop)}
.pal-in{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);color:var(--text-3)}
.pal-in input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--text);padding:15px 0}
.pal-in input::placeholder{color:var(--text-3)}
.pal-list{overflow:auto;padding:6px;overscroll-behavior:contain}
.pal-g{font-size:12px;font-weight:500;color:var(--text-3);padding:10px 10px 4px}
.pal-i{display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:none;
  color:var(--text-2);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pal-i[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text)}
.pal-i[aria-selected="true"] svg{color:var(--accent)}
.pal-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-h{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pal-i .pal-h{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a feature opened from the search lights up for a moment */
.found{border-radius:10px;animation:found 2.1s ease-out}
@keyframes found{0%,30%{box-shadow:0 0 0 2px var(--accent),0 0 0 7px color-mix(in srgb,var(--accent) 22%,transparent)}100%{box-shadow:0 0 0 2px transparent,0 0 0 7px transparent}}
@media (prefers-reduced-motion: reduce){ .found{animation:none;box-shadow:0 0 0 2px var(--accent)} }
.pal-sw{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pal-empty{margin:0;padding:18px 12px;font-size:13.5px;color:var(--text-3)}
.pal-foot{display:flex;gap:18px;padding:9px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.pal-foot kbd{margin-right:3px}
@media (max-width:640px){ .pal-bg{padding:10px} .pal-foot{display:none} }
@media (prefers-reduced-motion:no-preference){
  .pal-bg:not([hidden]) .pal{animation:pal-in .16s cubic-bezier(.2,.8,.2,1)}
  @keyframes pal-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
}

/* phones: graded labels two to a row */
@media (max-width:420px){
  .grid > .card.kpi.s3{grid-column:span 6}
  .grid:has(> .kpi){gap:16px;padding:6px}
  .card.kpi{padding:14px 11px 10px;column-gap:8px}
  .card.kpi .v{font-size:26px}
  .card.kpi .k{font-size:13px}
  .card.kpi{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "v" "s" "c"}
  .card.kpi .v{text-align:left}
}

/* light: the case is clear plastic over a pale ground, not a grey bezel */
:root[data-theme="light"] .slab{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  box-shadow:inset 0 0 0 1px var(--case-edge),inset 0 1px 0 #fff,0 18px 40px -26px rgba(15,15,30,.35)}
:root[data-theme="light"] .tiles .tile.slabel,:root[data-theme="light"] .card.kpi{
  box-shadow:0 0 0 5px var(--case-fill),0 0 0 6px var(--case-edge),0 14px 30px -20px rgba(15,15,30,.3)}

/* one level of box: tiles and rows inside a panel are divided by hairlines, not boxed again */
.shelf{gap:0}
.shelf button{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 16px 6px}
.shelf button:first-child{border-left:0;padding-left:2px}
.shelf button:hover{background:color-mix(in srgb,var(--text) 4%,transparent);transform:none}
.shelf button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:none;border-radius:8px}
.acop,.acog{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin-bottom:0}
.acop:last-child,.acog:last-child{border-bottom:0}
.acog-b{background:none;padding:4px 0 4px 14px}
.acog-b .acop{background:none;margin-bottom:0}
.acop-rate{width:auto;height:auto;border-radius:0;background:none;font-family:var(--f-display);font-size:16px;font-weight:800;font-stretch:80%;color:var(--text)}
/* tab rows scroll sideways instead of wrapping */
.seg{flex-wrap:nowrap;max-width:100%}
/* phones: the dashboard's small labels set their grade on the left, so the
   floating Add order button never sits over a figure */
@media (max-width:860px){
  .tiles .tile.slabel{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "v" "s";row-gap:6px}
  .tiles .tile.slabel .v{text-align:left}
}

/* ================================================================
   Quiet slabs: the figures keep the graded type (big condensed
   numbers, the cert line) but sit on the same dark panels as the rest
   of the app. No off-white stock, no band, no acrylic rings.
   ================================================================ */
.tile.slabel,.card.kpi,
.tiles .tile.slabel,.card.kpi:hover,
:root[data-theme="light"] .tiles .tile.slabel,:root[data-theme="light"] .card.kpi{
  background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--case-hi)}
.tile.slabel::before,.card.kpi::before{display:none}
.tile.slabel .k,.card.kpi .k{color:var(--text-2);font-size:13px;font-weight:600;font-stretch:96%}
.tile.slabel .v,.card.kpi .v{color:var(--text)}
.tile.slabel .v small,.card.kpi .v small{color:var(--text-3)}
.tile.slabel .s,.card.kpi .s{color:var(--text-3)}
.tile.slabel.bad .v,.card.kpi.tone-canc .v{color:var(--canc)}
#inv-pnl-card.tone-pos .v:not(.muted),#sl-net-card.tone-pos .v:not(.muted){color:var(--pos)}
.card.kpi .v.muted{color:var(--text-3)}
.tile.slabel a,.card.kpi a,.card.kpi .aco-kpi-link{color:var(--text)}
.tile.slabel .cert{border-top-color:var(--line);color:var(--text-3)}
.tile.slabel .cert b{color:var(--text)}
.tile.slabel .cert .cut b{color:var(--canc)}
.grid:has(> .kpi){gap:14px;padding:0}
.tiles{gap:14px;margin:0}
/* the stick rate and its chart: one dark panel, a hairline between them */
.slab,:root[data-theme="light"] .slab{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;
  box-shadow:inset 0 1px 0 var(--case-hi)}
.slab::after{background:radial-gradient(380px circle at var(--gx,30%) var(--gy,0%),color-mix(in srgb,var(--text) 5%,transparent),transparent 62%)}
.hero-label.tile.slabel{background:none;border:0;box-shadow:none;border-radius:0}
.slab-window{margin:0;background:none;box-shadow:none;border-top:1px solid var(--line);border-radius:0}
@media (max-width:420px){ .grid:has(> .kpi){gap:12px} }

/* ---------- the top bar scrolls away with the page (desktop) ---------- */
@media (min-width:861px){
  .crumbs{position:static}
  .ohead{top:0}
}
/* ---------- phones: the success card, front and center on the dashboard ---------- */
.dash-share{display:none}
@media (max-width:860px){
  .dash-share{display:flex;width:100%;margin-top:14px;min-height:46px;font-size:15px;border-radius:10px}
  .dash-share svg{color:inherit;width:17px;height:17px}
}

/* ---------- Addresses: one time frame and retailer for the whole tab ---------- */
.addr-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px}
.addr-filter select{min-height:32px;font-size:13px;padding:5px 10px}
.addr-custom{gap:8px;align-items:center}
.addr-custom .input{min-height:32px;padding:4px 8px}
.addr-frame-note{margin-left:auto}
.addr-rank-r{grid-template-columns:28px minmax(0,1fr) 58px 52px 46px 58px 66px 64px 108px}
.addr-rank-hd span:nth-child(n+3){text-align:right}
.addr-trend{font-size:12.5px;font-weight:600}
.addr-trend.flat{color:var(--text-3);font-weight:500}
.addr-rank-last{font-size:12.5px;color:var(--text-3)}
@media (max-width:1180px){ .addr-rank-r{grid-template-columns:28px minmax(0,1fr) 52px 46px 42px 54px 62px 100px} .addr-rank-r>.addr-rank-last,.addr-rank-hd span:nth-child(8){display:none} }
@media (max-width:860px){ .addr-trend,.addr-rank-last{display:none} .addr-frame-note{margin-left:0;width:100%} }

/* ---------- one address up close ---------- */
.ad-modal{max-height:92vh}
.ad-frame{margin:10px 0 0}
.ad-hero-k{margin:0;font-size:12px;font-weight:500;color:var(--text-3)}
.ad-win{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ad-win-r{display:grid;grid-template-columns:minmax(110px,1.4fr) repeat(5,minmax(0,1fr));gap:10px;align-items:center;padding:9px 12px;
  border:0;border-top:1px solid var(--line);background:none;color:var(--text-2);font:inherit;font-size:13px;text-align:right;cursor:pointer}
.ad-win-r:first-child{border-top:0}
.ad-win-r>:first-child{text-align:left}
.ad-win-r:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.ad-win-r.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.ad-win-k{color:var(--text);font-weight:550}
.ad-win-h{cursor:default;font-size:12px;color:var(--text-3);font-weight:500;background:color-mix(in srgb,var(--text) 2.5%,transparent)}
.ad-win-h:hover{background:color-mix(in srgb,var(--text) 2.5%,transparent)}
.ad-win-r b{font-weight:700}
.ad-weekly{margin-top:14px}
.ad-weekly-bars{display:flex;align-items:flex-end;gap:0;height:110px;border-bottom:1px solid var(--line-2)}
.ad-wk{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:0 2px}
.ad-wk i{display:block;width:100%;border-radius:2px 2px 0 0;min-height:0}
.ad-wk i.pos{background:var(--deliv);border-radius:0}
.ad-wk i.neg{background:var(--canc)}
.ad-weekly-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin-top:5px}
.ad-weekly-key{display:flex;align-items:center;gap:14px;font-size:12px;margin-top:6px}
.ad-weekly-key .k{display:inline-flex;align-items:center;gap:6px;color:var(--text-2)}
.ad-weekly-key .k::before{content:"";width:9px;height:9px;border-radius:2px;background:currentColor}
.ad-weekly-key .k.pos::before{background:var(--deliv)} .ad-weekly-key .k.neg::before{background:var(--canc)}
.ad-weekly-key .fine{margin-left:auto}
.ad-fbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.ad-fbar select{min-height:32px;font-size:13px;padding:5px 10px;max-width:240px}
.ad-q{flex:1 1 200px;min-height:32px}
.ad-q input{padding:6px 0}
.ad-sum{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:12px;border:1px solid var(--line);border-radius:var(--r)}
.ad-sum-c{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-left:1px solid var(--line)}
.ad-sum-c:first-child{border-left:0}
.ad-sum-c b{font-family:var(--f-display);font-size:22px;font-weight:800;font-stretch:78%;line-height:1.1}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.ad-brow{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:9px 10px;margin-top:4px;border:0;
  border-radius:var(--r);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ad-brow:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.ad-brow.on{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.ad-brow .addr-rank-bar{margin-top:6px;max-width:260px}
.ad-brow>b{font-size:15px;white-space:nowrap}
.ad-row,.ad-o{background:color-mix(in srgb,var(--text) 3%,transparent)}
@media (max-width:860px){
  .ad-grid{grid-template-columns:minmax(0,1fr)}
  .ad-sum{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ad-sum-c:nth-child(4){border-left:0}
  .ad-sum-c:nth-child(n+4){border-top:1px solid var(--line)}
  .ad-win-r{grid-template-columns:minmax(84px,1.2fr) repeat(4,minmax(0,1fr));font-size:12.5px}
  .ad-win-r>:last-child{display:none}
}


/* ================================================================
   Numbers and headlines in the success cards' face: Bricolage Grotesque,
   extra bold, at full width. Nothing on the page is condensed.
   ================================================================ */
:root{--f-display:"Bricolage Grotesque","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
body *{font-stretch:100%!important}
.statement,.view-head h2,.brand h1,.modal-inner h3,
.tile.slabel .v,.card.kpi .v,.stages .n,.shelf .a,.ad-sum-c b,.ad-big b,.ad-verdict,
.pf-n,.jrate,.addr-rank-c.num,.ad-win-r b{font-family:var(--f-display)}
.statement{font-weight:700;letter-spacing:-.025em}
.statement .hl{font-weight:800}
.view-head h2{font-weight:800;letter-spacing:-.025em}
.brand h1{font-weight:800;letter-spacing:-.02em}
.tile.slabel .v,.card.kpi .v{font-weight:800;letter-spacing:-.03em;line-height:1}
.tile.slabel .v small,.card.kpi .v small{font-weight:700;letter-spacing:0}
.hero-label.tile.slabel .v{font-size:56px}
.tiles .tile.slabel .v{font-size:28px}
.card.kpi .v{font-size:30px}
.stages .n,.dash-side .stages .n{font-weight:800;font-size:34px;letter-spacing:-.03em}
.shelf .a{font-weight:800;letter-spacing:-.02em}
.ad-sum-c b{font-weight:800;letter-spacing:-.02em}
html.compact .tile.slabel .v,html.compact .card.kpi .v{font-size:25px}
@media (max-width:860px){ .hero-label.tile.slabel .v{font-size:46px} }
@media (max-width:420px){ .card.kpi .v{font-size:24px} }


/* Coming today: a ticket-like strip at the top of the dashboard. The count stands alone on the left,
   then the date, what's on the truck vs only due, and the products. Tap for Shipments. */
.today{display:flex;align-items:stretch;width:100%;margin:2px 0 14px;padding:0;text-align:left;cursor:pointer;color:var(--text);font:inherit;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;position:relative}
.today:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2))}
.today-n{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:104px;padding:12px 16px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);border-right:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line-2))}
.today-n b{font:800 44px/0.95 'Bricolage Grotesque','Archivo',sans-serif;letter-spacing:-.04em;color:var(--text)}
.today-n span{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:center}
.today-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:12px 16px}
.today-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.today-tags{display:flex;flex-wrap:wrap;gap:6px}
.today-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;padding:3px 9px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line)}
.today-tag i{width:7px;height:7px;border-radius:50%}
.today-tag.ofd i{background:#34D399;box-shadow:0 0 0 3px color-mix(in srgb,#34D399 25%,transparent)}
.today-tag.due i{background:transparent;border:2px solid var(--accent)}
.today-thumbs{display:flex;align-items:center;min-width:0}
.today-thumbs .today-th{width:30px;height:30px;border-radius:8px;margin-right:-8px;box-shadow:0 0 0 2px var(--card);flex:none}
.today-more{flex:none;margin-left:14px;font-size:12px;font-weight:700;color:var(--text-3)}
.today-names{min-width:0;margin-left:18px;font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-more + .today-names{margin-left:8px}
.today-go{flex:none;display:flex;align-items:center;gap:4px;padding:0 16px;font-size:13px;font-weight:650;color:var(--text-3)}
.today-go .i{transform:rotate(-90deg)}
.today:hover .today-go{color:var(--accent)}
.today.is-tomorrow .today-n{background:var(--card-2);border-right-color:var(--line-2)}
.today.is-tomorrow .today-k{color:var(--text-3)}
@media (max-width:640px){
  .today-n{min-width:84px;padding:10px 12px} .today-n b{font-size:38px}
  .today-go{display:none}
  .today-k-lead{display:none}
  .today-body{padding:10px 12px}
}
/* Shipments: what's coming today stands out */
.pkg.is-today{border-color:color-mix(in srgb,#34D399 45%,var(--line-2));box-shadow:inset 3px 0 0 #34D399}
.today-pill{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
  background:#34D399;color:#062A1C}
.eta.when-due b,.eta.when-tomorrow b{color:var(--accent)}
.eta.when-stale b,.eta.when-late b{color:var(--text-3);font-weight:600}

/* Retailers on a phone: compact rows instead of tall tiles (desktop keeps the tiles) */
@media (max-width:640px){
  .shelf{grid-template-columns:1fr;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;
    padding:10px 4px;border-left:0;border-top:1px solid var(--line);border-radius:0}
  .shelf button:first-child{border-top:0;padding-top:2px}
  .shelf button>:first-child{grid-area:av;width:30px;height:30px;border-radius:7px}
  .shelf .n{grid-area:n;font-size:14px}
  .shelf .m{grid-area:m;font-size:12px}
  .shelf .a{grid-area:a;font-size:18px;justify-self:end}
  .shelf .st{grid-area:st;height:3px;margin-top:7px}
}