/* ADV Morning Briefing — mobile (flag-gated, ≤1024px).
 *
 * Every rule below is scoped to body.mbm-active so the desktop briefing
 * (the same page when the flag is off) renders byte-identically. The
 * dispatcher in briefing.html adds/removes the body class.
 *
 * Source: tmp/cd-handoff/morning-briefing/mb-mobile.html <style> block,
 * minus the TWEAKS PANEL rules (CD-only scaffolding).
 */

/* ─── TOKENS ─────────────────────────────────────────────────── */
body.mbm-active {
  /* surfaces */
  --bg:            #0A1118;
  --bg-2:          #0E1620;
  --card:          #111B27;
  --card-2:        #16212F;
  --card-3:        #1B2838;
  --overlay:       rgba(7,12,18,0.72);
  --border:        rgba(255,255,255,0.06);
  --border-2:      rgba(255,255,255,0.10);
  --divider:       rgba(255,255,255,0.05);

  /* text */
  --t-1:           #E6EDF3;
  --t-2:           #9AA7B6;
  --t-3:           #5B6776;
  --t-on-accent:   #FFFFFF;

  /* primary (#006FA0) */
  --p:             #006FA0;
  --p-hover:       #0A85BC;
  --p-press:       #00567C;
  --p-soft:        rgba(0,111,160,0.14);
  --p-ring:        rgba(0,111,160,0.45);

  /* status ramp */
  --standout:      #22C55E;  --standout-bg: rgba(34,197,94,0.13);
  --solid:         #3B82F6;  --solid-bg:    rgba(59,130,246,0.13);
  --mixed:         #F59E0B;  --mixed-bg:    rgba(245,158,11,0.13);
  --watch:         #EF4444;  --watch-bg:    rgba(239,68,68,0.13);

  /* spacing scale (4-base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* radii */
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 18px; --r5: 24px; --r-pill: 999px;

  /* type scale */
  --f-display: clamp(48px, 14vw, 64px);
  --f-h1: 22px;
  --f-h2: 18px;
  --f-h3: 15px;
  --f-body: 14px;
  --f-small: 12px;
  --f-eyebrow: 11px;

  /* shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-sheet: 0 -10px 40px rgba(0,0,0,0.55);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d1: 120ms; --d2: 220ms; --d3: 320ms;

  /* breakpoint constant (documented; used in queries) */
  --bp-mobile-max: 1024px;
}

/* ─── RESET ──────────────────────────────────────────────────── */
body.mbm-active, body.mbm-active * { box-sizing: border-box; }
body.mbm-active {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--t-1);
  font-family: 'DM Sans', 'Inter', -apple-system, system-ui, sans-serif;
  font-size: var(--f-body);
  line-height: 1.45;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
body.mbm-active button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
body.mbm-active .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
body.mbm-active .mono { font-family: 'DM Mono', ui-monospace, Menlo, monospace; }

/* ─── HEADER ─────────────────────────────────────────────────── */
body.mbm-active .app {
  min-height: 100vh;
  padding-bottom: 64px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(0,111,160,0.10), transparent 60%),
    var(--bg);
}
body.mbm-active .topbar {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(10,17,24,0.78);
  border-bottom: 1px solid var(--border);
}
body.mbm-active .topbar-inner {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s4);
}
body.mbm-active .brand {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 700; letter-spacing: 0.02em;
}
body.mbm-active .brand .adv { color: var(--p-hover); font-size: 16px; letter-spacing: 0.06em; }
body.mbm-active .brand .sub { color: var(--t-2); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
body.mbm-active .topbar .spacer { flex: 1; }
body.mbm-active .role-pill {
  border: 1px solid var(--p);
  color: var(--p-hover);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  padding: 3px 7px; border-radius: var(--r1);
}
body.mbm-active .menu-btn {
  width: 36px; height: 36px; border-radius: var(--r2);
  display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--border);
}
body.mbm-active .menu-btn svg { width: 16px; height: 16px; }
body.mbm-active .topbar-date {
  padding: 0 var(--s4) 12px;
  color: var(--t-2); font-size: 13px;
}
body.mbm-active .topbar-date strong { color: var(--t-1); font-weight: 600; }

