/* ============================================================================
   GSB P-Mix tab — Auntie Anne's product-mix decomposition.
   Scoped to #pmix-screen; all classes namespaced .pmix-. Consumes gsb-tokens.css.
   No Chart.js — sparklines/trend are inline SVG.
   ============================================================================ */

#pmix-screen {
  --pmix-pos: var(--gsb-shoot-green, #2F6B45);
  --pmix-neg: var(--gsb-clay, #B5532E);
  --pmix-watch: var(--gsb-ochre, #B98B32);
  --pmix-ink: var(--gsb-soil-ink, #221E18);
  --pmix-stone: var(--gsb-stone, #6F695B);
  --pmix-line: rgba(34, 30, 24, 0.12);
  --pmix-line-strong: rgba(34, 30, 24, 0.35);
  --pmix-track: #EFE9DC;
  background: var(--gsb-paper, #F3EEE3);
}

.pmix-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 48px;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--pmix-ink);
}
.pmix-loading { padding: 60px 0; text-align: center; color: var(--pmix-stone); font-size: 14px; }

/* mono figures everywhere */
.pmix-root .mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.pmix-pos { color: var(--pmix-pos); }
.pmix-neg { color: var(--pmix-neg); }
.pmix-muted { color: var(--pmix-stone); }

/* ---- header ---- */
.pmix-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pmix-title { font-family: var(--font-display, 'Newsreader', Georgia, serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.pmix-title em { font-style: italic; color: var(--pmix-pos); }
.pmix-sub { font-size: 12px; color: var(--pmix-stone); margin: 3px 0 18px; }
.pmix-sub-blurb { display: block; margin-top: 4px; }
/* ---- reporting-basis banner: shown when a view's comp-tenure gate is off, so
   the store count can't be misread as the standard fixed-comp cohort. Ochre
   (advisory), not clay (error) — the basis is deliberate, not broken. ---- */
.pmix-basis {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid var(--pmix-line); border-left: 3px solid var(--pmix-watch);
  border-radius: 6px; background: rgba(185, 139, 50, 0.06);
}
.pmix-basis-tag {
  flex: none; font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pmix-watch); padding-top: 1px;
}
.pmix-basis-body { font-size: 12px; line-height: 1.55; color: var(--pmix-ink); }
.pmix-basis-body strong { font-weight: 600; }
.pmix-basis-names { border-bottom: 1px dotted var(--pmix-line-strong); cursor: help; }
@media (max-width: 640px) {
  .pmix-basis { flex-direction: column; gap: 4px; }
}

/* Comparable-week disclosure: shown when the active window had CY/LY pairs
   excluded (missing partner, or partial cohort coverage on one leg). Ochre +
   dotted underline = "read the tooltip", same language as .pmix-basis-names. */
.pmix-winnote {
  color: var(--pmix-watch); font-weight: 500;
  border-bottom: 1px dotted var(--pmix-watch); cursor: help;
}

.pmix-fresh { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--pmix-stone); }
.pmix-fresh.stale { color: var(--pmix-neg); font-weight: 500; }

/* ---- command bar: View (popover) + Window (segmented), squared/hairline
   language matching the shared command-bar system on Sales Flash/Analytics/
   Labor — was: fully-round pills, floating ungrouped chips. ---- */
.pmix-cmdbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 10px 0 4px; position: relative;
  border: 1px solid var(--pmix-line-strong); border-radius: 8px; background: #fff;
}
.pmix-cmdbar-item { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.pmix-cmdbar-label {
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 500;
  color: var(--pmix-stone); text-transform: uppercase; letter-spacing: 0.08em;
}
.pmix-cmdbar-divider { width: 1px; height: 22px; background: var(--pmix-line-strong); margin: 0 2px; flex: none; }

/* View trigger + popover */
.pmix-view-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px;
  border: 1px solid var(--pmix-line-strong); border-radius: 4px; background: #fff;
  color: var(--pmix-ink); font: 600 12px var(--font-body, sans-serif); cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pmix-view-trigger:hover { border-color: var(--pmix-pos); }
.pmix-view-trigger:disabled { cursor: default; opacity: .55; border-color: var(--pmix-line-strong); }
.pmix-view-trigger.on { border-color: var(--pmix-pos); box-shadow: 0 0 0 2px rgba(47, 107, 69, 0.12); }
.pmix-view-chevron { color: var(--pmix-stone); transition: transform .12s ease; flex: none; }
.pmix-view-trigger.on .pmix-view-chevron { transform: rotate(180deg); color: var(--pmix-pos); }

.pmix-view-popover {
  position: absolute; top: 38px; left: 0; min-width: 300px;
  background: #fff; border: 1px solid var(--pmix-line-strong); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(34, 30, 24, 0.08); padding: 8px; display: none; z-index: 30;
}
.pmix-view-popover.show { display: block; }
.pmix-pop-sep { height: 1px; background: var(--pmix-line); margin: 4px 6px; }

/* View rows: all six views are identical menu rows (same type, hover, and
   selected tint) so they read as equal choices. Auntie Anne's / Cinnabon rows
   carry a small trailing Sales|Venues toggle; the row itself — not the toggle
   — carries the selected state. */
.pmix-pop-row {
  display: flex; align-items: center; gap: 10px; margin: 2px 0; padding-right: 6px;
  border: 1px solid transparent; border-radius: 4px;
  transition: border-color .12s ease, background .12s ease;
}
.pmix-pop-row:hover { border-color: var(--pmix-pos); }
.pmix-pop-row.on { background: rgba(47, 107, 69, 0.10); border-color: var(--pmix-pos); }
.pmix-pop-row-name {
  flex: 1; min-width: 0; text-align: left; padding: 8px 4px 8px 10px; border: 0;
  background: transparent; font: 500 13px var(--font-body, sans-serif);
  color: var(--pmix-ink); cursor: pointer; white-space: nowrap;
}
.pmix-pop-row.on .pmix-pop-row-name { color: var(--pmix-pos); font-weight: 600; }
.pmix-pop-mini { display: inline-flex; flex: none; border: 1px solid var(--pmix-line-strong); border-radius: 3px; overflow: hidden; }
.pmix-pop-mini-btn {
  font: 600 10.5px var(--font-body, sans-serif); padding: 4px 10px; border: 0;
  border-left: 1px solid var(--pmix-line-strong); background: #fff; color: var(--pmix-stone);
  cursor: pointer; transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.pmix-pop-mini-btn:first-child { border-left: 0; }
.pmix-pop-mini-btn:hover:not(.on) { box-shadow: inset 0 0 0 1px var(--pmix-pos); }
.pmix-pop-mini-btn.on { background: var(--pmix-pos); color: var(--gsb-paper, #F3EEE3); }

/* Searchable venue drill-down. The list is capped to the viewport; venue files
   themselves load only after selection, so opening this menu stays instant. */
.pmix-venue-control { min-width: 0; }
.pmix-venue-control .pmix-view-trigger { max-width: 260px; }
.pmix-venue-trigger-label, #pmix-venue-trigger-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmix-venue-popover {
  position: absolute; top: 38px; left: 0; width: min(360px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--pmix-line-strong); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(34, 30, 24, 0.12); padding: 8px; display: none; z-index: 32;
}
.pmix-venue-popover.show { display: block; }
.pmix-venue-search-wrap { padding: 2px 2px 7px; border-bottom: 1px solid var(--pmix-line); }
.pmix-venue-search {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--pmix-line-strong);
  border-radius: 4px; background: #fff; color: var(--pmix-ink);
  font: 500 12px var(--font-body, sans-serif); outline: none;
}
.pmix-venue-search:focus { border-color: var(--pmix-pos); box-shadow: 0 0 0 2px rgba(47,107,69,.12); }
.pmix-venue-list { max-height: min(430px, 55vh); overflow-y: auto; padding-top: 5px; }
.pmix-venue-row {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 9px; border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--pmix-ink); font: 500 12px var(--font-body, sans-serif); text-align: left; cursor: pointer;
}
.pmix-venue-row:hover { border-color: var(--pmix-pos); }
.pmix-venue-row.on { background: rgba(47,107,69,.10); border-color: var(--pmix-pos); color: var(--pmix-pos); font-weight: 600; }
.pmix-venue-status {
  flex: none; color: var(--pmix-stone); font: 500 9px var(--font-mono, monospace);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Window: T4W / P{n} / T13W segmented toggle — was fully-round .pmix-pill. */
.pmix-winseg { display: inline-flex; border: 1px solid var(--pmix-line-strong); border-radius: 4px; overflow: hidden; }
.pmix-winseg button {
  font: 600 12px var(--font-body, sans-serif); padding: 5px 13px; border: 0;
  border-left: 1px solid var(--pmix-line-strong); background: #fff; color: var(--pmix-stone); cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.pmix-winseg button:first-child { border-left: 0; }
.pmix-winseg button:hover:not(.on) { box-shadow: inset 0 0 0 1px var(--pmix-pos); }
.pmix-winseg button.on { background: var(--pmix-pos); color: var(--gsb-paper, #F3EEE3); font-weight: 700; }

.pmix-sectlabel {
  display: flex; align-items: baseline; gap: 6px;
  margin: 24px 0 10px; padding: 7px 10px 6px;
  border-left: 3px solid var(--gsb-shoot-green, #2F6B45);
  border-bottom: var(--rule-hairline, 1px solid rgba(34,30,24,.12));
  color: var(--gsb-soil-ink, #221E18);
  font-family: var(--font-body, sans-serif); font-size: 12.5px; font-weight: 600;
  line-height: 1.25; text-transform: uppercase; letter-spacing: var(--tracking-label, .08em);
}
.pmix-sectlabel .pmix-muted {
  color: var(--gsb-stone, #6F695B); font-family: var(--font-mono, monospace);
  font-size: 10px; font-weight: 400; letter-spacing: .02em;
}

/* ---- decomposition waterfall ---- */
.pmix-wf { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px; padding: 18px 20px 16px; }
.pmix-wf svg { display: block; }
.pmix-wf-cap { font-size: 11.5px; color: var(--pmix-stone); margin-top: 6px; line-height: 1.5; }
.pmix-wf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 2px; }
.pmix-wf-title { font-size: 18px; color: var(--pmix-ink); }
.pmix-wf-title strong { font-family: var(--font-mono, monospace); font-weight: 600; }
.pmix-wf-takeaway { margin-top: 5px; color: var(--pmix-stone); font-size: 12px; }
.pmix-wf-facts span { display: block; color: var(--pmix-stone); font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; }
.pmix-wf-equation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 2px auto 14px; color: var(--pmix-stone); }
.pmix-wf-equation > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px; background: var(--pmix-track); border-radius: 4px; }
.pmix-wf-equation em { font-style: normal; font-size: 10px; color: var(--pmix-stone); }
.pmix-wf-equation b { font: 600 12px var(--font-mono, monospace); }
.pmix-wf-equation > i { font-style: normal; font: 500 12px var(--font-mono, monospace); color: var(--pmix-stone); }
.pmix-wf-equation .total { background: var(--pmix-ink); }
.pmix-wf-equation .total em, .pmix-wf-equation .total b { color: #fff; }
.pmix-wf-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--pmix-line); padding-top: 12px; }
.pmix-wf-facts > div { padding: 0 16px; border-left: 1px solid var(--pmix-line); }
.pmix-wf-facts > div:first-child { border-left: 0; padding-left: 0; }
.pmix-wf-facts strong { display: block; margin-top: 4px; font: 500 12px var(--font-mono, monospace); color: var(--pmix-ink); }
.pmix-tapmetric { transition: opacity 0.12s ease; }
.pmix-tapmetric:hover { opacity: 0.82; }

/* ---- decomposition history ("waterfall through time") ---- */
.pmix-dh { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px; padding: 14px 16px 10px; margin: 10px 0 24px; }
.pmix-dh svg { display: block; }
.pmix-dh-legend { display: flex; gap: 16px; font-size: 11px; color: var(--pmix-stone); margin-bottom: 4px; }
.pmix-dh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pmix-dh-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }

/* ---- expanded trend slot ---- */
.pmix-trend { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px; padding: 12px 16px; margin: 10px 0 0; }
.pmix-trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.pmix-trend-title { font-size: 13px; font-weight: 500; }
.pmix-trend-legend { font-size: 11px; color: var(--pmix-stone); }
.pmix-trend-legend .cy::before { content: '━ '; color: var(--pmix-ink); }
.pmix-trend-legend .ly::before { content: '╌ '; color: var(--pmix-stone); }
.pmix-ipt-pill { font-size: 12px; background: var(--pmix-track); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }

/* ---- time series section ---- */
.pmix-ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.pmix-ts-card { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px; padding: 12px 16px; min-width: 0; }
.pmix-ts-card.full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .pmix-ts-grid { grid-template-columns: 1fr; }
}

/* year-compare toggle — also the color legend for every chart below it */
.pmix-yr-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.pmix-yr-lbl { font-size: 10.5px; color: var(--pmix-stone); text-transform: uppercase; letter-spacing: 0.08em; }
.pmix-yr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, monospace); font-size: 11px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--pmix-line-strong); background: transparent; color: var(--pmix-stone); cursor: pointer;
}
.pmix-yr-chip .pmix-yr-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--yr); opacity: 0.3; }
.pmix-yr-chip.on { background: #fff; color: var(--pmix-ink); border-color: var(--yr); }
.pmix-yr-chip.on .pmix-yr-swatch { opacity: 1; }
.pmix-yr-chip em { font-style: normal; color: var(--pmix-stone); font-size: 9.5px; }
.pmix-trend-sub { font-size: 10.5px; color: var(--pmix-stone); }
.pmix-ts-note { font-size: 11px; color: var(--pmix-stone); margin: 10px 0 0; font-style: italic; }

/* ---- focused size-mix explorer ---- */
.pmix-size-card { background:#fff; border:.5px solid var(--pmix-line); border-radius:var(--radius-lg,8px); padding:14px 16px 12px; margin-bottom:20px; }
.pmix-size-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pmix-size-controls label { display:flex; align-items:center; gap:8px; color:var(--pmix-stone); font:600 10px var(--font-body,sans-serif); text-transform:uppercase; letter-spacing:.07em; }
.pmix-size-controls select { min-width:180px; padding:6px 28px 6px 9px; border:1px solid var(--pmix-line-strong); border-radius:var(--radius-md,4px); background:#fff; color:var(--pmix-ink); font:600 12px var(--font-body,sans-serif); }
.pmix-size-toggle { display:inline-flex; border:1px solid var(--pmix-line-strong); border-radius:var(--radius-md,4px); overflow:hidden; }
.pmix-size-toggle button { padding:6px 10px; border:0; border-left:1px solid var(--pmix-line-strong); background:#fff; color:var(--pmix-stone); font:600 10.5px var(--font-body,sans-serif); cursor:pointer; }
.pmix-size-toggle button:first-child { border-left:0; }
.pmix-size-toggle button.on { background:var(--gsb-shoot-green,#2F6B45); color:var(--gsb-paper,#F3EEE3); }
.pmix-size-legend { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; margin:3px 0 6px; }
.pmix-size-legend > span { display:inline-flex; align-items:baseline; gap:5px; color:var(--pmix-stone); font-size:10.5px; }
.pmix-size-legend i { width:9px; height:9px; border-radius:2px; align-self:center; }
.pmix-size-legend b { color:var(--pmix-ink); font-weight:600; }
.pmix-size-legend em { font:500 10.5px var(--font-mono,monospace); font-style:normal; }
.pmix-size-legend small { font:500 9.5px var(--font-mono,monospace); }
.pmix-size-card > svg { display:block; width:100%; height:auto; }

/* chart axes (minimal) */
.pmix-chartrow { display: flex; gap: 6px; margin-top: 6px; }
.pmix-yax {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 150px; min-width: 40px; text-align: right;
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--pmix-stone);
}
.pmix-svgwrap { flex: 1; min-width: 0; }
.pmix-xax {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--pmix-stone);
}

/* Bar-aligned x-axis (tickAxis). Each label is absolutely positioned at its own
   bar's centre rather than flex-distributed, so a date always sits under the bar
   it names. `relative` + `overflow:hidden` keeps a first/last label that would
   overhang the plot from widening the card. */
.pmix-svgwrap .jjf-tickax {
  position: relative; height: 25px; margin-top: 3px; overflow: hidden;
}
.pmix-svgwrap .jjf-tickax.one { height: 13px; }
.pmix-svgwrap .jjf-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--pmix-stone); white-space: nowrap; pointer-events: none;
}
.pmix-svgwrap .jjf-tick > b { font-weight: 500; opacity: .72; }
.pmix-svgwrap .jjf-tick > b:empty { display: none; }
.pmix-svgwrap .jjf-tick > i { font-style: normal; color: var(--pmix-ink); }
.pmix-svgwrap .jjf-tick em { font-style: normal; }

/* item ledger — load more */
.pmix-more { text-align: center; padding: 10px 0 2px; border-top: 0.5px solid var(--pmix-line); margin-top: 4px; }
.pmix-more-btn {
  font-family: var(--font-body, sans-serif); font-size: 12px; color: var(--pmix-ink);
  background: var(--pmix-track); border: 0.5px solid var(--pmix-line-strong);
  border-radius: 999px; padding: 5px 16px; cursor: pointer;
}
.pmix-more-btn:hover { background: var(--gsb-oat-dk, #D8CFBA); }

/* ---- colored delta pills (category summary + basket drivers) ---- */
.pmix-dpill {
  display: inline-block; font-family: var(--font-mono, monospace); font-size: 11.5px;
  line-height: 1.5; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pmix-pill-pos { background: rgba(47, 107, 69, 0.13); color: var(--pmix-pos); }
.pmix-pill-neg { background: rgba(181, 83, 46, 0.13); color: var(--pmix-neg); }
.pmix-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }

/* ---- basket drivers ---- */
.pmix-basket {
  background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px;
  padding: 12px 16px 14px; margin: 18px 0;
}
.pmix-bd-title { font-size: 10.5px; color: var(--pmix-stone); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.pmix-bd-cells { display: flex; }
.pmix-bd-cell { flex: 1; text-align: center; padding: 0 12px; border-left: 0.5px solid var(--pmix-line); }
.pmix-bd-cell:first-child { border-left: none; }
.pmix-bd-label { font-size: 11px; color: var(--pmix-stone); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
.pmix-bd-val { font-size: 22px; margin-bottom: 7px; }

/* ---- tables (category + item ledger) ---- */
.pmix-card { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 8px; padding: 8px 16px 12px; margin-bottom: 14px; }
.pmix-tbl { width: 100%; border-collapse: collapse; min-width: 0; }
.pmix-tbl th {
  font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--pmix-stone);
  font-weight: 400; text-align: right; padding: 7px 8px; border-bottom: 0.5px solid var(--pmix-line);
}
.pmix-tbl th.l, .pmix-tbl td.l { text-align: left; }
/* border-bottom reset: style.css's bare `td { border-bottom: 1px solid var(--border) }`
   otherwise wins the border-collapse conflict over the designed 0.5px top hairline
   (known global-table-CSS leak into JS-injected tables). */
.pmix-tbl td { font-size: 12.5px; padding: 8px; border-top: 0.5px solid rgba(34,30,24,0.08); border-bottom: 0; text-align: right; }
.pmix-tbl tr:first-child td { border-top: none; }
.pmix-tbl td.num { font-family: var(--font-mono, monospace); font-size: 12px; }
.pmix-tbl .pmix-group-head th { padding-top: 5px; padding-bottom: 4px; border-bottom: 0; color: var(--pmix-ink); font-family: var(--font-body, sans-serif); font-size: 9.5px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.pmix-tbl .pmix-group-head th.l { text-align: left; color: var(--pmix-stone); font: 400 10.5px var(--font-mono, monospace); text-transform: none; letter-spacing: normal; vertical-align: bottom; border-bottom: .5px solid var(--pmix-line); }
.pmix-tbl thead tr:last-child th span { font-size: 9px; }
.pmix-c-cat { width: 16%; }
.pmix-c-share { width: 14%; }
.pmix-c-delta { width: 9%; }
.pmix-c-abs, .pmix-c-yoy { width: 10%; }
.pmix-mix-primary { font-weight: 700; color: var(--pmix-ink); }
.pmix-share-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; min-width: 112px; }
.pmix-share-cell strong { min-width: 42px; text-align: right; font: 700 12px var(--font-mono, monospace); }
.pmix-share-track { display: inline-block; flex: 1; min-width: 44px; max-width: 72px; height: 6px; overflow: hidden; background: var(--pmix-track); border-radius: 2px; }
.pmix-share-track i { display: block; height: 100%; min-width: 1px; border-radius: 2px; }
/* Separate the sales block from the quantity block without adding another
   header row; this divider follows the same grouping on every category row. */
.pmix-tbl .pmix-qty-start { border-left: 1px solid var(--pmix-line-strong); padding-left: 14px; }
.pmix-catname { display: inline-block; }
.pmix-bar { position: relative; height: 10px; background: var(--pmix-track); border-radius: 2px; overflow: hidden; }
.pmix-bar > span { display: block; height: 10px; border-radius: 2px; }
/* unit-share marker: a tick showing where the category sits by UNITS (the bar
   fill is its share of $). White core + dark halo so it stays visible whether it
   lands on a dark fill (e.g. Nuggets) or out on the light track (e.g. Beverages). */
.pmix-bar-umark {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(34, 30, 24, 0.55);
}

/* item ledger expand */
.pmix-itemrow { cursor: pointer; }
.pmix-itemrow:hover td { background: rgba(34,30,24,0.02); }
.pmix-sizerow td { font-size: 11.5px; color: var(--pmix-stone); padding: 5px 0; }
.pmix-sizerow td.l { padding-left: 16px; }
.pmix-chev { display: inline-block; width: 10px; color: var(--pmix-stone); font-size: 10px; }

/* ---- movers ---- */
.pmix-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pmix-mover { background: #fff; border: 0.5px solid var(--pmix-line); border-radius: 0; padding: 9px 14px; }
.pmix-mover.up { border-left: 3px solid var(--pmix-pos); }
.pmix-mover.down { border-left: 3px solid var(--pmix-neg); }
.pmix-mover .cap { font-size: 10.5px; color: var(--pmix-stone); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.pmix-mover-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 0.5px solid rgba(34, 30, 24, 0.08); }
.pmix-mover-row:first-of-type { border-top: none; }
.pmix-mover-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* time-series gap strip label */
.pmix-gap-label { font-size: 11px; color: var(--pmix-ink); margin: 8px 0 0; }

.pmix-foot { font-size: 11px; color: var(--pmix-stone); margin-top: 14px; line-height: 1.5; }
.pmix-err { padding: 48px 0; text-align: center; color: var(--pmix-stone); }

/* ---- mobile ---- */
@media (max-width: 720px) {
  .pmix-root { padding: 16px 12px 40px; }
  .pmix-title { font-size: 22px; }
  .pmix-sectlabel { display: block; font-size: 11.5px; line-height: 1.4; padding-left: 8px; }
  .pmix-sectlabel .pmix-muted { display: block; margin-top: 3px; }
  .pmix-movers { grid-template-columns: 1fr; }
  .pmix-cmdbar { padding: 10px; flex-direction: column; align-items: stretch; }
  .pmix-cmdbar-item { justify-content: space-between; }
  .pmix-cmdbar-divider { display: none; }
  .pmix-view-popover { left: 0; right: 0; min-width: 0; }
  .pmix-venue-control .pmix-view-trigger { max-width: min(260px, 68vw); }
  .pmix-venue-popover { left: 0; right: 0; width: auto; }
  .pmix-size-controls { align-items:stretch; flex-direction:column; }
  .pmix-size-controls label { justify-content:space-between; }
  .pmix-size-controls select { flex:1; min-width:0; }
  .pmix-size-toggle { align-self:flex-start; }

  /* Dense ledgers: keep every column reachable via horizontal scroll inside the
     card, but FREEZE the name column so the row label never scrolls away, and
     keep numeric cells + headers on one line so columns stay aligned. */
  /* padding-left:0 so there's no scroll gutter for content to bleed into on the
     left of the sticky column; the inset is moved onto the frozen cell itself. */
  .pmix-card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-left: 0; }
  .pmix-tbl { min-width: 0; }                 /* natural width; nowrap drives it */
  .pmix-tbl th, .pmix-tbl td.num { white-space: nowrap; }
  .pmix-share-cell { min-width: 108px; }
  .pmix-share-track { width: 54px; }
  /* Cells have no horizontal padding by default (desktop relies on wide columns
     for gaps); once nowrap collapses columns to content width they touch, so add
     an explicit left gutter to every numeric column. */
  .pmix-tbl th, .pmix-tbl td.num { padding-left: 16px; }
  .pmix-tbl th.l, .pmix-tbl td.l {
    position: sticky; left: 0; z-index: 2; background: #fff;
    white-space: normal; max-width: 150px; padding-left: 16px; padding-right: 12px;
    box-shadow: 6px 0 6px -6px rgba(34, 30, 24, 0.16);
  }
  .pmix-sizerow td.l { background: #fff; }     /* frozen col stays opaque on sub-rows */
  /* Drop the two decorative columns on phones — the bar duplicates $ mix and the
     sparkline is too small to read here; the numeric columns get the room. */
  .pmix-col-bar, .pmix-col-trend { display: none; }

  /* Waterfall: its 1040×210 viewBox letterboxed to ~64px of content inside a
     fixed 210px box on a narrow screen (huge dead whitespace). Size by its own
     aspect ratio so the whitespace collapses. */
  .pmix-wf svg { height: auto; }
  .pmix-wf-head { display: block; }
  .pmix-wf-facts { grid-template-columns: 1fr; gap: 9px; }
  .pmix-wf-facts > div, .pmix-wf-facts > div:first-child { border-left: 0; padding: 0; }
  /* Decomp-history packs 11 period columns — let it scroll at a legible
     min-width instead of crushing to phone width. */
  .pmix-dh { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pmix-dh svg { min-width: 620px; }

  .pmix-bd-val { font-size: 20px; }
}

/* ── Jamba San Diego food tracker (view jj_sd_food, js/pmix-jjfood.js) ─────
   All rules are .jjf-* prefixed so this block cannot affect the standard
   fiscal-week P-Mix page. The view deliberately reuses .pmix-card / .pmix-tbl /
   .pmix-sectlabel / .pmix-dpill / .pmix-dot / .pmix-chartrow so it inherits the
   established table + chart frame (including the mobile frozen-column rules). */
#pmix-screen .jjf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
#pmix-screen .jjf-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
  color: var(--pmix-stone); margin-bottom: 4px;
}
#pmix-screen .jjf-sub2 {
  font-size: 12px; color: var(--pmix-stone); margin-top: 4px;
  font-family: var(--font-mono, monospace);
}

/* Reporting-basis disclosure. Ochre, matching the .pmix-basis banner language
   used when the comp gate is off — this view has no comp gate at all, so the
   reader needs the rule stated rather than inferred. */
#pmix-screen .jjf-basis {
  border: 0.5px solid rgba(185, 139, 50, .5);
  background: rgba(185, 139, 50, .07);
  border-radius: var(--radius-lg, 8px); padding: 12px 14px; margin-bottom: 16px;
}
#pmix-screen .jjf-basis-t {
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
  color: var(--pmix-watch); margin-bottom: 6px;
}
#pmix-screen .jjf-basis-b { font-size: 12.5px; line-height: 1.55; color: var(--pmix-ink); }
#pmix-screen .jjf-basis-b + .jjf-basis-b { margin-top: 5px; }
#pmix-screen .jjf-basis-gap {
  font-size: 12px; line-height: 1.5; color: var(--pmix-neg);
  margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(185, 139, 50, .3);
}

/* KPI band — units/store/day and units/store/week sit first, as asked. */
#pmix-screen .jjf-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
#pmix-screen .jjf-kpi {
  background: #fff; border: 0.5px solid var(--pmix-line);
  border-radius: var(--radius-lg, 8px); padding: 12px 14px;
}
#pmix-screen .jjf-kpi-l {
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
  color: var(--pmix-stone); line-height: 1.35; min-height: 24px;
}
#pmix-screen .jjf-kpi-v {
  font-family: var(--font-display, Georgia, serif); font-size: 28px;
  line-height: 1.1; color: var(--pmix-ink); margin: 6px 0 5px;
}
#pmix-screen .jjf-kpi-d { font-size: 11px; color: var(--pmix-stone); }

