/* FIN — shared styles for portal + admin */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#fff; --snow:#F5F8F9; --ink:#101820; --grey:#5B6770;
  --svc:#7290D5; --svc-deep:#4C68A8; --svc-soft:#EEF2FB;
  --teal:#0E8FA3; --leaf:#2F8F63; --amber:#E9A93D; --red:#C25454;
  --rule:#E2E8EA; --rule-dark:rgba(255,255,255,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Instrument Sans',sans-serif;color:var(--ink);background:var(--snow);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1400px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;padding:13px 24px;border:none;cursor:pointer;transition:.2s;line-height:1.2;white-space:nowrap}
.btn--svc{background:var(--svc);color:#fff}
.btn--svc:hover{background:var(--svc-deep)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--svc-deep)}
.btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.btn--line:hover{border-color:var(--ink)}
.btn--sm{padding:9px 16px;font-size:.8rem}
.btn--xs{padding:6px 12px;font-size:.74rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--svc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Header */
.top{background:var(--ink);color:rgba(255,255,255,.8);font-size:.75rem;padding:8px 0}
.top .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.top b{color:var(--svc)}
header{background:#fff;border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.logo img{height:34px;width:auto;display:block}
.logo em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding-left:11px;border-left:1px solid var(--rule)}
/* On the dark top bar / login screen */
.logo--light img{filter:none}
.logo--lg img{height:52px}
@media(max-width:520px){.logo img{height:28px}.logo em{font-size:.55rem;padding-left:8px}}
.tabs{display:flex;gap:2px;background:var(--snow);padding:3px;overflow-x:auto}
.tabs button{background:transparent;border:none;padding:9px 16px;font-size:.85rem;font-weight:500;cursor:pointer;color:var(--grey);white-space:nowrap}
.tabs button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(16,24,32,.1)}
@media(max-width:820px){.nav{height:auto;padding:12px 0;flex-direction:column;align-items:stretch}}

main{padding:38px 0 80px}
.view{display:none}.view.on{display:block}
.vhead{margin-bottom:24px}
.vhead h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.03em;line-height:1.06}
.vhead h1 span{color:var(--svc)}
.vhead p{margin-top:8px;color:var(--grey);max-width:620px;font-size:.95rem}