/* ─── SECTIONS ───────────────────────────────────────────────── */
body.mbm-active .section { padding: var(--s5) var(--s4) 0; }
body.mbm-active .eyebrow {
  display: flex; align-items: center; gap: 6px;
  color: var(--t-2);
  font-size: var(--f-eyebrow);
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--s3);
}

/* ?-bubble: info popover trigger */
body.mbm-active .info-trigger {
  width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid var(--border-2);
  color: var(--t-2);
  font-size: 11px; font-weight: 600;
  display: inline-grid; place-items: center;
  transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
body.mbm-active .info-trigger:hover, body.mbm-active .info-trigger:active { background: var(--card-2); color: var(--t-1); border-color: var(--p); }

/* ─── ANNOUNCEMENT CARDS ─────────────────────────────────────── */
body.mbm-active .announcement {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--p);
  border-radius: var(--r3);
  padding: var(--s4);
  text-align: left; width: 100%;
  margin-bottom: var(--s2);
  color: inherit;
  transition: background var(--d1) var(--ease);
}
body.mbm-active .announcement + .announcement { margin-top: 0; }
body.mbm-active .announcement:hover { background: var(--card-2); }
body.mbm-active .announcement .head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: 6px;
}
body.mbm-active .announcement .head .icon { font-size: 16px; }
body.mbm-active .announcement .head .title {
  font-weight: 600; font-size: var(--f-h3); color: var(--t-1);
}
body.mbm-active .announcement .body {
  color: var(--t-2); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp 0s;
}
body.mbm-active .announcement.expanded .body { display: block; -webkit-line-clamp: unset; }
body.mbm-active .announcement .meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--s2);
  color: var(--t-3); font-size: 11px; letter-spacing: 0.04em;
}
body.mbm-active .announcement .meta .dot { width: 2px; height: 2px; border-radius: 999px; background: var(--t-3); }
body.mbm-active .announcement .more {
  color: var(--p-hover); font-size: 12px; font-weight: 500;
  margin-top: 6px; display: inline-block;
}
body.mbm-active .announcement.expanded .more::after { content: ' less'; }
body.mbm-active .announcement:not(.expanded) .more::after { content: ' more'; }

/* ─── HERO RQI CARD ──────────────────────────────────────────── */
body.mbm-active .hero-rqi {
  background: linear-gradient(180deg, rgba(34,197,94,0.05), transparent 70%), var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--standout);
  border-radius: var(--r4);
  padding: var(--s5) var(--s4) var(--s4);
  text-align: center;
  overflow: hidden;
  position: relative;
}
body.mbm-active .hero-rqi .score {
  font-size: var(--f-display);
  line-height: 1;
  font-weight: 700;
  color: var(--standout);
  letter-spacing: -0.04em;
  display: inline-flex; align-items: baseline; gap: var(--s2);
  margin-bottom: var(--s2);
}
body.mbm-active .hero-rqi .score .label {
  font-size: 14px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--standout); text-transform: uppercase;
}
body.mbm-active .hero-rqi .interp {
  color: var(--t-1); font-size: 14px; line-height: 1.55;
  text-wrap: pretty;
  max-width: 32ch; margin: 0 auto var(--s4);
}
body.mbm-active .hero-rqi .deltas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--s3);
  color: var(--t-2); font-size: 12px;
  padding-top: var(--s3); border-top: 1px solid var(--divider);
}
body.mbm-active .hero-rqi .deltas > span { white-space: nowrap; }
body.mbm-active .store .meta { display: flex; flex-wrap: wrap; gap: 2px 6px; }
body.mbm-active .store .meta > span:not(.sep) { white-space: nowrap; }
body.mbm-active .hero-rqi .raw {
  color: var(--t-3); font-size: 11px;
  margin-top: 6px; letter-spacing: 0.02em;
}
body.mbm-active .hero-rqi .why {
  margin-top: var(--s4);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--p-soft); color: var(--p-hover);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  border: 1px solid rgba(0,111,160,0.25);
}
body.mbm-active .hero-rqi .why svg { width: 12px; height: 12px; }