#pmix-screen .jjf-chart { width: 100%; display: block; }
#pmix-screen .jjf-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 11px; color: var(--pmix-stone);
}
#pmix-screen .jjf-legend span { display: inline-flex; align-items: center; gap: 6px; }
#pmix-screen .jjf-legend i { width: 14px; height: 2.5px; border-radius: 1px; }
/* Square swatch for the stacked-bar legend (a 2.5px line reads as a line chart). */
#pmix-screen .jjf-legend i.sq { width: 10px; height: 10px; border-radius: 2px; }
/* Stacked-bar chart. The bars are an SVG stretched to a FIXED height (so it
   matches axisWrap's y-axis column at any width); every piece of text is an
   HTML overlay positioned in %, because the non-uniform x scale would smear
   SVG text. */
#pmix-screen .jjf-stack { position: relative; width: 100%; }
#pmix-screen .jjf-stackbars {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  display: block;
}
#pmix-screen .jjf-stack-val {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--pmix-ink); white-space: nowrap; pointer-events: none;
  padding-bottom: 3px;
}
#pmix-screen .jjf-stack-mark {
  position: absolute; top: 0; font-family: var(--font-mono, monospace);
  font-size: 9.5px; white-space: nowrap; padding-left: 5px;
  border-left: 1px dashed currentColor; height: 100%; opacity: .75;
  pointer-events: none;
}
#pmix-screen .jjf-stack-mark.r {
  padding-left: 0; padding-right: 5px; transform: translateX(-100%);
  border-left: 0; border-right: 1px dashed currentColor; text-align: right;
}
/* 100% composition bar for "inside an average sandwich check". */
#pmix-screen .jjf-compbar {
  display: flex; height: 30px; border-radius: var(--radius-md, 4px);
  overflow: hidden; margin-bottom: 7px; background: var(--pmix-track);
}
/* Segments centre their own data label; overflow:hidden means a label that
   somehow outgrows its slice is clipped rather than spilling into the next. */
