/* =====================================================================
   moovr-entity.css - entity links, the hover snapshot and the data card.
   Loaded by moovr.js on every page (also pages that do not load moovr.css), so there is one copy.
   ===================================================================== */
/* ===== entities (Goni 2026-10-30): truck, driver and trip names are links with a hover snapshot ===== */
.mv-ent,[data-truck]:not([data-peek-only]),[data-driver]:not([data-peek-only]){cursor:pointer}
.mv-ent{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .15s,text-decoration-color .15s}
.mv-ent:hover,.mv-ent:focus-visible{color:var(--navy);text-decoration-color:currentColor}
.mv-ent:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
/* the snapshot: small paper card under the name, grows from it */
.mv-peek{position:fixed;z-index:95;width:288px;padding:14px 16px 12px;background:var(--paper);border-radius:12px;
  box-shadow:0 2px 6px rgba(40,30,10,.06),0 22px 48px -18px rgba(30,24,40,.34),0 0 0 1px rgba(40,30,10,.07);
  font-size:13.5px;line-height:1.4;color:var(--ink);text-align:left;pointer-events:none;
  opacity:0;transform:scale(.96);transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .2s cubic-bezier(.25,1,.5,1)}
.mv-peek.show{opacity:1;transform:none}
.mv-peek[hidden]{display:none}
.mv-pk-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.mv-pk-h b{font-size:15px;font-weight:600;color:var(--navy)}
.mv-pk-h b.mono{font-size:14.5px;letter-spacing:.02em}
.mv-pk-h small{color:var(--steel);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-pk-h.face{align-items:center;gap:12px}
.mv-pk-h.face b{display:block}
.mv-pk-h.face small{display:block;font-size:12.5px}
.mv-peek > .st{font-size:13.5px;margin-bottom:8px}
.mv-pk-r{display:grid;grid-template-columns:62px 1fr;column-gap:8px;padding:2px 0}
.mv-pk-r .mv-pk-k{color:var(--steel)}
.mv-pk-r .mv-pk-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-pk-r .mono{font-size:12.5px;color:var(--navy);letter-spacing:.02em}
.mv-pk-hint{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--steel)}
.mv-face{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--av-bg,rgba(17,26,74,.075));color:var(--navy)}
.mv-face.ini{display:grid;place-items:center;background:var(--tint-on);color:var(--navy);font-weight:600;font-size:14px}
@media (prefers-reduced-motion:reduce){.mv-peek{transform:none!important;transition:opacity .12s}}

/* the data card: one side drawer for a truck or a driver, the same on every screen */
.mv-ed{position:fixed;right:24px;top:84px;bottom:24px;width:420px;max-height:760px;z-index:60;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg,16px);
  box-shadow:var(--e2);display:flex;flex-direction:column;visibility:hidden;will-change:transform,opacity;text-align:left}