.card{background:#fff;border:1px solid var(--rule);padding:28px}
.card+.card{margin-top:18px}
.card h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.card .csub{color:var(--grey);font-size:.88rem;margin-top:4px}
.fset{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.fset>.mono{display:block;margin-bottom:14px;color:var(--svc-deep)}

/* Forms */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.field{display:flex;flex-direction:column}
.field label{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.field label i{font-style:normal;color:var(--red)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--rule);font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--svc)}
.field input.err,.field select.err,.field textarea.err{border-color:var(--red);background:#FDF3F3}
.field textarea{min-height:86px;resize:vertical}
.field .hint{font-size:.74rem;color:var(--grey);margin-top:4px}
.field .fe{font-size:.74rem;color:var(--red);margin-top:4px}
.actions{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.err-msg{color:var(--red);font-size:.84rem}
@media(max-width:760px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.banner{background:var(--svc-soft);border-left:3px solid var(--svc);padding:13px 16px;font-size:.85rem;margin-bottom:18px}
.banner b{display:block;font-family:'Archivo',sans-serif;margin-bottom:2px}
.banner--warn{background:#FDF6E7;border-left-color:var(--amber)}
.banner--bad{background:#FBEDED;border-left-color:var(--red)}
.banner--ok{background:#E9F5EE;border-left-color:var(--leaf)}

/* Tags */
.tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;color:#fff;white-space:nowrap}
.tag[data-s="active"],.tag[data-s="available"],.tag[data-s="approved"],.tag[data-s="resolved"]{background:var(--leaf)}
.tag[data-s="soon"],.tag[data-s="in_review"],.tag[data-s="scheduled"]{background:var(--amber);color:var(--ink)}
.tag[data-s="expired"],.tag[data-s="void"],.tag[data-s="rejected"]{background:var(--red)}
.tag[data-s="registered"],.tag[data-s="submitted"]{background:var(--svc)}
.tag[data-s="closed"]{background:var(--grey)}

/* Tables */
.tblwrap{background:#fff;border:1px solid var(--rule);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:12px 16px;text-align:left;font-size:.86rem;border-bottom:1px solid var(--rule)}
th{font-family:'Archivo',sans-serif;font-weight:700;background:var(--snow);white-space:nowrap;font-size:.8rem}
tbody tr:hover{background:var(--snow)}
tr:last-child td{border-bottom:none}
td.code{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.04em}
td.muted{color:var(--grey);font-size:.8rem}

.empty{background:#fff;border:1px dashed var(--rule);padding:48px 28px;text-align:center}
.empty h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.08rem}
.empty p{color:var(--grey);margin:6px 0 18px;font-size:.9rem}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(16,24,32,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.modal.on{display:flex}
.modal__box{background:#fff;max-width:600px;width:100%;max-height:90vh;overflow-y:auto}
.modal__head{padding:20px 24px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:14px;position:sticky;top:0;background:#fff}
.modal__head h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.12rem;letter-spacing:-.02em}
.modal__head button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--grey);line-height:1}
.modal__body{padding:22px 24px}
.modal__foot{padding:16px 24px;border-top:1px solid var(--rule);display:flex;gap:9px;justify-content:flex-end;background:var(--snow);position:sticky;bottom:0}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:13px 22px;font-size:.88rem;opacity:0;transition:.3s;z-index:200;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}
.toast[data-t="bad"]{background:var(--red)}
.toast[data-t="ok"]{background:var(--leaf)}

.note{margin-top:18px;font-size:.76rem;color:var(--grey)}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rowend{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════
   FILTER STATUS MODULE
   ══════════════════════════════════════════════════════════ */
.flt-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.flt-sum__cell{background:#fff;border:1px solid var(--rule);padding:18px 20px}
.flt-sum__cell b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:-.03em;line-height:1}
.flt-sum__cell span{font-size:.78rem;color:var(--grey);margin-top:5px;display:block}

.flt-group{margin-bottom:26px}
.flt-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.flt-group__head h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.2rem;letter-spacing:-.02em}
.flt-group__head .sn{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--grey)}

.flt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.flt-card{background:#fff;border:1px solid var(--rule);padding:22px;display:flex;flex-direction:column;transition:.25s}
.flt-card:hover{box-shadow:0 14px 30px rgba(16,24,32,.08)}
.flt-card[data-s="overdue"]{border-color:var(--red)}
.flt-card[data-s="due"]{border-color:var(--amber)}

.flt-dial{display:flex;align-items:center;gap:16px}
.flt-dial svg{flex:none;transform:rotate(-90deg)}
.flt-dial__pct{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.flt-dial__sub{font-size:.74rem;color:var(--grey);margin-top:2px}

.flt-card h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;margin:16px 0 3px;letter-spacing:-.01em}
.flt-card .sku{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;color:var(--grey)}
.flt-meta{margin-top:14px;border-top:1px dashed var(--rule);padding-top:12px;font-size:.8rem;color:var(--grey)}
.flt-meta div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.flt-meta b{color:var(--ink);font-weight:500}

.flt-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;color:#fff;margin-top:10px}
.flt-badge[data-s="good"]{background:var(--leaf)}
.flt-badge[data-s="low"]{background:#7FA84C}
.flt-badge[data-s="due"]{background:var(--amber);color:var(--ink)}
.flt-badge[data-s="overdue"]{background:var(--red)}

.flt-acts{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}
.flt-acts .btn{width:100%;justify-content:center}
.flt-free{background:var(--svc-soft);border:1px solid var(--svc);color:var(--svc-deep);font-size:.72rem;padding:9px 12px;text-align:center;font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.flt-shoprow{display:flex;gap:7px}
.flt-shoprow .btn{flex:1;padding:9px 8px;font-size:.76rem}
.flt-changed{background:none;border:none;color:var(--grey);font-size:.76rem;text-decoration:underline;cursor:pointer;padding:4px;font-family:inherit}
.flt-changed:hover{color:var(--svc-deep)}

@media(max-width:520px){.flt-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   MOBILE PASS
   Loaded last so these rules win. Fixes overflow, header
   alignment, tab clipping and touch-target sizing.
   ══════════════════════════════════════════════════════════ */

/* ── Global overflow guard ── */
html, body { max-width: 100%; overflow-x: hidden; }
.wrap { box-sizing: border-box; }
img, svg, table { max-width: 100%; }

/* ── Header: logo never clips ── */
.logo { flex: none; overflow: visible; min-width: 0; }
.logo img { flex: none; }
.logo em { white-space: nowrap; }

@media (max-width: 860px) {
  /* Top bar reads as two tidy lines instead of wrapping mid-sentence */
  .top { padding: 10px 0; font-size: .72rem; line-height: 1.5; }
  .top .wrap { flex-direction: column; gap: 3px; align-items: flex-start; }

  header { position: sticky; top: 0; }
  .nav {
    height: auto;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Logo row */
  .nav > .logo,
  .nav > a.logo {
    padding: 13px 0 12px;
    align-self: flex-start;
  }
  .logo img { height: 30px; }

  /* Tabs: full-bleed scroller with proper end padding so the last
     tab isn't sliced off at the viewport edge */
  .tabs {
    margin: 0 -20px;
    padding: 4px 20px;
    border-top: 1px solid var(--rule);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: none;
    padding: 12px 15px;
    font-size: .84rem;
    scroll-snap-align: start;
  }
  .tabs button:last-child { margin-right: 20px; }
}

/* ── Typography and spacing ── */
@media (max-width: 760px) {
  main { padding: 26px 0 60px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .vhead { margin-bottom: 20px; }
  .vhead h1 { font-size: clamp(1.5rem, 7.5vw, 2rem); line-height: 1.1; }
  .vhead p { font-size: .92rem; }

  .card { padding: 22px 20px; }
  .card + .card { margin-top: 14px; }
  .card h2 { font-size: 1.05rem; }
  .fset { margin-top: 18px; padding-top: 16px; }

  .banner { padding: 12px 14px; font-size: .84rem; }
}

/* ── Forms: 16px inputs stop iOS zooming on focus ── */
@media (max-width: 760px) {
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
    padding: 13px 13px;
  }
  .field label { font-size: .6rem; }
  .grid2, .grid3, .grid4 { gap: 12px; }

  /* Buttons sitting in a "justify-content:flex-end" field get
     their own full-width row rather than hanging oddly */
  .field > .btn { width: 100%; margin-top: 2px; }

  .actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .actions .btn { width: 100%; }
  .actions .err-msg { text-align: center; }
}

/* ── Modal behaves like a sheet on small screens ── */
@media (max-width: 640px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__box { max-height: 92vh; max-width: 100%; }
  .modal__head { padding: 18px 20px; }
  .modal__body { padding: 18px 20px; }
  .modal__foot { padding: 14px 20px; flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }
}

/* ── Filter cards ── */
@media (max-width: 760px) {
  .flt-sum { grid-template-columns: 1fr 1fr; gap: 10px; }
  .flt-sum__cell { padding: 15px 16px; }
  .flt-sum__cell b { font-size: 1.45rem; }
  .flt-group__head { padding-bottom: 10px; margin-bottom: 12px; }
  .flt-group__head h2 { font-size: 1.05rem; }
  .flt-card { padding: 20px 18px; }
}

/* ── Product / warranty cards ── */
@media (max-width: 640px) {
  .rowend { align-items: flex-start; }
  .rowend .tag { align-self: flex-start; }
  .empty { padding: 36px 20px; }
  .toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(80px); max-width: none; }
  .toast.on { transform: translateY(0); }
}

/* ── Admin tables keep their own scroller ── */
@media (max-width: 760px) {
  .tblwrap { -webkit-overflow-scrolling: touch; }
  .tblwrap table { min-width: 640px; }
}

/* ── Login screen ── */
@media (max-width: 520px) {
  #login { padding: 16px; }
  .logo--lg img { height: 42px; }
}

/* ══════════════════════════════════════════════════════════
   BENTO DASHBOARD (admin)
   Tiles rise in on a stagger, numbers count up, charts draw in,
   and a soft spotlight follows the pointer. All motion is turned
   off for people who ask for reduced motion (rule near the top).
   ══════════════════════════════════════════════════════════ */
:root{ --st-new:#7290D5; --st-prog:#D4932A; --st-done:#2F8F63; --st-rej:#9B5BB5; --lapsed:#8A949B; }

.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.dash-head h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.03em;line-height:1.06}
.dash-head h1 span{color:var(--svc)}
.live{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);background:#fff;border:1px solid var(--rule);padding:7px 12px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--leaf);position:relative}
.live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--leaf);animation:livePulse 2.2s ease-out infinite}
.live button{background:none;border:none;font:inherit;color:var(--svc-deep);cursor:pointer;letter-spacing:inherit;text-transform:inherit;padding:0 0 0 6px;border-left:1px solid var(--rule)}
@keyframes livePulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}

.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:14px}
.bt{position:relative;background:#fff;border:1px solid var(--rule);padding:22px 24px;overflow:hidden;
    display:flex;flex-direction:column;isolation:isolate;
    animation:btIn .62s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i,0) * 70ms);
    transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .35s}
.bt:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(16,24,32,.28);border-color:#cfd8dc}
@keyframes btIn{from{opacity:0;translate:0 14px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
/* pointer spotlight */
.bt::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(114,144,213,.13),transparent 60%)}
.bt:hover::before{opacity:1}
.bt--ink::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(114,144,213,.28),transparent 60%)}

.bt-a{grid-column:span 5;grid-row:span 2}
.bt-b{grid-column:span 7}
.bt-c{grid-column:span 3}
.bt-d{grid-column:span 4}
.bt-e{grid-column:span 7}
.bt-f{grid-column:span 5}
.bt-g{grid-column:span 7}
.bt-h{grid-column:span 5}
@media(max-width:1100px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .bt-a{grid-column:span 6;grid-row:span 1}
  .bt-b,.bt-e,.bt-g{grid-column:span 6}
  .bt-c,.bt-d,.bt-f,.bt-h{grid-column:span 3}
}
@media(max-width:700px){
  .bento{grid-template-columns:1fr;gap:12px}
  .bt-a,.bt-b,.bt-c,.bt-d,.bt-e,.bt-f,.bt-g,.bt-h{grid-column:auto}
  .bt{padding:20px}
}

.bt-k{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);display:flex;justify-content:space-between;gap:10px;align-items:center}
.bt-big{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
.bt-sub{font-size:.82rem;color:var(--grey);margin-top:6px}
.bt-sub b{color:var(--ink);font-weight:600}
.delta{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;padding:3px 8px;margin-left:8px;vertical-align:middle;background:var(--snow);color:var(--grey)}
.delta[data-d="up"]{background:#E9F5EE;color:#24724F}
.delta[data-d="down"]{background:#FBEDED;color:#9C3E3E}
.bt-foot{margin-top:auto;padding-top:14px}
.bt-link{background:none;border:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;color:var(--svc-deep);cursor:pointer;padding:0}
.bt-link:hover{text-decoration:underline}

/* Hero tile (dark) */
.bt--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.bt--ink .bt-k{color:rgba(255,255,255,.55)}
.bt--ink .bt-sub{color:rgba(255,255,255,.62)}
.bt--ink .bt-sub b{color:#fff}
.bt--ink .bt-link{color:var(--svc)}
.bt--ink .bt-big{font-size:clamp(3.4rem,7vw,5.2rem)}
.bt--ink[data-hot="1"] .bt-big{color:#F2A0A0}
.bt--ink:hover{border-color:var(--ink)}
.queue{list-style:none;margin-top:20px;border-top:1px solid var(--rule-dark)}
.queue li{border-bottom:1px solid var(--rule-dark);animation:qIn .45s ease both;animation-delay:calc(380ms + var(--j,0) * 60ms)}
@keyframes qIn{from{opacity:0;translate:-8px 0}}
.queue button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 4px;cursor:pointer;transition:background .2s,padding .2s}
.queue button:hover,.queue button:focus-visible{background:rgba(255,255,255,.06);padding-left:10px}
.queue .q1{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue .q2{font-size:.74rem;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue .q3{grid-row:span 2;align-self:center;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:right}
.queue .q3 b{display:block;color:#fff;font-weight:500}
.queue-empty{margin-top:22px;font-size:.86rem;color:rgba(255,255,255,.6)}

/* Column chart */
.cols{display:flex;align-items:flex-end;gap:6px;height:118px;margin-top:16px;padding-bottom:1px;border-bottom:1px solid var(--rule)}
.cols > div{flex:1;height:100%;display:flex;align-items:flex-end;position:relative;cursor:default}
.cols i{display:block;width:100%;background:var(--svc);border-radius:4px 4px 0 0;min-height:2px;
  transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.8,.25,1),background .2s,height .5s;transition-delay:calc(var(--j,0) * 40ms)}
.cols > div:hover i{background:var(--svc-deep)}
.cols > div.now i{background:var(--svc-deep)}
.drawn .cols i{transform:scaleY(1)}
.cols-x{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;color:var(--grey);margin-top:6px}

/* Horizontal bars */
.hbars{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.hbar{display:grid;grid-template-columns:minmax(80px,140px) 1fr 44px;gap:12px;align-items:center;font-size:.84rem}
.hbar .tr{height:10px;background:var(--snow);position:relative;overflow:hidden;border-radius:0 4px 4px 0}
.hbar .tr i{position:absolute;inset:0 auto 0 0;background:var(--svc);border-radius:0 4px 4px 0;
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.25,1),width .5s;transition-delay:calc(var(--j,0) * 80ms)}
.drawn .hbar .tr i{transform:scaleX(1)}
.hbar b{font-family:'Archivo',sans-serif;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* Segmented stacked bar */
.seg{display:flex;gap:2px;height:14px;margin-top:18px;background:var(--snow)}
.seg i{display:block;height:100%;min-width:0;transform:scaleX(0);transform-origin:left;
  transition:transform .75s cubic-bezier(.2,.8,.25,1),flex-grow .5s;transition-delay:calc(var(--j,0) * 90ms)}
.seg i:first-child{border-radius:4px 0 0 4px}.seg i:last-child{border-radius:0 4px 4px 0}
.drawn .seg i{transform:scaleX(1)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.8rem;color:var(--grey)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend s{width:10px;height:10px;border-radius:2px;display:inline-block;text-decoration:none}
.legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Ring */
.ringwrap{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.ring{position:relative;width:112px;height:112px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{transition:stroke-dasharray 1s cubic-bezier(.2,.8,.25,1),stroke-dashoffset 1s cubic-bezier(.2,.8,.25,1)}
.ring > div{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring b{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.45rem;letter-spacing:-.03em;line-height:1;display:block}
.ring small{font-size:.62rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ringwrap .legend{flex-direction:column;margin-top:0;gap:6px}

/* Filter chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.chip{background:var(--snow);padding:10px 12px;border-left:3px solid var(--rule)}
.chip b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:1.25rem;line-height:1.1;font-variant-numeric:tabular-nums}
.chip span{font-size:.7rem;color:var(--grey)}
.chip[data-c="over"]{border-left-color:var(--red)}
.chip[data-c="week"]{border-left-color:var(--st-prog)}
.chip[data-c="month"]{border-left-color:var(--svc)}

/* Email health */
.health{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.health .bt-big{margin-top:0}
.health em{font-style:normal;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;color:var(--grey)}

/* Chart tooltip */
.tip{position:fixed;z-index:300;pointer-events:none;background:var(--ink);color:#fff;font-size:.76rem;padding:7px 10px;
  line-height:1.4;opacity:0;transform:translate(-50%,calc(-100% - 6px));transition:opacity .15s;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.tip.on{opacity:1}
.tip b{font-family:'Archivo',sans-serif}

/* Number flash when a live refresh changes a figure */
.bump{animation:bump .9s ease}
@keyframes bump{0%{color:var(--svc)}100%{}}

/* Skeleton while loading */
.bt-skel{background:linear-gradient(90deg,#fff 0%,var(--snow) 50%,#fff 100%);background-size:200% 100%;animation:skel 1.3s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ── Portal: gentle staggered reveal for cards ── */
.rise{animation:btIn .55s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.grow{transform-origin:left;animation:growX 1s cubic-bezier(.2,.8,.25,1) .25s both}
@keyframes growX{from{transform:scaleX(0)}}
.flt-dial circle:last-child{animation:dialIn 1.1s cubic-bezier(.2,.8,.25,1) .2s both}
@keyframes dialIn{from{stroke-dasharray:0 999}}

@media (prefers-reduced-motion:reduce){
  .bt,.rise,.queue li{opacity:1!important;translate:none!important;scale:none!important}
  .cols i,.hbar .tr i,.seg i{transform:none!important}
  .live i::after{display:none}
}