#pmix-screen .jjf-compbar i {
  display: flex; align-items: center; justify-content: center;
  height: 100%; overflow: hidden; min-width: 0;
}
#pmix-screen .jjf-compbar b {
  color: #fff; font-family: var(--font-mono, monospace); font-size: 10.5px;
  font-weight: 600; white-space: nowrap; letter-spacing: .01em;
}
#pmix-screen .jjf-compkey {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
  font-size: 11px; color: var(--pmix-stone);
}
#pmix-screen .jjf-compkey span { display: inline-flex; align-items: center; gap: 6px; }
#pmix-screen .jjf-compkey i { width: 10px; height: 10px; border-radius: 2px; }
#pmix-screen .jjf-basket em {
  display: block; font-size: 10.5px; color: var(--pmix-stone);
  font-style: normal; font-family: var(--font-mono, monospace);
}
/* Full-P-Mix ledger: category rows with their breakdown indented beneath. */
#pmix-screen .pmix-tbl tr.jjf-cat1 td { border-top: 1px solid var(--pmix-line); }
#pmix-screen .pmix-tbl tr.jjf-cat1 td.l { font-weight: 700; }
#pmix-screen .pmix-tbl tr.jjf-cat1 td.num { font-weight: 700; }
#pmix-screen .pmix-tbl tr.jjf-kid td.l { padding-left: 26px; color: var(--pmix-stone); }
#pmix-screen .pmix-tbl tr.jjf-kid td { font-size: 11.5px; }
#pmix-screen .jjf-nodata {
  padding: 34px 0; text-align: center; font-size: 12.5px; color: var(--pmix-stone);
}
#pmix-screen .jjf-legend i.dash {
  background: none !important;
  background-image: repeating-linear-gradient(to right,
    var(--pmix-watch) 0 5px, transparent 5px 9px) !important;
}