/* fluid: at >=560px, place deltas inline with score */
@media (min-width: 560px) {
  body.mbm-active .hero-rqi { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); text-align: left; align-items: center; padding: var(--s6); }
  body.mbm-active .hero-rqi .score { margin-bottom: var(--s2); }
  body.mbm-active .hero-rqi .interp { margin: 0 0 var(--s3); max-width: none; }
  body.mbm-active .hero-rqi .deltas { justify-content: flex-start; }
  body.mbm-active .hero-rqi .why { grid-column: 1 / -1; justify-self: flex-start; margin-top: 0; }
  body.mbm-active .hero-rqi .left { grid-row: 1 / 3; }
}

/* ─── PERFORMANCE SUMMARY ────────────────────────────────────── */
body.mbm-active .perf {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--mixed);
  border-radius: var(--r3);
  padding: var(--s4);
  color: var(--t-1);
  font-size: 13.5px; line-height: 1.6;
  text-wrap: pretty;
}
body.mbm-active .perf .store-link {
  color: var(--p-hover);
  text-decoration: none;
  border-bottom: 1px dotted rgba(10,133,188,0.4);
  padding-bottom: 1px;
}
body.mbm-active .perf .store-link:hover { color: #2EA8DA; border-bottom-color: var(--p-hover); }

/* ─── STORE HEALTH LEGEND CHIPS ──────────────────────────────── */
body.mbm-active .legend-row {
  display: flex; gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--s4)) var(--s3);
  padding: 0 var(--s4) 4px;
  scroll-snap-type: x proximity;
}
body.mbm-active .legend-row::-webkit-scrollbar { display: none; }
body.mbm-active .chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--border);
  color: var(--t-2);
  font-size: 12px; font-weight: 500;
  transition: all var(--d1) var(--ease);
  scroll-snap-align: start;
}
body.mbm-active .chip .dot { width: 7px; height: 7px; border-radius: 999px; }
body.mbm-active .chip .count { color: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
body.mbm-active .chip[data-band="standout"] .dot { background: var(--standout); }
body.mbm-active .chip[data-band="solid"]    .dot { background: var(--solid); }
body.mbm-active .chip[data-band="mixed"]    .dot { background: var(--mixed); }
body.mbm-active .chip[data-band="watch"]    .dot { background: var(--watch); }
body.mbm-active .chip.active {
  color: var(--t-1); background: var(--card-3); border-color: var(--border-2);
}
body.mbm-active .chip[data-band="standout"].active { background: var(--standout-bg); border-color: var(--standout); }
body.mbm-active .chip[data-band="solid"].active    { background: var(--solid-bg);    border-color: var(--solid); }
body.mbm-active .chip[data-band="mixed"].active    { background: var(--mixed-bg);    border-color: var(--mixed); }
body.mbm-active .chip[data-band="watch"].active    { background: var(--watch-bg);    border-color: var(--watch); }

/* segmented sub-toggle for "all stores | top | watch" */
body.mbm-active .seg {
  display: inline-flex; padding: 3px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  margin-bottom: var(--s3);
}
body.mbm-active .seg button {
  padding: 6px 12px; border-radius: var(--r-pill);
  color: var(--t-2); font-size: 12px; font-weight: 500;
}
body.mbm-active .seg button.active { background: var(--p); color: var(--t-on-accent); }

/* ─── STORE ROW CARD ─────────────────────────────────────────── */
body.mbm-active .stores { display: grid; gap: var(--s2); }
body.mbm-active .store {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  gap: var(--s3);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s3) var(--s4);
  text-align: left; width: 100%; color: inherit;
  transition: background var(--d1) var(--ease), transform var(--d1) var(--ease);
  position: relative;
}
body.mbm-active .store::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
}
body.mbm-active .store[data-band="standout"]::before { background: var(--standout); }
body.mbm-active .store[data-band="solid"]::before    { background: var(--solid); }
body.mbm-active .store[data-band="mixed"]::before    { background: var(--mixed); }
body.mbm-active .store[data-band="watch"]::before    { background: var(--watch); }
body.mbm-active .store:hover, body.mbm-active .store:active { background: var(--card-2); }
body.mbm-active .store .grade {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; color: #fff;
  font-family: 'DM Sans';
}
body.mbm-active .store[data-band="standout"] .grade { background: var(--standout); }
body.mbm-active .store[data-band="solid"] .grade    { background: var(--solid); }
body.mbm-active .store[data-band="mixed"] .grade    { background: var(--mixed); color: #1A1006; }
body.mbm-active .store[data-band="watch"] .grade    { background: var(--watch); }
body.mbm-active .store .body { min-width: 0; }
body.mbm-active .store .name { font-weight: 600; font-size: 15px; color: var(--t-1); margin-bottom: 2px; }
body.mbm-active .store .meta { color: var(--t-2); font-size: 12px; line-height: 1.5; }
body.mbm-active .store .meta .sep { color: var(--t-3); margin: 0 4px; }
body.mbm-active .store .score {
  font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}
body.mbm-active .store[data-band="standout"] .score { color: var(--standout); }
body.mbm-active .store[data-band="solid"] .score    { color: var(--solid); }
body.mbm-active .store[data-band="mixed"] .score    { color: var(--mixed); }
body.mbm-active .store[data-band="watch"] .score    { color: var(--watch); }

/* fluid: 2-col grid above 720px */
@media (min-width: 720px) {
  body.mbm-active .stores { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}
/* hide a row when filter excludes it */
body.mbm-active .store.hidden { display: none; }

/* ─── SCORECARD ──────────────────────────────────────────────── */
body.mbm-active .scorecard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s4);
}
body.mbm-active .scorecard .date {
  color: var(--t-2);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 var(--s3); font-weight: 500;
}
body.mbm-active .kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
body.mbm-active .kpi {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--s3) var(--s3) var(--s3);
}
body.mbm-active .kpi .v {
  font-size: 26px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
body.mbm-active .kpi .l { color: var(--t-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
body.mbm-active .kpi.deals .v   { color: var(--solid); }
body.mbm-active .kpi.revenue .v { color: var(--standout); }
body.mbm-active .kpi.gross .v   { color: var(--mixed); }
body.mbm-active .kpi.avg .v     { color: var(--t-1); }

@media (min-width: 560px) { body.mbm-active .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

body.mbm-active .scorecard .chip-eyebrow {
  color: var(--t-3); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; margin: var(--s3) 0 var(--s2);
}

/* deals row cards */
body.mbm-active .deals { display: grid; gap: var(--s2); margin-top: var(--s3); }
body.mbm-active .deal {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 4px var(--s3);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  text-align: left; width: 100%;
  color: inherit;
  transition: background var(--d1) var(--ease);
}
body.mbm-active .deal:hover { background: var(--card-3); }
body.mbm-active .deal .store-name {
  font-weight: 600; font-size: 13px; color: var(--t-1);
  grid-column: 1; grid-row: 1;
}
body.mbm-active .deal .salesperson {
  color: var(--t-2); font-size: 12px;
  grid-column: 1; grid-row: 2;
}
body.mbm-active .deal .unit {
  color: var(--t-3); font-size: 11px;
  grid-column: 1; grid-row: 3;
  margin-top: 2px;
  font-feature-settings: 'tnum' 1;
}
body.mbm-active .deal .gross {
  grid-column: 2; grid-row: 1 / 4;
  align-self: center;
  color: var(--standout);
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}
body.mbm-active .scorecard-foot {
  display: flex; justify-content: center;
  margin-top: var(--s4);
}
body.mbm-active .see-all {
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); color: var(--t-1);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
}

/* ─── BOTTOM SHEET (info popover + drill-down) ───────────────── */
body.mbm-active .scrim {
  position: fixed; inset: 0; z-index: 90;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d2) var(--ease);
}
body.mbm-active .scrim.open { opacity: 1; pointer-events: auto; }

body.mbm-active .sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--card);
  border-top: 1px solid var(--border-2);
  border-top-left-radius: var(--r5);
  border-top-right-radius: var(--r5);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--d3) var(--ease);
  max-height: 85vh; display: flex; flex-direction: column;
}
body.mbm-active .sheet.open { transform: translateY(0); }
body.mbm-active .sheet.fullscreen { max-height: 100vh; height: 100%; border-radius: 0; }
body.mbm-active .sheet-handle {
  width: 36px; height: 4px; border-radius: 999px;
  background: var(--border-2);
  margin: 8px auto 4px;
  flex-shrink: 0;
}
body.mbm-active .sheet-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px var(--s4) var(--s3);
  flex-shrink: 0;
}
body.mbm-active .sheet-head .title { flex: 1; font-weight: 600; font-size: 16px; }
body.mbm-active .sheet-head .eyebrow-x {
  color: var(--t-3); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  display: block; margin-bottom: 2px;
}
body.mbm-active .sheet-close {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--t-2);
}
body.mbm-active .sheet-body { padding: 0 var(--s4) var(--s5); overflow-y: auto; -webkit-overflow-scrolling: touch; }