.mv-ed-h{display:flex;align-items:center;gap:10px;height:62px;padding:0 14px 0 24px;flex:none}
.mv-ed-h h2{font-size:22px;line-height:1.1;font-weight:480;letter-spacing:-.02em;color:var(--navy)}
.mv-ed-h h2.mono{font-size:20px;letter-spacing:.02em}
.mv-ed-h .sub2{font-size:13.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-ed-h .x2{margin-left:auto;flex:none}
.mv-ed-b{flex:1;overflow:auto;padding:0 24px 8px;transition:opacity .14s cubic-bezier(.25,1,.5,1)}
.mv-ed-b.swap{opacity:0}
.mv-ed-f{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 24px 18px;border-top:1px solid var(--line2)}
.mv-ed-f .t-small{color:var(--steel);font-size:12.5px}
.mv-ed-acts{display:flex;gap:6px}
.mv-ed-st{padding:0 0 10px;font-size:14px}
.mv-dsec{padding:12px 0 8px;border-top:1px solid var(--line2)}
.mv-dsec h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;font-weight:560;color:var(--slate)}
.mv-dsec h3 .smp{font-size:11.5px;font-weight:450;color:var(--amber-ink);background:var(--tint-note);border-radius:4px;padding:1px 6px}
.mv-kv{display:grid;grid-template-columns:18px 100px 1fr;align-items:center;min-height:28px;font-size:13.5px}
.mv-kv.nm{grid-template-columns:118px 1fr}
.mv-kv .kk{color:var(--steel)}
.mv-kv .v{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-kv .v .mono{font-size:13px}
.mv-kv .v small{font-size:12.5px;font-weight:450;color:var(--steel);margin-left:8px}
.mv-kv.bad .v{color:var(--orange-ink);font-weight:560}
.mv-kv svg{width:15px;height:15px}
.mv-kv .mv-ent{color:var(--navy);font-weight:560}
.mv-dtr{display:grid;grid-template-columns:96px 1fr auto;align-items:baseline;column-gap:10px;padding:5px 0;font-size:13.5px;color:var(--ink)}
.mv-dtr .mv-ent{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--navy)}
.mv-dtr .w{font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.02em;white-space:nowrap}
.mv-dtr .q{color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-dnone{font-size:13.5px;color:var(--steel);padding:4px 0}
.mv-dhead{display:flex;align-items:center;gap:14px;padding:0 0 14px}
.mv-dhead .mv-face{width:56px;height:56px}
.mv-dhead b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.mv-dhead small{display:block;margin-top:2px;font-family:var(--mono);font-size:12.5px;color:var(--steel);letter-spacing:.02em}
.mv-dhead .st{margin-left:auto;font-size:13.5px}
.mv-prow{display:flex;align-items:center;justify-content:space-between;min-height:36px}
.mv-prow .mono{font-size:13.5px;color:var(--ink)}
@media (max-width:640px){.mv-ed{left:12px;right:12px;width:auto;top:72px;bottom:12px}}
@media (prefers-reduced-transparency:reduce){.mv-peek,.mv-ed{box-shadow:0 0 0 1px var(--line)}}
.mv-ed a.btn,.mv-ed a.btn:hover{text-decoration:none}
.mv-kv .mv-ent[data-truck],.mv-kv .mv-ent[data-trip]{font-family:var(--mono);font-size:13px;letter-spacing:.02em}

/* status pills and the quiet button inside the snapshot and the data card (scoped: this page has its own .st rows) */
.mv-peek .st,.mv-ed .st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mv-peek .st-road,.mv-ed .st-road,.mv-peek .st-planned,.mv-ed .st-planned{color:var(--navy)}
.mv-peek .st-wait,.mv-ed .st-wait{color:var(--amber-ink)} .mv-peek .st-done,.mv-ed .st-done{color:var(--sea-ink)}
.mv-peek .st-stuck,.mv-ed .st-stuck,.mv-peek .st-nogps,.mv-ed .st-nogps{color:var(--orange-ink);font-weight:560}
.mv-peek .st-closed,.mv-ed .st-closed{color:var(--steel)}
.st-road .dot{background:var(--navy)} .st-wait .dot{background:var(--amber)} .st-done .dot{background:var(--sea)} .st-stuck .dot{background:var(--orange)}
.st-nogps .dot{background:#fff;border:1.5px dashed var(--orange-ink)} .st-planned .dot{background:var(--paper);border:1.5px solid var(--navy)} .st-closed .dot{background:var(--fog)}
.mv-ed .btn.quiet{color:var(--navy);padding:0 10px}
.mv-ed .btn.quiet:hover{background:var(--tint-hover)}
.mv-peek{white-space:normal}

/* card head (Goni 2026-10-30): the kind as a small word, then who / what, then the 4 facts that matter */
.mv-ed-h{height:52px}
.mv-ed-k{font-family:var(--mono);font-size:12px;font-weight:450;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}   /* the t-label kicker, like DETAILS and NEW TRIP (audit 2026-10-31) */
.mv-hero{display:flex;align-items:center;gap:16px;padding:4px 0 16px}
.mv-hero .mv-face{width:72px;height:72px;font-size:22px}
/* the kind's icon: a square tile tinted in the card's colour (navy wash), never a round grey bubble (audit 2026-10-31) */
.mv-face.ic{display:grid;place-items:center;border-radius:12px;color:var(--mv-c,#111a4a);background:color-mix(in srgb,var(--mv-c,#111a4a) 9%,#fffdf9);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mv-c,#111a4a) 16%,transparent)}
.mv-face.ic svg{width:30px;height:30px}
.mv-hero .hx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.mv-hero b{font-size:22px;line-height:1.15;font-weight:560;letter-spacing:-.01em;color:var(--ink)}
.mv-hero b.mono{font-size:21px;letter-spacing:.03em;color:var(--navy)}
.mv-hero small{font-size:13px;color:var(--steel)}
.mv-hero small.mono{font-size:12.5px;letter-spacing:.03em}
.mv-hero .st{margin-top:5px;font-size:14px}
.mv-ed .mv-prow{padding:0 0 14px}
.mv-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 6px;background:var(--line2);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.mv-fact{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 14px 12px;background:var(--paper)}
.mv-fact .fl{font-size:12.5px;color:var(--steel)}
.mv-fact .fv{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px;font-size:14.5px;font-weight:500;color:var(--ink);min-width:0}
.mv-fact .fv small{font-size:12.5px;font-weight:450;color:var(--steel)}
.mv-fact .fv .mono{font-size:13.5px}
.mv-fact .fv .mv-ent{color:var(--navy);font-weight:560}
.mv-fact .fv .mv-ent[data-truck],.mv-fact .fv .mv-ent[data-trip]{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em}
.mv-fact .fv svg{width:15px;height:15px;align-self:center}
.mv-fact.warn{background:color-mix(in srgb,var(--tint-note) 100%,var(--paper))}
.mv-fact.warn .fv{color:var(--orange-ink)}
.mv-who{display:inline-flex;align-items:center;gap:7px}
.mv-who .mv-face{width:22px;height:22px;font-size:9px}
.mv-ed .mv-dsec{padding:14px 0 8px}
.mv-ed-f{justify-content:flex-end}
.mv-ed-acts{flex-wrap:wrap}

/* the map's reset button (Goni 2026-10-30): bottom right, above the map credits */
.mv-reset{position:absolute;right:16px;top:27px;z-index:6;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 11px;border-radius:10px;
  background:var(--paper);color:var(--navy);font-size:13.5px;font-weight:560;box-shadow:0 1px 3px rgba(40,30,10,.10),0 0 0 1px rgba(40,30,10,.08);
  opacity:0;visibility:hidden;transition:opacity .22s cubic-bezier(.25,1,.5,1),visibility 0s linear .22s,transform .2s cubic-bezier(.25,1,.5,1),background-color .15s}
.mv-reset.show{opacity:1;visibility:visible;transition:opacity .22s cubic-bezier(.25,1,.5,1),visibility 0s,transform .2s cubic-bezier(.25,1,.5,1),background-color .15s}
.mv-reset:hover{background:#f4efe6}
@media (prefers-reduced-motion:reduce){.mv-reset,.mv-reset.show{transition:none}}
.mv-reset:active{transform:scale(.96)}
.mv-reset:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.mv-reset svg{width:16px;height:16px}

/* the live strip in a screen head (Moovr.liveStrip): the same strip as Today, colour that carries meaning */
.mv-ls{display:flex;flex-direction:column;gap:10px}
.mv-ls-b{display:flex;gap:3px;height:30px;align-items:flex-end}   /* one even row, no gap between groups */
.mv-ls-s{display:flex;gap:3px;height:26px;padding:0;background:none;border:0}
.mv-ls-s i{width:5px;height:26px;border-radius:2px;background:var(--c);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.25,1,.5,1),opacity .2s;
  animation:mv-ls-grow .5s cubic-bezier(.16,1,.3,1) backwards}
@keyframes mv-ls-grow{from{transform:scaleY(0)}}
.mv-ls.go .mv-ls-s{cursor:pointer}
/* lighting, not lifting (Goni 2026-10-30): the caps stay in place; the group that matters keeps full colour, the rest fade */
.mv-ls.go .mv-ls-b:hover .mv-ls-s i,.mv-ls.go .mv-ls-b.pairing .mv-ls-s i{opacity:.22}
.mv-ls.go .mv-ls-s.on i{opacity:1!important}
@media (prefers-reduced-motion:reduce){.mv-ls-s i{animation:none}}
button.mv-ls-i.on{background:rgba(17,26,74,.05)}
.mv-ls-n{display:flex;gap:6px;margin-left:-8px}
.mv-ls-i{display:flex;flex-direction:column;align-items:flex-start;padding:4px 8px 5px;border-radius:8px;text-align:left;transition:background-color .15s,transform .15s cubic-bezier(.25,1,.5,1)}
button.mv-ls-i:hover{background:rgba(17,26,74,.05)}
button.mv-ls-i:active{transform:scale(.96)}
.mv-ls-i b{font-size:30px;line-height:1;font-weight:440;letter-spacing:-.025em;font-variant-numeric:tabular-nums}   /* Today's numbers: 30 / 1.0 / -.025em (audit 2026-10-31) */
.mv-ls-i span{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:13.5px;color:#3d3b37;white-space:nowrap}
.mv-ls-i span i{width:7px;height:7px;border-radius:50%;flex:none}
@media (max-width:1439px){ .mv-ls-n{gap:2px} }

/* the warm glow (moovr.js warmGlow): honey (Goni 2026-10-30, softer than the sunset yellow), top right, behind everything; the page
   canvas moves from body to html so the glow can sit between them */
html.mv-glowing{background:#f3efe7}
html.mv-glowing body{background:transparent!important}
.mv-glow{position:fixed;right:0;top:60px;width:60vw;height:240px;z-index:-1;pointer-events:none;opacity:.95;filter:blur(70px);
  background:radial-gradient(45% 60% at 70% 30%,#f5c98a 0,transparent 70%),radial-gradient(50% 70% at 35% 55%,#f7e3c2 0,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 80% at 75% 20%,#000 0,transparent 100%);mask-image:radial-gradient(70% 80% at 75% 20%,#000 0,transparent 100%)}
@media (prefers-reduced-transparency:reduce){.mv-glow{display:none}}

/* popups everywhere get Today's material (Goni 2026-10-30): soft glass, a bright top edge, a long soft shadow */
.mv-pop,.mv-tp{border-radius:16px!important;background:rgba(255,253,249,.96)!important;backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(40,30,10,.07),0 2px 6px rgba(40,30,10,.06),0 30px 64px -20px rgba(30,24,40,.36)!important}
@media (prefers-reduced-transparency:reduce){.mv-pop,.mv-tp{background:#fffdf9!important;backdrop-filter:none}}

/* the card drawer and the quick panels share one material (Goni 2026-10-30: popups the same everywhere, not a dead white box) */
.mv-ed{border:0!important;background:linear-gradient(180deg,color-mix(in srgb,#111a4a 7%,rgba(255,253,249,.72)) 0,rgba(255,253,249,.66) 160px);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4),0 2px 6px rgba(40,30,10,.05),0 28px 60px -24px rgba(40,30,10,.32)!important}
.mv-ed-h,.mv-ed-f{background:transparent!important}
.mv-ed-f{justify-content:flex-end!important;padding:12px 16px 16px!important;border-top:1px solid rgba(40,30,10,.07)!important}
.mv-ed-acts{flex-wrap:nowrap!important;gap:8px!important}
.mv-ed-acts .btn{height:36px;padding:0 13px;white-space:nowrap}
.mv-facts{background:rgba(40,30,10,.07)!important;border-color:rgba(40,30,10,.07)!important}
.mv-fact{background:rgba(255,253,249,.72)!important}
@media (prefers-reduced-transparency:reduce){.mv-ed{background:#fffdf9!important;backdrop-filter:none}}
/* ONE glass for every side panel and drawer (audit 2026-10-31): the card drawer's material, as a class a page adds to its own panel
   (Trips trip panel, Documents, Approvals, New trip, Planning Drivers). No border, no paper box: translucent paper, blur, bright top edge, long soft shadow */
.mv-glass{border:0!important;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,#111a4a 7%,rgba(255,253,249,.74)) 0,rgba(255,253,249,.7) 160px)!important;
  backdrop-filter:blur(30px) saturate(180%)!important;-webkit-backdrop-filter:blur(30px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 1px rgba(40,30,10,.05),0 2px 6px rgba(40,30,10,.05),0 28px 60px -24px rgba(40,30,10,.32)!important}
/* the actions row of a glass panel: one row at the bottom right, the main action last (the popup rule) */
.mv-glass-f{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(40,30,10,.07)}
.mv-glass-f .btn{height:36px;padding:0 13px;font-size:14px;white-space:nowrap;text-decoration:none}
.mv-glass-f .btn.quiet{padding:0 10px}
/* the floating paper sheet of Trips and Planning, for every office list (audit 2026-10-31): r18, a bright top edge, the long soft shadow, no line */
.surface.mv-sheet{border:0;border-radius:18px;background:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(70,50,20,.07),0 1px 2px rgba(70,50,20,.05),0 22px 44px -26px rgba(70,50,20,.30),0 70px 110px -70px rgba(17,26,74,.30)}
@media (prefers-reduced-transparency:reduce){.mv-glass{background:#fffdf9!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media (prefers-contrast:more){.mv-glass{background:#fff!important;backdrop-filter:none!important;box-shadow:0 0 0 1.5px var(--slate)!important}.surface.mv-sheet{box-shadow:0 0 0 1.5px var(--slate)}}

/* =====================================================================
   Apple pass (2026-10-30), shared by every screen. apple-design skill: response on pointer-down, things open from
   their trigger and close the same way, materials that materialize, visible focus, size-specific type, scroll edges,
   reduced motion and transparency. One set of motion tokens: --eo (UI), --ex (entrances), --t-press / --t-fast / --t-ui.
   ===================================================================== */
/* press: ONE rule per kind (moovr.js PRESS lists who gets .pressed on pointer-down; the action still fires on release).
   Buttons and chips scale a little more than full-width rows, so a row never looks like it jumps. */
.pressed{transition:transform var(--t-press,100ms) var(--eo,cubic-bezier(.25,1,.5,1)),background-color .15s!important}
.mv-ls-i.pressed,.mv-reset.pressed,.mv-chfull.pressed,.mv-cb-lk.pressed,.mv-chip .cx.pressed,.mv-tp-p.pressed,.mv-mo-x.pressed,.mv-qr.pressed,.mv-cbtn.pressed,.mv-cv-send.pressed,.mv-cv-ib.pressed,.mv-chx.pressed,.mv-chatbtn.pressed,.mv-vp.pressed{transform:scale(.96)!important}
.mv-tp-o.pressed,.mv-fr.pressed,.mv-cr.pressed,.mv-al.pressed,.mv-mi.pressed,.sec .hd.pressed,.mv-cb-loc.pressed,.mv-cb-ph.pressed{transform:scale(.985)!important}
.mv-cb-loc.go{cursor:zoom-in;transition:transform .24s var(--eo,cubic-bezier(.25,1,.5,1))}

/* focus: a visible navy ring for the keyboard on everything you can press (zero specificity: a control's own ring wins) */
:where(a[href],button,[role="button"],[role="tab"],[role="radio"],[role="checkbox"],[tabindex]:not([tabindex="-1"]),summary,select):focus-visible{outline:2px solid var(--navy,#111a4a);outline-offset:2px}

/* type: negative tracking grows with size (titles), numbers line up in tables, counts and times */
h1,h2,h3{text-wrap:balance}
.mono,.t-data,.t-stat,.tbl td,.count,.roll,.tab .n,.seg .n,.mv-cr-tm,.mv-cr-n,.mv-chatn,.mv-chatn-i,.mv-cb-m,.mv-al-tm,.mv-ls-i b,.mv-fact .fv,.mv-kv .v,.mv-dtr .w{font-variant-numeric:tabular-nums}
.mv-ed-h h2,.mv-hero b{letter-spacing:-.015em}

/* the hover snapshot materializes too (blur clears as it scales in) */
.mv-peek{filter:blur(4px);transition:opacity .16s var(--eo,cubic-bezier(.25,1,.5,1)),transform .2s var(--eo,cubic-bezier(.25,1,.5,1)),filter .2s var(--eo,cubic-bezier(.25,1,.5,1))}
.mv-peek.show{filter:none}

/* scroll edge: content that slid under a fixed head fades out softly instead of a hard cut (moovr.js toggles .mv-edge) */
.mv-edge{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px);mask-image:linear-gradient(180deg,transparent 0,#000 18px)}

/* the floating glass surfaces never animate their blur filter for people who asked for less motion, and turn solid
   paper for people who asked for less transparency */
@media (prefers-reduced-motion:reduce){
  .mv-ed,.mv-chat,.mv-mo,.mv-pop,.mv-tp,.mv-peek{filter:none!important}
  .pressed{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .mv-ed,.mv-mo,.mv-pop,.mv-tp,.mv-chat{background:#fffdf9!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mv-edge{-webkit-mask-image:none;mask-image:none}
}

/* =====================================================================
   Clean pass (Goni 2026-10-31: "not clean and pleasant enough"), shared by every office and sales screen.
   This file loads last (moovr.js adds it), so these rules are the final word for the shared pieces.
   - ONE glass and two elevations: e1 small floating things (snapshot, map reset), e2 floating panels
     (glass panels, popovers, drawers, the floating list sheet). No hairline rings stacked into shadows.
   - Faces: one initials avatar (soft navy tint, navy initials, no ring, no shadow).
   - Counts: red only for act now (Today) and unread (Messages); every other count is quiet navy.
   ===================================================================== */
:root{--av-bg:rgba(17,26,74,.075);--ink-glass:#1c1b19;--text-glass:#3d3b37;
  --e1:0 1px 2px rgba(40,30,10,.06),0 8px 24px -8px rgba(40,30,10,.18);
  --e2:0 2px 6px rgba(40,30,10,.05),0 28px 60px -24px rgba(40,30,10,.32);
  --edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4);
  --glass:rgba(255,253,249,.66);--glass-sh:var(--edge),var(--e2)}
.mv-peek,.mv-reset{box-shadow:var(--e1)}
.mv-pop,.mv-tp{background:var(--glass)!important;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--glass-sh)!important}
.mv-ed,.mv-glass{box-shadow:var(--glass-sh)!important}
.surface.mv-sheet{box-shadow:var(--glass-sh)}
.mv-face.ini,span.av{background:var(--av-bg);color:var(--navy);box-shadow:none}
img.av,.av{box-shadow:none}
/* top bar counts: quiet navy by default; red stays on Today (needs you) and Messages (unread) */
header.top .menu a .count{background:var(--av-bg);color:var(--navy)}
header.top .menu a[data-key="today"] .count,header.top .menu a[href$="today.html"] .count,header.top .menu a[data-key="messages"] .count,header.top .menu a[href*="11-messages"] .count{background:var(--red,#b8361f);color:#fff}
.mv-chatbtn .mv-chatn{background:#e2dfdb;color:var(--navy);font-size:12px}
.roll,.roll span{font-size:12px}
span.av{font-size:12px}
.mv-msgbtn .mv-chatn-i,.mv-chatn-i{background:var(--av-bg);color:var(--navy);font-size:12px}
/* the live strip's words sit in slate like every other second line */
.mv-ls-i span{color:var(--slate)}
button.mv-ls-i.on,button.mv-ls-i:hover{background:var(--tint-hover,rgba(17,26,74,.045))}