/* Ranking control — same visual language as .pmix-winseg. */
#pmix-screen .jjf-rankbar { display: flex; gap: 0; margin-bottom: 8px; }
#pmix-screen .jjf-rankbar button {
  font-family: var(--font-mono, monospace); font-size: 10.5px;
  letter-spacing: .04em; padding: 6px 12px; background: #fff;
  border: 0.5px solid var(--pmix-line); color: var(--pmix-stone); cursor: pointer;
}
#pmix-screen .jjf-rankbar button:first-child { border-radius: var(--radius-md, 4px) 0 0 var(--radius-md, 4px); }
#pmix-screen .jjf-rankbar button:last-child { border-radius: 0 var(--radius-md, 4px) var(--radius-md, 4px) 0; border-left: 0; }
#pmix-screen .jjf-rankbar button:hover { box-shadow: inset 0 0 0 1px var(--pmix-pos); }
#pmix-screen .jjf-rankbar button.on {
  background: var(--pmix-pos); border-color: var(--pmix-pos); color: #fff; font-weight: 600;
}

#pmix-screen .jjf-statrow {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px;
  border-bottom: 1px solid var(--pmix-line); padding-bottom: 10px;
}
#pmix-screen .jjf-statrow > div {
  flex: 1 1 auto; min-width: 92px; padding: 0 12px;
  border-left: 1px solid var(--pmix-line);
}
#pmix-screen .jjf-statrow > div:first-child { border-left: 0; padding-left: 0; }
#pmix-screen .jjf-statrow span {
  display: block; font-family: var(--font-mono, monospace); font-size: 9px;
  letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
  color: var(--pmix-stone); margin-bottom: 3px;
}
#pmix-screen .jjf-statrow strong {
  font-family: var(--font-mono, monospace); font-size: 13px; color: var(--pmix-ink);
}
/* Ranked dot plot — HTML rows, so every bar carries its venue name and the
   text stays crisp (an SVG with preserveAspectRatio="none" would smear it). */