body.mbm-active .sheet.fullscreen .sheet-body {
  padding-bottom: var(--s9);
}

body.mbm-active .sheet-prose {
  color: var(--t-1); font-size: 14px; line-height: 1.6; text-wrap: pretty;
}
body.mbm-active .sheet-prose p { margin: 0 0 var(--s3); }
body.mbm-active .formula {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: var(--s3);
  font-family: 'DM Mono', monospace; font-size: 12px;
  color: var(--t-1);
  line-height: 1.5;
  white-space: pre-wrap;
}
body.mbm-active .threshold {
  display: grid; grid-template-columns: 110px 1fr;
  gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0; border-top: 1px solid var(--divider);
}
body.mbm-active .threshold:first-of-type { border-top: 0; }
body.mbm-active .threshold .band {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
body.mbm-active .threshold .band .dot { width: 8px; height: 8px; border-radius: 999px; }
body.mbm-active .threshold .desc { color: var(--t-2); font-size: 12.5px; line-height: 1.5; }
body.mbm-active .threshold[data-band="standout"] .band { color: var(--standout); } body.mbm-active .threshold[data-band="standout"] .dot { background: var(--standout); }
body.mbm-active .threshold[data-band="solid"] .band    { color: var(--solid); }    body.mbm-active .threshold[data-band="solid"] .dot    { background: var(--solid); }
body.mbm-active .threshold[data-band="mixed"] .band    { color: var(--mixed); }    body.mbm-active .threshold[data-band="mixed"] .dot    { background: var(--mixed); }
body.mbm-active .threshold[data-band="watch"] .band    { color: var(--watch); }    body.mbm-active .threshold[data-band="watch"] .dot    { background: var(--watch); }

/* sticky KPI strip inside drill-down */
body.mbm-active .sheet-sticky {
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  padding: var(--s3) var(--s4) var(--s3);
  border-bottom: 1px solid var(--divider);
  margin: 0 calc(-1 * var(--s4));
}
body.mbm-active .sheet-sticky .label { color: var(--t-3); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
body.mbm-active .sheet-sticky .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }

/* stub destination */
body.mbm-active .stub {
  display: grid; place-items: center; gap: var(--s3);
  padding: var(--s7) var(--s4);
  text-align: center;
}
body.mbm-active .stub .icon {
  width: 64px; height: 64px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--p-soft); color: var(--p-hover);
  font-size: 24px;
}
body.mbm-active .stub .title { color: var(--t-1); font-weight: 600; font-size: 16px; }
body.mbm-active .stub .body { color: var(--t-2); font-size: 13px; max-width: 36ch; margin: 0 auto; line-height: 1.55; }
body.mbm-active .stub .pill {
  display: inline-block;
  margin-top: var(--s2);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--t-3); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* breakdown bars */
