/* ===========================================================
   Scoop — report portal styles  (light + dark themes)
   Theme is controlled by data-theme="light|dark" on <html>.
   Change a token below and it updates everywhere.
   =========================================================== */

:root,
:root[data-theme="light"] {
  --ink:         #241726;   /* header bar background (dark in both themes) */
  --header-text: #ffffff;
  --heading:     #241726;   /* titles on page backgrounds */
  --text:        #2e2733;
  --bg:          #f7f3ea;   /* 2026-10-15 Sand, same as the engine default */
  --surface:     #ffffff;
  --surface-alt: #faf7fc;   /* row hover */
  --border:      #ece6f0;
  --muted:       #857c8c;
  --accent:      #e5485e;
  --accent-deep: #c8344a;
  --accent-soft: #fdf0f3;   /* action hover */
  --mint:        #37bd97;
  --info:        #1f9e78;
  --watch:       #b7791f;
  --alert:       #c8344a;
  --radius:      14px;
  --shadow:      0 1px 2px rgba(36,23,38,.06), 0 8px 24px rgba(36,23,38,.05);
}

:root[data-theme="dark"] {
  --ink:         #100d15;
  --header-text: #f3eef7;
  --heading:     #f3eef7;
  --text:        #e9e4ef;
  --bg:          #141019;
  --surface:     #1f1a27;
  --surface-alt: #2a2434;
  --border:      #322b3d;
  --muted:       #c2bacf;
  --accent:      #e5485e;
  --accent-deep: #ff6b7e;
  --accent-soft: #3a2531;
  --mint:        #4cd0aa;
  --info:        #3fc79a;
  --watch:       #d6a23d;
  --alert:       #ff6b6b;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, .brand-name, .page-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -0.01em; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: var(--ink); color: var(--header-text);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 64px; height: 64px; display: block; border-radius: 14px; flex: none; object-fit: cover; background: #fff; }
.brand-name { font-size: 25px; font-weight: 800; color: var(--header-text); }
.brand-name .dot { color: var(--accent); }
/* second line under "The Scoop" on group/store dashboards: full group or store name */
.brand-scope { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--header-text); opacity: .9; margin-top: 1px; }
.bar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(255,255,255,.10); color: var(--header-text);
}
.icon-btn:hover { background: rgba(255,255,255,.20); }
.signout { color: rgba(255,255,255,.82); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.signout:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }

/* ---- layout ---- */
.container { max-width: 880px; margin: 0 auto; padding: 32px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-title { font-size: 29px; font-weight: 800; margin: 0; color: var(--heading); }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 16px; }

/* ---- primary button ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15.5px;
  padding: 10px 16px; border-radius: 10px; white-space: nowrap;
}
.btn:hover { background: var(--accent-deep); text-decoration: none; }

/* ---- expandable report folders (inline lazy-load) ---- */
.foldtree { display: flex; flex-direction: column; gap: 3px; }
.foldx-h { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; cursor: pointer; color: var(--text); font: inherit; }
.foldx-h:hover { background: var(--surface-alt); border-color: var(--accent); }
.foldx-ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.foldx-name { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foldx-chev { color: var(--muted); flex: none; transition: transform .15s; }
.foldx-h.open .foldx-chev { transform: rotate(180deg); }
.foldx-body { margin: 3px 0 3px 16px; padding-left: 10px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.foldx-body[hidden] { display: none; }
.foldx-file { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; }
.foldx-file:hover { background: var(--surface-alt); }
.foldx-fic { font-size: 10px; font-weight: 800; padding: 3px 5px; border-radius: 5px; background: var(--surface-alt); color: var(--muted); flex: none; min-width: 32px; text-align: center; }
.foldx-fnm { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foldx-fdt { font-size: 13px; color: var(--muted); flex: none; }
.foldx-acts { display: flex; gap: 7px; flex: none; }
.foldx-load { font-size: 14px; color: var(--muted); padding: 8px 11px; }

/* ---- folder cards (legacy grid, still used elsewhere) ---- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.card .ic { width: 30px; height: 30px; flex: none; color: var(--accent); }
.card-name { font-weight: 600; font-size: 17px; flex: 1; word-break: break-word; }
.card-go { color: var(--muted); font-size: 14px; white-space: nowrap; }

/* ---- browse list ---- */
.crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.crumb .here { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 23px; font-weight: 800; color: var(--heading); word-break: break-word; }
.up-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); font-weight: 500; }
.up-link:hover { color: var(--accent-deep); }

.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; color: var(--text); border-top: 1px solid var(--border); }
.row:first-child { border-top: none; }
.row:hover { background: var(--surface-alt); text-decoration: none; }
.row .ic { width: 24px; height: 24px; flex: none; }
.row.folder .ic { color: var(--accent); }
.row.file   .ic { color: var(--mint); }
.row .nm { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm-link { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.row .nm-link:hover { color: var(--accent-deep); }
.row .chev { color: var(--muted); flex: none; opacity: .5; }
.row-action {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 14px; font-weight: 600; color: var(--accent-deep);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px;
  white-space: nowrap; background: var(--surface); cursor: pointer; font-family: inherit;
}
.row-action:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }

/* ---- analytics (legacy/optional) ---- */
.insight { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.insight.watch { border-left-color: var(--watch); }
.insight.alert { border-left-color: var(--alert); }
.insight .sev { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--info); }
.insight.watch .sev { color: var(--watch); }
.insight.alert .sev { color: var(--alert); }
.insight .it { font-weight: 700; font-size: 17px; margin: 3px 0 4px; color: var(--heading); }
.insight .de { color: var(--muted); font-size: 15.5px; }

/* ---- empty state ---- */
.empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 40px 24px; text-align: center; }
.empty p { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.empty .empty-hint { font-weight: 400; color: var(--muted); font-size: 15px; }

/* ---- highlights popup ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 50; padding: 20px; background: rgba(16,13,21,.55); display: flex; align-items: center; justify-content: center; }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 640px; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; color: var(--heading); }
.modal-close { border: none; background: none; font-size: 23px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--heading); }
.modal-frame { border: none; width: 100%; height: 62vh; background: #fff; }

/* ---- mobile ---- */
@media (max-width: 560px) {
  .container { padding: 22px 16px 48px; }
  .page-title { font-size: 25px; }
  .grid { grid-template-columns: 1fr; }
  .brand-mark { width: 52px; height: 52px; }
  .brand-name { font-size: 22px; }
}

/* ---- accessibility ---- */
a:focus-visible, .card:focus-visible, .row:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .row-action:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* ============================================================
   Landing-page additions (ported from preview)
   ============================================================ */

/* header: name + small meta line under it */
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-size: 24px; line-height: 1.1; }
.brand-meta { font-size: 12.5px; color: rgba(255,255,255,.72); font-weight: 500; margin-top: 2px; }
.brand-meta b { color: #fff; font-weight: 700; }

/* dancing logo */
@keyframes scoopWobble {
  0%,100% { transform: rotate(0deg) scale(1); }
  12% { transform: rotate(-10deg) scale(1.06); }
  26% { transform: rotate(9deg) scale(1.06); }
  40% { transform: rotate(-7deg) scale(1.04); }
  54% { transform: rotate(7deg) scale(1.04); }
  70% { transform: rotate(-4deg) scale(1.02); }
  85% { transform: rotate(3deg) scale(1.01); }
}
.brand-mark { animation: scoopWobble 1.5s ease-in-out infinite; transform-origin: center center; }
@media (prefers-reduced-motion: reduce) { .brand-mark { animation: none; } }

/* labeled theme toggle with icon swap */
.icon-btn.labeled { width: auto; padding: 0 13px; gap: 7px; font-size: 14px; font-weight: 600; }
.t-light, .t-dark { display: inline-flex; align-items: center; gap: 7px; }
.t-dark { display: none; }
[data-theme="dark"] .t-dark { display: inline-flex; }
[data-theme="dark"] .t-light { display: none; }

/* section headings */
.section-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--heading); margin: 6px 0 12px; }

/* file rows: meta date, type-colored icons, action buttons */
.row .meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
.row.file.xlsx .ic { color: #1f9e78; }
.row.file.pdf  .ic { color: #c8344a; }
.row.file.html .ic { color: #4a78d6; }
.acts { display: inline-flex; gap: 8px; flex: none; }
.row-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 8px; padding: 6px 12px; white-space: nowrap; cursor: pointer; font-family: inherit;
}
.row-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); text-decoration: none; }
.row-action.dl { color: var(--heading); }
.row-action.dl:hover { background: var(--surface-alt); border-color: var(--muted); }

/* subtle collapsible "My Stores" */
.stores-details { margin-top: 36px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.stores-details > summary { list-style: none; cursor: pointer; padding: 13px 16px; font-size: 15px; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 9px; }
.stores-details > summary::-webkit-details-marker { display: none; }
.stores-details > summary .smeta { color: var(--muted); font-weight: 500; font-size: 14px; }
.stores-details > summary .chev { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.stores-details[open] > summary .chev { transform: rotate(90deg); }
.stores-body { padding: 2px 16px 16px; }
.stores-brand-row { margin: 10px 0 8px; }
.stores-brand-row .bname { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 16px; color: var(--heading); }
.stores-brand-row .bcount { font-size: 13.5px; color: var(--muted); margin-left: 8px; }
.store-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 14px; color: var(--text); font-weight: 500; }
.chip em { color: var(--muted); font-style: normal; font-size: 13px; margin-left: 5px; }

/* site footer (every page) — same color as header */
.site-footer { background: var(--ink); margin-top: 54px; padding: 30px 24px 28px; }
.footer-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.legal { color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.6; }
.legal .l1 { font-weight: 700; color: rgba(255,255,255,.92); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; font-size: 12.5px; }

/* ---- mobile: keep file rows tidy (name on top, actions beneath) ---- */
@media (max-width: 560px) {
  .row.file { flex-wrap: wrap; align-items: center; }
  .row.file .nm { flex: 1 1 auto; min-width: 0; font-size: 15px; }
  .row.file .meta { margin-left: auto; }
  .row.file .acts { flex: 1 0 100%; justify-content: flex-end; margin-top: 8px; }
  .brand-meta { font-size: 12.5px; }
}

/* ---- public welcome / sign-in splash ---- */
.welcome-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1100px 560px at 50% -8%, #3a2230, var(--ink)); }
.welcome-card { background: var(--surface); border-radius: 20px; max-width: 460px; width: 100%;
  padding: 40px 34px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.welcome-logo { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; display: block; margin: 0 auto 16px; transform-origin: center center; animation: scoopWobble 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .welcome-logo { animation: none; } }
.welcome-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 31px; color: var(--heading); margin: 0; }
.welcome-title .dot { color: var(--accent); }
.welcome-sub { color: var(--muted); font-size: 16px; margin: 8px 0 26px; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.welcome-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: 11px; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; }
.welcome-btn.primary { background: var(--accent); color: #fff; }
.welcome-btn.primary:hover { background: var(--accent-deep); text-decoration: none; }
.welcome-btn.secondary { background: transparent; color: var(--heading); border: 1px solid var(--border); }
.welcome-btn.secondary:hover { background: var(--surface-alt); text-decoration: none; }
.welcome-note { margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---- "Upload your Monthly P&L" section ---- */
.upload-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.upload-card .up-text { flex: 1 1 240px; }
.upload-card .up-text .up-h { font-weight: 700; color: var(--heading); }
.upload-card .up-text .up-d { color: var(--muted); font-size: 14px; margin-top: 2px; }
.upload-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--mint); color: #06301f;
  font-weight: 700; font-size: 15px; padding: 10px 15px; border-radius: 10px; white-space: nowrap; }
.upload-btn:hover { filter: brightness(.96); text-decoration: none; }

.mt32 { margin-top: 32px; }

/* ===== Dashboard band (group quadrants + store drill-down) ===== */
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
  padding-left: 12px; padding-bottom: 14px; margin: 4px 0 18px; }