#pmix-screen .jjf-dotplot { margin: 2px 0 4px; }
#pmix-screen .jjf-dprow {
  display: grid; grid-template-columns: 168px 1fr 58px;
  align-items: center; gap: 10px; height: 22px;
}
#pmix-screen .jjf-dpname {
  font-size: 11.5px; color: var(--pmix-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-align: right;
}
#pmix-screen .jjf-dprow.flag .jjf-dpname { color: var(--pmix-neg); font-weight: 600; }
#pmix-screen .jjf-dptrack { position: relative; height: 22px; }
#pmix-screen .jjf-dpbar {
  position: absolute; top: 50%; left: 0; height: 1.5px; margin-top: -.75px;
  background: var(--pmix-stone); opacity: .3;
}
#pmix-screen .jjf-dprow.above .jjf-dpbar { background: var(--pmix-pos); }
#pmix-screen .jjf-dprow.flag .jjf-dpbar { background: var(--pmix-neg); }
#pmix-screen .jjf-dpdot {
  position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--pmix-stone);
}
#pmix-screen .jjf-dprow.above .jjf-dpdot { background: var(--pmix-pos); }
#pmix-screen .jjf-dprow.flag .jjf-dpdot { background: var(--pmix-neg); }
/* Band + mean rule live inside each track; with zero row gap they read as one
   continuous band down the plot. */