body.mbm-active .breakdown { display: grid; gap: var(--s3); }
body.mbm-active .bd-row {
  display: grid; gap: 6px;
  padding: var(--s3); border-radius: var(--r2);
  background: var(--card-2); border: 1px solid var(--border);
}
body.mbm-active .bd-row .top { display: flex; justify-content: space-between; align-items: baseline; }
body.mbm-active .bd-row .label { color: var(--t-2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
body.mbm-active .bd-row .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.mbm-active .bd-row .bar { height: 5px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
body.mbm-active .bd-row .bar > i { display: block; height: 100%; border-radius: 999px; }
body.mbm-active .bd-row[data-d="up"]  .v { color: var(--standout); }
body.mbm-active .bd-row[data-d="up"]  .bar > i { background: var(--standout); }
body.mbm-active .bd-row[data-d="down"].watch .v { color: var(--watch); }
body.mbm-active .bd-row[data-d="down"].watch .bar > i { background: var(--watch); }
body.mbm-active .bd-row[data-d="flat"] .v { color: var(--t-1); }
body.mbm-active .bd-row[data-d="flat"] .bar > i { background: var(--t-3); }
body.mbm-active .bd-row .help { color: var(--t-3); font-size: 11.5px; line-height: 1.5; }

/* ─── DEAL DETAIL ────────────────────────────────────────────── */
body.mbm-active .deal-hero {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
body.mbm-active .deal-hero .gross {
  color: var(--standout);
  font-size: 36px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 4px;
}
body.mbm-active .deal-hero .lab { color: var(--t-2); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
body.mbm-active .deal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
body.mbm-active .deal-meta .field { padding: var(--s3); background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); }
body.mbm-active .deal-meta .field .k { color: var(--t-3); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; }
body.mbm-active .deal-meta .field .v { color: var(--t-1); font-size: 13px; font-weight: 500; }

/* ─── MENU SHEET ─────────────────────────────────────────────── */
body.mbm-active .nav-sheet { display: grid; gap: 4px; padding: 8px 0 var(--s4); }
body.mbm-active .nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px var(--s4);
  border-radius: var(--r2);
  color: var(--t-1);
  font-size: 15px; font-weight: 500;
  text-align: left; width: 100%;
  background: var(--card-2);
  border: 1px solid var(--border);
}
body.mbm-active .nav-item .glyph {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--p-soft); color: var(--p-hover);
  display: grid; place-items: center;
}
body.mbm-active .nav-item.danger { color: var(--watch); }
body.mbm-active .nav-item.danger .glyph { background: rgba(239,68,68,0.13); color: var(--watch); }

/* ─── STORE CHIP ROW (yesterday) ─────────────────────────────── */
body.mbm-active .store-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; margin: 0 calc(-1 * var(--s4)); padding-left: var(--s4); padding-right: var(--s4); }
body.mbm-active .store-chips::-webkit-scrollbar { display: none; }
body.mbm-active .store-chips .chip {
  background: var(--card-2);
  color: var(--t-2);
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
body.mbm-active .store-chips .chip .count { color: var(--p-hover); margin-left: 4px; }
body.mbm-active .store-chips .chip:hover { background: var(--card-3); color: var(--t-1); }

/* utility */
body.mbm-active .delta-up   { color: var(--standout); }
body.mbm-active .delta-down { color: var(--watch); }