.dash-head .dh1 { font-size: 19px; font-weight: 700; color: var(--heading); }
.dash-head .dh2 { font-size: 14px; color: var(--muted); margin-top: 2px; }
.dash-head .dhu { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.qc .qh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.qc .ql { font-size: 16px; font-weight: 700; color: var(--heading); }
.qc .qs { font-size: 13px; color: var(--muted); text-align: right; }
.qc .qb { font-size: 26px; font-weight: 700; color: var(--heading); line-height: 1.1; }
.qc .qr { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qc .ly { font-size: 13px; color: var(--muted); }
.dpill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--surface-alt); color: var(--muted); }
.dpill.up { background: rgba(29,158,117,.16); color: #1d9e75; }
.dpill.down { background: rgba(226,75,74,.16); color: #e24b4a; }
.qmini { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.qmini > div { flex: 1; }
.qmini .k { display: block; font-size: 13px; color: var(--muted); }
.qmini .v { font-size: 14px; color: var(--heading); }
.qmini .v em { font-style: normal; font-size: 13px; margin-left: 3px; }
.up-t { color: #1d9e75; }
.down-t { color: #e24b4a; }

.hl { background: var(--surface-alt); border-radius: 14px; padding: 16px 18px; }
.hl .hh { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 10px; }
.hl .mv { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.hl .mv .mvg { font-size: 17px; line-height: 1.2; }
.hl .mv .l1 { font-size: 14px; color: var(--heading); }
.hl .mv .l2 { font-size: 13px; color: var(--muted); }

.store-list { margin-top: 2px; }
details.srow { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
details.srow > summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
details.srow > summary::-webkit-details-marker { display: none; }
details.srow .sname { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.srow .sloc { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }
details.srow .sday { font-size: 14px; color: var(--muted); white-space: nowrap; }
details.srow .chev { color: var(--muted); transition: transform .15s; flex: none; }
details.srow[open] .chev { transform: rotate(180deg); }
details.srow .sdet { padding: 0 13px 13px; border-top: 1px solid var(--border); }
.sdgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 11px; }
.sd { background: var(--surface-alt); border-radius: 8px; padding: 9px 10px; }
.sd .k { font-size: 13px; color: var(--muted); }
.sd .v { font-size: 16px; font-weight: 700; color: var(--heading); margin: 2px 0 3px; }
.sd .y { font-size: 13px; font-weight: 700; }

@media (max-width: 560px) {
  .dash-head .dhu { display: none; }
  .sdgrid { grid-template-columns: 1fr; }
}

/* ===== Dashboard tweaks: sales-through banner, per-card movers, responsive store table ===== */
.dash-through { text-align: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 8px 4px; margin: 0 0 14px; }

.qmv { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.qmv .mvrow { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.qmv .mvg { font-size: 13px; line-height: 1.2; flex: none; }
.qmv .mvt { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qmv .mvt b { color: var(--heading); font-weight: 600; }
.qmv .mvt em { font-style: normal; font-weight: 700; margin-left: 4px; }
.qmv .muted-note { color: var(--muted); font-size: 13px; }

.stbl { margin-top: 4px; }
.sthead, .strow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(96px, 0.55fr)); gap: 10px; align-items: center; }
.sthead { padding: 4px 13px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sthead .h-num { text-align: right; }
.strow { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.strow .stname { font-size: 15px; font-weight: 600; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strow .stname .sloc { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.stcell { text-align: right; }
.stcell .stk { display: none; }
.stcell .stnums .stv { display: block; font-size: 15px; font-weight: 700; color: var(--heading); }
.stcell .stnums .sty { display: block; font-size: 13px; font-weight: 700; }

@media (max-width: 560px) {
  .sthead { display: none; }
  .strow { display: block; }
  .strow .stname { display: block; white-space: normal; margin-bottom: 6px; }
  .stcell { display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 5px 0; border-top: 1px dashed var(--border); }
  .stcell .stk { display: inline; font-size: 13px; color: var(--muted); }
  .stcell .stnums .stv { display: inline; font-size: 15px; }
  .stcell .stnums .sty { display: inline; margin-left: 8px; font-size: 13px; }
}

/* ===== My Store Performance — collapsible (collapsed by default) ===== */
details.stperf > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; }
details.stperf > summary::-webkit-details-marker { display: none; }
details.stperf .stperf-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--heading); }
details.stperf .stperf-hint { font-size: 13px; color: var(--muted); }
details.stperf .chev { margin-left: auto; color: var(--muted); transition: transform .15s; flex: none; }
details.stperf[open] > summary .chev { transform: rotate(180deg); }
details.stperf .stbl { margin-top: 12px; }

/* ===== My Store Performance — scroll after ~5 rows, sticky column header ===== */
details.stperf .stbl { max-height: 320px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
details.stperf .sthead { position: sticky; top: 0; background: var(--bg); z-index: 1; }
@media (max-width: 560px) { details.stperf .stbl { max-height: 60vh; } }

/* ===== Bento dashboard (desktop-first; mobile handled separately) ===== */
.container.home { max-width: 1200px; }
/* Group dashboard: match the Executive/FSD full-width canvas (was capped at 1200px). */
body[data-dash="group"] .container.home { max-width: min(1760px, 96vw); }
.dash-through { font-size: 16px; font-weight: 800; color: var(--heading); text-transform: none; letter-spacing: .01em; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 4px; margin: 0 0 10px; text-align: center; }
.dash-summary { font-size: 14px; color: var(--muted); margin: 0 0 14px; text-align: center; }
.dash-summary b { color: var(--heading); }
.dash-meta { font-size: 14px; color: var(--muted); margin: 4px 0 14px; text-align: center; }

/* Service status alert — stores currently disabled on 1st/3rd-party platforms */
.svc-alert { border: 1px solid #e24b4a; background: rgba(226,75,74,.08); border-radius: 14px; margin: 0 0 14px; overflow: hidden; }
.svc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; font-size: 15px; font-weight: 800; color: #e24b4a; background: rgba(226,75,74,.10); border-bottom: 1px solid rgba(226,75,74,.25); }
.svc-h svg { flex: none; }
.svc-scope { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.svc-row { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid rgba(127,127,127,.18); }
.svc-row:last-child { border-bottom: 0; }
/* Desktop: 3-across grid; each cell stacks name+brand+date over the channel chips */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 12px; }
.svc-grid .svc-row { flex-direction: column; align-items: stretch; gap: 6px; border: 1px solid rgba(127,127,127,.22); border-radius: 10px; padding: 8px 11px; }
.svc-grid .svc-store { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.svc-grid .svc-nm, .svc-grid .svc-sub { display: inline; }
.svc-grid .svc-chans { justify-content: flex-start; }
/* Collapsible (native <details>) */
details.svc-alert > summary.svc-h { cursor: pointer; list-style: none; user-select: none; }
details.svc-alert > summary.svc-h::-webkit-details-marker { display: none; }
details.svc-alert > summary.svc-h::after { content: "▾"; margin-left: 8px; font-size: 12px; line-height: 1; display: inline-block; transition: transform .15s ease; }
details.svc-alert:not([open]) > summary.svc-h::after { transform: rotate(-90deg); }
details.svc-alert:not([open]) > summary.svc-h { border-bottom: 0; }
/* "All stores online" confirmation bar (shown in the same spot when nothing is disabled) */
.svc-ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; margin: 0 0 14px; border: 1px solid var(--info); background: rgba(60,199,154,.10); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--info); }
.svc-ok svg { flex: none; }
.svc-ok .svc-scope { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
/* daily-staleness banner (top of dashboard, shown after noon CST when the prior day didn't load) */
.data-stale { display: flex; align-items: center; gap: 10px; padding: 11px 16px; margin: 0 0 14px; border: 1px solid #e6b450; background: rgba(230,180,80,.14); color: #8a5e10; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.data-stale svg { flex: none; }
[data-theme="dark"] .data-stale { color: #e6b450; background: rgba(230,180,80,.12); border-color: rgba(230,180,80,.35); }
.svc-store { flex: 1; min-width: 0; }
.svc-nm { display: block; font-size: 14px; font-weight: 700; color: var(--heading); }
.svc-sub { display: block; font-size: 12px; color: var(--muted); }
.svc-chans { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.svc-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(226,75,74,.16); color: #e24b4a; white-space: nowrap; }
.mob-shell .svc-alert.m-svc { margin: 0 0 12px; }
.mob-shell .svc-alert.m-svc .svc-row { flex-wrap: wrap; gap: 6px; }
.mob-shell .svc-alert.m-svc .svc-chans { width: 100%; justify-content: flex-start; }
/* ===== single-store period selector ===== */
.store-period { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.store-period-lbl { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sp-btn { border: 1px solid var(--border); background: var(--surface-alt); color: var(--muted); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sp-btn:hover { color: var(--heading); }
.sp-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.store-period-cur { font-size: 13px; color: var(--muted); font-weight: 600; margin: 6px 0 4px; }
.sp-custom { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; margin-top: 4px; }
.sp-custom[hidden] { display: none; }
.sp-custom input[type=date] { border: 1px solid var(--border); background: var(--surface); color: var(--heading); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13.5px; }
.sp-custom .sp-to { color: var(--muted); font-size: 13px; }
.sp-apply { border: 0; background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
/* ===== single-store channel mix (detailed, CY vs PY) ===== */
.cmx { margin-top: 4px; }
.cmx-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--surface-alt); }
.cmx-bar.cmx-bar-py { height: 9px; margin-top: 4px; opacity: .55; border-radius: 5px; }
.cmx-seg { height: 100%; }
.cmx-seg.in { background: var(--info); }
.cmx-seg.fp { background: var(--accent); }
.cmx-seg.tp { background: var(--watch); }
.cmx-barkey { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 3px 1px 0; }
.cmx-row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.cmx-row:nth-of-type(1) { border-top: 0; margin-top: 8px; }
.cmx-dot { width: 11px; height: 11px; border-radius: 50%; }
.cmx-dot.in { background: var(--info); }
.cmx-dot.fp { background: var(--accent); }
.cmx-dot.tp { background: var(--watch); }
.cmx-lbl { display: flex; flex-direction: column; min-width: 0; }
.cmx-name { font-weight: 700; color: var(--heading); font-size: 14.5px; }
.cmx-amt { font-size: 12.5px; color: var(--muted); }
.cmx-pct { font-weight: 800; color: var(--heading); font-size: 19px; text-align: right; min-width: 44px; }
.cmx-delta { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.cmx-delta.good { color: var(--info); }
.cmx-delta.bad { color: var(--accent-deep); }
.cmx-vs { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* ===== single-store top: How Is My Store (+ Channel Mix) left, Sales Summary right ===== */
.store-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.store-top-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.store-top .store-summary { display: flex; flex-direction: column; }
.ssum-foot { margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--muted); }
/* sales summary as a top-to-bottom statement (sales info + payment info) */
.stmt-sec { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 4px; }
.stmt-sec:first-child { margin-top: 4px; }
.stmt-sub { text-transform: none; font-weight: 600; }
.stmt-rows { display: flex; flex-direction: column; }
.stmt-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; font-size: 14.5px; color: var(--heading); border-radius: 6px; }
.stmt-row:nth-child(odd) { background: var(--surface-alt); }
.stmt-row span:last-child { font-variant-numeric: tabular-nums; }
.stmt-row.neg span:last-child { color: var(--muted); }
.stmt-row.sub { font-size: 13px; padding: 4px 8px 4px 22px; }
.stmt-row.sub span:first-child { color: var(--muted); }
.stmt-row.sub:nth-child(odd) { background: transparent; }
.stmt-row.bold { font-weight: 800; }
.stmt-row.bold:nth-child(odd) { background: transparent; }
.stmt-row.tline { border-top: 1px solid var(--border); border-radius: 0; }
.stmt-row.ttotal { border-top: 2px solid var(--ink); border-radius: 0; margin-top: 2px; font-size: 15.5px; }
@media (max-width: 900px) { .store-top { grid-template-columns: 1fr; } }
/* FSD dashboard: prominent "Filter My Stores" control at the very top */
.fsd-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; }
.fsd-filter-lbl { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--accent-deep); }
.fsd-filter .fsd-select { flex: 1 1 220px; max-width: 320px; }
.fsd-filter .fsd-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.fsd-chips .fsd-chip { text-decoration: none; }
.fsd-chips .fsd-chip:hover { text-decoration: none; filter: brightness(1.02); }
/* Support Director Reports: collapsible folder groups, one per FSD folder */
.fsd-foldgroups { display: flex; flex-direction: column; gap: 8px; }
.fsd-foldgroup { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; }
.fsd-foldsum { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-weight: 700; color: var(--heading); }
.fsd-foldsum::-webkit-details-marker { display: none; }
.fsd-foldsum svg { color: var(--accent); flex: none; }
.fsd-foldname { flex: 1 1 auto; }
.fsd-foldcount { font-size: 13px; font-weight: 600; color: var(--muted); }
.fsd-foldsum::after { content: "▾"; color: var(--muted); transition: transform .15s ease; }
.fsd-foldgroup[open] .fsd-foldsum::after { transform: rotate(180deg); }
.fsd-foldbody { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .m-fsd-filter { margin: 0 0 12px; padding: 10px 12px; } .m-fsd-filter .fsd-filter-lbl { font-size: 17px; } .m-fsd-filter .fsd-select { flex: 1 1 100%; width: 100%; max-width: none; } }
/* switcher when it lives in the dark top bar */
.bar-actions .exec-switch { background: rgba(255,255,255,.12); color: var(--header-text); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 0 30px 0 12px; height: 38px; font-size: 14px; font-weight: 600; max-width: 246px; }
.bar-actions .exec-switch option, .bar-actions .exec-switch optgroup { color: var(--heading); background: var(--surface); }
.bar-actions .exec-switch:hover { background: rgba(255,255,255,.20); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tile { border: 3px solid var(--accent); border-radius: 16px; background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; min-width: 0; }
.tile.soon { border-style: dashed; }
.tile.wide { grid-column: 1 / -1; }
.tile .t-h { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 20px; font-weight: 800; color: var(--heading); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-transform: uppercase; letter-spacing: .04em; }
.tile .t-h .t-sub { font-size: 13px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tile .badge { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-alt); color: var(--muted); padding: 3px 8px; border-radius: 7px; font-weight: 700; }
.tile .badge.hot { background: var(--accent-soft); color: var(--accent-deep); }
.tile .badge.soon-badge { background: var(--surface-alt); color: var(--info); border: 1px dashed var(--border); }
.tile .empty { padding: 4px 0; }
.tile .grid { margin-top: 0; }
.up-d2 { font-size: 13px; color: var(--muted); margin-bottom: 14px; }

.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi .kk { font-size: 13px; color: var(--muted); }
.kpi .kv { font-size: 22px; font-weight: 700; color: var(--heading); line-height: 1.15; margin: 3px 0; }
.kpi .kr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi .kl { font-size: 13px; color: var(--muted); }
.kmv { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.kmv .kmrow { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; }
.kmv .mvg { flex: none; }
.kmv .kmt { color: var(--muted); } .kmv .kmt b { color: var(--heading); font-weight: 600; } .kmv .kmt em { font-style: normal; font-weight: 700; margin-left: 4px; }
/* Top-3 / Watch-3 split inside the "How are my stores doing?" tile. */
.kmv-split { flex-direction: row; gap: 18px; align-items: flex-start; }
.kmv-split .kmcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kmv-split .kmh { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 1px; }
.kmv-split .kmh span { color: var(--accent-deep); margin-left: 4px; }
.kmv-split .kmrow { overflow: hidden; }
.kmv-split .kmt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.kmt-jump { text-decoration: none; transition: color .12s; }
a.kmt-jump:hover b { color: var(--accent-deep); }
@media (max-width: 560px) {
    .kmv-split { flex-direction: column; gap: 12px; }
}
/* Regional action board — nested District Operator -> market, 3 zones. */
.rab { margin-top: 4px; }
.rab-cols { grid-template-columns: minmax(150px,1.5fr) minmax(116px,1fr) minmax(150px,1.4fr) 62px; }
.rab-head { display: grid; grid-template-columns: minmax(150px,1.5fr) minmax(116px,1fr) minmax(150px,1.4fr) 62px; gap: 10px; padding: 4px 13px 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.rab-head span:last-child { text-align: right; }
.rab-row { display: grid; grid-template-columns: minmax(150px,1.5fr) minmax(116px,1fr) minmax(150px,1.4fr) 62px; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 0; padding: 10px 13px; margin-bottom: 6px; }
.rab-row.ok { border-left-color: #1d9e75; }
.rab-row.watch { border-left-color: #b06a00; }
.rab-row.bad { border-left-color: #b4232f; }
.rab-row.rab-total { background: var(--surface-alt); border-left-color: var(--border); }
.rab-row.rab-do[data-kids="1"] { cursor: pointer; }
.rab-row.rab-mkt { background: var(--surface-alt); border: none; border-radius: 0; }
.rab-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rab-row.rab-mkt .rab-name { padding-left: 22px; }
.rab-row.rab-mkt[data-kids="1"] { cursor: pointer; }
.rab-row.rab-st { background: var(--surface-alt); border: none; border-radius: 0; }
.rab-row.rab-st .rab-name { padding-left: 46px; }
.rab-row.rab-st .rab-nm { font-size: 13.5px; font-weight: 600; }
.mob-shell .m-rab-stl { margin-top: 6px; border-top: 1px solid var(--border); }
.mob-shell .m-rab-st { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px 5px 14px; font-size: 12px; border-bottom: 1px solid var(--border); }
.mob-shell .m-rab-stn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-shell .m-rab-sti { color: var(--muted); font-size: 11px; }
.rab-cv { color: var(--muted); transition: transform .15s; flex: none; }
.rab-row.rab-open .rab-cv { transform: rotate(180deg); }
.rab-nmwrap { min-width: 0; }
.rab-nm { font-size: 15px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rab-row.rab-total .rab-nm { font-size: 16px; }
.rab-row.rab-mkt .rab-nm { font-size: 14px; font-weight: 600; }
.rab-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rab-nums { display: flex; gap: 6px; }
.rab-stat { text-align: center; min-width: 40px; }
.rab-stat .rab-k { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rab-stat .rab-y { display: block; font-size: 14px; font-weight: 700; }
.rab-act { min-width: 0; }
.rab-behind { font-size: 15px; font-weight: 700; color: var(--heading); }
.rab-behind .rab-of { font-size: 13px; color: var(--muted); font-weight: 400; }
.rab-worst { font-size: 13px; color: #b4232f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rab-dir { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rab-sig { text-align: right; font-size: 14px; font-weight: 700; color: var(--heading); }
@media (max-width: 620px) {
    .rab-head { display: none; }
    .rab-row { grid-template-columns: 1fr auto; row-gap: 6px; }
    .rab-nums { grid-column: 1 / -1; justify-content: flex-start; gap: 14px; }
    .rab-act { grid-column: 1 / -1; }
    .rab-sig { grid-column: 2; grid-row: 1; }
}
/* Discount Detail — expandable per-DO breakdown (last completed week vs same week LY). */
.discgrp { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface); overflow: hidden; }
.discgrp-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 13px; flex-wrap: wrap; }
.discgrp-sum::-webkit-details-marker { display: none; }
.discgrp-cv { color: var(--muted); transition: transform .15s; flex: none; display: flex; }
.discgrp[open] .discgrp-cv { transform: rotate(180deg); }
.discgrp[open] .discgrp-sum { border-bottom: 1px solid var(--border); }
.discgrp-nm { font-weight: 700; color: var(--heading); font-size: 15px; }
.discgrp-nm .discgrp-ct { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.discgrp-focus { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.discgrp-focus b { color: var(--heading); }
.disctbl { padding: 2px 13px 10px; }
.disthead, .distrow { display: grid; grid-template-columns: minmax(120px,1.6fr) repeat(4, minmax(60px,1fr)); gap: 8px; align-items: center; }
.disthead { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 7px 0 5px; }
.disthead .dn, .distrow .dn { text-align: right; }
.distrow { font-size: 13px; padding: 6px 8px; border-top: 1px solid var(--border); }
.distname { color: var(--heading); }
.distrow.disc-focus { background: var(--accent-soft); }
.distrow.disc-focus .distname { font-weight: 700; color: var(--accent-deep); }
.dn.dmuted { color: var(--muted); }

/* Per-DO AI briefing under each director row in the action board. */
.rab-brief { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; margin: 0 0 8px 20px; padding: 8px 14px 10px; }
.rab-brief-load { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rab-brief-load .ask-logo-sm { width: 15px; height: 15px; border-radius: 3px; }
.rab-brief-list { margin: 0; padding-left: 18px; column-count: 2; column-gap: 30px; }
.rab-brief-list li { font-size: 13px; color: var(--text); line-height: 1.55; margin: 3px 0; break-inside: avoid; }
.rab-brief-list li.rab-brief-act { column-span: all; list-style: none; margin-left: -18px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 700; color: var(--accent-deep); }
.rab-brief-list li.rab-brief-act::before { content: "\2192  "; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .rab-brief-list { column-count: 1; } }
@media (max-width: 620px) {
    .disctbl { padding: 2px 4px 8px; }
    /* Phones: 5 columns clip the last one. Drop LY % (keep Bucket · This wk · % of net · Δ pp). */
    .disthead, .distrow { grid-template-columns: minmax(72px,1.5fr) repeat(3, minmax(42px,1fr)); gap: 6px; }
    .disthead > :nth-child(4), .distrow > :nth-child(4) { display: none; }
    .distrow { font-size: 12px; }
    .discgrp-focus { margin-left: 0; flex-basis: 100%; }
}

.kpi-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: flex-end; }
.kpill { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-radius: 11px; padding: 8px 13px; border: 1px solid var(--border); }
.kpill.good { border-color: #37bd97; background: rgba(55,189,151,.10); } .kpill.good .kpv { color: #1d9e75; }
.kpill.bad { border-color: var(--accent); background: var(--accent-soft); } .kpill.bad .kpv { color: var(--accent-deep); }
.kpill .kpl { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpill .kpv { font-size: 18px; font-weight: 800; }

.arev { max-height: 230px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 8px; }
.bento .arev { max-height: 400px; }
.arow { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.arow:last-child { border-bottom: none; }
.arow .ast { color: var(--accent); font-size: 14px; flex: none; letter-spacing: 1px; font-weight: 700; }
.arow .abody { min-width: 0; flex: 1; }
.arow .ah { display: flex; justify-content: space-between; gap: 8px; }
.arow .aloc { font-weight: 700; color: var(--heading); font-size: 14px; }
.arow .aloc .sloc { color: var(--muted); font-weight: 400; font-size: 13px; }
.arow .atm { font-size: 13px; color: var(--muted); flex: none; }
.arow .atx { font-size: 13.5px; color: var(--text); margin: 2px 0 0; }
.aempty { font-size: 14px; color: var(--muted); padding: 8px 0; }

/* store table inside the bento tile: rank column, sortable header, full names, scroll */
/* Header Notifications bell — launches the Notifications Page. Sits after Sign out; standard coloring. */
.alert-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: var(--accent-soft, rgba(229,72,94,.10)); color: var(--accent-deep); border: 1.5px solid var(--accent); margin-left: 12px; box-shadow: 0 0 0 3px rgba(229,72,94,.12); transition: transform .12s, background .12s, box-shadow .12s; flex: 0 0 auto; }
.alert-bell:hover { background: var(--accent-soft, rgba(229,72,94,.16)); transform: translateY(-1px); }
.alert-bell svg { width: 25px; height: 25px; }
.alert-bell .alert-bell-badge { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: #b8860b; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
/* Calm (no active outages) keeps the same highlighted look so the bell reads identically on every
   dashboard — only the amber count badge is state-dependent. */
.alert-bell.calm { color: var(--accent-deep); background: var(--accent-soft, rgba(229,72,94,.08)); border: 1.5px solid var(--accent); box-shadow: none; }
.alert-bell.calm:hover { background: var(--accent-soft, rgba(229,72,94,.16)); }

.tile .stbl { max-height: 640px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
.tile .sthead, .tile .strow { display: grid; grid-template-columns: 26px minmax(0,1.5fr) repeat(3, minmax(52px,.5fr)) repeat(3, minmax(58px,.55fr)); gap: 8px; align-items: center; }
.tile .lw-sep { border-left: 1px solid var(--border); padding-left: 8px; margin-left: -1px; }
.soon-pill { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--info); background: var(--surface-alt); border: 1px dashed var(--border); border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.mob-shell .m-chip.m-chip-soon { opacity: .8; }
.mob-shell .m-chip.m-chip-soon .m-chv { color: var(--info); font-weight: 700; }

/* ===== Speed of Service ===== */
.sos-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.sos-kpis.kpis5 { grid-template-columns: repeat(5, 1fr); }
.bevtbl th.bvsort { cursor: pointer; user-select: none; }
.bevtbl th.bvsort:hover { color: #fff; }
.sos-kpi { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.sos-kpi .sk-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sos-kpi .sk-v { font-size: 22px; font-weight: 800; color: var(--heading); margin: 3px 0; }
.sos-kpi .sk-s { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.sos-daypart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.sos-dp { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: baseline; }
.sos-dp .sd-k { font-size: 13px; color: var(--muted); }
.sos-dp .sd-v { font-size: 17px; font-weight: 800; color: var(--heading); }
.sos-rgn { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.sos-rgn-h, .sos-rgn-row { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(56px,.7fr)); gap: 8px; align-items: center; padding: 8px 13px; }
.sos-rgn-h { background: var(--surface-alt); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sos-rgn-row { border-top: 1px solid var(--border); font-size: 14px; }
.sos-rgn-h .r, .sos-rgn-row .r { text-align: right; }
.sos-rgn-nm { color: var(--heading); font-weight: 700; }
.sos-rgn-row.sos-mkt { background: var(--surface-alt); }
.sos-rgn-row.sos-mkt .sos-rgn-nm { font-weight: 600; color: var(--text); font-size: 13px; }
.sos-rgn-sub { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
.sos-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sos-col-h { font-size: 13px; font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.sos-li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 5px 0; border-top: 1px solid var(--border); }
.sos-li-nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sos-li-v { font-weight: 700; color: var(--heading); white-space: nowrap; }
.sos-mx-wrap { overflow-x: auto; margin-bottom: 14px; }
.sos-mx { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 13px; }
.sos-mx th { background: var(--surface-alt); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 7px 8px; text-align: left; }
.sos-mx th.r, .sos-mx td.r { text-align: right; }
.sos-mx td { padding: 6px 8px; border-top: 1px solid var(--border); color: var(--heading); }
.sos-mx-meas { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sos-mx-grp td { border-top: 2px solid var(--border); }
.sos-mx .heat-low { background: rgba(60,199,154,.20); }
.sos-mx .heat-mid { background: rgba(245,180,60,.18); }
.sos-mx .heat-high { background: rgba(255,107,110,.20); color: var(--accent-deep); font-weight: 700; }
.sos-mx-legend { font-size: 11px; color: var(--muted); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.sos-mx-legend .chip { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.sos-srv { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.sos-srv > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--heading); background: var(--surface-alt); display: flex; align-items: center; gap: 8px; }
.sos-srv > summary::-webkit-details-marker { display: none; }
.sos-srv .caret { transition: transform .15s; color: var(--muted); font-size: 11px; }
.sos-srv[open] .caret { transform: rotate(90deg); }
.sos-srv-note { font-weight: 400; color: var(--muted); font-size: 12px; }
.sos-srv-h, .sos-srv-row { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(56px,.6fr)); gap: 8px; padding: 7px 14px; align-items: center; }
.sos-srv-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-top: 1px solid var(--border); }
.sos-srv-row { border-top: 1px solid var(--border); font-size: 13.5px; }
.sos-srv-h .r, .sos-srv-row .r { text-align: right; }
.sos-srv-nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sos-srv-row.flag .sos-srv-nm { font-weight: 700; }
.sos-srv-flag { font-size: 10px; background: rgba(255,107,110,.18); color: var(--accent-deep); border-radius: 5px; padding: 1px 5px; margin-left: 5px; text-transform: uppercase; letter-spacing: .03em; }
.bev-srv .sos-srv-h, .bev-srv .sos-srv-row { grid-template-columns: minmax(0,1.5fr) repeat(5, minmax(44px,.55fr)); }
/* Cross-store beverage coaching, grouped by DO */
.bevdo-h { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--heading); }
.bevdo { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.bevdo > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 14px; background: var(--surface-alt); display: flex; align-items: center; gap: 8px; }
.bevdo > summary::-webkit-details-marker { display: none; }
.bevdo .caret { color: var(--muted); font-size: 11px; transition: transform .15s; }
.bevdo[open] .caret { transform: rotate(90deg); }
.bevdo-nm { font-weight: 800; color: var(--heading); }
.bevdo-meta { color: var(--muted); font-size: 12.5px; }
.bevdo-body { overflow-x: auto; }
.bevtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bevtbl th { background: var(--surface); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 7px 9px; text-align: left; position: sticky; top: 0; }
.bevtbl th.r, .bevtbl td.r { text-align: right; }
.bevtbl td { padding: 6px 9px; border-top: 1px solid var(--border); color: var(--heading); white-space: nowrap; }
.bevtbl .bv-srv { font-weight: 700; }
.bevtbl .bv-store { color: var(--muted); }
.bevtbl tr.below .bv-srv { font-weight: 700; }
.bevtbl .bv-goal { font-weight: 700; }
.bevtbl th.bv-wkgrp { text-align: center; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bevtbl th.sub { font-size: 10px; font-weight: 600; padding: 3px 6px; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
    /* Phones: the wide beverage table would overflow the page; make it swipe horizontally instead. */
    .bevtbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
.bev-explain { font-size: 12.5px; line-height: 1.5; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
.bev-explain b { color: var(--text); font-weight: 700; }
.mob-shell .bev-explain { margin: 4px 0 10px; }

/* ===== "New since last visit" alerts ===== */
.notice-toast.nf-toast { top: auto; bottom: 22px; left: auto; right: 22px; width: 360px; transform: translateY(14px); }
.notice-toast.nf-toast.in { transform: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .notice-toast.nf-toast { left: 12px; right: 12px; bottom: 76px; top: auto; width: auto; transform: translateY(14px); } .notice-toast.nf-toast.in { transform: none; } }
.new-tag { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--info, #1d9e75); border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.new-pill { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--info, #1d9e75); background: rgba(29,158,117,.14); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.has-new { position: relative; }

/* On-demand "Analyze" button in the report blocks */
.sd-analyze { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent); border-radius: 8px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; cursor: pointer; text-transform: none; white-space: nowrap; }
.sd-analyze:hover { background: var(--accent); color: #fff; }
.tile .t-h .sd-analyze { margin-left: auto; }
.mob-shell .m-sect .sd-analyze, .mob-shell .m-ptitle .sd-analyze { margin-left: 8px; padding: 3px 9px; font-size: 12px; }

/* "Start Scooping" digest — banner under the Sales Data Through header */
.scoop-digest { display: flex; align-items: center; gap: 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
.scoop-digest .sd-logo { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; }
.scoop-digest .sd-text { flex: 1 1 auto; font-size: 14px; color: var(--heading); line-height: 1.4; }
.scoop-digest .sd-text b { font-weight: 800; }
.scoop-digest .sd-btn { flex: 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 18px; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.scoop-digest .sd-btn:hover { filter: brightness(1.06); }
.scoop-digest .sd-x { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.scoop-digest .sd-x:hover { color: var(--heading); }
.mob-shell .scoop-digest { flex-wrap: wrap; margin: 10px 0 14px; }
.mob-shell .scoop-digest .sd-text { flex: 1 1 100%; order: 2; }
.mob-shell .scoop-digest .sd-btn { order: 3; }

/* "Start Scooping" digest — full-screen results popup */
.sd-modal-ov { position: fixed; inset: 0; z-index: 9500; background: rgba(10,8,16,.55); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; overflow-y: auto; }
.sd-modal-ov[hidden] { display: none; }
.sd-modal { position: relative; width: 100%; max-width: 860px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.sd-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.sd-modal-x:hover { color: var(--heading); }
.sd-modal-h { display: flex; align-items: center; gap: 10px; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--heading); margin-bottom: 16px; letter-spacing: -.01em; }
.sd-modal-h .sd-logo { width: 26px; height: 26px; border-radius: 6px; }
.sd-load { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 24px 0; }
.sd-load .sd-logo { width: 22px; height: 22px; border-radius: 5px; }
.sd-empty { color: var(--muted); padding: 16px 0; }
.sd-rep { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; }
.sd-rep-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.sd-rep-type { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; }
.sd-rep-name { font-weight: 700; color: var(--heading); }
.sd-rep-meta { font-size: 12px; color: var(--muted); margin-left: auto; }
.sd-rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-col-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.sd-col ul { margin: 0; padding-left: 18px; }
.sd-col li { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 3px 0; }
.sd-none { color: var(--muted); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .sd-rep-cols { grid-template-columns: 1fr; gap: 8px; } .sd-modal { padding: 18px 16px 20px; } }

/* Support Director Reports header legend */
.sr-legend { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.sr-legend svg { color: var(--accent); flex: 0 0 auto; }
.sr-expand { flex: 0 0 auto; white-space: nowrap; }

/* ===== Per-Brand Voice of the Customer ===== */
.warn-t { color: var(--watch, #b06a00); }
.voc-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.voc-kpi { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.voc-kpi .vk-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.voc-kpi .vk-v { font-size: 24px; font-weight: 800; color: var(--heading); margin: 3px 0; letter-spacing: -.01em; }
.voc-kpi .vk-s { font-size: 12px; color: var(--muted); }
.voc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.voc-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--bc, var(--accent)); border-radius: 14px; padding: 14px 16px; }
.voc-card-h .voc-bn { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 17px; font-weight: 800; color: var(--heading); display: block; letter-spacing: -.01em; }
.voc-card-h .voc-bsub { font-size: 12px; color: var(--muted); }
.voc-rate { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 0 8px; }
.voc-stars { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.voc-stars .voc-star { font-size: 16px; }
.voc-stars .voc-avgl { font-size: 12px; color: var(--muted); font-weight: 600; }
.voc-mom { font-size: 13px; font-weight: 700; text-align: right; line-height: 1.2; }
.voc-mom .voc-moml { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.voc-sent { margin-bottom: 11px; }
.voc-sent .voc-sent-l { font-size: 12.5px; color: var(--muted); }
.voc-sent .voc-sent-l b { color: var(--heading); }
.voc-bar { height: 7px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; margin-top: 4px; }
.voc-bar span { display: block; height: 100%; border-radius: 4px; }
.voc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.voc-stat { display: flex; flex-direction: column; gap: 2px; }
.voc-stat .vs-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.voc-stat .vs-v { font-size: 16px; font-weight: 800; }
.voc-take { margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: 12.5px; font-style: italic; color: var(--muted); }
@media (max-width: 1100px) { .voc-kpis { grid-template-columns: repeat(2, 1fr); } .voc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .voc-grid { grid-template-columns: 1fr; } }
.mob-shell .voc-card.m-voc { margin: 8px 0; }
.mob-shell .m-vsub { font-size: 12.5px; color: var(--muted); margin: 6px 0 4px; }
.mob-shell .sr-legend-m { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.mob-shell .sr-legend-m svg { color: var(--accent); flex: 0 0 auto; }
@media (max-width: 980px) { .sr-legend { display: none; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .sos-kpis { grid-template-columns: 1fr 1fr; } .sos-kpis.kpis5 { grid-template-columns: 1fr 1fr; } .sos-lists { grid-template-columns: 1fr; } }
/* mobile SoS card */
.mob-shell .m-sos-hd { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; }
.mob-shell .m-sos-big { font-size: 26px; font-weight: 800; line-height: 1; }
.mob-shell .m-sos-sub { font-size: 12.5px; color: var(--muted); }
.mob-shell .m-sos-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; font-weight: 700; }
.mob-shell .m-sos-li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
.mob-shell .m-sos-nm { color: var(--text); }
.mob-shell .m-sos-v { font-weight: 700; color: var(--heading); white-space: nowrap; }

/* ===== Dashboard notice — compact corner toast (from _admin/fsd_notification.txt) ===== */
.notice-toast { position: fixed; z-index: 9000; top: 22px; left: 50%; width: 600px; max-width: calc(100vw - 32px);
    background: var(--accent-soft); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: 14px;
    padding: 13px 40px 13px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.4); display: flex; gap: 14px; align-items: center;
    opacity: 0; transform: translate(-50%, -12px); transition: opacity .22s ease, transform .22s ease; }
.notice-toast[hidden] { display: none; }
.notice-toast.in { opacity: 1; transform: translate(-50%, 0); }
.notice-toast.lvl-warn { border-color: var(--watch, #b06a00); border-left-color: var(--watch, #b06a00); }
.notice-toast.lvl-success { border-color: var(--info, #1d9e75); border-left-color: var(--info, #1d9e75); }
.notice-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.notice-toast.lvl-warn .notice-ic { color: var(--watch, #b06a00); }
.notice-toast.lvl-success .notice-ic { color: var(--info, #1d9e75); }
.notice-main { min-width: 0; flex: 1 1 auto; }
.notice-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 15px; font-weight: 800; color: var(--heading); margin-bottom: 2px; letter-spacing: -.01em; }
.notice-msg { font-size: 13px; line-height: 1.5; color: var(--text); }
.notice-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.notice-count { font-size: 11px; color: var(--muted); }
.notice-ok { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.notice-ok:hover { filter: brightness(1.06); }
.notice-x { position: absolute; top: 8px; right: 11px; background: none; border: none; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.notice-x:hover { color: var(--heading); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .notice-toast { left: 12px; right: 12px; top: 14px; width: auto; transform: translateY(-12px); } .notice-toast.in { transform: none; } }
.tile .sthead { position: sticky; top: 0; background: var(--surface); z-index: 1; padding: 4px 13px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tile .sthead .h-num { text-align: right; cursor: pointer; user-select: none; }
.tile .sthead .h-num:hover { color: var(--heading); }
.tile .sthead .h-num.act { color: var(--accent-deep); }
.tile .strow { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; margin-bottom: 8px; }
.strank { font-size: 13px; font-weight: 800; color: var(--muted); text-align: center; }
.tile .strow .stname { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; overflow: visible; line-height: 1.3; font-size: 15px; font-weight: 600; color: var(--heading); min-width: 0; }
.tile .strow .stname .sloc { margin-left: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
/* Jump-to-store link: the store name in a group's My Stores list opens that store's own dashboard. */
.tile .strow .stname.st-jump { position: relative; text-decoration: none; cursor: pointer; padding-right: 16px; transition: color .12s; }
.tile .strow .stname.st-jump:hover { color: var(--accent-deep); }
.tile .strow .stname.st-jump .st-jump-ic { position: absolute; top: 1px; right: 0; opacity: 0; color: var(--accent-deep); transition: opacity .12s; }
.tile .strow:hover .stname.st-jump .st-jump-ic, .tile .strow .stname.st-jump:focus-visible .st-jump-ic { opacity: .8; }
.tile .stcell { text-align: right; }
.tile .stcell .stk { display: none; }
.tile .stcell .stnums .stv { display: block; font-size: 14px; font-weight: 700; color: var(--heading); }
.tile .stcell .stnums .sty { display: block; font-size: 13px; font-weight: 700; }

@media (max-width: 820px) {
  .bento { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }
  .container.home { max-width: 880px; }
}

/* reviews grouped by location */
.argroup { margin-bottom: 14px; }
.argroup:last-child { margin-bottom: 0; }
.argh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.argh .aloc { font-weight: 800; color: var(--heading); font-size: 14px; }
.argh .aloc .sloc { color: var(--muted); font-weight: 400; font-size: 13px; }
.argh .argn { font-size: 13px; color: var(--muted); flex: none; }
.argroup .arow { border-bottom: none; padding: 7px 0; }
.argroup .arow .abody .atm { margin-top: 2px; }

/* footer Email support button */
.footer-support { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-support .fs-label { font-size: 14px; color: rgba(255,255,255,.66); }
.support-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--accent-deep); text-decoration: none; border: 1px solid var(--accent); background: var(--accent-soft); padding: 8px 14px; border-radius: 10px; }
.support-btn:hover { background: var(--accent); color: #fff; }

/* ===== Mobile app shell (phones only; desktop layout untouched) ===== */
.mob-shell { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
    /* Only pages that carry a bottom-tab mobile shell (body.has-mob) swap the
       desktop chrome for it. Pages without a shell (e.g. the brand view) keep
       their topbar + main and render responsively. */
    .has-mob:not(.scoop-desktop) header.topbar, .has-mob:not(.scoop-desktop) main.home, .has-mob:not(.scoop-desktop) main.exec, .has-mob:not(.scoop-desktop) footer.site-footer {
        display: none !important;
    }

    /* Highlights popup stays available on mobile; sit it above the tab bar and
       size the frame for a phone viewport. */
    #hl-modal { padding: 14px; z-index: 60; }
    #hl-modal .modal { max-height: 88vh; }
    #hl-modal .modal-frame { height: 66vh; }

    body {
        background: var(--bg);
    }

    .has-mob:not(.scoop-desktop) .mob-shell {
        display: block;
        padding-bottom: 80px;
        -webkit-font-smoothing: antialiased;
    }

        .mob-shell .m-hd {
            position: sticky;
            top: 0;
            z-index: 20;
            background: var(--ink);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 14px 16px;
            padding-top: calc(14px + env(safe-area-inset-top));
        }

        .mob-shell .m-ib-exec { background: rgba(255,255,255,.16); }

        .mob-shell .m-switch {
            flex-basis: 100%;
            width: 100%;
            max-width: none;
            margin-top: 10px;
            background: rgba(255,255,255,.10);
            color: #fff;
            border-color: rgba(255,255,255,.22);
        }

        .mob-shell .m-wm {
            font-family: "Bricolage Grotesque", system-ui, sans-serif;
            font-weight: 800;
            font-size: 19px;
        }

            .mob-shell .m-wm .dot {
                color: var(--accent);
            }

            .mob-shell .m-wm .m-wm-scope {
                display: block;
                font-size: 13.5px;
                font-weight: 600;
                opacity: .85;
                margin-top: 1px;
                line-height: 1.15;
            }

        .mob-shell .m-hact {
            display: flex;
            gap: 8px;
        }

        .mob-shell .m-ib {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,.12);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .mob-shell .m-pane {
            display: none;
            padding: 16px;
        }

            .mob-shell .m-pane.on {
                display: block;
            }

        .mob-shell .m-gname {
            font-family: "Bricolage Grotesque", system-ui, sans-serif;
            font-weight: 800;
            font-size: 20px;
            color: var(--heading);
            border-left: 3px solid var(--accent);
            border-bottom: 3px solid var(--accent);
            padding: 0 0 10px 12px;
        }

        .mob-shell .m-gmeta {
            font-size: 13px;
            color: var(--muted);
            margin: 6px 0 0 12px;
        }

        .mob-shell .m-through {
            font-weight: 800;
            font-size: 15px;
            color: var(--heading);
            text-align: center;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 9px 0;
            margin: 14px 0 10px;
        }

        .mob-shell .m-summary {
            font-size: 14px;
            color: var(--muted);
            text-align: center;
            margin-bottom: 14px;
        }

            .mob-shell .m-summary b {
                color: var(--heading);
            }

        .mob-shell .m-kcard {
            background: var(--surface);
            border: 2px solid var(--accent);
            border-radius: 16px;
            padding: 15px 16px;
            margin-bottom: 11px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .mob-shell .m-kcard .m-kc-l { flex: 1; min-width: 0; }

        .mob-shell .m-kk {
            font-size: 15px;
            font-weight: 800;
            color: var(--muted);
        }

        .mob-shell .m-kbig {
            font-size: 25px;
            font-weight: 800;
            color: var(--heading);
            margin: 0;
            flex: none;
            text-align: right;
        }

        .mob-shell .m-krow {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-top: 3px;
        }

        .mob-shell .m-kl {
            font-size: 13px;
            color: var(--muted);
        }

        .mob-shell .m-kyoy {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            opacity: .7;
            letter-spacing: .02em;
            margin-top: 2px;
        }
            .mob-shell .m-kyoy.up-t { color: var(--info); }
            .mob-shell .m-kyoy.down-t { color: var(--accent-deep); }

        .mob-shell .m-pill {
            font-size: 13px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 20px;
        }

            .mob-shell .m-pill.up {
                color: var(--info);
                background: rgba(60,199,154,.14);
            }

            .mob-shell .m-pill.down {
                color: var(--accent-deep);
                background: var(--accent-soft);
            }

        .mob-shell .m-ydot {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 700;
            padding: 7px 11px;
            border-radius: 10px;
            text-align: center;
        }

            .mob-shell .m-ydot.good {
                color: #1d9e75;
                background: rgba(55,189,151,.12);
                border: 1px solid var(--mint);
            }

            .mob-shell .m-ydot.bad {
                color: var(--accent-deep);
                background: var(--accent-soft);
                border: 1px solid var(--accent);
            }

        .mob-shell .m-movers {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 11px 15px;
        }

        .mob-shell .m-mv {
            display: flex;
            gap: 8px;
            font-size: 14px;
            padding: 5px 0;
            align-items: baseline;
        }

            .mob-shell .m-mv b {
                color: var(--heading);
            }

            .mob-shell .m-mv em {
                font-style: normal;
                font-weight: 800;
                margin-left: auto;
            }

        /* Mobile regional action board cards (m-rab; distinct from the .m-rgn review label). */
        .mob-shell .m-rab {
            background: var(--surface);
            border: 1px solid var(--border);
            border-left: 3px solid var(--muted);
            border-radius: 12px;
            padding: 11px 14px;
            margin-bottom: 10px;
        }

            .mob-shell .m-rab.m-rab-ok { border-left-color: #1d9e75; }
            .mob-shell .m-rab.m-rab-watch { border-left-color: #b06a00; }
            .mob-shell .m-rab.m-rab-bad { border-left-color: #b4232f; }
            .mob-shell .m-rab.m-rab-total {
                background: var(--accent-soft);
                border-color: var(--accent);
                border-left-color: var(--accent);
            }
            .mob-shell .m-rab.m-rab-mkt {
                margin-left: 12px;
                margin-top: 8px;
                margin-bottom: 0;
                padding: 8px 12px;
                border-radius: 10px;
                background: var(--surface);
            }
                .mob-shell .m-rab.m-rab-mkt .m-rab-nm { font-size: 12px; opacity: .9; }
                .mob-shell .m-rab.m-rab-mkt .m-rab-ct { font-size: 11px; }

        /* Collapsible DO card on mobile: header is a button (name + YTD stat); body hidden until tapped. */
        .mob-shell .m-rab-do .m-rab-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 0;
            margin: 0;
            background: none;
            border: 0;
            cursor: pointer;
            color: inherit;
            text-align: left;
            font: inherit;
        }
            .mob-shell .m-rab-do .m-rab-toggle .m-rab-nm { flex: 1 1 auto; }
            .mob-shell .m-rab-cv { flex: 0 0 auto; opacity: .6; transition: transform .15s ease; }
            .mob-shell .m-rab-do.open .m-rab-cv { transform: rotate(180deg); }
            .mob-shell .m-rab-ytd { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
        .mob-shell .m-rab-body { display: none; margin-top: 9px; }
        .mob-shell .m-rab-do.open .m-rab-body { display: block; }
        .mob-shell .m-rab-ct2 { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
        .mob-shell .m-rab-brief { margin: 9px 0 0; padding: 9px 12px; }

        .mob-shell .m-rab-h {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
        }

        .mob-shell .m-rab-nm {
            font-weight: 800;
            color: var(--heading);
            font-size: 16px;
        }

        .mob-shell .m-rab-total .m-rab-nm {
            color: var(--accent-deep);
        }

        .mob-shell .m-rab-ct {
            font-size: 13px;
            color: var(--muted);
            font-weight: 600;
            white-space: nowrap;
        }

        .mob-shell .m-rab-sub {
            font-size: 13px;
            color: var(--muted);
            margin: 1px 0 8px;
        }

        .mob-shell .m-rab-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            margin-top: 8px;
        }

        .mob-shell .m-rab-cell {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .mob-shell .m-rab-k {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--muted);
            font-weight: 700;
        }

        .mob-shell .m-rab-v {
            font-size: 15px;
            font-weight: 800;
            color: var(--heading);
        }

        .mob-shell .m-rab-y {
            font-size: 13px;
            font-weight: 700;
        }

        .mob-shell .m-rab-dir {
            font-size: 13px;
            color: var(--muted);
            margin-top: 8px;
        }

        .mob-shell .m-ptitle {
            font-family: "Bricolage Grotesque", system-ui, sans-serif;
            font-weight: 800;
            font-size: 19px;
            color: var(--heading);
            margin: 2px 0 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        /* Analytics drill-down: a focus selector box with title, right-side hamburger, and current selection. */
        .mob-shell .ana-nav { position: relative; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin: -4px 0 14px; }
        .mob-shell .ana-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .mob-shell .ana-nav-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 16px; color: var(--heading); display: flex; align-items: center; gap: 7px; cursor: pointer; }
        .mob-shell .ana-arrow { color: var(--accent); }
        .mob-shell .ana-burger { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; color: var(--heading); display: flex; align-items: center; gap: 6px; }
        .mob-shell .ana-burger .ana-caret { color: var(--muted); font-size: 12px; }
        .mob-shell .ana-nav-cur { margin-top: 9px; font-size: 13px; color: var(--muted); }
        .mob-shell .ana-nav-cur b { color: var(--heading); font-weight: 700; }
        .mob-shell .ana-menu { position: absolute; top: 100%; right: 14px; z-index: 6; margin-top: 6px; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
        .mob-shell .ana-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 13px; font-size: 14px; color: var(--text); border-radius: 8px; }
        .mob-shell .ana-menu button:hover, .mob-shell .ana-menu button:active { background: var(--surface-alt); color: var(--heading); }

        .mob-shell .m-badge {
            font-size: 13px;
            font-weight: 800;
            background: var(--accent-soft);
            color: var(--accent-deep);
            padding: 3px 9px;
            border-radius: 8px;
        }

        .mob-shell .m-seg {
            display: flex;
            background: var(--surface-alt);
            border-radius: 11px;
            padding: 4px;
            margin-bottom: 14px;
        }

            .mob-shell .m-seg button {
                flex: 1;
                border: none;
                background: none;
                color: var(--muted);
                font-weight: 700;
                font-size: 15px;
                padding: 10px;
                border-radius: 8px;
            }

                .mob-shell .m-seg button.on {
                    background: var(--accent);
                    color: #fff;
                }

        .mob-shell .m-scard {
            background: var(--surface);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 13px;
            padding: 12px 14px;
            margin-bottom: 10px;
        }

            .mob-shell .m-scard.m-hidden {
                display: none;
            }

        .mob-shell .m-sc-top {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 9px;
        }

        /* Tapping a store card opens that store's own dashboard. */
        .mob-shell .m-sc-jump {
            text-decoration: none;
            color: inherit;
        }

            .mob-shell .m-sc-jump .m-sc-ic {
                margin-left: auto;
                color: var(--accent-deep);
                opacity: .7;
                flex: none;
            }

            .mob-shell .m-sc-jump:active {
                opacity: .6;
            }

        .mob-shell .m-rk {
            font-weight: 800;
            color: var(--muted);
            font-size: 14px;
            min-width: 16px;
        }

        .mob-shell .m-snm {
            font-weight: 700;
            color: var(--heading);
            font-size: 16px;
        }

        .mob-shell .m-sid {
            color: var(--muted);
            font-weight: 400;
            font-size: 13px;
            margin-left: 6px;
        }

        .mob-shell .m-sbrand {
            color: var(--muted);
            font-weight: 600;
            font-size: 13px;
            margin-right: 7px;
        }

        .mob-shell .m-chips {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
        }

            .mob-shell .m-chips-lw {
                margin-top: 7px;
                padding-top: 7px;
                border-top: 1px dashed var(--border);
            }

        .mob-shell .m-chip {
            background: var(--surface-alt);
            border-radius: 9px;
            padding: 7px 8px;
            text-align: center;
        }

        .mob-shell .m-chl {
            display: block;
            font-size: 12px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .mob-shell .m-chv {
            display: block;
            font-size: 14px;
            font-weight: 800;
            color: var(--heading);
            margin: 2px 0;
        }

        .mob-shell .m-chy {
            display: block;
            font-size: 13px;
            font-weight: 700;
        }

        .mob-shell .m-chyoy {
            display: block;
            font-size: 10px;
            font-weight: 700;
            color: var(--muted);
            opacity: .7;
            letter-spacing: .02em;
            margin-top: 1px;
        }
            .mob-shell .m-chyoy.up-t { color: var(--info); }
            .mob-shell .m-chyoy.down-t { color: var(--accent-deep); }

        .mob-shell .m-showall {
            width: 100%;
            padding: 14px;
            border: 1px dashed var(--accent);
            background: none;
            color: var(--accent-deep);
            font-weight: 800;
            border-radius: 12px;
            font-size: 15px;
        }

        .mob-shell .m-rgrp {
            margin-bottom: 14px;
        }

        .mob-shell .m-rgh {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            border-bottom: 1px solid var(--border);
            padding-bottom: 6px;
            margin-bottom: 4px;
            gap: 8px;
        }

        .mob-shell .m-rgn {
            font-weight: 800;
            color: var(--heading);
            font-size: 15px;
        }

        .mob-shell .m-rgc {
            font-size: 13px;
            color: var(--muted);
            flex: none;
        }

        .mob-shell .m-rv {
            display: flex;
            gap: 10px;
            padding: 8px 0;
        }

        .mob-shell .m-rvs {
            color: var(--accent);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            flex: none;
        }

        .mob-shell .m-rvt {
            font-size: 14.5px;
            color: var(--text);
        }

        .mob-shell .m-rvd {
            font-size: 13px;
            color: var(--muted);
            margin-top: 2px;
        }

        .mob-shell .m-upcard {
            background: var(--surface);
            border: 2px solid var(--accent);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
        }

        .mob-shell .m-uptitle {
            font-family: "Bricolage Grotesque", system-ui, sans-serif;
            font-weight: 800;
            font-size: 16px;
            color: var(--heading);
            margin-bottom: 8px;
        }

        .mob-shell .m-upd {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 13px;
        }

        .mob-shell .m-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 16px;
            text-decoration: none;
            border: none;
        }

            .mob-shell .m-btn.primary {
                background: var(--accent);
                color: #fff;
            }

            .mob-shell .m-btn.ghost {
                background: var(--accent-soft);
                color: var(--accent-deep);
                border: 1px solid var(--accent);
            }

        .mob-shell .m-sect {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--muted);
            font-weight: 800;
            margin: 20px 0 8px;
        }

        .mob-shell .m-frow {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
        }

        /* HTML rows split into a tappable open-link plus a Highlights button. */
        .mob-shell .m-fopen {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 0;
            text-decoration: none;
        }

        .mob-shell .m-fhl {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--surface-alt);
            color: var(--accent);
            cursor: pointer;
        }

        .mob-shell .m-fhl:active { background: var(--surface); }

        .mob-shell .m-fic {
            font-size: 10px;
            font-weight: 800;
            padding: 3px 5px;
            border-radius: 5px;
            background: var(--surface-alt);
            color: var(--muted);
            flex: none;
        }

        .mob-shell .m-fnm {
            font-size: 14.5px;
            color: var(--heading);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mob-shell .m-fdt {
            font-size: 13px;
            color: var(--muted);
            flex: none;
        }

        .mob-shell .m-fold {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 13px 14px;
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 9px;
            color: var(--heading);
            text-decoration: none;
        }

            .mob-shell .m-fold svg {
                color: var(--accent);
                flex: none;
            }

            .mob-shell .m-fold span:nth-child(2) {
                flex: 1;
                font-weight: 600;
                font-size: 15px;
            }

        .mob-shell .m-fgo {
            color: var(--muted);
            font-size: 21px;
        }

        .mob-shell .m-empty {
            font-size: 15px;
            color: var(--muted);
            padding: 8px 0;
        }

        .mob-shell .m-tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 64px;
            padding-bottom: env(safe-area-inset-bottom);
            background: var(--surface);
            border-top: 1px solid var(--border);
            display: flex;
            overflow-x: auto;               /* allow left/right scroll when there are more tabs than fit */
            -webkit-overflow-scrolling: touch;
            z-index: 30;
        }

        .mob-shell .m-tab {
            flex: 1 0 auto;                 /* fill width when few tabs; don't shrink (scroll) when many */
            min-width: 60px;
            padding: 0 12px;
            border: none;
            background: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

            .mob-shell .m-tab.on {
                color: var(--accent);
            }

            .mob-shell .m-tab svg {
                width: 23px;
                height: 23px;
            }

            .mob-shell .m-tab .m-tab-new {
                display: inline-block;
                font-size: 7.5px;
                font-weight: 800;
                letter-spacing: .04em;
                color: #fff;
                background: #c8102e;
                border-radius: 5px;
                padding: 0 4px;
                line-height: 1.5;
                margin-top: 1px;
            }

        /* ----- Mobile wide-table treatment: keep multi-column tables INSIDE the card and scroll cleanly
           instead of wrapping/bleeding past the border. .m-scroll is the clipped horizontal scroller;
           .m-rot-hint is the "turn your phone sideways" nudge (added by markMobileTables() when a table
           is actually wider than the screen). ----- */
        .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 10px; }
        .m-rot-hint { display: none; }
        @media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
            .mob-shell .m-pane .tile { overflow: hidden; }
            .m-rot-hint {
                display: flex; align-items: center; gap: 7px;
                font-size: 11px; font-weight: 700; color: var(--muted);
                background: var(--surface-alt, rgba(127,127,127,.08));
                border: 1px dashed var(--border); border-radius: 8px;
                padding: 6px 10px; margin: 0 0 8px;
            }
            .m-rot-hint svg { width: 14px; height: 14px; flex: none; opacity: .85; }
            .m-scroll::-webkit-scrollbar { height: 5px; }
            .m-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        }

        /* ----- executive mobile extras (brand cards, splits, channel mix) ----- */
        .mob-shell .m-sect { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; margin: 20px 0 10px; }
        .mob-shell .m-bdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
        .mob-shell .m-kbig.up-t { color: var(--info); }
        .mob-shell .m-kbig.down-t { color: var(--accent-deep); }
        .mob-shell .m-splits { display: flex; gap: 8px; margin-top: 9px; font-size: 13px; font-weight: 800; }
        .mob-shell .m-splits .seg { padding: 3px 9px; border-radius: 6px; }
        .mob-shell .m-splits .seg.up { background: rgba(60,199,154,.16); color: var(--info); }
        .mob-shell .m-splits .seg.dn { background: rgba(255,107,110,.16); color: var(--accent-deep); }
        .mob-shell .m-chrow { margin-bottom: 14px; }
        .mob-shell .m-chn { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 5px; }
        .mob-shell .m-chn b { color: var(--heading); font-weight: 700; }
        .mob-shell .m-chn .chd { color: var(--muted); font-size: 13px; white-space: nowrap; }
        .mob-shell .m-chbar { display: flex; height: 13px; border-radius: 7px; overflow: hidden; background: var(--surface-alt); }
        .mob-shell .m-chbar span { display: block; height: 100%; }
        .mob-shell .chbar-py { height: 8px; opacity: .5; margin-top: 4px; }
        .mob-shell .chpy { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
        .mob-shell .ask-form { flex-direction: column; }
        .mob-shell .ask-btn { width: 100%; }
        .mob-shell .seg-in { background: var(--info); }
        .mob-shell .seg-1p { background: var(--accent); }
        .mob-shell .seg-3p { background: var(--watch); }
        .mob-shell .m-chlegend { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
        .mob-shell .m-chlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
}
    /* ---- sign-in splash (Welcome / Scooping up your numbers) ----
       Background = the SAME marbled deep-navy the new Scoop design uses for its page
       (body.dm-smallgroup), so every dashboard's splash matches the destination skin. */
    .scoop-splash {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #060b16;
        background-image:
            radial-gradient(70% 55% at 20% 25%, rgba(64,104,176,.60), rgba(8,14,30,0) 55%),
            radial-gradient(60% 50% at 80% 20%, rgba(44,80,150,.55), rgba(8,14,30,0) 55%),
            radial-gradient(75% 65% at 65% 80%, rgba(30,60,124,.62), rgba(6,10,22,0) 58%),
            radial-gradient(55% 50% at 30% 82%, rgba(70,116,190,.42), rgba(6,10,22,0) 55%),
            radial-gradient(50% 45% at 92% 62%, rgba(20,42,90,.55), rgba(6,10,22,0) 55%),
            radial-gradient(40% 38% at 48% 45%, rgba(90,140,210,.28), rgba(6,10,22,0) 60%),
            radial-gradient(120% 120% at 50% 50%, rgba(10,18,40,.25), rgba(3,6,14,.88) 85%);
        transition: opacity .45s ease, visibility .45s ease;
    }

        .scoop-splash.hide {
            opacity: 0;
            visibility: hidden;
        }

    .splash-inner {
        text-align: center;
        padding: 24px;
        position: relative;
        z-index: 1;
    }

    .splash-logo {
        width: 132px;
        height: 132px;
        border-radius: 30px;
        object-fit: cover;
        box-shadow: 0 12px 40px rgba(0,0,0,.35);
        transform-origin: center center;
        animation: scoopWobble 1.5s ease-in-out infinite;
    }

    .splash-title {
        margin-top: 18px;
        font-family: "Bricolage Grotesque", system-ui, sans-serif;
        font-weight: 800;
        font-size: 1.6rem;
        color: #fff;
        letter-spacing: -.01em;
    }

        .splash-title .dot {
            color: var(--accent);
        }

    .splash-sub {
        margin-top: 6px;
        color: rgba(255,255,255,.62);
        font-size: .96rem;
    }

    .splash-bar {
        margin: 20px auto 0;
        width: 180px;
        height: 4px;
        border-radius: 99px;
        background: rgba(255,255,255,.14);
        overflow: hidden;
    }

        .splash-bar span {
            display: block;
            height: 100%;
            width: 40%;
            border-radius: 99px;
            background: var(--accent);
            animation: splash-slide 1.1s ease-in-out infinite;
        }

    @keyframes splash-slide {
        0% {
            transform: translateX(-120%);
        }

        100% {
            transform: translateX(320%);
        }
    }

    /* brand banner rows — 3 logos above / 3 below the center block (replaces the floating
       scatter; splash.js builds them). Rows span the screen; every logo gets the SAME visual
       box (equal thirds, fixed height, contain-fit) so no brand reads bigger than another. */
    .splash-brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        width: min(94vw, 1560px);
    }
        .splash-brands.top { margin-bottom: clamp(26px, 5vh, 52px); }
        .splash-brands.bot { margin-top: clamp(30px, 5.5vh, 56px); }
        .splash-brands .sbox { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
        .splash-brands .sbl {
            height: clamp(64px, 11vh, 118px);
            width: min(88%, 340px);
            object-fit: contain;
            opacity: 0;
            transform: translateY(6px);
            filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
            animation: brandBob 4.6s ease-in-out infinite alternate;
            transition: opacity .9s ease, transform .9s ease;
        }
        .splash-brands .sbl.in { opacity: .95; transform: translateY(0); }
        /* compact/stacked marks (Red Mango, Smoothie Factory) get a bigger box so their VISUAL
           size matches the wide wordmarks */
        .splash-brands .sbl.sbl-big { height: clamp(86px, 15vh, 158px); }

    @keyframes brandBob {
        from { translate: 0 4px; }
        to   { translate: 0 -6px; }
    }

    /* floating logo layer behind the splash content (legacy scatter — no longer built) */
    .splash-float {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }

        .splash-float .sfl {
            position: absolute;
            height: auto;               /* keep each brand logo's aspect ratio */
            opacity: 0;                 /* JS fades each in to its target opacity */
            transition: opacity .9s ease;
            animation: scoopDrift ease-in-out infinite alternate;
            will-change: transform;
        }

    @keyframes scoopDrift {
        from { transform: translate(-6px, 8px) rotate(-5deg); }
        to   { transform: translate(6px, -14px) rotate(5deg); }
    }

    /* rotating loading lines, each shown in its own font + size */
    .splash-sub { transition: opacity .18s ease; }
    .splash-sub.sf1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .005em; }
    .splash-sub.sf2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.18rem; }
    .splash-sub.sf3 { font-family: "Trebuchet MS", system-ui, sans-serif; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; }
    .splash-sub.sf4 { font-family: "Courier New", monospace; font-size: .9rem; letter-spacing: .02em; }
    .splash-sub.sf5 { font-family: system-ui, sans-serif; font-weight: 300; font-size: 1.3rem; }

    @media (prefers-reduced-motion: reduce) {
        .splash-logo, .splash-bar span, .splash-float .sfl, .splash-brands .sbl {
            animation: none;
        }
    }

/* ===========================================================
   Executive dashboard (all-brand) — scoped under main.exec so it
   never affects the regular per-store dashboard.
   =========================================================== */
/* Wider canvas than the regular dashboard — the exec tables/cards need room.
   Uses most of the viewport on large monitors, capped so it never gets unwieldy. */
.container.exec { max-width: min(1760px, 96vw); }
.exec .brand-tbl { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Company totals row: same grid as the brand rows, emphasized so it reads as the header total. */
.exec .brow.btotal { background: var(--surface); border-left-color: var(--accent); }
.exec .brow.btotal .bn { color: var(--heading); }
.exec .brow.btotal .bcell .bv { font-size: 19px; }
.exec .brow.btotal .bcell .bdol { color: var(--text); }
.exec .bhead { display: grid; grid-template-columns: minmax(0,1.1fr) repeat(3, minmax(140px,1.5fr)) minmax(92px,.82fr) minmax(78px,.66fr); gap: 10px; padding: 0 14px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.exec .bhead span:not(:first-child) { text-align: right; }
.exec .brow { display: grid; grid-template-columns: minmax(0,1.1fr) repeat(3, minmax(140px,1.5fr)) minmax(92px,.82fr) minmax(78px,.66fr); gap: 10px; align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-left: 4px solid var(--bcol, var(--muted)); border-radius: 10px; padding: 11px 14px; }
.exec .brow .bn { font-size: 15.5px; font-weight: 700; color: var(--heading); }
.exec .brow .bn .bu { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.exec .brow .bcell { text-align: right; }
.exec .brow .bcell .bk { display: none; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.exec .brow .bcell .bv { font-size: 16px; font-weight: 700; color: var(--heading); }
.exec .brow .bper .bdol { display: block; font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; margin-bottom: 2px; }
.exec .brow .byoy { background: rgba(255,255,255,.06); border-radius: 8px; padding: 5px 8px; }

/* ===== Executive summary cards + same-store comp rollup (report-style) ===== */
.exec .exsum { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 4px 0 20px; }
.exec .exsum-card { background: var(--surface-alt); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.exec .exsum-card.up-t { border-top-color: var(--info); }
.exec .exsum-card.down-t { border-top-color: var(--accent-deep); }
.exec .exsum-card.neutral { border-top-color: var(--accent); }
.exec .exsum .exk { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.exec .exsum .exv { font-size: 31px; font-weight: 800; color: var(--heading); margin-top: 4px; line-height: 1.1; }
.exec .exsum .exv.up-t { color: var(--info); }
.exec .exsum .exv.down-t { color: var(--accent-deep); }
.exec .exsum .exv-sub { font-size: 18px; font-weight: 700; color: var(--muted); }
.exec .exsum .exsub { font-size: 13px; color: var(--muted); margin-top: 3px; }

.exec .t-h2 { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--heading); margin: 8px 0 10px; }
.exec .t-h2 .t-sub { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }

.exec .rollup-grid { display: grid; grid-template-columns: minmax(150px,1.7fr) repeat(3, minmax(58px,1fr) minmax(58px,1fr) minmax(56px,.85fr) minmax(26px,.36fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.exec .rg-h { background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 11px 12px; text-align: right; }
.exec .rg-grp { grid-column: span 4; border-left: 1px solid rgba(255,255,255,.14); }
.exec .rg-brand-h { text-align: left; }
.exec .rg-sh { background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--border); }
.exec .rg-brand-sh { background: var(--surface); border-bottom: 1px solid var(--border); }
.exec .rg-c { padding: 11px 12px; font-size: 14.5px; text-align: right; border-top: 1px solid var(--border); background: var(--surface-alt); color: var(--heading); white-space: nowrap; }
.exec .rg-brand { text-align: left; font-weight: 700; border-left: 4px solid var(--bcol, transparent); }
.exec .rg-bsub { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.exec .rg-py { color: var(--muted); }
.exec .rg-n { color: var(--muted); font-size: 13px; }
.exec .vpill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.exec .vpill.up-t { background: rgba(60,199,154,.16); color: var(--info); }
.exec .vpill.down-t { background: rgba(255,107,110,.16); color: var(--accent-deep); }
.exec .rg-total { background: var(--ink); color: #fff; font-weight: 800; border-top: 2px solid var(--accent); }
.exec .rg-total.rg-brand { color: #fff; border-left-color: var(--accent); }
.exec .rg-total .rg-bsub { color: rgba(255,255,255,.6); }
.exec .rg-total.rg-py, .exec .rg-total.rg-n { color: rgba(255,255,255,.72); }
.exec .rg-total .vpill { background: rgba(255,255,255,.16); color: #fff; }

/* All-stores quick search */
.exec .st-search { width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 9px 13px; font: inherit; font-size: 14.5px; background: var(--surface-alt); color: var(--heading); border: 1px solid var(--border); border-radius: 9px; }
.exec .st-search:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.mob-shell .st-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 10px 12px; font: inherit; font-size: 15px; background: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 9px; }

/* Brand filter chips for All Stores (click to toggle a brand in/out) */
.brandbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.brandtog { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.brandtog::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bc, var(--muted)); opacity: .35; flex: none; }
.brandtog.on { color: var(--heading); background: var(--surface); border-color: var(--bc, var(--accent)); }
.brandtog.on::before { opacity: 1; }
/* mobile: collapse the brand filter into a single-line checkbox dropdown */
.brandsel { margin: 0 0 12px; }
.brandsel > .brandsel-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--heading); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.brandsel > .brandsel-sum::-webkit-details-marker { display: none; }
.brandsel-caret { color: var(--muted); transition: transform .15s ease; }
.brandsel[open] .brandsel-caret { transform: rotate(180deg); }
.brandsel .brandbar { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.brandsel .brandtog { width: 100%; justify-content: flex-start; gap: 10px; border-radius: 8px; border-color: transparent; background: transparent; padding: 8px 10px; font-size: 14.5px; }
.brandsel .brandtog::before { display: none; }
.brandsel .brandtog.on { background: var(--surface-alt); color: var(--heading); }
.brandsel .brandtog-ck { width: 17px; height: 17px; border: 1.5px solid var(--border); border-radius: 5px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.brandsel .brandtog.on .brandtog-ck { background: var(--bc, var(--accent)); border-color: var(--bc, var(--accent)); }
.brandsel .brandtog.on .brandtog-ck::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }

/* Marketing calendar — header band + columns (Week / Brand / Scope / Description) */
.mkt-grid { display: grid; grid-template-columns: 92px 132px minmax(110px,1fr) minmax(220px,1.9fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mkt-gh { background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; }
.mkt-gc { padding: 10px 12px; font-size: 14px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.mkt-gwk { font-weight: 800; color: var(--accent-deep); white-space: nowrap; }
.mkt-gbr { font-weight: 700; color: var(--heading); }
.mkt-gsc b { color: var(--heading); font-weight: 700; }
.mkt-gsc .mkt-cat { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.mkt-gde { color: var(--text); line-height: 1.4; }

/* Condensed marketing calendar (single-line items, week printed once as a group header) */
.mkt-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mkt-wk { background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 7px 12px; }
.mkt-wk:not(:first-child) { border-top: 1px solid var(--border); }
.mkt-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-alt); font-size: 14px; line-height: 1.35; }
.mkt-item .mkt-nm { font-weight: 700; color: var(--heading); }
.mkt-item .mkt-cat { font-size: 12px; }
.mkt-item .mkt-br { margin-left: auto; font-weight: 700; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* Condensed marketing calendar — mobile */
.m-mkt-wkh { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); margin: 10px 0 2px; }
.m-mkt-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.35; }
.m-mkt-row .m-mkt-nm { font-weight: 700; color: var(--heading); }
.m-mkt-row .m-mkt-bd2 { margin-left: auto; font-weight: 700; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* Mobile reviews scroller (show a few, scroll for the rest) */
.mob-shell .m-revscroll { max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mob-shell .m-revcount { font-size: 13px; font-weight: 700; color: var(--muted); }

/* Hidden testing sandbox: header tag + top banner */
.sbx-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 800; letter-spacing: .08em; background: #e5485e; color: #fff; vertical-align: middle; }
.sbx-banner { display: flex; align-items: center; gap: 9px; margin: 2px 0 16px; padding: 10px 14px; border: 1px dashed #e5485e; border-radius: 11px; background: var(--surface-alt); color: var(--text); font-size: 14px; }
.sbx-banner svg { flex: none; color: #e5485e; }

/* Ask suggestion chips + full-width mobile question field */
.ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 12px; }
.ask-suggest .ask-sg-lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.ask-suggest .ask-sg-intro { flex-basis: 100%; width: 100%; font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-bottom: 4px; }
.ask-suggest .ask-sg { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ask-suggest .ask-sg:hover { background: var(--accent-soft); border-color: var(--accent); }
.mob-shell .ask-form { display: flex; flex-direction: column; gap: 8px; }
.mob-shell .ask-form .ask-input { width: 100%; box-sizing: border-box; min-height: 54px; }
.mob-shell .ask-form .ask-btn { width: 100%; }

/* Channel-mix quick analysis (on-demand Claude bullets) */
.risk-note { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--muted); }
/* ===== Loyalty fraud-risk table (desktop) ===== */
.lfr { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 14px; }
.lfr-head, .lfr-row { display: grid; grid-template-columns: 22px 1.1fr 1fr 1.2fr 72px 132px 1.7fr; gap: 8px; align-items: center; padding: 9px 12px; }
.lfr-head { background: var(--surface-alt); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.lfr-row { border-bottom: 1px solid var(--border); cursor: pointer; }
.lfr-row:last-child { border-bottom: 0; }
.lfr-row:hover { background: var(--surface-alt); }
.lfr-num { text-align: right; }
.lfr-exp svg { transition: transform .15s ease; color: var(--muted); }
.lfr-row.open .lfr-exp svg { transform: rotate(90deg); }
.lfr-store { font-weight: 700; color: var(--heading); }
.lfr-srv { font-weight: 700; color: var(--accent-deep); }
.lfr-sub { color: var(--muted); font-weight: 500; font-size: 12.5px; margin-left: 3px; }
.lfr-sig { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lfr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.lfr-dot.high { background: var(--accent); }
.lfr-dot.med { background: var(--watch); }
.lfr-dot.low { background: var(--info); }
.lfr-dot.info { background: var(--muted); }
.lfr-badge { font-size: 12.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); }
.lfr-badge.svc { background: var(--ink); color: #fff; border-color: var(--ink); }
.lfr-badge.roc { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft); }
.lfr-badge.em { color: var(--info); }
/* Legend: defines what each screening tag means (collapsible). */
.lfr-legend { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; }
.lfr-legend-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 13.5px; font-weight: 700; color: var(--heading); user-select: none; }
.lfr-legend-sum::-webkit-details-marker { display: none; }
.lfr-legend-sum svg { color: var(--muted); flex: none; }
.lfr-legend[open] .lfr-legend-sum { border-bottom: 1px solid var(--border); }
.lfr-legend-list { margin: 0; padding: 11px 14px 13px; display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 8px 16px; align-items: baseline; }
.lfr-legend-list dt { white-space: nowrap; }
.lfr-legend-list dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
@media (max-width: 640px) {
    .lfr-legend-list { grid-template-columns: 1fr; gap: 3px 0; }
    .lfr-legend-list dd { margin-bottom: 8px; }
}
.lfr-detail { background: var(--bg); border-bottom: 1px solid var(--border); padding: 4px 12px 10px 34px; }
.lfr-detail[hidden] { display: none; }
.lfr-dhead, .lfr-drow { display: grid; grid-template-columns: 104px 110px 78px 92px 1.5fr 92px 1.3fr; /* date col 60->104px: dates now carry the year (2026-09-25) */ gap: 8px; align-items: center; padding: 5px 8px; }
.lfr-dhead { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.lfr-drow { border-top: 1px solid var(--border); font-size: 13px; }
.lfr-drow.roc { background: var(--accent-soft); }
.lfr-drow .rwd { color: var(--accent-deep); font-weight: 700; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
    /* Phones: the 7-column loyalty grids can't fit; keep them intact and let the user swipe
       horizontally instead of collapsing/overlapping. */
    .lfr { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lfr-head, .lfr-row { min-width: 600px; }
    .lfr-detail { min-width: 600px; }
}
.lfr-flags { color: var(--muted); font-size: 13px; }
/* ===== Loyalty fraud cards (mobile) ===== */
.m-lfrow { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin: 0 0 8px; cursor: pointer; }
.m-lf-top { display: flex; align-items: center; gap: 7px; }
.m-lf-srv { font-weight: 800; color: var(--accent-deep); flex: 1 1 auto; }
.m-lf-rk { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.m-lf-store { font-weight: 700; color: var(--heading); margin-top: 2px; }
.m-lf-cust { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.m-lfrow .lfr-sig { margin-top: 2px; }
.m-lfdetail { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; background: var(--surface-alt); }
.m-lfdetail[hidden] { display: none; }
.m-lf-chk { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; }
.m-lf-chk:first-child { border-top: 0; }
.m-lf-chk.roc { background: var(--accent-soft); margin: 0 -12px; padding: 6px 12px; }
.m-lf-chk .m-lf-fl { flex: 1 1 100%; color: var(--muted); font-size: 13px; }
/* FSD dashboard: the "filter to my stores" row (FSD chips below the brand chips) */
.fsdbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.fsdbar-lbl { font-size: 13px; font-weight: 700; color: var(--muted); flex: none; }
.fsdbar-row .brandbar.fsdbar { margin: 0; flex: 1 1 auto; }
.ch-ai-wrap { margin-top: 12px; }
/* reviews: brand chips, then the Ask button right after them, then a short hint; result spans full width below */
.arev-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.arev-controls .brandbar { margin: 0; flex: 0 1 auto; }
.arev-ask-note { font-size: 13px; color: var(--muted); line-height: 1.3; max-width: 200px; }
.arev-controls .ch-ai { flex: 1 1 100%; }
.ch-ai-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--accent-deep); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ch-ai-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.ch-ai-btn .ask-logo-sm { width: 16px; height: 16px; border-radius: 4px; }
/* Slow attention pulse for the weather Ask button (add class ch-ai-flash). */
@keyframes chAiFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); border-color: var(--border); background: var(--surface-alt); }
  50%      { box-shadow: 0 0 0 5px var(--accent-soft); border-color: var(--accent); background: var(--accent-soft); }
}
.ch-ai-btn.ch-ai-flash { animation: chAiFlash 2.6s ease-in-out infinite; }
.ch-ai-btn.ch-ai-flash:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .ch-ai-btn.ch-ai-flash { animation: none; } }
/* Weather insight modal: section headers + divider between region analysis and the location recap. */
.wx-ai-sec { font-weight: 800; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent-deep); margin: 12px 0 6px; }
.wx-ai-sec:first-child { margin-top: 0; }
.wx-ai-hr { border: 0; border-top: 2px solid var(--border); margin: 16px 0 2px; }
.wx-ai-empty { color: var(--muted, #667); font-size: 13.5px; padding: 4px 0; }
.ch-ai-list.wx-ai-recap li { color: var(--watch, #b7791f); }
.ch-ai { position: relative; margin-top: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 30px 10px 14px; font-size: 14px; color: var(--text); }
.ch-ai-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; border-radius: 6px; }
.ch-ai-x:hover { background: var(--border); color: var(--heading); }
.ch-ai-list { margin: 0; padding-left: 18px; }
.ch-ai-list li { font-size: 14px; color: var(--text); line-height: 1.5; margin: 4px 0; }
.mob-shell .ch-ai-wrap { text-align: center; }
.mob-shell .ch-ai { text-align: left; }

/* "New version available" auto-update banner */
.appupd { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 12px 10px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.35); font-size: 14.5px; }
.appupd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appupd-t { font-weight: 700; }
.appupd-sub { font-size: 13px; color: rgba(255,255,255,.78); font-weight: 400; }
.appupd-go { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.appupd-go:hover { filter: brightness(1.08); }
.appupd-x { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 21px; line-height: 1; cursor: pointer; padding: 0 4px; }
.appupd-x:hover { color: #fff; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .appupd { left: 12px; right: 12px; transform: none; bottom: 80px; } }
/* mobile: full popup with backdrop + stacked instructions */
.appupd-back { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.45); }
.appupd.appupd-pop { left: 16px; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 18px 16px; border-radius: 16px; }
.appupd.appupd-pop .appupd-body { flex: 1 1 100%; }
.appupd.appupd-pop .appupd-t { font-size: 17px; }
.appupd.appupd-pop .appupd-sub { font-size: 14px; margin-top: 2px; }
.appupd.appupd-pop .appupd-go { flex: 1 1 auto; padding: 12px 14px; font-size: 16px; }
.appupd.appupd-pop .appupd-x { position: absolute; top: 8px; right: 10px; }
.exec .brow .splits { display: flex; gap: 6px; justify-content: flex-end; font-size: 13px; font-weight: 700; }
.exec .brow .seg { padding: 3px 8px; border-radius: 6px; }
.exec .brow .seg.up { background: rgba(60,199,154,.16); color: var(--info); }
.exec .brow .seg.dn { background: rgba(255,107,110,.16); color: var(--accent-deep); }

/* all stores: rank + brand + name + (Day/WTD/YTD comp) + (LW Txns/Chk/Off-Prem vs PY) */
.exec .exec-stbl .sthead, .exec .exec-stbl .strow { grid-template-columns: 22px minmax(70px,.5fr) minmax(0,1fr) repeat(3, minmax(104px,.74fr)) repeat(3, minmax(80px,.58fr)); }
.exec .stbrand { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* All Stores: center every column (headers + cells) for a uniform look */
.exec .exec-stbl .sthead > span,
.exec .exec-stbl .sthead .h-num,
.exec .exec-stbl .sthead .h-srt { text-align: center; justify-self: center; }
.exec .exec-stbl .strow .strank,
.exec .exec-stbl .strow .stbrand,
.exec .exec-stbl .strow .stname,
.exec .exec-stbl .strow .stcell { text-align: center; }
.exec .stbrand .bdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.exec .exec-stbl .sthead .h-srt { cursor: pointer; user-select: none; }
.exec .exec-stbl .sthead .h-srt.act, .exec .exec-stbl .sthead .h-num.act { color: var(--accent-deep); }
.srt { font-style: normal; font-size: 10px; opacity: .45; margin-left: 3px; }
.exec .exec-stbl .sthead .act .srt { opacity: 1; }

/* larger, more readable fonts in the executive Portfolio + All Stores tables */
.exec .bhead { font-size: 12.5px; }
.exec .brow .bn { font-size: 17px; }
.exec .brow .bn .bu { font-size: 13px; }
.exec .brow .bcell .bv { font-size: 17.5px; }
.exec .brow .bcell .bk { font-size: 13px; }
.exec .brow .splits { font-size: 13px; }
.exec .exec-stbl .sthead { font-size: 13.5px; }
.exec .exec-stbl .strow .strank { font-size: 15px; }
.exec .exec-stbl .strow .stname { font-size: 16.5px; }
.exec .stbrand { font-size: 15px; }
.exec .exec-stbl .stcell .stv { font-size: 13px; color: var(--muted); font-weight: 600; }
.exec .exec-stbl .stcell .sty { font-size: 13.5px; }
.exec .exec-stbl .stcell .stk { font-size: 13.5px; }
/* All Stores: scroll after ~9 rows, sticky clickable header */
.exec .exec-stbl { max-height: 440px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
.exec .exec-stbl .sthead { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.exec .exec-stbl .sthead .h-num { cursor: pointer; user-select: none; }
.exec .exec-stbl .sthead .h-num.act { color: var(--accent-deep); }

/* ===== Top 10 / Bottom 10 — Fiscal YTD YoY tile (module co_top_bottom_yoy, Derek 2026-08-12) =====
   New Company Overview module. Reuses .strow/.stcell/.stnums/.stv/.sty styling; own 5-col grid.
   Scoped under .exec .tb10-stbl so it out-specifies the generic .tile .strow grid. Mobile card
   reflow is inherited for free from the .mob-shell .m-reuse .stbl rules further down. */
.exec .co-tb10 .t-h { margin-bottom: 2px; }
.exec .tb10-sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.exec .tb10-sec.top { color: #1a8f4c; }
.exec .tb10-sec.bot { color: #d23f4a; }
.exec .tb10-sec .pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; color: #fff; letter-spacing: .04em; }
.exec .tb10-sec.top .pill { background: #1a8f4c; }
.exec .tb10-sec.bot .pill { background: #d23f4a; }
.exec .tb10-brandwrap { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.exec .tb10-brandwrap label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.exec select.tb10-brand { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 9px; padding: 7px 30px 7px 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; max-width: 260px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.exec select.tb10-brand:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.exec .tb10-stbl { margin-top: 2px; }
.exec .tb10-stbl .sthead, .exec .tb10-stbl .strow { display: grid; grid-template-columns: 26px minmax(140px,1.4fr) repeat(3, minmax(118px,1fr)); gap: 10px; align-items: center; }
.exec .tb10-stbl .sthead { position: static; padding: 4px 12px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.exec .tb10-stbl .sthead > span { text-align: center; justify-self: center; }
.exec .tb10-stbl .sthead .h-store { text-align: left; justify-self: start; }
.exec .tb10-stbl .strow { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 7px; }
.exec .tb10-stbl .strow .strank { font-size: 15px; font-weight: 800; color: var(--muted); text-align: center; }
.exec .tb10-stbl .strow .stname { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; font-size: 15.5px; font-weight: 600; color: var(--heading); min-width: 0; }
.exec .tb10-stbl .strow .stname .bdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.exec .tb10-stbl .strow .stname .sloc { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 14px; }
.exec .tb10-stbl .stcell { text-align: center; }
.exec .tb10-stbl .stcell .stk { display: none; }
.exec .tb10-stbl .stcell .stnums .stv { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.exec .tb10-stbl .stcell .stnums .sty { display: block; font-size: 13.5px; font-weight: 800; }

/* ===== Channel Mix analytics tile — module channel_mix_brand (Derek 2026-08-12) =====
   Full-width redesign: per-channel net-sales trend cards + 3P platform panel + by-brand bars.
   Row/segment classes (.chrow/.chbar/.seg-*) are the legacy channel-mix styles below; the .chx-*
   classes here are the new analytics layer. */
.exec .chx-tools { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
.exec .chx-tools label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.exec select.chx-brand { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 9px; padding: 8px 32px 8px 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; max-width: 260px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.exec select.chx-brand:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.exec .chx-chans { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.exec .chx-chan .chx-chart svg { max-height: 265px; }
.exec .chx-chan { background: var(--surface-alt); border: 1px solid var(--border); border-top: 3px solid var(--cc, var(--border)); border-radius: 13px; padding: 14px 15px 10px; }
.exec .chx-chan .chx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.exec .chx-chan .chx-name { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.exec .chx-chan .chx-name i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); }
.exec .chx-chan .chx-now { font-size: 27px; font-weight: 800; color: var(--heading); line-height: 1.1; }
.exec .chx-chan .chx-delta { font-size: 12.5px; font-weight: 800; text-align: right; }
.exec .chx-chan .chx-delta .chx-ly { display: block; color: var(--muted); font-weight: 600; font-size: 11px; margin-top: 1px; }
.exec .chx-chan .chx-share { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.exec .chx-chan .chx-share b { color: var(--text); font-weight: 700; }
.exec .chx-chan .chx-chart { margin-top: 8px; }
.exec .chx-chan .chx-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 1px; }
.exec .chx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exec .chx-panel { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 13px; padding: 15px 16px 12px; }
.exec .chx-panel h4 { margin: 0 0 2px; font-size: 14px; color: var(--heading); font-weight: 800; }
.exec .chx-panel .chx-psub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.exec .chx-plrow { margin-bottom: 11px; }
.exec .chx-plrow .chx-plh { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.exec .chx-plrow .chx-plh b { color: var(--heading); font-weight: 700; }
.exec .chx-plrow .chx-plh span { color: var(--muted); }
.exec .chx-pbar { height: 13px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.exec .chx-pbar span { display: block; height: 100%; background: var(--watch); border-radius: 7px; }
.exec .chx-tot { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; font-size: 12px; color: var(--muted); }
.exec .chx-tot b { color: var(--heading); }
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) { .exec .chx-chans { grid-template-columns: 1fr; } .exec .chx-grid { grid-template-columns: 1fr; } }

/* channel mix */
.exec .chrow { margin-bottom: 13px; }
.exec .chrow .chn { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 5px; }
.exec .chrow .chn b { color: var(--heading); font-weight: 700; }
.exec .chrow .chn .chd { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.exec .chbar { display: flex; height: 13px; border-radius: 7px; overflow: hidden; background: var(--surface-alt); }
.exec .chbar span { display: block; height: 100%; }
.exec .chbar-py { height: 8px; opacity: .5; margin-top: 4px; }
.exec .chpy { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.exec .chlegend-note { color: var(--muted); font-style: italic; }
.exec .seg-in { background: var(--info); }
.exec .seg-1p { background: var(--accent); }
.exec .seg-3p { background: var(--watch); }
.exec .chlegend { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.exec .chlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Ask The Scoop (used on all executive surfaces: exec dashboard, drill-downs, mobile) */
.ask-title { display: inline-flex; align-items: center; gap: 9px; }
.ask-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; animation: scoopWobble 1.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .ask-logo { animation: none; } }
.ask-form { display: flex; gap: 10px; align-items: flex-start; }
.ask-input { flex: 1; min-width: 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 11px 12px; font: inherit; font-size: 15px; resize: vertical; }
.ask-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.ask-btn { flex: none; }
.ask-status { margin-top: 12px; color: var(--muted); font-size: 14px; }
.ask-answer { margin-top: 14px; background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; font-size: 15.5px; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
/* "Show SQL & data" is hidden for everyone by default; IT admins reveal it with Shift+F9 (persists per device). */
.ask-sql { margin-top: 12px; display: none; }
body.sql-admin .ask-sql { display: block; }

/* Marketing calendar list ("Coming Up" tile, desktop) */
.mkt-list { display: flex; flex-direction: column; }
.mkt-row { display: grid; grid-template-columns: 100px 116px 1fr; gap: 14px; padding: 11px 2px; border-top: 1px solid var(--border); align-items: start; }
.mkt-row:first-child { border-top: 0; }
.mkt-wk { font-size: 13px; font-weight: 800; color: var(--accent-deep); white-space: nowrap; padding-top: 1px; }
.mkt-brand { font-size: 13.5px; font-weight: 700; color: var(--heading); white-space: nowrap; padding-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.m-mkt-bd { display: block; font-size: 12.5px; font-weight: 700; color: var(--heading); margin-top: 2px; }
.mkt-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mkt-sec { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mkt-cat { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; text-transform: uppercase; letter-spacing: .02em; }
.mkt-desc { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* Marketing calendar (mobile "Coming Up") */
.m-mkt { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.m-mkt-wk { font-size: 12.5px; font-weight: 800; color: var(--accent-deep); }
.m-mkt-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--text); }
.m-mkt-cat { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
.m-mkt-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.ask-sql summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.ask-q { background: var(--ink); color: #d8d0e2; border-radius: 8px; padding: 10px 12px; font-size: 13px; overflow-x: auto; margin: 8px 0; white-space: pre; }
.ask-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.ask-table th, .ask-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.ask-table th { background: var(--surface-alt); color: var(--heading); }

/* Ask conversation thread (memory) */
.ask-thread { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; max-height: 380px; overflow-y: auto; }
.ask-thread:empty { display: none; }
.ask-msg { padding: 10px 13px; border-radius: 12px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; max-width: 92%; }
.ask-user { align-self: flex-end; background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.ask-assistant { align-self: flex-start; background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--text); }
.ask-msg .ask-sql { margin-top: 8px; }
.ask-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ask-clear { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 6px 11px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.ask-clear:hover { border-color: var(--accent); color: var(--accent-deep); }
.ask-actions { margin-top: 8px; }
.ask-dl { background: none; border: 1px solid var(--border); color: var(--accent-deep); border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ask-dl:hover { background: var(--accent-soft); border-color: var(--accent); }

/* brand switcher (executive header) + brand-scoped store table */
.exec .dhu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: normal; }
.exec .dhu-meta { font-size: 13px; color: var(--muted); text-align: right; }
.exec-switch { background: var(--surface-alt); color: var(--heading); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; max-width: 260px; }
.exec .exec-switch:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.exec .bstbl { max-height: 460px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
.exec .bstbl .sthead { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.exec .bstbl .sthead, .exec .bstbl .strow { grid-template-columns: 22px minmax(0,1fr) repeat(3, minmax(74px,.5fr)); }
.exec .bstbl .sthead .h-num { cursor: pointer; user-select: none; }
.exec .bstbl .sthead .h-num.act { color: var(--accent-deep); }

@media (max-width: 820px) {
    .exec .bento { grid-template-columns: 1fr; }
    .exec .kpi3 { grid-template-columns: 1fr; }
    .exec .bhead { display: none; }
    .exec .brow { display: block; }
    .exec .brow .bn { margin-bottom: 8px; }
    .exec .brow .bcell { display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 4px 0; border-top: 1px dashed var(--border); }
    .exec .brow .bcell .bk { display: block; }
    .exec .brow .splits { justify-content: flex-start; margin-top: 8px; }
}

/* ===========================================================
   Smallgroup dashboard — calmer deep-navy skin (Recipe Management look).
   Scoped to body.dm-smallgroup so it only affects smallgroup dashboards.
   Re-points the palette tokens (kills the Friendly's red everywhere it is
   variable-driven: tile borders, tab/pill accents, down-deltas, alerts).
   =========================================================== */
body.dm-smallgroup {
  --ink:         #0d1630;
  --header-text: #eaf0fb;
  --heading:     #f2f6ff;
  --text:        #e5ecfa;
  --bg:          #0b1226;
  --surface:     #14203d;
  --surface-alt: #1b2a49;
  --border:      #29395b;
  --muted:       #93a2c6;
  --accent:      #5b93d6;   /* was red — now calm blue */
  --accent-deep: #82b1ec;
  --accent-soft: #182742;
  --mint:        #4cd0aa;
  --info:        #46c79a;
  --watch:       #d6a23d;
  --alert:       #6f9bd6;   /* alerts no longer red */
  --shadow:      0 1px 2px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.55);
}
/* LIGHT-mode palette for the same skin (theme toggle restored 2026-08-06): same calm-blue
   identity, light surfaces. The header keeps its navy band, so --header-text stays light. */
html[data-theme="light"] body.dm-smallgroup {
  --ink:         #16233f;   /* stays DARK in both themes — it's the band color (table headers, totals, header bar); light text sits on it */
  --header-text: #eaf0fb;
  --heading:     #14213c;
  --text:        #243452;
  --bg:          #eef3fb;
  --surface:     #ffffff;
  --surface-alt: #f3f7fd;
  --border:      #c9d6ea;
  --muted:       #5c6f93;
  --accent:      #2f6cb8;
  --accent-deep: #1f4f8f;
  --accent-soft: #e3edf9;
  --mint:        #1fa37e;
  --info:        #178a63;
  --watch:       #a97b17;
  --alert:       #3f74b5;
  --shadow:      0 1px 2px rgba(20,40,80,.10), 0 12px 30px rgba(20,40,80,.12);
}
/* thinner, calmer card outline instead of the bold 3px accent border */
body.dm-smallgroup .tile { border-width: 1px; }
/* recolor any hardcoded red down-indicators to the blue family */
body.dm-smallgroup .seg.dn,
body.dm-smallgroup .m-splits .seg.dn,
body.dm-smallgroup .exec .brow .seg.dn { background: rgba(91,147,214,.16); color: var(--accent-deep); }
/* neutralize the few hardcoded reds (sandbox tag/banner, mobile NEW badge) */
body.dm-smallgroup .sbx-tag,
body.dm-smallgroup .tab-new { background: var(--accent); }
body.dm-smallgroup .sbx-banner { border-color: var(--accent); }
body.dm-smallgroup .sbx-banner svg { color: var(--accent); }
/* marbled page background (self-contained, no image). The theme toggle is back on the new
   design (Derek 2026-08-06), so the marble has TWO variants: the pronounced deep-navy for dark
   mode and a soft light-blue marble for light mode. */
body.dm-smallgroup,
html[data-theme="dark"] body.dm-smallgroup {
  background-color: #060b16;
  background-image:
    radial-gradient(70% 55% at 20% 25%, rgba(64,104,176,.60), rgba(8,14,30,0) 55%),
    radial-gradient(60% 50% at 80% 20%, rgba(44,80,150,.55), rgba(8,14,30,0) 55%),
    radial-gradient(75% 65% at 65% 80%, rgba(30,60,124,.62), rgba(6,10,22,0) 58%),
    radial-gradient(55% 50% at 30% 82%, rgba(70,116,190,.42), rgba(6,10,22,0) 55%),
    radial-gradient(50% 45% at 92% 62%, rgba(20,42,90,.55), rgba(6,10,22,0) 55%),
    radial-gradient(40% 38% at 48% 45%, rgba(90,140,210,.28), rgba(6,10,22,0) 60%),
    radial-gradient(120% 120% at 50% 50%, rgba(10,18,40,.25), rgba(3,6,14,.88) 85%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
html[data-theme="light"] body.dm-smallgroup {
  background-color: #e8eef8;
  background-image:
    radial-gradient(70% 55% at 20% 25%, rgba(168,196,236,.65), rgba(232,238,248,0) 55%),
    radial-gradient(60% 50% at 80% 20%, rgba(146,178,224,.55), rgba(232,238,248,0) 55%),
    radial-gradient(75% 65% at 65% 80%, rgba(120,156,210,.50), rgba(232,238,248,0) 58%),
    radial-gradient(55% 50% at 30% 82%, rgba(184,208,240,.55), rgba(232,238,248,0) 55%),
    radial-gradient(50% 45% at 92% 62%, rgba(150,180,222,.45), rgba(232,238,248,0) 55%),
    radial-gradient(40% 38% at 48% 45%, rgba(255,255,255,.55), rgba(232,238,248,0) 60%),
    radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,.20), rgba(206,220,240,.85) 85%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* header + footer share one coordinated shade per theme so they read as the same surface */
body.dm-smallgroup .topbar,
body.dm-smallgroup .site-footer { background: linear-gradient(90deg,#0c1730,#12203c); }
html[data-theme="light"] body.dm-smallgroup .topbar,
html[data-theme="light"] body.dm-smallgroup .site-footer { background: linear-gradient(90deg,#16233f,#1d2c4c); }
/* header ACTION buttons (Other Dashboards / Refresh / Theme / Sign out) match the
   Where-To-Today pill style at a SMALLER visual weight — the Where-To-Today pill and the
   DO / Director selector stay the dominant elements (Derek 2026-08-06). */
body.dm-smallgroup .topbar .bar-actions .exec-switch,
body.dm-smallgroup .topbar .bar-actions .icon-btn,
body.dm-smallgroup .topbar .bar-actions .signout {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
body.dm-smallgroup .topbar .bar-actions .exec-switch {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%277%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23999%27 stroke-width=%272%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
body.dm-smallgroup .topbar .bar-actions .exec-switch:hover,
body.dm-smallgroup .topbar .bar-actions .icon-btn:hover,
body.dm-smallgroup .topbar .bar-actions .signout:hover {
  background-color: var(--accent); color: #fff;
}
body.dm-smallgroup .topbar .bar-actions .exec-switch option { color: #1f2430; background: #fff; }


/* ===== EXEC phase: Brand Momentum cards + report-link chips ==========================
   Lifted from Executive.cshtml's inline <style> into app.css so the CONFIG-DRIVEN ENGINE
   (Index.cshtml) can render _CompanyOverviewTile / _ExecStorePerfTile / _ExecReviewsTile.
   Not scoped under .exec on purpose — the engine's tiles are not inside an .exec main.
   Executive.cshtml keeps its identical inline copy (harmless duplicate; same values), so
   the classic page is byte-unchanged. Palette vars only, per the band-color contract. */
.sbx-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sbx-bcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .16s}
.sbx-bcard:hover{transform:translateY(-3px)}
.sbx-cap{height:6px;background:var(--bc)}
.sbx-bd{padding:15px 16px}
.sbx-bhead{display:flex;align-items:center;gap:11px}
.sbx-blogo{position:relative;width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--bc) 16%,var(--surface));color:var(--bc);font-weight:800;font-size:19px}
.sbx-blogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.sbx-bname{font-weight:800;font-size:16px;color:var(--heading)}
.sbx-bstores{font-size:11px;color:var(--muted);margin-top:1px}
.sbx-bcomp{font-weight:800;font-size:28px;margin:13px 0 2px}.sbx-bcomp span{font-size:11px;color:var(--muted);font-weight:600;margin-left:6px}
.sbx-bcomp.u{color:#13935f}.sbx-bcomp.d{color:#d6455d}
.sbx-breadth{height:9px;border-radius:6px;overflow:hidden;display:flex;background:rgba(214,69,93,.18);margin-top:6px}
.sbx-breadth i{display:block;height:100%}.sbx-breadth .u{background:#13935f}.sbx-breadth .d{background:#d6455d;opacity:.5}
.sbx-bfoot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:11px;color:var(--muted)}
.sbx-bfoot b.u{color:#13935f}.sbx-bfoot b.d{color:#d6455d}
@media(max-width:980px){.sbx-brands{grid-template-columns:1fr 1fr}}
.sbx-rpt{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 8px 4px 11px;font-size:11px;background:#f3edfc;border:1px solid #ddccf2;border-radius:9px;box-shadow:0 1px 2px rgba(40,20,70,.07)}
.sbx-rpt .lbl{font-weight:800;letter-spacing:.02em;color:#5b4080;text-transform:none}
.sbx-rpt a{font-weight:700;text-decoration:none;color:#fff;background:#7A3CA6;border:1px solid #7A3CA6;border-radius:6px;padding:2px 10px}
/* The exec store table + channel-mix rows are scoped under .exec in app.css; the engine's
   partials supply that ancestor via <div class="exec" style="display:contents">. */

/* ===== Mobile orientation gate + landscape shell + header chrome (Derek 2026-08-11, rev b) =====
   On phones The Scoop shows only in LANDSCAPE: portrait is blocked by the rotate gate; landscape
   renders the mobile shell. The whole max-width:760px mobile skin is ALSO keyed to landscape phones
   (short viewport) via the combined media queries, so the header, fixed bottom bar and panes all
   render in landscape. Per-visit "Desktop view" opt-out = body.scoop-desktop. Portrait BLOCK gated on
   body.scoop-rot (added by /js/mobile-orient.js) so a JS failure degrades to shell-shown, not blank. */

.scoop-rot-gate { display: none; }
.scoop-view-return { display: none; }

/* Phone in PORTRAIT: block the dashboard behind the rotate gate */
@media (max-width: 760px) and (orientation: portrait) {
    .has-mob.scoop-rot:not(.scoop-desktop) .mob-shell { display: none !important; }
    .has-mob.scoop-rot:not(.scoop-desktop) .scoop-rot-gate { display: flex; }
}

/* The rotate-gate overlay */
.scoop-rot-gate {
    position: fixed; inset: 0; z-index: 9998;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px 26px;
    background: radial-gradient(120% 90% at 50% 15%, var(--surface, #12203a) 0%, var(--bg, #0b1526) 72%);
    color: var(--text, #e8eefb);
    padding-top: calc(32px + env(safe-area-inset-top));
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.scoop-rot-gate .srg-logo { font-size: 16px; font-weight: 800; color: var(--heading, #f4f8ff); letter-spacing: .02em; margin-bottom: 30px; }
.scoop-rot-gate .srg-logo span { color: var(--accent, #d85a30); }
.scoop-rot-gate .srg-icon { width: 74px; height: 74px; border: 3px solid var(--accent, #d85a30); border-radius: 16px; position: relative; margin-bottom: 24px; animation: srg-tilt 2.4s ease-in-out infinite; }
.scoop-rot-gate .srg-icon::after { content: ""; position: absolute; right: -14px; bottom: 12px; width: 26px; height: 26px; border: 3px solid var(--accent, #d85a30); border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-45deg); }
@keyframes srg-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
.scoop-rot-gate h2 { font-size: 18px; color: var(--heading, #f4f8ff); margin: 0 0 8px; font-weight: 800; }
.scoop-rot-gate p { font-size: 13.5px; color: var(--muted, #9db0d0); margin: 0 0 22px; max-width: 260px; line-height: 1.5; }
.scoop-rot-gate .srg-desk { font: inherit; font-size: 13px; font-weight: 800; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 11px 18px; cursor: pointer; }
.scoop-rot-gate .srg-desk:active { background: rgba(255,255,255,.06); }

/* Landscape phone: tighten the shell for the short viewport + seat the chrome above the bottom bar */
@media (orientation: landscape) and (max-height: 500px) {
    .mob-shell .m-hd { padding-top: 10px; padding-bottom: 10px; }
    /* Bottom bar: add the safe-area inset ON TOP of the 52px content height (box-sizing is
       border-box globally, so a bare height:52px + the base padding-bottom:env() squeezed the
       icons under the home indicator and clipped them). */
    .mob-shell .m-tabbar { height: calc(52px + env(safe-area-inset-bottom)); }
    .mob-shell .m-tab { padding: 0 8px; font-size: 10px; gap: 2px; }
    .mob-shell .m-tab svg { width: 21px; height: 21px; }
    .has-mob:not(.scoop-desktop) .mob-shell { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .scoop-fab-wrap { bottom: calc(64px + env(safe-area-inset-bottom)) !important; right: 16px !important; }
    /* Section menu (the slide-up "Choose a … view" sheet): its closed state uses
       transform:translateY(110%), which is 110% of the sheet's OWN height. In a short landscape
       viewport that's not enough to clear its top offset, so a strip of the menu stayed visible at
       the bottom after picking an item ("menu doesn't disappear"). Push it fully off-screen using
       viewport height, and hide it outright when closed so no strip can ever show. */
    .mob-shell .m-jump-sheet:not(.open) { transform: translateY(120vh) !important; visibility: hidden; }
    .mob-shell .m-jump-sheet.open { visibility: visible; }
}

/* Header action row: keep every control on ONE line, same height as the round icons */
.mob-shell .m-hact { align-items: center; flex-wrap: nowrap; gap: 8px; }

/* Scoop mark + wordmark, 2026-09-24. .m-hd is justify-content:space-between, so the mark and the
   title must share ONE flex child or they end up at opposite ends of the header. */
.mob-shell .m-hd .m-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mob-shell .m-hd .m-mark {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.22);
}

/* "Other Dashboards" as an apps-grid icon, 2026-09-24. The native <select> is kept and stretched
   transparently across the button so the OS picker still opens — only the visual is replaced.
   The !important on height/margin below overrides the .m-hact .m-switch sizing rule, which assumes
   the select is a visible inline control rather than an invisible hit target. */
.mob-shell .m-hact .m-ib-apps { position: relative; overflow: hidden; }
.mob-shell .m-hact .m-ib-apps select,
.mob-shell .m-hact .m-ib-apps .m-switch {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0; border: 0; border-radius: 50%;
    opacity: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
    flex-basis: auto !important; max-width: none;
}

/* Notifications bell in the MOBILE header (2026-09-24). The desktop .alert-bell sits on white;
   this one sits on --ink, so it uses a translucent accent fill with an inset ring rather than a
   solid border and outer glow. .calm = nothing to report, matching the desktop convention.
   position:relative is LOAD-BEARING — .mob-shell .m-ib does not set it, and the badge below is
   absolutely positioned, so without it the count would anchor to the nearest positioned ancestor
   and land somewhere else entirely. */
.mob-shell .m-hact .m-ib-bell {
    position: relative;
    background: rgba(229,72,94,.24);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
.mob-shell .m-hact .m-ib-bell.calm {
    background: rgba(229,72,94,.14);
    box-shadow: inset 0 0 0 1.5px rgba(229,72,94,.55);
}
.mob-shell .m-hact .m-bell-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #b8860b; color: #fff;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--ink);
}

/* Uniform 38px height across the relocated controls so they sit inline with the .m-ib icons */
.mob-shell .m-hact .scoop-view-toggle,
.mob-shell .m-hact .m-switch {
    height: 38px !important; margin: 0 !important; box-sizing: border-box;
    display: inline-flex; align-items: center;
}

/* Full Site button — moved into the header action row by mobile-orient.js (was a floating pill) */
.mob-shell .m-hact .scoop-view-toggle {
    gap: 6px; padding: 0 14px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.mob-shell .m-hact .scoop-view-toggle:active { background: rgba(255,255,255,.06); }

/* "Mobile view" return control — floating, ONLY visible when the user forced desktop view
   (the mob-shell header is hidden in that mode, so the return control cannot live in it) */
.scoop-view-return {
    align-items: center; gap: 6px;
    position: fixed; right: 14px; z-index: 9999;
    bottom: calc(14px + env(safe-area-inset-bottom));
    font: inherit; font-size: 12px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent, #3f6fb0), #2b5a92);
    border: 0; border-radius: 999px; padding: 9px 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,.5); cursor: pointer;
}
body.scoop-desktop .scoop-view-return { display: inline-flex; }

/* "Other" <select> (renamed from "Other Dashboards" by JS), relocated into the header row:
   compact, auto width, not the full-width row the base rule gives it. !important beats the
   base `.mob-shell .m-switch { width:100%; flex-basis:100% }`. */
.mob-shell .m-hact .m-switch {
    flex: 0 0 auto !important; width: auto !important; max-width: 168px !important;
    padding: 0 30px 0 12px !important; border-radius: 10px;
    font-size: 12.5px; line-height: 1;
}

/* Remove the store service-status row on mobile — all mobile users (Derek 2026-08-11) */
.mob-shell .svc-ok, .mob-shell .svc-alert { display: none !important; }

/* Title-over-description on mobile tiles: stack the .t-h title with its .t-sub below,
   smaller + muted (Derek: "description is always below and smaller font") */
.mob-shell .m-reuse .t-h { flex-direction: column; align-items: flex-start; gap: 2px; }
.mob-shell .m-reuse .t-h .t-sub { display: block; font-size: 11.5px; font-weight: 600; opacity: .85; margin: 0; }

/* ===== iOS text autosizing fix (Derek 2026-08-11) =====
   Real iOS Safari inflates text it judges to be in wide blocks ("text autosizing" /
   font-boosting) — aggressive in landscape — while desktop Chrome device emulation does NOT,
   so the dashboard looked correct in F12 but oversized on the actual iPhone. Pinning to 100%
   tells Safari not to inflate, so the phone matches the CSS (and the emulator). Harmless on
   desktop; does not affect user pinch-zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Scoop logo dropped inside the rotate-gate box (Derek 2026-08-11) */
.scoop-rot-gate .srg-icon .srg-logo-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 12px;
}

/* ===== Mobile control-bar density (Derek 2026-08-11) — reclaim vertical space on tab control bars =====
   Applies to every reused desktop tile on the mobile shell: drop the tile description, keep the
   header on ONE line; plus a compact pass on the Store Report Builder control row. */

/* Headers single-line; descriptions dropped on mobile (supersedes the earlier "stack below" rule).
   NOT scoped to .m-reuse: section-picked tiles land in #mp-reuse, which doesn't reliably carry the
   .m-reuse class, so they were rendering at DESKTOP header size (wrapping, description showing).
   Target every tile header in the shell; !important beats the inline .m-reuse .t-h{flex-wrap:wrap}. */
.mob-shell .t-h { font-size: 16px; line-height: 1.25; flex-wrap: nowrap !important; white-space: nowrap !important; align-items: center; gap: 8px; }
.mob-shell .t-h .t-sub { display: none !important; }

/* Store Report Builder: full-width store row, compact From/To, icon-only actions, no helper note */
.mob-shell .sl-hint { display: none !important; }
/* Match the shared _ReportControlBar (.rcb) card so the Store Report Builder's filters look like
   the Discount Detail: surface-colored rounded card around the controls (Derek 2026-08-11). */
.mob-shell .sl-ctl { flex-wrap: wrap; gap: 8px; align-items: flex-end;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.mob-shell .sl-fld.sl-grow { flex: 1 1 100%; min-width: 0; }
.mob-shell .sl-fld.sl-sm { flex: 1 1 120px; }
.mob-shell .sl-fld label { font-size: 10px; }
.mob-shell .sl-go, .mob-shell .sl-dl, .mob-shell .sl-email {
    font-size: 0 !important; gap: 0 !important; padding: 11px 13px !important;
}
.mob-shell .sl-go svg, .mob-shell .sl-dl svg, .mob-shell .sl-email svg {
    width: 20px !important; height: 20px !important;
}

/* ===== Splash screen — condense to fit a short (landscape phone) viewport (Derek 2026-08-11) =====
   The splash stacks top brand-row + center content + bottom brand-row; on a short viewport that
   column is taller than the screen, so the brand logos spill off the top and bottom. Shrink the
   logo, type, brand rows and margins so the whole thing fits. */
@media (max-height: 540px) {
    .splash-inner { padding: 8px !important; }
    .splash-logo { width: 60px !important; height: 60px !important; border-radius: 15px !important; }
    .splash-title { font-size: 1.1rem !important; margin-top: 8px !important; }
    .splash-sub { font-size: .8rem !important; margin-top: 3px !important; }
    .splash-bar { margin-top: 9px !important; }
    .splash-brands.top { margin-bottom: 8px !important; }
    .splash-brands.bot { margin-top: 8px !important; }
    .splash-brands .sbl { height: 26px !important; }
    .splash-brands .sbl.sbl-big { height: 32px !important; }
}

/* ===== Store-perf / exec-stbl tables — force the card reflow on the mobile shell (Derek 2026-08-11) =====
   The desktop grid (.tile .strow{display:grid} + the 9-col .exec .exec-stbl template) out-specifies
   the base mobile reflow, so on a phone the columns collided and store names overlapped the values.
   These .mob-shell .m-reuse .stbl selectors out-rank the desktop grid and restore the stacked card. */
.mob-shell .m-reuse .stbl { max-height: none !important; overflow: visible !important; }
.mob-shell .m-reuse .stbl .sthead { display: none !important; }
.mob-shell .m-reuse .stbl .strow { display: block !important; }
.mob-shell .m-reuse .stbl .strow .strank,
.mob-shell .m-reuse .stbl .strow .stbrand { display: inline-flex !important; align-items: center; vertical-align: middle; margin-right: 8px; text-align: left !important; justify-self: start !important; }
.mob-shell .m-reuse .stbl .strow .stname { display: block !important; white-space: normal !important; text-align: left !important; margin: 2px 0 6px; }
.mob-shell .m-reuse .stbl .strow .stcell { display: flex !important; justify-content: space-between; align-items: baseline; text-align: left !important; padding: 5px 0; border-top: 1px dashed var(--border); }
.mob-shell .m-reuse .stbl .strow .stcell .stk { display: inline !important; font-size: 13px; color: var(--muted); }
.mob-shell .m-reuse .stbl .strow .stcell .stnums .stv { display: inline !important; font-size: 14px; }
.mob-shell .m-reuse .stbl .strow .stcell .stnums .sty { display: inline !important; margin-left: 8px; }

/* ===========================================================================================
   SITE BANNER — the strip beneath the header on every dashboard (2026-08-25).
   Injected by wwwroot/js/version-check.js; content comes from /Reports/BannerState. No view
   renders it, so these rules are the whole visual contract.

   CRITICAL IS A FILLED BAND AND WARN AN OUTLINED ONE ON PURPOSE. The app's status red and amber
   (#ff6b6b / #d6a23d) sit at deltaE 5.4 under deuteranopia — measured during the Revenue per
   Labor Hour work — so level has to be readable from SHAPE and icon with colour removed. Do not
   "harmonise" these two into one treatment.

   Colours are literal rather than token-driven: --accent is red on Friendly's scopes and blue on
   the New Scoop skin, so a token-built alert band would be invisible against one of them.
   =========================================================================================== */
.sbar { display: flex; align-items: center; gap: 14px; padding: 13px 22px; font-size: 14.2px;
        font-weight: 600; line-height: 1.35; }
.sbar .sbar-ic { display: inline-flex; flex: none; }
.sbar .sbar-ic svg { width: 22px; height: 22px; display: block; }
.sbar .sbar-txt { flex: 1; min-width: 0; }
.sbar .sbar-t { font-weight: 800; letter-spacing: .01em; margin-right: 6px; }
.sbar .sbar-m { font-weight: 600; opacity: .94; }
.sbar .sbar-go { appearance: none; border: 0; border-radius: 999px; padding: 8px 16px; font: inherit;
                 font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; flex: none; }
.sbar .sbar-x { appearance: none; background: transparent; border: 0; color: inherit; font-size: 22px;
                line-height: 1; cursor: pointer; opacity: .7; padding: 0 4px; flex: none; }
.sbar .sbar-x:hover { opacity: 1; }

/* CRITICAL — filled, white on deep red, no dismiss. */
.sbar-crit { background: linear-gradient(90deg, #8d1c26, #c4262f); color: #fff;
             box-shadow: 0 6px 22px rgba(141, 28, 38, .38); }
.sbar-crit .sbar-go { background: #fff; color: #8d1c26; }
/* WARN — outlined amber. */
.sbar-warn { background: rgba(214, 162, 61, .16); color: #8a5e10;
             border-top: 1px solid rgba(214, 162, 61, .55); border-bottom: 1px solid rgba(214, 162, 61, .55); }
.sbar-warn .sbar-go { background: #d6a23d; color: #241a05; }
/* INFO — outlined blue. */
.sbar-info { background: rgba(47, 108, 184, .13); color: #1f4f8f;
             border-top: 1px solid rgba(47, 108, 184, .45); border-bottom: 1px solid rgba(47, 108, 184, .45); }
.sbar-info .sbar-go { background: #2f6cb8; color: #fff; }

/* Dark mode: the outlined bands need their text lifted off the dark surface. The filled crit band
   is already white-on-red and stays exactly as it is in both themes. */
[data-theme="dark"] .sbar-warn { color: #e6b450; background: rgba(230, 180, 80, .12);
                                 border-top-color: rgba(230, 180, 80, .35); border-bottom-color: rgba(230, 180, 80, .35); }
[data-theme="dark"] .sbar-info { color: #82b1ec; background: rgba(91, 147, 214, .14);
                                 border-top-color: rgba(91, 147, 214, .45); border-bottom-color: rgba(91, 147, 214, .45); }

/* Phones: the message wraps under the icon and the buttons drop to their own row, so a long
   stale-data sentence never squeezes "Check again" off the screen. */
@media (max-width: 760px) {
    .sbar { flex-wrap: wrap; gap: 9px 12px; padding: 11px 14px; font-size: 13.2px; }
    .sbar .sbar-txt { flex: 1 1 100%; order: 2; }
    .sbar .sbar-ic { order: 1; }
    .sbar .sbar-x { order: 1; margin-left: auto; }
    .sbar .sbar-go { order: 3; }
    .sbar .sbar-t { display: block; margin-right: 0; }
}

/* While a CRITICAL site banner is up, the version / new-data popups are hidden rather than removed:
   both of those blocks latch a "shown" flag in their own closure and check for an existing .appupd
   before drawing, so deleting their node would silence them for the life of the page — including the
   "new sales data is available" notice that says the missing load finally landed. */
body.sbar-crit-on .appupd,
body.sbar-crit-on .appupd-back { display: none !important; }


/* ===== HEADER DE-CROWD + STORE ROLODEX =============================================
   Derek, 2026-08-27: "appears to be crowded. should we make the home just an icon and
   hover over name, refresh the same, light/dark mode the same. then the new icon for
   rolodex with hover over name, notifications with hover over name. sign out moved to
   far right?" — then: "just need whatever filters and buttons to be single line to
   maximize screen space."

   MEASURED, NOT GUESSED. The labelled strip was 650px wide and 50px tall; this takes it
   to 493px and 38px while ADDING a button. Combined with the pill-row change in
   Index.cshtml the group header goes 158px -> 68px, which is ~90px of vertical space
   returned on every board.

   ALL SEVEN VIEWS THAT CARRY THIS HEADER SHARE IT — the four dashboards plus Location
   Information, Analytics and Browse. Every .icon-btn.labeled in all of them already
   carries both an <svg> and a correct aria-label (verified one by one), which is what
   makes a pure-CSS conversion possible: no markup change, so the frozen classic
   fallbacks stay byte-identical.
   ================================================================================== */

/* --- 1. the bar itself, and the brand block, smaller -------------------------------
   Buys height as much as width. The wordmark is still the largest type in the bar.
   These are the exact values the single-line fit was measured with — 14px/24px padding
   and a 16px gap were the originals; changing them without re-measuring moves the
   1150px wrap breakpoint in Index.cshtml. */
.topbar { padding: 10px 20px; gap: 14px; }
.topbar .brand { gap: 11px; min-width: 0; }
.topbar .brand-mark { width: 48px; height: 48px; border-radius: 11px; }
.topbar .brand-name { font-size: 21px; line-height: 1.12; white-space: nowrap; }
/* The group / store name. Ellipsis is a LAST RESORT for a very long name in a very
   narrow window — it does not truncate at 1280px and up with the names in production. */
.topbar .brand-scope { font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 2. collapse the labelled buttons to icons -------------------------------------
   WHY font-size:0 AND NOT A MARKUP CHANGE: the labels ("Home", "Refresh", "Dashboard")
   are BARE TEXT NODES inside the anchor, not spans, so there is nothing for CSS to
   target. Zeroing the font size collapses them — and the theme toggle's .t-light /
   .t-dark spans with them — while every SVG is untouched because each is sized by its
   own width/height attributes. The aria-label is what screen readers use and it
   overrides inner text anyway, so nothing is lost by hiding it visually.

   SPECIFICITY: `body .topbar` is deliberate. The dm-smallgroup pill rule above is
   `body.dm-smallgroup .topbar .bar-actions .icon-btn` (four classes + an element), so a
   plain `.bar-actions .icon-btn.labeled` would lose on padding. This matches it and,
   being later in the file, wins — rather than reaching for !important. */
body .topbar .bar-actions .icon-btn.labeled {
  position: relative;                 /* the tooltip's positioning parent */
  width: 36px; height: 36px; padding: 0;
  font-size: 0; gap: 0;
  justify-content: center; border-radius: 50%;
}
body .topbar .bar-actions .icon-btn.labeled svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* .t-light / .t-dark carry their OWN gap:7px. With the label text zeroed that gap
   survives as phantom space and pushes the sun/moon 3.5px left of centre — measured in
   headless Chromium, invisible in a screenshot. */
body .topbar .bar-actions .icon-btn.labeled .t-light,
body .topbar .bar-actions .icon-btn.labeled .t-dark { gap: 0; }

/* --- 3. the hover name -------------------------------------------------------------
   Driven off the aria-label that is ALREADY on every one of these buttons, so there is
   no new attribute to add and it stays right when the label is dynamic — on the group
   board the Home button's label reads "Executive" for an exec-scoped viewer, and the
   tooltip follows without anyone maintaining a second copy of the word.

   The bell's own title="Notifications" is removed in the four dashboard views in this
   same batch; a native title plus this would show two tooltips. */
body .topbar .bar-actions .icon-btn.labeled[aria-label]::after,
body .topbar .bar-actions .rolo-btn[aria-label]::after,
body .topbar .bar-actions .alert-bell[aria-label]::after {
  content: attr(aria-label);
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-3px);
  background: var(--ink, #0d1630); color: #eaf0fb;
  border: 1px solid var(--border, #29395b);
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; z-index: 60;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
body .topbar .bar-actions .icon-btn.labeled[aria-label]:hover::after,
body .topbar .bar-actions .icon-btn.labeled[aria-label]:focus-visible::after,
body .topbar .bar-actions .rolo-btn[aria-label]:hover::after,
body .topbar .bar-actions .rolo-btn[aria-label]:focus-visible::after,
body .topbar .bar-actions .alert-bell[aria-label]:hover::after,
body .topbar .bar-actions .alert-bell[aria-label]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body .topbar .bar-actions .icon-btn.labeled[aria-label]::after,
  body .topbar .bar-actions .rolo-btn[aria-label]::after,
  body .topbar .bar-actions .alert-bell[aria-label]::after { transition: none; transform: translateX(-50%); }
}

/* --- 4. Sign out to the far right --------------------------------------------------
   The bell sits AFTER Sign out in the DOM in every view. `order` moves it visually
   without touching markup in any of them, so no frozen view has to be edited to get
   the layout Derek asked for. */
body .topbar .bar-actions .signout { order: 99; margin-left: 14px; }

/* --- 5. the Rolodex button ---------------------------------------------------------
   Same circle as the rest of the strip, accent-filled so it reads as an ACTION rather
   than a nav key — the same way the bell is distinguished today. */
.topbar .bar-actions .rolo-btn {
  position: relative; flex: 0 0 auto; padding: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent); background: var(--accent-soft, rgba(91,147,214,.12));
  color: var(--accent-deep); cursor: pointer; text-decoration: none;
  /* It is a real <button>, not an anchor with href="#" — there is no standalone Rolodex page
     for an href to point at, and a fake one would be a dead link with JS off. */
  appearance: none; -webkit-appearance: none; font: inherit; line-height: 1;
}
.topbar .bar-actions .rolo-btn:hover { background: var(--accent); color: #fff; }
.topbar .bar-actions .rolo-btn svg { width: 18px; height: 18px; }
.topbar .bar-actions .rolo-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* --- 6. the bell, matched to the strip ---------------------------------------------
   50px rounded square -> 36px circle. The amber count badge is what makes the bell
   findable, and it is untouched — the extra 14px of chrome was not doing that work. */
.topbar .bar-actions .alert-bell {
  width: 36px; height: 36px; border-radius: 50%;
  margin-left: 0; box-shadow: none;
}
.topbar .bar-actions .alert-bell svg { width: 18px; height: 18px; }
.topbar .bar-actions .alert-bell .alert-bell-badge {
  top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px;
}
/* ===== end header de-crowd ========================================================= */


/* ===== QUICK STORE LOOKUP on mobile ================================================
   Derek 2026-08-27, marked on a screenshot of the portrait rotate gate. Two placements,
   both injected by wwwroot/js/mobile-orient.js (which already owns the mobile header's
   chrome), so no Razor view changes for either.
   ================================================================================== */

/* --- 1. on the rotate gate, under "View full site instead" -------------------------
   Secondary to the rotate message on purpose — outlined in accent rather than filled,
   so it reads as an available action without competing with the instruction. 44px tall,
   which is the minimum comfortable touch target. */
.scoop-rot-gate .srg-rolo {
  margin-top: 12px; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--accent-deep); background: var(--accent-soft, rgba(91,147,214,.12));
  border: 1.5px solid var(--accent); border-radius: 10px; padding: 11px 18px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.scoop-rot-gate .srg-rolo:active { background: rgba(91,147,214,.28); }
.scoop-rot-gate .srg-rolo svg { width: 16px; height: 16px; flex: 0 0 auto; }
.scoop-rot-gate .srg-hint {
  font-size: 11.5px; color: var(--muted); margin: 10px 0 0; max-width: 250px; line-height: 1.45;
}

/* --- 2. THE Z-INDEX FIX, and why it is scoped this tightly ------------------------
   The rotate gate is z-index:9998, and the Rolodex overlay ships at 1000 — so opened
   FROM the gate it would render behind it. But app.css also puts the sign-in splash,
   the "new version available" banner and the "Mobile view" return control at 9999, and
   the Rolodex has no business outranking any of those in normal use.

   So the overlay is lifted above the gate ONLY under the same conditions the gate
   itself appears — the identical media query to the portrait-block rule above. On
   desktop, and on a phone in landscape, it stays at 1000 exactly as it ships. */
@media (max-width: 760px) and (orientation: portrait) {
  .has-mob.scoop-rot:not(.scoop-desktop) .rolo-overlay { z-index: 10000; }
}

/* --- 3. in the landscape mobile header, beside Refresh / theme / Sign out ----------
   Accent-filled among the plain white-on-navy nav icons, the same way the desktop strip
   distinguishes this button from Home and Refresh. */
.mob-shell .m-hact .m-ib.m-ib-rolo {
  background: var(--accent-soft, rgba(91,147,214,.12));
  border: 1.5px solid var(--accent);
  color: var(--accent-deep);
}
.mob-shell .m-hact .m-ib.m-ib-rolo:active { background: rgba(91,147,214,.28); }
/* ===== end Quick Store Lookup on mobile ============================================ */


/* ===== MOBILE LANDSCAPE HEADER — ONE ROW, ALWAYS ===================================
   Regression fix, 2026-08-27, from this same day's publish. Derek: the section menu
   "doesn't slide up all the way and looks pretty rough" — on some phones, not all.

   THE CHAIN, MEASURED: the Quick Store Lookup button above added a 38px circle plus its
   8px gap = 46px to .m-hact. .m-hact is nowrap but .m-hd is WRAP, so past a threshold the
   whole action row drops to a second line and the header goes 65px -> 103px. sizeMenu()
   in Index.cshtml sets the sheet's `top` from hd.offsetHeight, so the menu starts 38px
   lower and LOSES 38px of height — ~16% of the sheet on a 390px-tall landscape viewport.

   WHY ONLY SOME PHONES: it is a hard fit threshold, and the button moved it 46px. Found by
   binary search on viewport width, per header scope string:
       Executive Dashboard   one row down to 612px -> 658px   (newly wrapping: 612-657)
       FSD Dashboard                         569px -> 615px   (newly wrapping: 569-614)
       a long group name                     688px -> 734px   (newly wrapping: 688-733)
   Derek's phone is 615 CSS px — it cleared the old limit by 3px and misses the new one by
   43. NOTE FOR THE NEXT PERSON: measure the LETTERBOXED PAGE, not the device spec. iOS
   letterboxes the notch side in landscape, so that phone's page is 615px while its browser
   chrome is 690px. Device widths will send you looking at the wrong phones.

   THE FIX IS TO STOP THE WRAP, not to tune the threshold — a threshold comes back the next
   time anything joins this row. .m-hd is held to one line and the brand block shrinks
   instead; collapsing "Full Site" to a glyph circle returns 66px, MORE than the Rolodex
   took, so .m-hact ends up 398px — 20px NARROWER than the 418px it was before the batch —
   and at 615px neither the wordmark nor the full scope name truncates. One row now holds
   down to 401px in every scope variant tested.
   ================================================================================== */

/* Defensive, and the actual cause of the empty-circle bug: give EVERY .m-ib icon a size in
   CSS as well as on the element. mobile-orient.js injects its icon markup as a string, and
   an SVG with only a viewBox is sized by the engine — Chromium 24x24, iOS Safari nothing.
   With this rule a future injected icon cannot repeat that, attributes or not. */
.mob-shell .m-ib svg { width: 17px; height: 17px; flex: 0 0 auto; }

@media (orientation: landscape) and (max-height: 500px) {
    /* One line. The gap replaces what justify-content:space-between used to provide once
       the brand block is allowed to shrink. */
    .mob-shell .m-hd { flex-wrap: nowrap; gap: 12px; }

    /* min-width:0 is the load-bearing half — a flex item will not shrink below its content
       width without it, and the row would overflow instead of the name ellipsising. The
       wordmark line and the scope line are separate line boxes, so both need the ellipsis. */
    .mob-shell .m-wm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .mob-shell .m-wm .m-wm-scope { overflow: hidden; text-overflow: ellipsis; }

    /* The controls never shrink: 38px circles and a 168px picker are already at their floor,
       and letting them squeeze would clip the touch targets rather than the text. */
    .mob-shell .m-hact { flex: 0 0 auto; }

    /* "Full Site" -> a glyph circle, matching the .m-ib strip beside it. Same de-crowd Derek
       asked for on desktop, and it is what pays for the Rolodex button.
       The label is a TEXT NODE set in mobile-orient.js, so font-size:0 collapses it — but
       unlike the desktop strip there is no <svg> here to survive, so the laptop glyph is
       re-supplied through ::before with its own font-size. The aria-label is untouched, so
       screen readers still read "Switch to the full desktop site". */
    .mob-shell .m-hact .scoop-view-toggle {
        width: 38px; padding: 0; font-size: 0; gap: 0;
        border-radius: 50%; justify-content: center; flex: 0 0 auto;
    }
    .mob-shell .m-hact .scoop-view-toggle::before {
        content: "\1F4BB"; font-size: 16px; line-height: 1;
    }
}
/* ===== end mobile landscape header ================================================= */

/* ===== SHARED "SALES THROUGH" BLOCK =================================================
   Derek 2026-09-02: "they should all look like this where applicable" — pointing at the
   Revenue Erosion tile's top-right date block, which is the pattern every data tab now uses.

   WHY THIS LIVES HERE AND NOT IN A TILE. The original is styled as
   `.revenue-erosion .de-thru{...}` inside _RevenueErosionTile.cshtml, so no other tile could
   reach it. Copying that rule into each tile that wanted the block would have created ~11
   copies of one design decision — and the first time the label size, the colour or the mobile
   behaviour changed, they would have drifted. One class, one definition, included through
   _ScoopThru.cshtml.

   POSITIONING — deliberately NOT `position:absolute`. Revenue Erosion can absolutely-position
   because it owns a `.de-hero` wrapper that is `position:relative`. A plain `.tile` is NOT
   positioned, and adding `position:relative` to `.tile` would have re-anchored all ~39
   `position:absolute` descendants that currently live inside tiles across these views — an
   invisible, page-wide change to buy one date block. So this uses flex alignment instead:

     · align-self:flex-end  puts it hard right when it is a child of the tile itself
                            (`.tile` is `display:flex; flex-direction:column`)
     · margin-left:auto     puts it hard right when it is dropped inside a `.t-h` header row
                            that is `display:flex`

   Both are harmless in the other context, so the SAME markup works in both places and the
   caller does not have to know which kind of parent it has.

   The date is intentionally the loud element: it is the number people came to check. */
.scoop-thru { align-self: flex-end; margin-left: auto; text-align: right; line-height: 1.15; }
.scoop-thru .tl {
    display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-deep, var(--accent)); opacity: .9;
}
.scoop-thru .td {
    display: block; font-size: 20px; font-weight: 900; line-height: 1.15;
    color: var(--accent-deep, var(--accent));
}
/* On a phone the block stops being a right-hand corner ornament and becomes a normal first
   line — same call the Revenue Erosion tile already made at this breakpoint. */
@media (max-width: 760px) {
    .scoop-thru { align-self: flex-start; margin-left: 0; text-align: left; margin-bottom: 6px; }
    .scoop-thru .td { font-size: 17px; }
}
/* ===== COMPACT PLACEMENT — added 2026-09-02 after Derek: "it looks like you dropped the headers
   versus in line like the day part revenue loss - can we fix - wastes screen space." ==============

   THE PROBLEM. `.tile` is `display:flex; flex-direction:column`, and the block is emitted as the tile's
   FIRST child. A flex child in a column takes a whole ROW, so the block pushed the tile's title down and
   left a wide empty band to its left — one wasted line on every tab that has a date. `_DaypartLossTile`
   never had this because it positions its block absolutely inside a `position:relative` hero, which
   overlays the title row instead of displacing it. This makes every tile behave that way.

   WHY IT IS DONE IN CSS AND NOT BY MOVING THE MARKUP. The obvious fix is to relocate the partial call
   inside each tile's `.t-h` header row. That was attempted across 14 views and abandoned: the tiles'
   headers are inconsistent (some flex, some block, some single-line, some with the closing tag on the
   same line), and two scripted attempts at it silently deleted real content — one regex, with DOTALL and
   a lazy quantifier, backtracked past its intended anchor and removed 13 KB from
   _HealthInspectionsTile.cshtml. Both attempts were caught by tag-count assertions before commit, but the
   lesson stands: this is a LAYOUT problem, and a layout problem is cheaper and far safer to solve in one
   stylesheet than in fourteen hand-shaped Razor headers.

   WHY `position:relative` IS NOT SIMPLY PUT ON `.tile`. These views contain ~39 `position:absolute`
   descendants — popups, tooltips, input icons, close buttons — and positioning `.tile` would re-anchor any
   of them that currently resolve to a further ancestor. `:has(> .scoop-thru)` narrows it to only the tiles
   that actually carry a date block, so nothing else in the estate can be affected.

   THE @supports GUARD IS THE POINT. Without `:has()` support the block would be absolutely positioned with
   no positioned ancestor and would fly to the page corner — a worse bug than the one being fixed. Wrapping
   BOTH rules together means a browser that lacks `:has()` keeps today's in-flow layout: one wasted row,
   which is merely untidy. Never split these two rules apart. */
@supports selector(:has(*)) {
    .tile:has(> .scoop-thru) { position: relative; }
    .tile > .scoop-thru { position: absolute; top: 16px; right: 20px; margin: 0; z-index: 2; background: var(--surface); padding-left: 14px; }
    /* Reserve the top-right corner the date block occupies so a long title/subline WRAPS before it
       instead of running underneath it (2026-09-10: many tabs showed header text under the block). The
       block is the tile's first child, so its next sibling is the header. The surface background above is
       the safety net for a header that cannot wrap — any text sliding under is cleanly occluded. */
    .tile:has(> .scoop-thru) > .scoop-thru + * { padding-right: 200px; }
    /* Back into the flow on a phone: at this width the tile is narrow enough that an overlaid block would
       sit on top of the title rather than beside it. */
    @media (max-width: 760px) {
        .tile > .scoop-thru { position: static; margin: 0 0 6px; text-align: left; background: none; padding-left: 0; }
        .tile:has(> .scoop-thru) > .scoop-thru + * { padding-right: 0; }
    }
}

/* ABSOLUTE variant — for a host that owns a position:relative wrapper (_DaypartLossTile's .dpl-hero,
   and the shape _RevenueErosionTile uses). Never put this inside a plain .tile: .tile is NOT positioned,
   so the block would anchor to the nearest positioned ancestor instead, which may be the page. */
.scoop-thru.scoop-thru-abs { position: absolute; top: 18px; right: 22px; align-self: auto; margin-left: 0; }
@media (max-width: 760px) {
    .scoop-thru.scoop-thru-abs { position: static; text-align: left; margin-bottom: 6px; }
}
/* ===== end shared "sales through" block ============================================= */

/* =====================================================================
   THEME PICKER v2 — TWO INDEPENDENT AXES (BrixHoldings, 2026-09-16).
   Purely front-end, additive. Replaces the single-skin + holiday-scene
   picker. Two axes compose and never reset each other:
     · html[data-bg]   → the PAGE BACKGROUND: a solid colour (kills the
                         marble) OR an uploaded image (drawn in .scoop-bg).
     · html[data-skin] → the DASHBOARD THEME: card / table / text / accent
                         palette. Sets NO --bg, so it never touches the page.
   Default (neither attribute) = the shipped dark marble, unchanged, so a
   user who never opens the picker pays nothing. --ink stays dark in every
   theme (the band contract: table headers, totals, footer paint #fff on it).
   ===================================================================== */

/* ---- AXIS 1 · PAGE BACKGROUND (data-bg) — solid colour, marble removed ---- */
/* light page tones */
html[data-bg="sky"]      body.dm-smallgroup{ --bg:#eef3fb; background:#eef3fb; }
html[data-bg="snow"]     body.dm-smallgroup{ --bg:#f4f4f2; background:#f4f4f2; }
html[data-bg="mint"]     body.dm-smallgroup{ --bg:#eaf5ef; background:#eaf5ef; }
html[data-bg="sand"]     body.dm-smallgroup{ --bg:#f7f3ea; background:#f7f3ea; }
html[data-bg="rose"]     body.dm-smallgroup{ --bg:#fbeef1; background:#fbeef1; }
html[data-bg="lavender"] body.dm-smallgroup{ --bg:#f1eefb; background:#f1eefb; }
/* dark page tones */
html[data-bg="slate"]    body.dm-smallgroup{ --bg:#12161d; background:#12161d; }
html[data-bg="graphite"] body.dm-smallgroup{ --bg:#0e1626; background:#0e1626; }
html[data-bg="midnight"] body.dm-smallgroup{ --bg:#081426; background:#081426; }
html[data-bg="forest"]   body.dm-smallgroup{ --bg:#0a1a14; background:#0a1a14; }
/* uploaded image: body colour is the calm base the veil fades to; art is in .scoop-bg */
html[data-bg="image"]    body.dm-smallgroup{ --bg:#0e1626; background:#0e1626; }

/* ---- AXIS 2 · DASHBOARD THEME (data-skin) — CARD palette only, never --bg ---- */
/* light themes */
html[data-skin="white"]    body.dm-smallgroup{ --ink:#242426; --surface:#ffffff; --surface-alt:#faf9f7; --border:#dedcd6; --text:#33322f; --muted:#6f6d67; --heading:#242426; --accent:#3f7f6f; --accent-deep:#2f6355; --accent-soft:#e4efeb; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="sky"]      body.dm-smallgroup{ --ink:#16233f; --surface:#ffffff; --surface-alt:#f3f7fd; --border:#cfdcef; --text:#22314e; --muted:#5f7291; --heading:#16233f; --accent:#2f6fd0; --accent-deep:#2356a8; --accent-soft:#e5eefb; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="mint"]     body.dm-smallgroup{ --ink:#153a30; --surface:#ffffff; --surface-alt:#f1faf5; --border:#c4e0d2; --text:#1f3b32; --muted:#5a7a6c; --heading:#123a2c; --accent:#2f9e70; --accent-deep:#217a55; --accent-soft:#e2f3ea; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="sand"]     body.dm-smallgroup{ --ink:#3a2f16; --surface:#ffffff; --surface-alt:#fbf7ee; --border:#e6dcc4; --text:#3d3524; --muted:#7a6f57; --heading:#3a2f16; --accent:#c8791f; --accent-deep:#a4630f; --accent-soft:#f6ecd9; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="rose"]     body.dm-smallgroup{ --ink:#3a1626; --surface:#ffffff; --surface-alt:#fdf2f5; --border:#efcdd7; --text:#3f2430; --muted:#8a6a75; --heading:#3a1626; --accent:#d6486a; --accent-deep:#b8344f; --accent-soft:#fbe4ea; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="lavender"] body.dm-smallgroup{ --ink:#241a3a; --surface:#ffffff; --surface-alt:#f6f3fd; --border:#d9cfef; --text:#2f2743; --muted:#6f6593; --heading:#241a3a; --accent:#7a5bd0; --accent-deep:#5f45b0; --accent-soft:#ece5fb; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="slate"]    body.dm-smallgroup{ --ink:#1f2733; --surface:#ffffff; --surface-alt:#f5f7fa; --border:#d3dae3; --text:#26303c; --muted:#63707e; --heading:#1f2733; --accent:#4a6072; --accent-deep:#374a58; --accent-soft:#e6eaf0; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
html[data-skin="paper"]    body.dm-smallgroup{ --ink:#242426; --surface:#fffdf9; --surface-alt:#f7f3ea; --border:#e3ddcf; --text:#33322f; --muted:#6f6d67; --heading:#242426; --accent:#b5843b; --accent-deep:#8f6626; --accent-soft:#f2e9d7; --shadow:0 1px 2px rgba(20,40,80,.10),0 12px 30px rgba(20,40,80,.12); }
/* dark themes — 'graphite' equals the shipped dark default so picking it changes nothing */
html[data-skin="graphite"] body.dm-smallgroup{ --ink:#0d1630; --surface:#14203d; --surface-alt:#1b2a49; --border:#29395b; --text:#e5ecfa; --muted:#93a2c6; --heading:#f2f6ff; --accent:#5b93d6; --accent-deep:#82b1ec; --accent-soft:#182742; --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.55); }
html[data-skin="midnight"] body.dm-smallgroup{ --ink:#0a1220; --surface:#0f2136; --surface-alt:#16304b; --border:#204058; --text:#d4e6f4; --muted:#89a6c0; --heading:#e9f4fb; --accent:#37b6c9; --accent-deep:#5fd0df; --accent-soft:#10263a; --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.55); }
html[data-skin="forest"]   body.dm-smallgroup{ --ink:#0c1a15; --surface:#112a20; --surface-alt:#173a2c; --border:#204d3b; --text:#d3ecdf; --muted:#84ab97; --heading:#e7f6ee; --accent:#3fbf86; --accent-deep:#5fd6a0; --accent-soft:#10281e; --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.55); }

/* When a solid page colour is chosen, the topbar/footer band keeps its own --ink, so no rule needed here. */

/* ---- background layer (uploaded image only), behind all content ---- */
.scoop-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none; }
html[data-bg="image"] .scoop-bg{ display:block; }
.scoop-bg > *{ position:absolute; inset:0; }
.scoop-bg .scoop-img{ background-size:cover; background-position:center; background-repeat:no-repeat; filter:blur(var(--scoop-blur,0px)); transform:scale(1.04); }
.scoop-bg .scoop-veil{ background:linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 92px, var(--bg) 380px, var(--bg) 100%); }
.scoop-bg .scoop-scrim{ background:rgba(10,15,25,var(--scoop-dim,.35)); }

/* ---- picker button + popover (skp- prefixed, self-contained) ---- */
.skp-pop{ position:fixed; z-index:1400; width:320px; max-width:calc(100vw - 24px); max-height:min(80vh,620px); overflow:auto;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 22px 60px rgba(8,14,30,.42); padding:15px; }
.skp-pop[hidden]{ display:none; }
.skp-pop h5{ margin:14px 0 8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.skp-pop h5:first-child{ margin-top:0; }
.skp-pop .skp-hint{ font-size:11px; color:var(--muted); margin:-3px 0 9px; }
.skp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.skp-sw{ cursor:pointer; border:2px solid transparent; border-radius:11px; padding:5px 3px 6px; text-align:center; background:var(--surface-alt); color:var(--text); font:inherit; }
.skp-sw[aria-pressed="true"]{ border-color:var(--accent); }
.skp-sw .sw-chip{ height:28px; border-radius:8px; border:1px solid rgba(0,0,0,.10); margin-bottom:5px; display:flex; align-items:center; justify-content:center; font-size:15px; overflow:hidden; background-size:cover; background-position:center; }
.skp-sw small{ font-size:10px; font-weight:700; display:block; line-height:1.15; }
.skp-div{ height:1px; background:var(--border); margin:15px 0 2px; }
.skp-drop{ border:2px dashed var(--border); border-radius:12px; background:var(--surface-alt); padding:14px; text-align:center; cursor:pointer; color:var(--text); margin-top:9px; }
.skp-drop:hover{ border-color:var(--accent); }
.skp-drop b{ display:block; color:var(--heading); font-size:13px; }
.skp-drop span{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.skp-ctl{ margin-top:11px; }
.skp-ctl[hidden]{ display:none; }
.skp-ctl label{ display:flex; align-items:center; gap:8px; font-size:12.5px; margin:8px 0; color:var(--text); }
.skp-ctl label > span{ width:52px; color:var(--muted); }
.skp-ctl input[type=range]{ flex:1; }
.skp-rm{ margin-top:10px; width:100%; border:1px solid var(--border); background:var(--surface-alt); color:#c0392b; border-radius:8px; padding:7px; font-weight:700; font-size:12px; cursor:pointer; }

/* ===================================================================================
   DAILY SCOOP CARDS — lifted out of Views/Reports/_DailyScoopTile.cshtml 2026-09-22.
   WHY: these rules are scoped to `.daily-scoop`, but that markup has TWO hosts —
   the Daily Scoop landing (_DailyScoopTile) AND the Group Overview landing, which
   renders the same _Ds*Card partials into `<div class="daily-scoop go-scoop">` from
   Index.cshtml. The stylesheet lived inside the partial, so on Group Overview the
   cards arrived with NO styling at all: Top 10 rendered as run-together text and the
   `.go-scoop` grid below never applied. Same bug class as the 2026-09-18 unstyled
   `.exec-subtabs` regression — CSS injected in one host, markup rendered from two.
   Kept at the END of app.css so the cascade position relative to every other rule in
   this file is unchanged from when it was an inline block. CSS costs nothing when its
   selectors match nothing, so it is unconditional on purpose — do not re-gate it.
   =================================================================================== */
    .daily-scoop{padding:0;overflow:hidden}
    .daily-scoop .ds-hero{padding:22px 24px 4px;position:relative}
    .daily-scoop .ds-brandlogo{position:absolute;top:20px;right:26px;height:74px;max-width:200px;object-fit:contain;background:transparent;pointer-events:none}
    @media (max-width:640px){ .daily-scoop .ds-brandlogo{height:42px;top:12px;right:14px;max-width:120px} }
    /* "Sales through <day>" — big light-blue callout under the brand logo (top-right) */
    .daily-scoop .ds-salesthru{position:absolute;top:108px;right:26px;text-align:right;max-width:340px}
    .daily-scoop .dst-lbl{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep,#82b1ec);opacity:.9}
    .daily-scoop .dst-date{display:block;font-size:25px;font-weight:900;line-height:1.15;color:var(--accent-deep,#82b1ec)}
    @media (max-width:900px){ .daily-scoop .ds-salesthru{position:static;text-align:left;margin:8px 24px 0} .daily-scoop .dst-date{font-size:21px} }
    .daily-scoop .ds-eyebrow{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep,#82b1ec)}
    .daily-scoop .ds-title{font-size:36px;font-weight:900;letter-spacing:-.5px;margin:6px 0 9px;display:flex;align-items:center;gap:12px;color:var(--heading)}
    .daily-scoop .ds-headline{font-size:20px;font-weight:600;color:var(--text)}
    .daily-scoop .ds-headsub{font-size:15px;color:var(--muted);margin-top:5px}
    .daily-scoop .ds-updated{font-size:14px;color:var(--muted);margin:3px 0 9px}
    .daily-scoop .ds-hams{margin:0;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
    .daily-scoop .ds-hams-h{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
    .daily-scoop .ds-hams-h span{text-transform:none;letter-spacing:0;font-weight:600;font-size:14px;margin-left:6px}
    .daily-scoop .ds-kpi3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .daily-scoop .ds-kpi .kk{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
    .daily-scoop .ds-kpi .kv2{font-size:28px;font-weight:900;color:var(--heading);line-height:1.15}
    .daily-scoop .ds-kpi .kr{display:flex;align-items:center;gap:9px;margin-top:4px;flex-wrap:wrap}
    .daily-scoop .dpill2{font-size:14px;font-weight:800;padding:2px 9px;border-radius:7px}
    .daily-scoop .dpill2.up{background:rgba(70,199,154,.16);color:var(--info,#46c79a)}
    .daily-scoop .dpill2.down{background:rgba(229,119,154,.18);color:#e5779a}
    .daily-scoop .ds-kpi .kl{font-size:13.5px;color:var(--muted)}
    @media (max-width:820px){ .daily-scoop .ds-kpi3{grid-template-columns:1fr} }
    .daily-scoop .up-t{color:var(--info,#46c79a)}.daily-scoop .down-t{color:var(--accent-deep,#82b1ec)}
    .daily-scoop .ds-wx{display:flex;align-items:stretch;gap:10px;margin:0;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
    .daily-scoop .wx-lbl{display:flex;flex-direction:column;justify-content:center;padding-right:14px;border-right:1px solid var(--border);min-width:150px}
    .daily-scoop .wl-h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
    .daily-scoop .wl-s{font-size:14px;color:var(--muted);margin-top:3px}
    .daily-scoop .wx-days{display:flex;gap:10px;flex:1;align-items:center}
    .daily-scoop .wx-loading{color:var(--muted);font-size:14.5px;padding:4px 2px}
    .daily-scoop .wx-day{flex:1;text-align:center;padding:5px 6px;border-radius:10px;background:var(--surface-alt,rgba(127,140,170,.12))}
    .daily-scoop .wx-day .wd{font-size:13px;font-weight:800;color:var(--accent-deep,#82b1ec);text-transform:uppercase;letter-spacing:.05em}
    .daily-scoop .wx-day .wi{font-size:24px;margin:2px 0}
    .daily-scoop .wx-day .wt{font-size:16px;font-weight:800}.daily-scoop .wx-day .wt .lo{color:var(--muted);font-weight:600}
    .daily-scoop .wx-day .wc{font-size:12.5px;color:var(--muted);margin-top:1px}
    .daily-scoop .wx-day.rain{outline:1.5px solid rgba(91,147,214,.5)}
    /* LY was muted 12px and read as a footnote. Derek, 2026-08-21: "make LY data stand out a bit more and
       spell out the conditions for last year to the right". Same size, but text-soft instead of muted, the
       temperatures bolded, and the condition spelled out after a middot: "LY 90°/75° · Clear". */
    .daily-scoop .wx-ly{font-size:12px;color:var(--text-soft, var(--text, #b9c8e0));margin-top:4px;padding-top:4px;
        border-top:1px dashed var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .daily-scoop .wx-ly b{font-weight:800}
    .daily-scoop .wx-ly .lyc{color:var(--muted)}
    /* Yesterday only: sales vs the SAME FISCAL DAY last year, mirroring the Weather tab. */
    .daily-scoop .wx-sales{font-size:12px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--border);
        white-space:nowrap;color:var(--text-soft, var(--text, #b9c8e0))}
    .daily-scoop .wx-sales b{font-weight:800}
    .daily-scoop .wx-sales .up{color:var(--pos, var(--mint, #3fb27f));font-weight:800}
    .daily-scoop .wx-sales .dn{color:var(--neg,#e06c6c);font-weight:800}
    .daily-scoop .wx-sales .lyv{color:var(--muted)}
    .daily-scoop .ds-scoreboard{min-width:0}
    .daily-scoop .ds-store{border-top:1px solid var(--border)}
    .daily-scoop .ds-store:first-of-type{border-top:0}
    .daily-scoop .sb-row{display:flex;align-items:center;gap:16px;padding:11px 2px;cursor:pointer;list-style:none;font-size:15px;flex-wrap:wrap}
    .daily-scoop .sb-row::-webkit-details-marker{display:none}
    .daily-scoop .sb-cv{font-size:13px;color:var(--muted);transition:transform .15s;flex:none}
    .daily-scoop .ds-store[open] .sb-cv{transform:rotate(90deg)}
    .daily-scoop .sb-name{flex:1 1 180px;color:var(--heading)}
    .daily-scoop .sb-name .store-sub{font-weight:400;color:var(--muted)}
    .daily-scoop .sb-col{min-width:150px;text-align:right}
    .daily-scoop .sb-col .sb-l{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:6px}
    .daily-scoop .sb-col .sb-v{font-weight:800;color:var(--heading)}
    .daily-scoop .sb-col .sb-d{font-size:13px;font-weight:800}
    .daily-scoop .ds-dp{margin:0 0 12px;padding:8px 10px;background:var(--surface-alt,rgba(127,140,170,.08));border-radius:10px;overflow-x:auto}
    .daily-scoop .ds-dp-h,.daily-scoop .ds-dp-r{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:8px;font-size:14px;padding:5px 6px;min-width:520px}
    .daily-scoop .ds-dp-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800;border-bottom:1px solid var(--border)}
    .daily-scoop .ds-dp-r{border-top:1px solid rgba(255,255,255,.05)}
    .daily-scoop .ds-dp-r:first-of-type{border-top:0}
    .daily-scoop .ds-dp .r{text-align:right;font-variant-numeric:tabular-nums}
    .daily-scoop .ds-dp .ly{color:var(--muted)}
    .daily-scoop .ds-dp .dpn{font-weight:700;color:var(--text)}
    /* Daypart clock range appended to the daypart name — lighter/smaller so the name still leads. */
    .daily-scoop .ds-dp .dpn .dp-rng{font-weight:400;color:var(--muted);font-size:.82em;white-space:nowrap}
    /* Channel sub-rows inside each daypart (Option B, per approved mock): indented, lighter, colored-square marker, no top divider so they read as children of the daypart row above. */
    .daily-scoop .ds-dp-cr{border-top:0;font-size:12.5px;padding-top:3px;padding-bottom:3px}
    .daily-scoop .ds-dp-cr .dpn{font-weight:500;color:var(--muted);padding-left:18px}
    .daily-scoop .ds-dp-cr .r{color:var(--muted)}
    .daily-scoop .dpc-sq{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px}
    .daily-scoop .sch-ot{background:#9aa7bd}
    /* ==== Approved Daily Scoop layout (mock up.docx tile positions) — 6-col area map ==== */
    .daily-scoop .ds-grid{display:grid;gap:13px;padding:13px 24px 22px;grid-template-columns:repeat(6,1fr);
        grid-template-areas:
        "weather weather weather weather weather weather"
        "howdoing howdoing howdoing sales sales sales"
        "topitems topitems topitems sales sales sales"
        "scoreboard scoreboard scoreboard scoreboard scoreboard scoreboard"
        "discounts discounts discounts discounts discounts discounts"
        "training training training training training training"
        "labor labor labor labor labor labor"
        var(--ds-rv) var(--ds-sq);
        /* 2026-10-23 reviews row (Wins | Needs a Reply) and SoS | Questionable row: each pair splits the row, and when
           one card of a pair is off or empty the other takes the full width (Derek: "full width when alone"). Custom
           properties substitute into grid-template-areas, so only the changing rows are restated below. */
        --ds-rv:"wins wins wins reply reply reply"; --ds-sq:"sos sos sos quest quest quest";}
    .daily-scoop .ds-grid:not(:has(> .a-reply)){--ds-rv:"wins wins wins wins wins wins"}
    .daily-scoop .ds-grid:not(:has(> .a-wins)){--ds-rv:"reply reply reply reply reply reply"}
    .daily-scoop .ds-grid:not(:has(> .a-quest)){--ds-sq:"sos sos sos sos sos sos"}
    .daily-scoop .ds-grid:not(:has(> .a-sos)){--ds-sq:"quest quest quest quest quest quest"}
    .daily-scoop .a-reply{grid-area:reply;min-width:0}
    .daily-scoop .a-weather{grid-area:weather}
    .daily-scoop .a-howdoing{grid-area:howdoing;align-self:start;margin:0}
    .daily-scoop .a-topitems{grid-area:topitems;min-width:0}
    .daily-scoop .a-sales{grid-area:sales;min-width:0}
    .daily-scoop .a-scoreboard{grid-area:scoreboard;min-width:0}
    .daily-scoop .a-discounts{grid-area:discounts;min-width:0}
    .daily-scoop .a-labor{grid-area:labor}
    .daily-scoop .a-training{grid-area:training;min-width:0}
    .daily-scoop .ds-wm-kpi{display:flex;align-items:center;gap:18px;margin:2px 0 10px}
    .daily-scoop .ds-wm-kpi > .kv{font-size:40px}
    .daily-scoop .ds-wm-kpis{flex:1;min-width:0}
    .daily-scoop .ds-wm-kpis .go-bar{margin-top:0;max-width:420px}
    .daily-scoop .a-wins{grid-area:wins;min-width:0}
    /* 2026-10-23 review chips + Labor card (real data replaces the "Coming soon" placeholder) */
    .daily-scoop .ds-chip{display:inline-block;font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;margin-left:6px;background:var(--surface-alt);color:var(--muted);vertical-align:1px}
    .daily-scoop .ds-chip.red{background:rgba(229,72,94,.15);color:#e5485e}.daily-scoop .ds-chip.grn{background:rgba(62,207,142,.15);color:#2f9e70}
    .daily-scoop .ds-labor .dl-wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:16px;margin-top:4px}
    .daily-scoop .ds-labor .dl-wrap.no-ot{grid-template-columns:1fr}
    @media (max-width:1000px){.daily-scoop .ds-labor .dl-wrap{grid-template-columns:1fr}}
    @media (max-width:700px){.daily-scoop .ds-labor .dl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
    .daily-scoop .ds-labor .dl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
    .daily-scoop .ds-labor .dl-wrap:not(.no-ot) .dl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .daily-scoop .ds-labor .dl-k{background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;padding:9px 12px}
    .daily-scoop .ds-labor .dl-k .l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
    .daily-scoop .ds-labor .dl-k .v{font-size:22px;font-weight:800;color:var(--heading);margin:2px 0;font-variant-numeric:tabular-nums}
    .daily-scoop .ds-labor .dl-k .d{font-size:11.5px;color:var(--muted)}
    .daily-scoop .ds-labor .dl-tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
    .daily-scoop .ds-labor .dl-tbl th{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right;padding:5px 7px;border-bottom:1px solid var(--border)}
    .daily-scoop .ds-labor .dl-tbl td{padding:6px 7px;border-bottom:1px solid var(--border);text-align:right}
    .daily-scoop .ds-labor .dl-tbl th:first-child,.daily-scoop .ds-labor .dl-tbl td:first-child{text-align:left}
    .daily-scoop .ds-labor .dl-tbl td small{display:block;font-size:10.5px;color:var(--muted)}
    .daily-scoop .ds-labor .dl-tbl tfoot td{font-weight:800;border-top:2px solid var(--border);border-bottom:0}
    .daily-scoop .ds-labor .dl-note{font-size:11.5px;color:var(--muted);margin-top:8px}
    .daily-scoop .ds-labor .dl-ot h4{margin:0 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--heading)}
    .daily-scoop .ds-labor .dl-sub{font-size:11.5px;color:var(--muted);margin-bottom:6px}
    .daily-scoop .ds-labor .dl-p{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px}
    .daily-scoop .ds-labor .dl-p b{color:var(--heading)}.daily-scoop .ds-labor .dl-p .m{font-size:11px;color:var(--muted);font-weight:600}
    .daily-scoop .ds-labor .dl-p .h{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
    .daily-scoop .ds-labor .dl-amb{color:#c8791f}
    .daily-scoop .ds-labor .dl-flag{font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;margin-left:4px;background:rgba(200,121,31,.16);color:#c8791f}
    .daily-scoop .ds-labor .dl-bar{grid-column:1/-1;height:6px;background:var(--surface-alt);border-radius:4px;overflow:hidden;margin-top:3px}
    .daily-scoop .ds-labor .dl-bar i{display:block;height:100%}
    .daily-scoop .a-sos{grid-area:sos}
    .daily-scoop .a-quest{grid-area:quest}
    .daily-scoop .ds-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 15px}
    /* GROUP DAILY SCOOP host (2026-08-17). The five shared cards render inside a
       div.daily-scoop.go-scoop on the Group Daily Scoop landing — the .daily-scoop class is
       required because every rule in this block is scoped to it, and `go-scoop` then overrides the
       Daily Scoop template with a plain responsive grid of its own.
       This lives HERE, not in Index.cshtml, because it is meaningless without the rules above it and
       this style block is emitted for ANY 'smallgroup' layout — the tile renders unconditionally and
       is only hidden client-side, so the CSS is present even on a scope whose landing is Group Daily
       Scoop and whose Your-Daily-Scoop tile is switched off.
       No grid-template-areas: the a-* classes name areas this grid never declares, so `grid-area:auto`
       resets them and the explicit spans below place each card instead.

       2026-09-22 — REPLACED the auto-fit grid, then REVISED the same day. The first pass
       (Top 10 left / Sales Summary right, SoS as a small tile) left two dead holes on OM Aadi,
       which BrixHoldings circled: the Sales Summary card is ~700px tall and nothing else in its
       row came close, and Top 10 sat alone on a half row because that group has no Labor card.
       A fixed span only looks composed when the CARD HEIGHTS in a row are comparable, and here
       they never are. The arrangement below pairs by height instead of by position:

         row 1   Speed of Service (2 cols, STRETCHED) + Top 10 Sold Items (4 cols)
         row 2   Sales Summary, full width, split into TWO INTERNAL COLUMNS
         row 3   Discounts, full width
         row 4   Labor, full width

       Two moves kill the holes. (1) Speed of Service is one number in a card that can never fill
       a tall row, so it stops trying to sit at the top of one: it stretches to its neighbour's
       height with the figure centred, which reads as a deliberate KPI tile rather than a card
       that ran out of content. (2) Sales Summary goes full-bleed and flows its two statement
       blocks side by side (CSS multicol, `column-span:all` on the header and footer, break-avoid
       on each block so Sales Information and Payment Information stay whole). That halves its
       height to roughly Top 10's and fills the width it now occupies.
       The :has() fallbacks below cover configs that switch a card OFF — without them a disabled
       SoS or Top 10 would leave its partner stranded on a part row, which is exactly the hole
       this revision removes. Unsupported :has() degrades to the plain spans. */
    .daily-scoop.go-scoop{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px;overflow:visible;align-items:start}
    .daily-scoop.go-scoop > .ds-card{grid-area:auto;min-width:0}
    .daily-scoop.go-scoop > .a-sos{grid-column:span 3}
    /* 2026-10-20 full-width landing: Top 10 takes the whole row in TWO internal columns (1-5 | 6-10). */
    .daily-scoop.go-scoop > .a-topitems{grid-column:1 / -1}
    .daily-scoop.go-scoop > .a-topitems .ds-rank{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:32px}
    .daily-scoop.go-scoop > .a-discpct{grid-column:span 3;align-self:stretch;display:flex;flex-direction:column}
    .daily-scoop.go-scoop > .a-discpct > .kv{margin-top:auto;font-size:40px}
    .daily-scoop.go-scoop > .a-discpct > .ks{margin-bottom:auto}
    .daily-scoop.go-scoop > .a-wm{grid-column:1 / -1}
    .daily-scoop.go-scoop > .a-sales{grid-column:1 / -1}
    .daily-scoop.go-scoop > .a-discounts{grid-column:1 / -1}
    .daily-scoop.go-scoop > .a-labor{grid-column:1 / -1}
    /* row 1 partner missing -> the survivor takes the whole row */
    .daily-scoop.go-scoop:not(:has(> .a-discpct)) > .a-sos{grid-column:1 / -1}
    .daily-scoop.go-scoop:not(:has(> .a-sos)) > .a-discpct{grid-column:1 / -1}
    /* KPI strip above the Regional Action Board */
    .go-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
    .go-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;min-width:0}
    .go-kpi .k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
    .go-kpi .v{font-size:26px;font-weight:900;color:var(--heading);margin-top:4px;font-variant-numeric:tabular-nums}
    .go-kpi .s{font-size:12.5px;color:var(--muted);margin-top:3px}
    .go-bar{height:6px;background:var(--surface-alt);border-radius:3px;margin-top:8px;overflow:hidden}
    .go-bar i{display:block;height:100%;border-radius:3px}
    .go-bar i.g{background:#1f8a5b}.go-bar i.y{background:#b7791f}.go-bar i.r{background:#c8344a}
    /* World Manager table */
    .go-wm-tools{margin-left:auto;display:inline-flex;gap:6px;align-items:center;text-transform:none;letter-spacing:0}
    .go-wm-b{font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 12px;cursor:pointer}
    .go-wm-b.on{border-color:var(--accent);color:var(--accent)}
    .go-wmt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
    .go-wmt th{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
    .go-wmt td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:14px;text-align:right}
    .go-wmt th:first-child,.go-wmt td:first-child{text-align:left}
    .go-wmt td.nm{font-weight:700;color:var(--heading)}
    .go-wmt td small{color:var(--muted);font-weight:500;margin-left:6px}
    .go-wmt tr.dog td{background:var(--surface-alt);font-weight:800;color:var(--heading)}
    .go-wmt td.more{text-align:center}
    .go-cbar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
    .go-cbar .go-bar{width:160px;margin:0}
    .go-pill{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap}
    .go-pill.g{background:rgba(31,138,91,.14);color:#1f8a5b}.go-pill.y{background:rgba(183,121,31,.16);color:#9a6414}.go-pill.r{background:rgba(200,52,74,.14);color:#c8344a}
    @media (max-width:900px){ .daily-scoop.go-scoop > .a-sos, .daily-scoop.go-scoop > .a-discpct{grid-column:1 / -1} .daily-scoop.go-scoop > .a-topitems .ds-rank{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} .go-cbar .go-bar{width:70px} }
    /* Speed of Service: fill the row rather than float at the top of it, figure centred. */
    .daily-scoop.go-scoop > .a-sos{align-self:stretch;display:flex;flex-direction:column}
    .daily-scoop.go-scoop > .a-sos > .kv{margin-top:auto;font-size:40px}
    .daily-scoop.go-scoop > .a-sos > .ks{margin-bottom:auto}
    /* Sales Summary: two statement blocks side by side across the full width. */
    .daily-scoop.go-scoop > .a-sales{columns:2;column-gap:28px}
    .daily-scoop.go-scoop > .a-sales > .ds-ch{column-span:all}
    .daily-scoop.go-scoop > .a-sales > .ds-empty{column-span:all}
    .daily-scoop.go-scoop > .a-sales > .ssum-foot{column-span:all;margin-top:14px}
    .daily-scoop.go-scoop > .a-sales .stmt-sec{break-after:avoid;break-inside:avoid;margin-top:0}
    .daily-scoop.go-scoop > .a-sales .stmt-rows{break-inside:avoid;margin-bottom:6px}
    /* Discounts at full width: "UNCATEGORIZED/MANUAL" is a single unbreakable token, so its column's
       min-content width exceeded the 180px track and pushed the last group off the card's right edge.
       Let the group headings break and stop the tracks defending a min-content floor. */
    .daily-scoop.go-scoop .dg-col{min-width:0}
    .daily-scoop.go-scoop .dg-h{overflow-wrap:anywhere}
    .daily-scoop.go-scoop .dg-tot{white-space:nowrap}
    /* The card headers pack title + subtitle + store picker onto ONE flex line with no wrapping, so in
       a narrow column they shrank below their content width and wrapped character-by-character
       ("TOP 10 SOLD ITEMS" running vertically). In go-scoop the subtitle takes its own line under the
       title, with the picker kept on the title row. */
    .daily-scoop.go-scoop .ds-ch{flex-wrap:wrap;align-items:baseline}
    .daily-scoop.go-scoop .ds-ch > .ds-cov{flex:1 1 100%;order:3;margin-top:2px}
    .daily-scoop.go-scoop .ds-ch > .ds-cardpick{order:2}
    @media (max-width:980px){
        .daily-scoop.go-scoop{grid-template-columns:1fr}
        .daily-scoop.go-scoop > .ds-card{grid-column:1 / -1}
        .daily-scoop.go-scoop > .a-sales{columns:1}
        .daily-scoop.go-scoop > .a-sos{align-self:auto;display:block}
        .daily-scoop.go-scoop > .a-sos > .kv{margin-top:0;font-size:26px}
    }
    .daily-scoop .ds-jump{cursor:pointer;transition:border-color .12s,transform .12s}
    .daily-scoop .ds-jump:hover{border-color:var(--accent);transform:translateY(-1px)}
    .daily-scoop .ds-ch{font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
    .daily-scoop .ds-ch .tag{margin-left:auto;font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px;background:rgba(70,199,154,.16);color:var(--info,#46c79a)}
    .daily-scoop .ds-ch .go{margin-left:auto;font-size:13px;font-weight:800;color:var(--accent)}
    .daily-scoop .ds-cov{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
    .daily-scoop .ds-empty{font-size:14.5px;color:var(--muted);line-height:1.5}
    .daily-scoop .ds-win{min-width:0}
    .daily-scoop .win-row{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--border)}
    .daily-scoop .win-row:first-of-type{border-top:0}
    .daily-scoop .win-star{color:#ffd15c;font-size:15px;flex:none;font-weight:800;letter-spacing:-1px}
    .daily-scoop .win-tx{font-size:15px;line-height:1.4;color:var(--text)}
    .daily-scoop .win-meta{font-size:13px;color:var(--muted);margin-top:2px}
    .daily-scoop .kv{font-size:26px;font-weight:900;line-height:1;color:var(--heading)}
    .daily-scoop .kv .u{color:var(--info,#46c79a);font-size:15px;font-weight:800;margin-left:6px}
    .daily-scoop .kv .dn{color:var(--accent-deep,#82b1ec);font-size:15px;font-weight:800;margin-left:6px}
    .daily-scoop .ks{font-size:13.5px;color:var(--muted);margin-top:5px}
    .daily-scoop .store-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--border);font-size:15px}
    .daily-scoop .store-row:first-of-type{border-top:0}
    .daily-scoop .store-nm{font-weight:700;color:var(--heading)}.daily-scoop .store-sub{font-size:13px;color:var(--muted)}
    .daily-scoop .mini{display:flex;gap:16px;margin-top:11px}
    .daily-scoop .mini .ml{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block}
    .daily-scoop .mini .mv{font-size:16px;font-weight:800;display:block}
    .daily-scoop .dp-row{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;color:var(--text);margin-top:8px}
    .daily-scoop .dp-bar{height:5px;border-radius:3px;background:var(--surface-alt,rgba(127,140,170,.14));overflow:hidden;margin-top:3px}
    .daily-scoop .dp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent,#5b93d6),var(--accent-deep,#82b1ec))}
    .daily-scoop .td-row{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0;border-top:1px solid var(--border)}
    .daily-scoop .td-row:first-of-type{border-top:0}
    .daily-scoop .td-nm{font-weight:600;color:var(--text)}.daily-scoop .td-amt{font-weight:800;font-variant-numeric:tabular-nums;color:var(--heading)}
    .daily-scoop .na-row{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;padding:6px 0;border-top:1px solid var(--border)}
    .daily-scoop .na-row:first-of-type{border-top:0}
    .daily-scoop .na-dot{flex:none;font-size:13px;margin-top:2px}
    .daily-scoop .na-tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px;margin-right:5px}
    .daily-scoop .na-rrv{background:rgba(229,119,154,.18);color:#e5779a}.daily-scoop .na-loy{background:rgba(230,180,90,.18);color:#e6b45a}
    .daily-scoop .ds-qlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
    .daily-scoop .ds-qlink{font-size:13px;font-weight:800;color:var(--accent);border:1px solid var(--border);border-radius:999px;padding:5px 13px;cursor:pointer;transition:border-color .12s,color .12s}
    .daily-scoop .ds-qlink:hover{border-color:var(--accent);color:var(--accent-deep,#82b1ec)}
    .daily-scoop .ds-soon{border-style:dashed;opacity:.9;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
    .daily-scoop .soon-badge{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep,#82b1ec);background:rgba(91,147,214,.14);padding:3px 10px;border-radius:7px;margin-top:6px}
    @media (max-width:820px){ .daily-scoop .ds-grid{grid-template-columns:1fr;grid-template-areas:"weather" "howdoing" "sales" "topitems" "scoreboard" "discounts" "training" "labor" "sos" "wins" "reply" "quest";} }
    /* Store Deep-Dive (ds_sales_summary / ds_top_items / ds_top_discounts) */
    .daily-scoop .ds-deepdive{padding:2px 0 0}
    .daily-scoop .ds-dd-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--border)}
    .daily-scoop .ds-dd-h{font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
    .daily-scoop .ds-dd-pick{margin-left:auto;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:8px}
    .daily-scoop .ds-dd-pick select{font-size:13px;font-weight:700;color:var(--heading);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 9px;text-transform:none;letter-spacing:0}
    /* per-card store dropdown in each Deep-Dive card header (independent selection) */
    .daily-scoop .ds-cardpick{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--heading);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 8px;text-transform:none;letter-spacing:0;max-width:200px}
    .daily-scoop .ds-ssum{min-width:0}
    .daily-scoop .ds-rank{display:flex;flex-direction:column}
    .daily-scoop .dr-row{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:baseline;padding:6px 0;border-top:1px solid var(--border);font-size:14.5px}
    .daily-scoop .ds-topitems .dr-row{grid-template-columns:22px 1fr auto auto}
    .daily-scoop .dr-row:first-of-type{border-top:0}
    .daily-scoop .dr-n{color:var(--muted);font-weight:800;font-size:12.5px;text-align:right}
    .daily-scoop .dr-nm{color:var(--text);font-weight:600}
    .daily-scoop .dr-cat{color:var(--muted);font-weight:500;font-size:12.5px;margin-left:6px}
    .daily-scoop .dr-u{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
    .daily-scoop .dr-v{color:var(--heading);font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
    /* Discounts by group (ds_top_discounts) — the 5 discount groups, Top 5 reasons each */
    .daily-scoop .ds-discgroups{min-width:0}
    .daily-scoop .dg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
    .daily-scoop .dg-col{background:var(--surface-alt,rgba(127,140,170,.08));border:1px solid var(--border);border-radius:11px;padding:10px 11px}
    .daily-scoop .dg-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:4px}
    .daily-scoop .dg-tot{font-size:13px;font-weight:800;color:var(--heading);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
    .daily-scoop .dg-row{display:grid;grid-template-columns:16px 1fr auto;gap:7px;align-items:baseline;padding:4px 0;font-size:13.5px}
    .daily-scoop .dg-n{color:var(--muted);font-weight:800;font-size:11.5px;text-align:right}
    .daily-scoop .dg-nm{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .daily-scoop .dg-v{color:var(--heading);font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
    .daily-scoop .dg-empty{color:var(--muted);font-size:13px;padding:4px 0}
    /* Store Scoreboard channel-mix expansion (per store) */
    .daily-scoop .sb-chan{flex:1 1 100%;display:flex;align-items:center;gap:10px;margin:6px 0 2px;flex-wrap:wrap}
    .daily-scoop .sch-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
    .daily-scoop .sch-bar{display:flex;flex:0 0 150px;height:7px;border-radius:4px;overflow:hidden;background:var(--surface-alt,rgba(127,140,170,.16))}
    .daily-scoop .sch-bar i{display:block;height:100%}
    .daily-scoop .sch-in{background:var(--accent,#5b93d6)}
    .daily-scoop .sch-1p{background:var(--info,#46c79a)}
    .daily-scoop .sch-3p{background:#e6b45a}
    .daily-scoop .sch-lg{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
    .daily-scoop .sch-lg .sk{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:4px}
    .daily-scoop .sch-lg .sk-in{background:var(--accent,#5b93d6)}
    .daily-scoop .sch-lg .sk-1p{background:var(--info,#46c79a)}
    .daily-scoop .sch-lg .sk-3p{background:#e6b45a}

/* ===== POCKET SCOOP (2026-10-15) — the upright-phone highlights page =====
   Views/Reports/_PocketScoop.cshtml renders it hidden; /js/mobile-orient.js moves it into the portrait
   gate (.scoop-rot-gate.pk-gate), so portrait shows Pocket Scoop instead of "please rotate". The 📱
   header button adds body.pk-open, which shows it sideways too. Palette = the page's own theme vars,
   so it follows Sand/White by default and whatever the user picked otherwise. */
.scoop-rot-gate.pk-gate { justify-content: flex-start; align-items: stretch; text-align: left; padding: 0; overflow: hidden;
    background: var(--bg, #f7f3ea); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.has-mob.pk-open:not(.scoop-desktop) .scoop-rot-gate.pk-gate { display: flex; }
.has-mob.pk-open:not(.scoop-desktop) .mob-shell { display: none !important; }
.pk { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; color: var(--text, #33322f); font-size: 14px; }
.pk[hidden] { display: none; }
.pk-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; background: var(--ink, #242426); color: #fff; }
.pk-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; }
.pk-t { flex: 1; min-width: 0; }
.pk-t b { display: block; font-size: 15px; }
.pk-t span { display: block; font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ib { width: 34px; height: 34px; border-radius: 9px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; cursor: pointer; flex: none; }
.pk-ib[hidden] { display: none; }
.pk-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px 18px; }
.pk-rot { font-size: 11.5px; color: var(--muted, #6f6d67); border: 1px dashed var(--border, #dedcd6); background: var(--surface, #fff); border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; text-align: center; }
.pk-card { background: var(--surface, #fff); border: 1px solid var(--border, #dedcd6); border-radius: 14px; padding: 11px 13px; margin-bottom: 10px; }
.pk-h { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6f6d67); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.pk-h span { text-transform: none; letter-spacing: 0; font-weight: 700; }
.pk-big { font-size: 30px; font-weight: 900; color: var(--heading, #242426); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pk-chip { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.pk-chip.pk-up { background: #e3f4ea; color: #1f9e5a; } .pk-chip.pk-dn { background: #fbe4e8; color: #c8344a; } .pk-chip.pk-nt { background: rgba(127,127,127,.14); color: var(--muted, #6f6d67); }
b.pk-up { color: #1f9e5a; } b.pk-dn { color: #c8344a; } b.pk-nt { color: var(--muted, #6f6d67); }
.pk-kv { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--muted, #6f6d67); }
.pk-kv b { display: block; font-size: 15px; color: var(--heading, #242426); }
.pk-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.pk-g3 > div { background: var(--surface-alt, #faf9f7); border-radius: 9px; padding: 6px 4px; font-size: 10px; color: var(--muted, #6f6d67); font-weight: 800; letter-spacing: .06em; }
.pk-g3 b { display: block; font-size: 16px; letter-spacing: 0; }
.pk-g3 small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--muted, #6f6d67); margin-top: 1px; }
.pk-hero .pk-chip + .pk-chip { margin-left: 4px; }
.pk-ln { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--surface-alt, #f1efea); color: var(--heading, #242426); }
.pk-ln:first-of-type { border-top: 0; }
.pk-ln small { color: var(--muted, #6f6d67); font-size: 11px; margin-left: 4px; }
.pk-ln.pk-more { justify-content: center; }
.pk-al { border-left: 4px solid #b7791f; padding: 7px 10px; background: var(--surface-alt, #faf9f7); border-radius: 8px; margin-bottom: 6px; font-size: 13px; color: var(--heading, #242426); }
.pk-al.pk-r { border-left-color: #c8344a; } .pk-al.pk-ok { border-left-color: #1f9e5a; }
.pk-al small { display: block; color: var(--muted, #6f6d67); font-size: 11.5px; margin-top: 2px; }
.pk-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-acts button { font: inherit; background: var(--surface-alt, #faf9f7); border: 1px solid var(--border, #dedcd6); border-radius: 10px; padding: 9px 2px; font-size: 11.5px; font-weight: 700; color: var(--heading, #242426); cursor: pointer; }
.pk-acts i { display: block; font-style: normal; font-size: 18px; margin-bottom: 2px; }
.pk-empty { color: var(--muted, #6f6d67); text-align: center; }
.pk-foot { text-align: center; font-size: 11px; color: var(--muted, #6f6d67); margin-top: 8px; }
/* Pocket Scoop phase 2 (2026-10-16): lazy blocks — skeleton while /Reports/PocketData answers, then the server's HTML. */
.pk-lz:empty { display: none; }
.pk-ld .pk-h { opacity: .7; }
.pk-al.pk-ld { border-left-color: var(--border, #dedcd6); color: var(--muted, #6f6d67); }
.pk-sk { height: 12px; border-radius: 6px; margin: 8px 0 4px; background: linear-gradient(90deg, var(--surface-alt, #f1efea) 25%, var(--border, #e6e3dc) 50%, var(--surface-alt, #f1efea) 75%); background-size: 200% 100%; animation: pk-sh 1.2s linear infinite; }
.pk-sk.pk-sk2 { width: 60%; }
@keyframes pk-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pk-sk { animation: none; } }
.pk-q { font-size: 13px; line-height: 1.45; color: var(--heading, #242426); background: var(--surface-alt, #faf9f7); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.pk-q small { display: block; color: var(--muted, #6f6d67); font-size: 11px; margin-top: 4px; }
.pk-bars { display: flex; align-items: flex-end; gap: 6px; height: 86px; padding: 4px 0 16px; }
.pk-bar { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.pk-bar i { display: block; width: 42%; border-radius: 3px 3px 0 0; min-height: 2px; }
.pk-bar i.ty, .pk-legend i.ty { background: var(--accent, #2f6fdf); }
.pk-bar i.ly, .pk-legend i.ly { background: var(--border, #cfcbc2); }
.pk-bar span { position: absolute; bottom: -15px; font-size: 10px; color: var(--muted, #6f6d67); }
.pk-legend { font-size: 10.5px; color: var(--muted, #6f6d67); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; }
.pk-lnk { font-size: 11px; font-weight: 700; color: var(--accent-deep, #c8344a); text-decoration: none; margin-left: 4px; white-space: nowrap; }
/* Pocket hero, option A (2026-10-16) + Brands total-sales YoY table */
.pk-hx .hx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6f6d67); }
.pk-hx .hx-top span { letter-spacing: 0; text-transform: none; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-hx .hx-num { font-size: 38px; font-weight: 900; letter-spacing: -.02em; color: var(--heading, #242426); line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pk-hx .hx-ly { font-size: 12.5px; color: var(--muted, #6f6d67); margin-top: 2px; }
.pk-hx .hx-ly b { font-weight: 800; }
.pk-hx .hx-pill { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pk-hx .hx-pill span { font-size: 12px; font-weight: 800; border-radius: 9px; padding: 4px 9px; }
.pk-hx .hx-pill small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pk-hx .hx-pill .up { background: #e3f4ea; color: #1f9e5a; } .pk-hx .hx-pill .dn { background: #fbe4e8; color: #c8344a; } .pk-hx .hx-pill .nt { background: rgba(127,127,127,.14); color: var(--muted, #6f6d67); }
.pk-hx .hx-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1px solid var(--surface-alt, #f1efea); }
.pk-hx .hx-grid > div { padding: 9px 0 2px; min-width: 0; }
.pk-hx .hx-grid > div + div { border-left: 1px solid var(--surface-alt, #f1efea); padding-left: 12px; }
.pk-hx .hx-k { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6f6d67); }
.pk-hx .hx-v { font-size: 19px; font-weight: 900; color: var(--heading, #242426); font-variant-numeric: tabular-nums; margin-top: 1px; }
.pk-hx .hx-d { font-size: 12px; font-weight: 800; color: var(--muted, #6f6d67); }
.pk-hx .hx-d.up { color: #1f9e5a; } .pk-hx .hx-d.dn { color: #c8344a; }
.pk-by { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pk-by th { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6f6d67); text-align: right; padding: 0 0 6px; }
.pk-by th:first-child { text-align: left; }
.pk-by td { font-size: 13px; padding: 7px 0; border-top: 1px solid var(--surface-alt, #f1efea); text-align: right; color: var(--heading, #242426); }
.pk-by td:first-child { text-align: left; font-weight: 700; }
.pk-by td small { display: block; font-size: 10.5px; color: var(--muted, #6f6d67); font-weight: 600; }
.pk-by td b { font-weight: 800; }
.pk-by tr.pk-by-tot td { border-top: 2px solid var(--border, #dedcd6); font-weight: 900; }
.pk-askf { display: flex; gap: 6px; align-items: stretch; }
.pk-askq { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 1px solid var(--border, #dedcd6); border-radius: 10px; padding: 8px 10px; resize: vertical; background: var(--surface, #fff); color: var(--heading, #242426); }
.pk-askb { font: inherit; font-weight: 800; border: 0; border-radius: 10px; padding: 0 14px; background: var(--accent, #e5485e); color: #fff; cursor: pointer; }
.pk-askb[disabled] { opacity: .5; }
.pk-askt { margin-top: 6px; }
.pk-askm { font-size: 13px; line-height: 1.45; border-radius: 10px; padding: 7px 10px; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-askme { background: var(--surface-alt, #faf9f7); color: var(--muted, #6f6d67); }
.pk-askai { background: var(--surface, #fff); border: 1px solid var(--border, #dedcd6); color: var(--heading, #242426); }
.pk-askw { color: var(--muted, #6f6d67); font-style: italic; }

/* ================================================================================================
   SPLASH — ONE CLEAN VERSION EVERYWHERE (Derek 2026-10-16: "make that cleaner and fast … backdrop color on
   all the splash to sky … I prefer the spinning circle around logo"). Overrides the marbled-navy splash above
   on every dashboard (Index / Executive / FSD / Store), go.html and Recipe: Sky backdrop (the theme picker's
   Sky, #eef3fb), the Scoop logo inside the spinning red→blue ring, one quiet line of text. The brand-logo
   rows and the progress bar are gone (six image downloads and a second "loading" signal for nothing).
   ================================================================================================ */
.scoop-splash, #scoop-splash.scoop-splash {
    background-color: #eef3fb !important;
    background-image: radial-gradient(70% 55% at 50% 38%, #ffffff 0%, rgba(255,255,255,0) 72%), linear-gradient(180deg, #f5f8fe 0%, #e2ebf8 100%) !important;
}
.scoop-splash .splash-inner { display: flex; flex-direction: column; align-items: center; }
.scoop-splash .splash-ring, #scoop-splash.scoop-splash .splash-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px; }
.scoop-splash .splash-ring::before, #scoop-splash.scoop-splash .splash-ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#c8102e 0turn, #2f6fd0 .55turn, rgba(47,111,208,.14) .85turn, rgba(47,111,208,0) 1turn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: scoopSplashSpin .9s linear infinite;
}
.scoop-splash .splash-ring .splash-logo, #scoop-splash.scoop-splash .splash-ring .splash-logo { position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%; animation: none; box-shadow: 0 10px 28px rgba(22,35,63,.18); }
.scoop-splash .splash-title { color: #16233f; font-size: 1.45rem; margin-top: 16px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.01em; }   /* same font as the launch splash (go.html) so the hand-off is seamless */
.scoop-splash .splash-title .dot { color: #c8102e; }
.scoop-splash .splash-sub, .scoop-splash .splash-sub[class*="sf"] {
    color: #5f7291; font: 500 .92rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 6px;
}
.scoop-splash .splash-bar, .scoop-splash .splash-brands, .scoop-splash .splash-float { display: none !important; }
@keyframes scoopSplashSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scoop-splash .splash-ring::before { animation-duration: 2.4s; } }

/* POCKET on the phone splash (Derek 2026-10-16: "can the word Pocket be injected at an angle and cursive — same
   color as the dot"). Phones only (touch + phone-width, portrait or sideways); desktop splash unchanged. */
@font-face { font-family: "ScoopPocket"; src: url(data:font/woff2;base64,d09GMgABAAAAAA1oABEAAAAAG5wAAA0LAAMAQQAAAAAAAAAAAAAAAAAAAAAAAAAAGiIbgSocglAGYABECIEOCZwVEQgKiyyKBgE2AiQDLAsYAAQgBYMyByAMgUsbsxkTbgw9bBwEGC4NBP/VQTaGgZ+9AZXKlE6uc+8i/PeYSSmJTX2/2XLD/NdXNX2x9cWm1Exee1+PkGTWf6K598+dmZVsFPMNG7VCAjQE91BF9AlUJTXzVNS/mRDA36/ml8hS6QqkLUVfJ2CVQTTQURMcUD2Nrd1yA0J6M4XnUZfyMLWswld/geQCBVBn37WcsFSUDjLMGWZv05ND9VV/mRQILVnOgd8wFegpU5mSfz3t7TK2AwB4etrT2qt9s7s/qFKVuDJrYBmha8xl71/+7e0F+P4FLwBQQBIKZR0gSGLj6ltfKWp93sZ2te6GL3Uzt9WsUDN2KIUQTE/8d91BAAvmVzAcYYggIyoTQgCNSwJr9I/Owra5fMwObAQA7yHBxvpROzlAw45iZUVG04GpxqzgMothGAtcSmRvpTJhA6TLkaMaNaNhhGNaEjvkJ4Iz+UjEqc/Gt5JKeW7bTKoe1KcjVJ+e1ZFuqgYl9Xa7kie70yP6kJwYMy+cb83onHxOMae0okxZWN53DEL/MlkBic3d1X1IczzLe/mwO4k0CZe44JyDUxujcCxkR8JyrdoBk9C1ZDrXR40+ZATsqljhtlIFVdTsgQXTDnI0IFW8QcSbdLmcGeyC5QGMdKVpJKJyaEWYJclL7Swdfwxew5idrOp/7YD0Qu9DU+iVD2rdfzEDfkQ5jpKEWLFKhfQds20nhKvBF+F9uCFchzDqVKbtdsnk/3/oi7rX/zKCfFRTw0kB6Hurv1MTP3SffclEDX+YvtxHRJGrP0bLy0G3iFC+iLlh36KujzwHW2ukKM8clC+m6oq+xaUN/cK5fJG5l59XoVpdMFbqnM4iFq/RU+p9AqRntjtcpFBRX9oIF1nIcBrOcJGHbFHGJ3zpypTvUUZJyRe21PPFPUgY944Fi8LYy2PEzXHHBgaYPM7+LQtjr7MtT5/dEhjVd2VxsZe8gpswiV1lHHBMogN3KhjIyFKlpfimRsbCazeI9LPzxWk2owY5Bwu3uPMrbHU0bV6YvPlTuZ5LWtCcfo1SSJDH+NASGjEWc2IIeq2dHEl7YdZIU8kh3bZd7lgLtXgpxp27wAwLR+AugPO9srZtkDV2bjzP/x1hBHzAfyk0MY5zhDzGTCi+RyqpPjokSCMIy2NB4VZAUY+q3lgboeKQy24QeWNRGi9KMm3XpCE5D1FagNS1S++G0ur/xWkvsWFDpO2QtkzeiUGjjULuPkBu6mOFdD2HAkx81mGg3aS2N6lXAc80GdYcQb3lULoOEyTq5Wwc/RehEUuV5EpUzUs1vZWGzjQT2PindoDIvO5AuRZrDyZXQIQlaVqjyrjoudhsTBv6JrnCeXALurWrnbGaycGVBja4IZtM7JucWKfCYN4K1qiNT63DjsIGMmu1djgAFRHs/AxugmBXH3EIcQdH4CiBYRbntvJfhF5rVEqYpF0SaSyS3rYUX/ZCET91vI+1r8cOlVVvhy+7xxxjGy8buxwFC719u1TcHaqeEo+AMPPFvoHj9tCKCty2QqHAhDj99kJx39vRtQpVkWtgxNJG89I+YucAB6S562naxrTyngWhTGuI4KijGM/vvAJTBQN5L1CqXhps6rEqonihXL0kqF5Ur02H+alLU977ivjlTJDHKOVjzkXPNu9FRyWKFBVBSVWMqJoxqmGcapmgOiZRPZOpgSnUyFRqYqayIMahDbkqcvmyF1Qq6PPlc7QjpBRbKX7nDMd6xN9Z0jGF3ROXOYszeVgnTzghaIbAgMAFgRsCDwReCHwQ+CEIQKoikJUJpmjHRHWRnupySFSWuUSGuD4Gov49P11HHCIDaW+l5gV9p994oGOqQInwobLYRvIIXot4t0hxuQkvY7Y6WaZNgFalIO8yKD0AU2QH2bcPeUwblt8VK6cIAHrXdKGk4nLOZ6UFsiKDPDzA+hs5WlFdW3GkdQKIo73vmkFhYeWBVDIA6mH2qb1woAPNEobGRkh9l45x+fJTRxvAClXqEYYw9dsXSzjDzGeTNqIiK236mEd7nlT7VkFWj/KFpTeZZ8/dhhMh82JORJrfiN6roFFaA+lpP9XjEZaFfPsLf0xdQTCNFYl5fAeC2VhOuq0XG80qqTsk7ecFo2jsw2w2vR0wycZRojSgkgyQLI/rVfYRKRhmigvrrXUtn7XR0VGTSUQEKXm6srASe2AeGszug3Suco/JmkmFK244Uz2ESlbUmsixXJBaEkU2c5tPX2bCzdzg1Ftdc3T0t+6MKJNtO2VCL0epp7e6MQeVqpp/uU8Vw5bZiUFWYlVicemZowuUesds7bjbxkYjz7gHtLnj9r2g3Vu9y1k7yDat0wGZFbEk9eVhZU7d1IHmjEV9CeSg2rpbI5Uu+OnYj6INmYfNPtr/xWCaZW7y/ezEFV0wdm4KbIyXBsqw96w6atA0eoHVrZVVpBQYcpdf/rkdXun2JT+upbsgw/UjKIhqDq0UjILMTGM3w0qjUkm/NWrVcscx2DmMaR0m0H2D6i+QGJITEBSG1CRqABpDegKCwXQ0cUKhh2FxZCciOBy5QyiCx5GfiBBwTugbfSxCw2I0LEHjpFAMskyuKU9AKBhdxodeXqHmNXp5g5q3qHmHmveo+YC6bUShNVJPwhzYJWZwZym+SSFqVhRAaQuB7yHQUUS3jlMcl7h7P4KgBwATL7j4IOgvogrI2sVpIovTRRYFkcUZIoszRRZniSzOju3EOaIT54pOnCc6cb6lSBeEiC4MUdVFoSfMX3VfvijXPSEY78sbzjrn4mJ3sKiuF7lr8oQP7auEQSgEdkyCmapspMXTkK7iUa/KLVz6hOHW5u9M65bGxoylrCxq+eqjdMbXFwbjrtcu/Eru+mI/+N7wtrqvf9180VdR+MrN5atMfVefvx2Fl5v3ac91aN8Anu+zr+zS1+oXFq677bZ5hUe1C7/yjdnbXzJnWrckyQ9r33/F/hTo5eAj7TtfC3nJmx7S26Mw+xUUblAyvzRs0K59FeQt3PQi2ddAvX7z7fVf/6RrrL2xX4P4C7/Qd+VnfwXWFwg9mFf3dXPngkL5V2avf057+9mGXaqXWd3OwcPahY+ubfV1R3P+avB9Q/wh0mRZss3W3Gw7Sh2IhZ21g6nnvyixDZc4XvtJtPvYwfbWtr6eOtPgqdXpOy8pzHUNHzzrLMQvOOf4hf7hxanQJx0NV7gC24bz13e+bLf+vMLrya5n0nOHr821V+16n6m+JV9u3FkT3TjhkKr67+/1eZt/H/JXnO1YDP+x3/NmQ3xzZ6VW/8PKfd6R88uuNYwdv/tLpy8bHKxuO3g0XHlx/WVfdyaba0oPqtrvbfx/WenU284uoM+9csJ8+7ZQ/mi+SdE4kT/TdczFF7rL/2lz/Py6F9v1uam942FnV5e3Yr10vt7XUL70NeTfu3ulpzPZlq63DnxS7TBbI92x/b959LWmtsuC/AecXn1ivVpmf8Z1zWmD/qAhNYS+ql7eVOOKXy3fST2WP6xDz2kDN5v39Xh+YDg/b/ZZDzZPVEawVGjyTnvhQTM4AA6NvsAMKfSNO6gFQPT//3Y8K2qW5Lh9ZdCnM5loFAQZJBeKkq5B9zRNZQBbFpwxlhmDJCnLFrOJK0pKGQewTVvpcn4+6DH8Hp/XCFhNTcFcGoJxJngBZCIG2gZjLWPgXFpRSJJS0rjFAlj8Fp/hbKyvKIMZmks1VQVzbjAQGBUALWMg4iuCOE/xcQANqDe8XslUE8y12olLNAoJHBIv4AycnUaEvhpjYkWRmRApsf3zabR6PYYn4FFN9cFcpMrGOKNRQMToSs7M8JoaLQ2V5aExObnBzFgejW6I+ZQi642lKPFxWIPfToxTLkcsotBZEoyxFNN4LxGEvf6ARzbVBjH4uLzWm6sDKMIigOYYEagFeAU3gj8VvQjAdX39x9h/uL3jr6qd/wIA3r/lkQIAfLPgDfz3sf+1yqdI7wBQMABA8Jei+gnRn48DwtzcHJkA8fn/4G+ix9miPyDhe2jOiX5iN+J/xyDkR3U3ZPdCwsQsuQTA67YKcBygOAhHqQnAg4BoFHF4cBRj88IorsV7owTd/0ZJaqPGtyPTozR67DrCiY6ybdOWY+gSYuLSdLMO1hsmLVsNRjdsS71L1VGg9oT0Kjba5dgzumXXbzqazmfTqOoIM9omOhRv2gY2HWtFxJreL1W72HHTPus2HrWDxz9a1PP2/ZLotPW8OrauuOwoSRGx+KPtdgKnPt4x2sl2wuj1w+alq3lT5qW3I9xK97ZpHvI4Zpn/P5Nw/ZFnvDedf5zo0sUi/Yi5+u7jUGpPo6PcKBAQ3TCndYm4aigVitCezNDHMnJAqpfuZK697ChYCiZIexDMTPYC5BaS3PV5cOi9cdH5U/li7vz8jtaYz39OxVYqVo7qHvfu272gFkBpvHB1VkEyj5nTelhSdktVkrAFnqP/H1+LSx5nS53vpDUZvQ0A) format("woff2"); font-display: block; }   /* Pacifico (SIL OFL 1.1), subset to the letters of "Mini" only — 3.4 KB (renamed from Pocket Scoop 2026-10-16), no network */
.scoop-splash .splash-pk { display: none; }
@media (pointer: coarse) and (max-width: 950px) {
    /* "Welcome to The Pocket Scoop." — Pocket sits between The and Scoop, tilted, nudging Scoop over (Derek 2026-10-16). */
    .scoop-splash .splash-pk { display: inline-block; width: 1.4em; }   /* narrower than the word: Scoop slides over just a bit */
    .scoop-splash .splash-title { white-space: nowrap; font-size: clamp(1.1rem, 5.4vw, 1.45rem); margin-top: 30px; }   /* logo sits a little higher so Pocket clears the ring */
    .scoop-splash .splash-pk::before {
        content: "Mini"; display: inline-block; margin: 0 0 0 .08em; transform: rotate(-12deg) translateY(-.75em);
        font-family: "ScoopPocket", "Brush Script MT", cursive; font-weight: 400; font-size: 1.15em; line-height: 1; letter-spacing: 0;
        color: #c8102e; text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255,255,255,.95);
    }
}

/* ---- MINI SCOOP · Friendly's store cards (2026-10-22): fr_* blocks (AdminDataService.PocketFr.cs, _PocketScoop fr_daypart,
   PocketExtrasService fr_ovation_cm). Same palette vars as the rest of .pk-*; status colours match .pk-chip. */
.pk-g3 em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0; color: var(--muted, #6f6d67); margin-top: 1px; }
.pk-g3 small.pk-up { color: #1f9e5a; } .pk-g3 small.pk-dn { color: #c8344a; }
.pk-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; text-align: center; }
.pk-g4.pk-g4-3 { grid-template-columns: repeat(3, 1fr); }
.pk-g4 > div { background: var(--surface-alt, #faf9f7); border-radius: 9px; padding: 5px 2px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6f6d67); }
.pk-g4 b { display: block; font-size: 13px; letter-spacing: 0; color: var(--heading, #242426); text-transform: none; margin: 1px 0 2px; font-variant-numeric: tabular-nums; }
.pk-g4 .pk-chip { font-size: 10px; letter-spacing: 0; text-transform: none; }
.pk-chip.pk-a { background: #fbf1de; color: #8a5a12; }
.pk-kg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-kg > div { background: var(--surface-alt, #faf9f7); border-radius: 9px; padding: 6px 7px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6f6d67); min-width: 0; }
.pk-kg > div.bad { background: #fbe4e8; } .pk-kg > div.good { background: #e3f4ea; }
.pk-kg b { display: block; font-size: 15px; letter-spacing: 0; color: var(--heading, #242426); text-transform: none; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pk-kg .bad b { color: #c8344a; } .pk-kg .good b { color: #1f9e5a; }
.pk-kg small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.25; overflow-wrap: anywhere; }
.pk-kg > div.bad small, .pk-kg > div.good small { color: #5f5d58; }
.pk-tb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pk-tb th { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6f6d67); text-align: right; padding: 0 0 5px; }
.pk-tb th:first-child, .pk-tb td:first-child { text-align: left; }
.pk-tb td { font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--surface-alt, #f1efea); text-align: right; color: var(--heading, #242426); }
.pk-tb td:first-child { font-weight: 700; }
.pk-tb td.pk-up { color: #1f9e5a; font-weight: 800; } .pk-tb td.pk-dn { color: #c8344a; font-weight: 800; }
.pk-tb tr.tot td { border-top: 2px solid var(--border, #dedcd6); font-weight: 900; }
.pk-bars2 .r { display: grid; grid-template-columns: 96px 1fr 50px; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; color: var(--heading, #242426); }
.pk-trk { height: 8px; background: var(--surface-alt, #f1efea); border-radius: 4px; overflow: hidden; }
.pk-trk i { display: block; height: 100%; border-radius: 4px; }
.pk-bars2 .n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-sub { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6f6d67); margin: 10px 0 2px; display: flex; justify-content: space-between; }
.pk-al.pk-i { border-left-color: #2f6fdf; }
.pk-kg + .pk-al, .pk-tb + .pk-al, .pk-bars2 + .pk-al, .pk-g4 + .pk-al, .pk-ln + .pk-al { margin-top: 8px; }
.pk-cm { padding: 8px 0; border-top: 1px solid var(--surface-alt, #f1efea); font-size: 12.5px; line-height: 1.4; color: var(--heading, #242426); }
.pk-cm .m { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted, #6f6d67); margin-bottom: 2px; }
.pk-cm .m .pk-dn { color: #c8344a; }
.pk-stars { color: #e6a817; letter-spacing: 1px; font-size: 12px; } .pk-stars i { font-style: normal; color: var(--border, #dedcd6); }
.pk-score { display: flex; gap: 14px; align-items: center; padding-bottom: 6px; font-size: 12px; color: var(--heading, #242426); }
.pk-score small { display: block; font-size: 10.5px; color: var(--muted, #6f6d67); margin-top: 2px; }

/* ---- MINI SCOOP "needs a look" popups (2026-10-22): action bar, tappable attention lines, bottom sheet, items,
   rotate prompt + toast, top "Back to Mini Scoop" pill. Markup: Services/PocketPop.cs · behaviour: mobile-orient.js */
.pk-act { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 8px 10px;
    border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 800; text-align: left; cursor: pointer; }
.pk-act > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pk-act i { font-style: normal; font-size: 17px; line-height: 1; }
.pk-act-n { display: inline-block; min-width: 22px; text-align: center; border-radius: 999px; padding: 1px 7px; font-size: 11px; color: #fff; }
.pk-act-r { background: #fbe4e8; color: #a0283c; } .pk-act-r .pk-act-n { background: #c8344a; }
.pk-act-a { background: #fbf1de; color: #8a5a12; } .pk-act-a .pk-act-n { background: #b7791f; }
.pk-act-b { background: #e6eefc; color: #1d4fb0; } .pk-act-b .pk-act-n { background: #2f6fdf; }
.pk-act-g { background: #e3f4ea; color: #17784a; } .pk-act-g .pk-act-n { background: #1f9e5a; }
.pk-act-n.pk-act-n, .pk-act-n { line-height: 1.5; }
.pk-act-x { background: var(--surface-alt, #faf9f7); color: var(--heading, #242426); border: 1px solid var(--border, #dedcd6); }
.pk-act-x .pk-act-n { background: var(--muted, #6f6d67); }
.pk-al.pk-tap { cursor: pointer; position: relative; padding-right: 24px; }
.pk-al.pk-tap::after { content: "›"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted, #6f6d67); }
.pk-sheet { position: fixed; inset: 0; z-index: 10060; pointer-events: none; }
.pk-sheet-bg { position: absolute; inset: 0; background: rgba(20,20,22,.45); opacity: 0; transition: opacity .18s; }
.pk-sheet-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; display: flex; flex-direction: column; background: var(--surface, #fff);
    color: var(--text, #33322f); border-radius: 20px 20px 0 0; transform: translateY(102%); transition: transform .22s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
    max-width: 640px; margin: 0 auto; }
.pk-sheet.pk-sheet-open { pointer-events: auto; }
.pk-sheet.pk-sheet-open .pk-sheet-bg { opacity: 1; }
.pk-sheet.pk-sheet-open .pk-sheet-p { transform: none; }
@media (prefers-reduced-motion: reduce) { .pk-sheet-bg, .pk-sheet-p { transition: none; } }
.pk-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border, #d6d3cc); margin: 8px auto 2px; }
.pk-sheet-hd { display: flex; align-items: flex-start; gap: 10px; padding: 6px 16px 10px; border-bottom: 1px solid var(--surface-alt, #f1efea); }
.pk-sheet-t { flex: 1; min-width: 0; }
.pk-sheet-t b { display: block; font-size: 16px; color: var(--heading, #242426); }
.pk-sheet-t span { display: block; font-size: 11.5px; color: var(--muted, #6f6d67); }
.pk-sheet-x, .pk-sheet-back { flex: none; border: 0; background: var(--surface-alt, #f1efea); color: var(--heading, #242426); height: 32px; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; }
.pk-sheet-x { width: 32px; } .pk-sheet-back { padding: 0 10px; white-space: nowrap; } .pk-sheet-back[hidden] { display: none; }
.pk-sheet-b { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 14px; }
.pk-sheet-f { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface-alt, #f1efea); }
.pk-sheet-done { width: 100%; font: inherit; font-size: 14px; font-weight: 800; border: 0; border-radius: 11px; padding: 11px; background: var(--ink, #242426); color: #fff; cursor: pointer; }
.pk-it { padding: 10px 0; border-top: 1px solid var(--surface-alt, #f1efea); }
.pk-sheet-b section > .pk-it:first-child, .pk-sheet-b section > .pk-pop-note:first-child + .pk-it { border-top: 0; }
.pk-it-nm { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--heading, #242426); }
.pk-it-nm small { font-weight: 700; color: var(--muted, #6f6d67); font-size: 11px; margin-left: 4px; }
.pk-it-nm > span:last-child { white-space: nowrap; text-align: right; }
.pk-it-q { font-size: 12.5px; line-height: 1.45; background: var(--surface-alt, #faf9f7); border-radius: 9px; padding: 7px 9px; margin-top: 5px; color: var(--heading, #242426); }
.pk-it ul { margin: 5px 0 0; padding: 0; list-style: none; }
.pk-it li { position: relative; font-size: 12.5px; line-height: 1.4; padding: 3px 0 3px 18px; }
.pk-it li::before { position: absolute; left: 0; top: 3px; font-size: 11px; }
.pk-li-risk::before { content: "⚠️"; } .pk-li-below::before { content: "▼"; color: #c8344a; }
.pk-li-good::before { content: "✓"; color: #1f9e5a; font-weight: 900; } .pk-li-do::before { content: "→"; color: #2f6fdf; font-weight: 900; }
.pk-li-info::before { content: "•"; color: var(--muted, #6f6d67); font-weight: 900; }
.pk-it-a { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #2f6fdf; text-decoration: none; }
.pk-st { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border: 0; border-top: 1px solid var(--surface-alt, #f1efea);
    background: none; font: inherit; text-align: left; color: var(--heading, #242426); cursor: pointer; }
.pk-sheet-b section > .pk-st:first-child { border-top: 0; }
.pk-st > span:first-child b { display: block; font-size: 13.5px; } .pk-st small { display: block; font-size: 11px; color: var(--muted, #6f6d67); font-weight: 600; }
.pk-st > span:last-child { white-space: nowrap; font-weight: 800; } .pk-st i { font-style: normal; color: var(--muted, #6f6d67); margin-left: 8px; font-size: 17px; }
.pk-pop-note { font-size: 11.5px; color: var(--muted, #6f6d67); background: var(--surface-alt, #faf9f7); border-radius: 8px; padding: 6px 9px; margin: 6px 0; }
.pk-pop-h { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6f6d67); margin: 12px 0 2px; }
.pk-hide { display: none !important; }
.pk-more-btn { display: block; width: 100%; margin-top: 8px; padding: 9px; font: inherit; font-size: 12.5px; font-weight: 800; border: 1px solid var(--border, #dedcd6);
    border-radius: 10px; background: var(--surface-alt, #faf9f7); color: var(--heading, #242426); cursor: pointer; }
.pk-sheet .pk-up, .pk-sheet b.pk-up { color: #1f9e5a; } .pk-sheet .pk-dn, .pk-sheet b.pk-dn { color: #c8344a; }
.pk-toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10070; width: min(330px, 90vw);
    background: var(--ink, #242426); color: #fff; border-radius: 14px; padding: 11px 14px; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pk-toast b { display: block; font-size: 14px; margin-bottom: 2px; }
.pk-foot .pk-full { display: inline-block; margin-top: 8px; border: 0; background: none; font: inherit; font-size: 11px; color: var(--muted, #6f6d67); text-decoration: underline; cursor: pointer; }
.scoop-view-return.svr-top { bottom: auto; top: calc(10px + env(safe-area-inset-top)); right: auto; left: 50%; transform: translateX(-50%); font-size: 14px; padding: 11px 18px; }

/* ---- MINI SCOOP: "Sales data through" strip + Weather update tile (2026-10-22) */
.pk-thru { font-size: 12px; color: var(--heading, #242426); background: var(--surface, #fff); border: 1px solid var(--border, #dedcd6); border-radius: 10px;
    padding: 7px 10px; margin-bottom: 8px; text-align: center; }
.pk-thru span { color: var(--muted, #6f6d67); font-weight: 700; } .pk-thru b { font-weight: 900; }
.pk-wx3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-wxd { background: var(--surface-alt, #faf9f7); border-radius: 10px; padding: 7px 4px 6px; text-align: center; min-width: 0; color: var(--heading, #242426); }
.pk-wxd.rain { background: #eaf1fd; }
.pk-wxd .wd { font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6f6d67); }
.pk-wxd .wi { font-size: 22px; line-height: 1.25; margin-top: 2px; }
.pk-wxd .wt { font-size: 14px; font-variant-numeric: tabular-nums; } .pk-wxd .wt span { color: var(--muted, #6f6d67); font-size: 12px; }
.pk-wxd .wc { font-size: 10.5px; color: var(--muted, #6f6d67); line-height: 1.25; min-height: 1.25em; }
.pk-wxd .wr { font-size: 10px; font-weight: 800; color: #1d4fb0; margin-top: 2px; }
.pk-wxd .wl, .pk-wxd .ws { font-size: 9.5px; color: var(--muted, #6f6d67); border-top: 1px dashed var(--border, #dedcd6); margin-top: 5px; padding-top: 4px; line-height: 1.3; }
.pk-wxd .wl b, .pk-wxd .ws b { color: var(--heading, #242426); }
.pk-wxd .ws .pk-up { color: #1f9e5a; font-weight: 800; } .pk-wxd .ws .pk-dn { color: #c8344a; font-weight: 800; }

/* ---- MINI SCOOP round 3 (2026-10-23): Sales · comp & YoY table, Day part table, two-up KPI grid */
.pk-sales .pk-sx { margin-top: 8px; }
.pk-sales .pk-sx td:first-child { font-weight: 800; color: var(--muted, #6f6d67); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.pk-sales .pk-sx td { font-size: 13.5px; font-weight: 800; }
.pk-dp th, .pk-dp td { font-size: 11.5px; } .pk-dp th { font-size: 9px; letter-spacing: .03em; }
.pk-dp td:first-child { font-weight: 700; }
.pk-kg.pk-kg2 { grid-template-columns: repeat(2, 1fr); }
.pk-kg small .pk-chip { font-size: 10px; }
.pk-big.pk-up { color: #1f9e5a; } .pk-big.pk-dn { color: #c8344a; }

/* ---- MINI SCOOP round 4 (2026-10-23): "Friendly's only" tag on Friendly's tiles; Brands · comp & YoY two-line table */
.pk-lz.pk-fro > .pk-card { position: relative; margin-top: 14px; }
.pk-lz.pk-fro > .pk-card::before { content: "Friendly's only"; position: absolute; top: -8px; right: 12px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
    color: #a0283c; background: var(--surface, #fff); border: 1px solid #efc3cb; border-radius: 999px; padding: 1px 8px; }
.pk-by2 tr.by-h td { padding-top: 9px; border-top: 2px solid var(--border, #dedcd6); font-size: 13px; color: var(--heading, #242426); }
.pk-by2 tr.by-h:first-of-type td { border-top: 0; }
.pk-by2 tr.by-h small { color: var(--muted, #6f6d67); font-weight: 600; font-size: 11px; margin-left: 4px; }
.pk-by2 tr.by-h.tot td { border-top: 2px solid var(--ink, #242426); }
.pk-by2 td:first-child { font-size: 10.5px; color: var(--muted, #6f6d67); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pk-by2 tr.by-h td:first-child { text-transform: none; letter-spacing: 0; }
.pk-by2 tr.by-ck td { font-size: 11px; color: var(--muted, #6f6d67); text-transform: none; letter-spacing: 0; font-weight: 600; text-align: left; border-top: 0; padding-top: 0; }
.pk-by2 tr.by-ck b { color: var(--heading, #242426); }
.pk-by2 .pk-up { color: #1f9e5a; font-weight: 800; } .pk-by2 .pk-dn { color: #c8344a; font-weight: 800; }

/* Mini Scoop round 5 (2026-10-23): sign-out icon in the header; breathing room between the weather days and the alerts. */
a.pk-ib.pk-out { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pk-wx3 + .pk-al { margin-top: 10px; }
/* Day part summary (2026-10-23): tight columns that hug the day part name; checks with avg check under it; scrolls
   inside the card (never off the phone) if the phone's text size is turned way up. */
#pocket-scoop { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pk-dpw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px; }
.pk-tb.pk-dp th, .pk-tb.pk-dp td { font-size: 11px; white-space: nowrap; padding-left: 6px; }
.pk-tb.pk-dp th { font-size: 8.5px; letter-spacing: .02em; vertical-align: bottom; }
.pk-tb.pk-dp th:first-child, .pk-tb.pk-dp td:first-child { padding-left: 0; width: 1%; padding-right: 4px; }
.pk-tb.pk-dp td small, .pk-tb.pk-dp th small { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted, #6f6d67); line-height: 1.15; }
.pk-tb.pk-dp th small { font-size: 8px; font-weight: 800; }