#pmix-screen .jjf-dpband {
  position: absolute; top: 0; bottom: 0; background: var(--pmix-pos); opacity: .06;
}
#pmix-screen .jjf-dpref {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(34, 30, 24, .45);
}
#pmix-screen .jjf-dpval {
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--pmix-ink);
}
#pmix-screen .jjf-dotnote { font-size: 10.5px; color: var(--pmix-stone); margin-top: 6px; }
#pmix-screen .jjf-rank {
  display: inline-block; min-width: 18px; font-family: var(--font-mono, monospace);
  font-size: 10px; color: var(--pmix-stone);
}
#pmix-screen .jjf-sub {
  display: block; font-size: 10px; color: var(--pmix-stone);
  font-family: var(--font-mono, monospace); margin-top: 1px;
}
#pmix-screen .pmix-tbl tr.jjf-flag td.l { box-shadow: inset 3px 0 0 var(--pmix-neg); }

/* Compact table variant: single-line rows, tighter vertical padding. Used where
   the row label needs no second line, so a 10-row table stops dominating the page. */
#pmix-screen .pmix-tbl.jjf-tight td { padding: 3px 8px; }
#pmix-screen .pmix-tbl.jjf-tight th { padding: 4px 8px; }
#pmix-screen .jjf-wk {
  font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--pmix-ink);
}
#pmix-screen .jjf-wkend {
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--pmix-stone);
  margin-left: 8px;
}
/* Number and its magnitude bar share one cell, right-aligned as a unit. */
#pmix-screen .jjf-wkval {
  display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end;
}
#pmix-screen .jjf-wkval .pmix-share-track { width: 56px; flex: 0 0 auto; }

/* ── movers / underperformers / dropouts ─────────────────────────────────── */
#pmix-screen .jjf-mv-controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 10px;
}
#pmix-screen .jjf-mv-basis {
  font-size: 11.5px; line-height: 1.55; color: var(--pmix-stone);
  padding: 2px 0 10px; border-bottom: 0.5px solid var(--pmix-line); margin-bottom: 8px;
}
#pmix-screen .jjf-mv-basis strong { color: var(--pmix-ink); }
#pmix-screen .jjf-mv-block + .jjf-mv-block { margin-top: 14px; }
#pmix-screen .jjf-mv-head {
  font: 600 9.5px/1 var(--font-body, sans-serif); text-transform: uppercase;
  letter-spacing: .09em; padding: 8px 0 2px; display: flex; align-items: center; gap: 7px;
}
#pmix-screen .jjf-mv-head::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px; background: currentColor;
}
#pmix-screen .jjf-mv-head.up { color: var(--pmix-pos, #2F6B45); }
#pmix-screen .jjf-mv-head.down { color: var(--pmix-neg, #B5532E); }
/* A row that is ranked but statistically flat reads dimmer, so the eye lands on
   the moves that actually cleared their error bar. */
#pmix-screen .pmix-tbl tr.jjf-mv-noise td { opacity: .62; }
#pmix-screen .jjf-mv-sig {
  font-family: var(--font-mono, monospace); font-size: 9.5px; color: var(--pmix-ink);
  background: var(--pmix-track); border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
#pmix-screen .jjf-dropdates {
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--pmix-stone);
  cursor: help;
}

/* Diverging bar: centre line at 50%, fill grows out by sign. */
#pmix-screen .jjf-divbar {
  position: relative; display: inline-block; width: 88px; height: 7px;
  background: var(--pmix-track); border-radius: 2px; overflow: hidden; vertical-align: middle;
}
#pmix-screen .jjf-divbar::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--pmix-line-strong); z-index: 1;
}
#pmix-screen .jjf-divbar i { position: absolute; top: 0; bottom: 0; min-width: 1px; }
/* Off-scale marker: the value is clamped to the track, so say so rather than
   letting the bar imply it stopped there. */
#pmix-screen .jjf-divbar u {
  position: absolute; top: 50%; transform: translateY(-50%); text-decoration: none;
  font: 700 9px/1 var(--font-mono, monospace); color: var(--pmix-ink); z-index: 2;
}
#pmix-screen .jjf-divbar u.r { right: 1px; }
#pmix-screen .jjf-divbar u.l { left: 1px; }

/* Scatter: SVG geometry stretched to the box, labels as HTML in %. */
/* Bottom margin reserves room for the x-axis end labels, which sit BELOW the
   plot box (bottom:-15px) and would otherwise collide with the note under it. */
#pmix-screen .jjf-scatter { position: relative; width: 100%; margin: 8px 0 22px; }
#pmix-screen .jjf-sc-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible;
}
/* Dots are HTML, NOT SVG marks — see scatterFit(): the plot is stretched
   non-uniformly, which turns any in-SVG shape into a pill. */
#pmix-screen .jjf-sc-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: .85; box-shadow: 0 0 0 1.5px #fff;
}
#pmix-screen .jjf-sc-dot.flag { opacity: 1; width: 10px; height: 10px; }
#pmix-screen .jjf-sc-lab {
  position: absolute; transform: translate(-50%, -175%);
  font-family: var(--font-mono, monospace); font-size: 9px; color: var(--pmix-stone);
  white-space: nowrap; pointer-events: none; max-width: 130px; overflow: hidden;
  text-overflow: ellipsis;
}
#pmix-screen .jjf-sc-lab.l { transform: translate(0, -175%); }
#pmix-screen .jjf-sc-lab.r { transform: translate(-100%, -175%); }
#pmix-screen .jjf-sc-lab.flag { color: var(--pmix-neg, #B5532E); font-weight: 600; }
#pmix-screen .jjf-sc-yhi, #pmix-screen .jjf-sc-ylo,
#pmix-screen .jjf-sc-xlo, #pmix-screen .jjf-sc-xhi {
  position: absolute; font-family: var(--font-mono, monospace); font-size: 9.5px;
  color: var(--pmix-stone); pointer-events: none;
}
/* Distribution bar: the composition bar reused for a 100% split, slightly
   taller because it carries its own percentage labels and nothing else. */
#pmix-screen .jjf-distbar { height: 34px; }
#pmix-screen .jjf-compkey b { font-weight: 600; color: var(--pmix-ink); margin-left: 4px; }

/* Paired bars on a shared scale, for comparisons rather than levels. */
#pmix-screen .jjf-pairbar { padding: 4px 0 2px; }
#pmix-screen .jjf-pb-row {
  display: grid; grid-template-columns: 148px minmax(120px, 1fr) auto;
  align-items: center; gap: 12px; padding: 5px 0;
}
#pmix-screen .jjf-pb-lab { font-size: 12px; color: var(--pmix-ink); }
#pmix-screen .jjf-pb-track {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 20px; background: var(--pmix-track); border-radius: 3px; overflow: hidden;
}
#pmix-screen .jjf-pb-track i { display: block; height: 100%; min-width: 2px; border-radius: 3px; }
#pmix-screen .jjf-pb-track b {
  position: absolute; font-family: var(--font-mono, monospace);
  font-size: 11.5px; color: var(--pmix-ink); white-space: nowrap;
}
#pmix-screen .jjf-pb-track b.in { color: #fff; }
#pmix-screen .jjf-pb-note {
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--pmix-stone);
  white-space: nowrap;
}
#pmix-screen .jjf-pb-delta {
  margin-top: 7px; padding-top: 7px; border-top: 0.5px solid var(--pmix-line);
  font-size: 11.5px; color: var(--pmix-stone);
}
#pmix-screen .jjf-pb-delta strong {
  font-family: var(--font-mono, monospace); font-size: 13px; color: var(--pmix-ink);
  margin-left: 6px;
}

/* Two-segment price bar: in-store base + delivery markup stacked on top. */
#pmix-screen .jjf-pricebar {
  display: inline-flex; align-items: center; width: 92px; height: 7px;
  background: var(--pmix-track); border-radius: 2px; overflow: hidden; vertical-align: middle;
}
#pmix-screen .jjf-pricebar i { display: block; height: 100%; min-width: 1px; }
/* Inline "context only" tag — replaces a repeated second-line caption. */
#pmix-screen .jjf-ctx {
  display: inline-block; margin-left: 7px; padding: 1px 5px; border-radius: 3px;
  background: var(--pmix-track); color: var(--pmix-stone); cursor: help;
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .04em;
  vertical-align: 1px;
}
#pmix-screen .jjf-sw {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  vertical-align: baseline; margin-right: 3px;
}

#pmix-screen .jjf-sc-yhi { left: 0; top: -2px; }
#pmix-screen .jjf-sc-ylo { left: 0; bottom: -2px; }
#pmix-screen .jjf-sc-xlo { left: 0; bottom: -15px; }
#pmix-screen .jjf-sc-xhi { right: 0; bottom: -15px; }
#pmix-screen .pmix-tbl tr.jjf-hero td { background: rgba(47, 107, 69, .05); }
#pmix-screen .pmix-tbl tr.jjf-hero td.l { font-weight: 600; }

#pmix-screen .jjf-inc-head, #pmix-screen .jjf-basket {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 14px;
}
#pmix-screen .jjf-inc-head > div, #pmix-screen .jjf-basket > div {
  padding: 0 14px; border-left: 1px solid var(--pmix-line);
}
#pmix-screen .jjf-inc-head > div:first-child,
#pmix-screen .jjf-basket > div:first-child { border-left: 0; padding-left: 0; }
#pmix-screen .jjf-inc-head span, #pmix-screen .jjf-basket span {
  display: block; font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
  color: var(--pmix-stone); margin-bottom: 5px; line-height: 1.35;
}
#pmix-screen .jjf-inc-head strong, #pmix-screen .jjf-basket strong {
  display: block; font-family: var(--font-display, Georgia, serif);
  font-size: 21px; line-height: 1.15; color: var(--pmix-ink); margin-bottom: 4px;
}
#pmix-screen .jjf-inc-head em {
  display: block; font-size: 10.5px; color: var(--pmix-stone); font-style: normal;
}
#pmix-screen .jjf-caveat {
  font-size: 11.5px; line-height: 1.55; color: var(--pmix-stone);
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pmix-line);
}
#pmix-screen .jjf-ggrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
#pmix-screen .jjf-gcard {
  background: #fff; border: 0.5px solid var(--pmix-line);
  border-radius: var(--radius-lg, 8px); padding: 10px 12px;
}
#pmix-screen .jjf-gcard-h {
  display: flex; align-items: baseline; gap: 7px; font-size: 12px;
  color: var(--pmix-ink); margin-bottom: 6px; flex-wrap: wrap;
}
#pmix-screen .jjf-gcard-h strong {
  margin-left: auto; font-family: var(--font-mono, monospace); font-size: 13px;
}
#pmix-screen .jjf-gcard-h em {
  font-style: normal; font-size: 9.5px; color: var(--pmix-stone);
  font-family: var(--font-mono, monospace);
}
#pmix-screen .jjf-foot {
  font-size: 11px; line-height: 1.6; color: var(--pmix-stone);
  margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--pmix-line);
}

@media (max-width: 720px) {
  #pmix-screen .jjf-kpis { grid-template-columns: repeat(2, 1fr); }
  #pmix-screen .jjf-kpi-v { font-size: 22px; }
  #pmix-screen .jjf-inc-head, #pmix-screen .jjf-basket { grid-template-columns: 1fr; gap: 10px; }
  #pmix-screen .jjf-inc-head > div, #pmix-screen .jjf-basket > div,
  #pmix-screen .jjf-inc-head > div:first-child, #pmix-screen .jjf-basket > div:first-child {
    border-left: 0; padding: 0;
  }
  #pmix-screen .jjf-ggrid { grid-template-columns: 1fr; }
  #pmix-screen .jjf-head { flex-direction: column; align-items: stretch; }
  /* The dot plot and the daily charts need horizontal room rather than a crush. */
  #pmix-screen .jjf-dprow { grid-template-columns: 96px 1fr 50px; gap: 7px; }
  #pmix-screen .jjf-dpname { font-size: 10.5px; }
  /* Bar value labels: the JS density gate uses a desktop width estimate, so on a
     phone drop every other one rather than let them overlap. */
  #pmix-screen .jjf-stack-val.alt { display: none; }
  #pmix-screen .jjf-stack-val { font-size: 9px; }
  /* Same reasoning for the date ticks: the JS step is a desktop-width estimate,
     so thin to every other tick at phone widths instead of letting them collide. */
  #pmix-screen .jjf-tick { font-size: 9px; }
  /* Counted from the END (nth-LAST-of-type) so the most recent day always keeps
     its label — counting forwards drops it whenever the tick count is even. */
  #pmix-screen .jjf-tick:nth-last-of-type(even) { display: none; }
  /* Drop the month at phone widths: "Jul 16" is the only label wide enough to
     collide once ticks are ~35px apart, and the card header already prints the
     window's full date range. Leaves every tick at 1-2 characters. */
  #pmix-screen .jjf-tick em { display: none; }
  #pmix-screen .jjf-statrow > div { border-left: 0; padding: 0 10px 0 0; }
}