* { box-sizing: border-box; }
/* "Command" design tokens — dark control bar, cool neutral surfaces, CFA red
   used sparingly as the single accent. See docs/superpowers/specs/
   2026-09-14-command-ui-brief.md for the full spec. */
:root {
  --content-width: 1200px;
  --bg:#f4f6f8;      /* app background (cool light) */
  --panel:#ffffff;   /* cards / tables */
  --ink:#262626;     /* primary text (dark grey) */
  --muted:#64748b;   /* labels, secondary */
  --line:#e4e8ee;    /* hairline borders */
  --navbar:#2e2e2e;  /* dark grey top bar */
  --accent:#e4002b;  /* CFA red — brand mark, key emphasis, buttons */
  --pos:#0e7c4a;     /* good / up */
  --neg:#c0392b;     /* bad / down */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: ui-sans-serif, system-ui, sans-serif;
  /* Per-store color dot — Deer Valley green, Norterra yellow/gold, JVGA
     (combined) blue. Replaces the old full-page store background tint. */
  --store-deer-valley:#2e7d32;
  --store-norterra:#c89a00;
  --store-jvga:#2f6fb0;
}
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); }
.nav { background: var(--navbar); color: #fff; }
.nav-inner { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
       max-width: var(--content-width); margin: 0 auto; padding: .75rem 1rem; }
.nav a { color: #a3a3a3; text-decoration: none; font-weight: 600; }
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; }
.nav .who { opacity: .85; font-size: .85rem; color: #a3a3a3; }
.nav-divider { width: 2px; height: 1.1rem; align-self: center;
  background: rgba(255,255,255,.4); }
/* Brand mark: an ascending-bars logo (CFA red), icon-only, before the nav
   links, per the Command UI brief. */
.brand { display: flex; align-items: center; text-decoration: none;
  margin-right: .5rem; }
.brand-mark { flex: none; }
.brand-mark rect { fill: var(--accent); }
/* Per-store color dot — sits next to the store name wherever a single-store
   page shows its context (replaces the old full-page background tint). */
.store-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block;
  flex: none; background: var(--muted); }
.store-dot.store-deer-valley { background: var(--store-deer-valley); }
.store-dot.store-norterra    { background: var(--store-norterra); }
.store-dot.store-jvga        { background: var(--store-jvga); }
.nav .store-context { display: flex; align-items: center; gap: .4rem; color: #d4d4d4;
  font-size: .85rem; margin-left: .25rem; }
/* Nav dropdown ("Workbook Setup"): opens on hover (desktop) and on
   focus/tap-through (keyboard + touch, since :hover alone doesn't fire on
   tap on most mobile browsers until a second tap). */
.nav-dropdown { position: relative; }
.nav-dropdown-label { color: #a3a3a3; font-weight: 600; cursor: pointer; user-select: none;
  background: none; border: none; font-family: inherit; font-size: 1rem; padding: 0; }
.nav-dropdown-label.active { color: #fff; }
.nav-dropdown:hover .nav-dropdown-label,
.nav-dropdown:focus-within .nav-dropdown-label { color: #fff; }
/* padding-top (not margin-top) puts the "gap" above the links inside the
   menu's own box, so it stays part of the hoverable area — a margin gap
   breaks :hover the instant the cursor crosses it moving down from the
   label, closing the menu before the cursor reaches it. */
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0;
  padding: .5rem .35rem .35rem; margin: 0; min-width: 11rem; flex-direction: column;
  gap: .1rem; z-index: 20; background: var(--navbar); border: 1px solid #484848;
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  background-clip: padding-box; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a { padding: .35rem .5rem; border-radius: 6px; }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,.08); }
/* Navbar Marketing menu: the Workbook Setup card (.gear-menu-menu) — white,
   one row per page with a colored icon tile, name and one-line description —
   opening just below the bar. An invisible ::before bridges the gap so :hover
   holds on the way down. On a phone it spans the screen so it stays on it. */
.nav-caret { width: .7rem; height: .7rem; margin-left: .3rem; vertical-align: middle;
  transition: transform .15s ease; }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav .nav-mk-menu { top: calc(100% + .9rem); left: -.75rem; min-width: 17rem; }
.nav .nav-mk-menu::before { content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 1rem; }
.nav .nav-mk-menu .gear-item, .nav .nav-mk-menu .gear-item:hover,
.nav .nav-mk-menu .gear-item.active { color: var(--ink); }
.gear-item-icon.is-events { background: #eaf1fb; color: #1f4f8a; }
.gear-item-icon.is-expenses { background: #fff4e0; color: #9a5b00; }
.gear-item-icon.is-sampling { background: #e8f5ec; color: #1a7d34; }
.gear-item-icon.is-donations { background: #fdecee; color: #a3122a; }
.gear-item-icon.is-shared-table { background: #e8f5ec; color: #1a7d34; }
.gear-item-icon.is-transfers { background: #fdf3e3; color: #9a5b00; }
.gear-item-icon.is-waste { background: #eef0f3; color: #475467; }
.nav .nav-mk-menu .gear-item-text strong { white-space: nowrap; }
@media (max-width: 640px) {
  /* full width under the label wherever the bar wrapped it (fixed with top:auto
     keeps it at the label's spot) */
  .nav .nav-mk-menu { position: fixed; top: auto; left: 1rem; right: 1rem;
    min-width: 0; margin-top: .6rem; }
}
/* Workbook-page gear menu: same open/close mechanics as the navbar dropdown,
   but the menu sits on a light card background instead of the dark navbar. */
.workbook-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.workbook-title-left { display: flex; align-items: center; gap: .5rem; }
/* A flex box (not a block) so the title's big line height doesn't push the
   Setup pill below Additional Material. */
.workbook-title .gear-menu { display: flex; }
.resources-link { display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font-weight: 600; font-size: .85rem;
  text-decoration: none; white-space: nowrap; }
.resources-link:hover { background: rgba(0,0,0,.05); }
/* "‹ Workbook" back button on the Workbook setup pages (Vendors, Other
   Tasks, Emergency Vendors) — same pill as Additional Material. */
.page-back { margin: .6rem 0 .2rem; }
.back-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .85rem .35rem .65rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  font-weight: 600; font-size: .85rem; text-decoration: none; }
.back-btn:hover { background: rgba(0,0,0,.05); }
/* "Setup" pill: same look as Additional Material, with a gear and a caret. */
.gear-menu-label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .75rem .4rem .65rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: 600 .85rem/1.2 var(--sans);
  letter-spacing: 0; text-transform: none; }
.gear-menu-label .gear-icon { width: 1.05rem; height: 1.05rem; color: var(--muted);
  transition: transform .35s ease, color .2s; }
.gear-menu-label .gear-caret { width: .7rem; height: .7rem; color: var(--muted);
  transition: transform .2s; }
.gear-menu:hover .gear-menu-label,
.gear-menu:focus-within .gear-menu-label { background: #f3f4f6; }
.gear-menu:hover .gear-icon,
.gear-menu:focus-within .gear-icon { transform: rotate(60deg); color: var(--ink); }
.gear-menu:hover .gear-caret,
.gear-menu:focus-within .gear-caret { transform: rotate(180deg); }
.gear-menu.active .gear-menu-label { border-color: var(--ink); }
.gear-menu-menu { background: var(--panel); border: 1px solid var(--line); min-width: 18.5rem;
  padding: .55rem .4rem .4rem; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.gear-menu-menu .gear-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem;
  border-radius: 8px; color: var(--ink); text-decoration: none; }
.gear-menu-menu .gear-item:hover, .gear-menu-menu .gear-item.active { background: #f3f4f6; }
.gear-item-icon { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 8px; }
.gear-item-icon svg { width: 1.15rem; height: 1.15rem; }
.gear-item-icon.is-vendors { background: #eaf1fb; color: #1f4f8a; }
.gear-item-icon.is-tasks { background: #e8f5ec; color: #1a7d34; }
.gear-item-icon.is-emergency { background: #fdecee; color: #a3122a; }
.gear-item-text { display: grid; gap: .05rem; min-width: 0; }
.gear-item-text strong { font-size: .92rem; font-weight: 700; }
.gear-item-text small { font-size: .76rem; color: var(--muted); font-weight: 500; }
/* "Additional Material" pill: matches Setup, with a book icon and an
   opens-in-a-new-tab arrow. */
.material-link { padding: .4rem .75rem .4rem .65rem; gap: .4rem; }
.material-link .material-icon { width: 1.05rem; height: 1.05rem; color: var(--muted); transition: color .2s; }
.material-link .material-out { width: .7rem; height: .7rem; color: var(--muted);
  transition: transform .2s; }
.material-link:hover { background: #f3f4f6; }
.material-link:hover .material-icon { color: var(--ink); }
.material-link:hover .material-out { transform: translate(1px, -1px); }
/* On a phone the pill starts the row under the title; keep the menu on screen. */
@media (max-width: 600px) {
  .gear-menu-menu { min-width: 0; width: min(18.5rem, calc(100vw - 2rem)); } }
@media (prefers-reduced-motion: reduce) {
  .gear-menu-label .gear-icon, .gear-menu-label .gear-caret { transition: none; } }
.container { max-width: var(--content-width); margin: 1rem auto; padding: 0 1rem; }
/* One-off announcement banner (User.pending_announcement) — shown once,
   dismissed via its own "Got it" form. */
.announcement { display: flex; justify-content: space-between; align-items: center;
                gap: 1rem; background: #fff7e6; border: 1px solid #f0d98c;
                border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.announcement p { margin: 0; }
.announcement form { margin: 0; }
.card { background: var(--panel); padding: 1rem; border-radius: 10px; border: 1px solid var(--line);
        box-shadow: 0 1px 3px rgba(0,0,0,.04); display: grid; gap: .75rem; max-width: 420px; }
/* Compact selector bar (store / year / month) — fields sit inline, only as
   wide as their content instead of the full stacked card. */
.card.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
                width: fit-content; max-width: 100%; padding: .6rem .75rem; }
.card.filters label { font-size: .8rem; gap: .15rem; }
.card.filters input, .card.filters select { padding: .3rem .45rem; font-size: .9rem; }
.card.filters input[type=number] { width: 4.5rem; }
.card.filters button { padding: .4rem .8rem; font-size: .9rem; }
/* Generic vertical form layout inside a .card — a form isn't a grid by
   default, so it needs its own gap to match the card's own spacing. */
.stack { display: grid; gap: .75rem; }
/* "Add a one-off item" / "Refresh workbook" cards on the Workbook page. */
.oneoff-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1.5rem; }
.oneoff-card { max-width: 420px; }
/* Other Tasks: the add form has Restaurant and Card side by side, so its
   card is sized to fit them (stacks to one column on phones). */
.tmpl-add-card { max-width: 860px; }
.tmpl-add-card > *, .tmpl-add-card .stack > *, .tmpl-add-card .checkbox-field span { min-width: 0; }
.tmpl-add-card select, .tmpl-add-card input:not([type=checkbox]) { width: 100%; min-width: 0; }
.tmpl-add-card .checkbox-field { flex-wrap: nowrap; align-items: baseline; }
.tmpl-add-card .checkbox-field span { flex: 1; }
.oneoff-card-narrow { max-width: 300px; }
/* "+ Add …" footer on the One-off and Emergency cards, and the add panel
   each button opens in place. An open panel takes the full footer width. */
.card-foot { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start;
  padding: .6rem .75rem .75rem; border-top: 1px solid var(--line); }
.card-add:has(> .card-add-panel:not([hidden])) { flex: 1 1 100%; }
.card-add-panel { display: flex; flex-direction: column; gap: .6rem; max-width: 480px; }
.card-add-panel[hidden] { display: none; }
.card-add-actions { display: flex; gap: .75rem; align-items: center; }
.card-add-open { padding: .85rem 1.5rem; font-size: 1.05rem; font-weight: 600; }
/* Users page: the users table and its "+ Add User" footer share one white
   card, like a Workbook subject card. */
.users-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.users-card table { border: 0; border-radius: 0; }
.users-card .card-add-panel h3 { margin: 0; }
.card-head h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.card-head .hint { margin: 0; }
/* min-width:0 overrides the grid/flex default of min-width:auto, which sizes
   a track/item to its content's intrinsic width (e.g. a <select>'s widest
   option) even when that's wider than the column — the classic cause of a
   form control quietly overflowing past its card's border. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field-row label { min-width: 0; }
.field-row select, .field-row input { width: 100%; min-width: 0; }
.checkbox-field { display: flex; flex-direction: row; align-items: center; gap: .5rem;
  font-weight: 600; flex-wrap: wrap; }
.checkbox-field input { margin: 0; }
.checkbox-field span { min-width: 0; }
.checkbox-field small { font-weight: 400; color: var(--muted); }
.btn-secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bg); }
/* In-form segmented toggle (e.g. one-off item vs. invoice) — same pill look
   as the page-level .store-toggle, scaled down, built on radio+label so it
   still posts a real form value. */
.type-toggle { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem;
               border-radius: 10px; background: #eceef1; width: fit-content;
               max-width: 100%; position: relative; }
.type-toggle input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.type-btn { display: inline-flex; align-items: center; padding: .4rem 1rem;
            font-size: .85rem; font-weight: 600; color: #5b5d63; border-radius: 7px;
            cursor: pointer; user-select: none;
            transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.type-toggle input[type=radio]:checked + .type-btn { background: var(--accent); color: #fff;
  font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.type-toggle input[type=radio]:not(:checked) + .type-btn:hover { background: rgba(255,255,255,.7); }
.type-toggle input[type=radio]:focus-visible + .type-btn { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}
label { display: grid; gap: .25rem; font-weight: 600; }
input, select { padding: .5rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
input:focus, select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
button { padding: .6rem 1rem; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
         font-weight: 700; font-size: 1rem; cursor: pointer; }
/* Button-styled link (e.g. the QCD chart link on the Reports page) */
a.btn { display: inline-block; padding: .5rem .9rem; background: var(--accent); color: #fff;
        border-radius: 8px; font-weight: 700; text-decoration: none; }
a.btn:hover { background: #c40026; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 10px;
        overflow: hidden; border: 1px solid var(--line); }
th, td { padding: .5rem .75rem; text-align: right; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
/* Uppercase, muted, sans-serif column headers; monospaced tabular figures in
   the numeric (non-first) columns so values line up down the column — the
   "Command" look, applied once here so it's consistent across every table
   (entries, workbook, reports, month close, dashboard) with no per-page work. */
th { font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em;
     font-size: .72rem; font-weight: 700; color: var(--muted); }
td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Compact inline delete — sits in a table row, not a full-size action button */
button.link-danger { background: none; color: #b00020; padding: .2rem .4rem; font-size: .85rem;
                     font-weight: 600; text-decoration: underline; }
/* Compact inline password reset — input + button on one line inside a table cell */
.inline-reset { display: flex; gap: .4rem; justify-content: flex-end; }
.inline-reset input { padding: .3rem .45rem; font-size: .9rem; }
.inline-reset button { padding: .3rem .7rem; font-size: .9rem; }
.error { color: #b00020; font-weight: 600; }
.locked { color: #8a6d00; font-weight: 600; }
.autosave-status { margin-left: .75rem; color: #777; font-size: .85rem; }
/* "Required: x/y complete" with the autosave status beside it. */
.wb-progress { display: flex; align-items: baseline; flex-wrap: wrap; }
.autosave-status.ok { color: #137333; }
.autosave-status.error { color: #b00020; font-weight: 600; }
/* A task's input boxes: a compact shaded panel, two per row, each label sitting
   right on its box (boxes line up even when a label wraps). */
.input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 30rem));
  gap: .75rem 2rem; max-width: 64rem; margin: .1rem 0 .35rem;
  padding: .7rem .9rem; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; }
.input-grid label { display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: #4a5568; line-height: 1.25; }
.input-grid input { width: 100%; max-width: 10rem; background: #fff; }
/* A set with a total: the boxes sit centered as a group, and the total takes
   the whole row under the boxes it adds up. */
.input-grid.is-balanced { grid-template-columns: repeat(2, minmax(0, 21rem));
  justify-content: center; column-gap: 3rem; }
.input-grid.is-balanced label { align-items: center; text-align: center; }
.input-grid.is-balanced input { max-width: 12rem; text-align: center; }
.input-grid .input-wide { grid-column: 1 / -1; padding-top: .6rem;
  border-top: 1px dashed var(--line); }
.input-grid.is-balanced .input-wide input { max-width: 16rem; }
@media (max-width: 600px) { .input-grid { grid-template-columns: 1fr; }
  .input-grid-gap { display: none; } }
/* Chase Card: the two weekly amounts get the same look — a shaded band with
   compact white boxes — and the month-end confirm sits inline with its text. */
.chase-table td.chase-amt { background: #f6f8fb; }
.chase-table td.chase-amt input { width: 100%; max-width: 10rem; background: #fff; }
.chase-table .chase-eom { display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; }
@media (max-width: 600px) {
  .chase-table td.chase-amt { flex-direction: column; align-items: stretch; gap: .3rem; }
  .chase-table td.chase-amt input { max-width: none; }
}

/* Plain numeric fields — no spinner up/down arrows */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pay-all-invoices tree: parent occurrence, nested vendors, service visits */
.pa-head td { background: #f6f7f9; border-top: 2px solid #e0e0e0; }
.pa-vendor td { border-top: 1px solid #eee; }
.pa-toggle { border: 0; background: none; cursor: pointer; font-size: .9rem;
  color: #666; padding: 0 .35rem 0 0; line-height: 1; }
.pa-toggle:hover { color: #e4002b; }
.pa-reason { width: 100%; }

/* Nested vendor service-visit checklist under a single payment */
.svc-sub td, .pa-visit td { border-top: 1px dashed #e2e2e2; font-size: .82rem; }
.svc-visit { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.svc-visit .svc-ok { white-space: nowrap; font-weight: 600; color: #444; }
.svc-visit .svc-push { background: none; border: 0; color: #3a6ea5; cursor: pointer;
  font-size: .8rem; padding: .1rem .3rem; white-space: nowrap; }
.svc-visit .svc-push:hover { text-decoration: underline; }
/* Invoice "→ Next Week" / "undo" in the Status cell: same small link look */
button.vpush, button[form^="vpushreset_"] { background: none; border: 0; color: #3a6ea5; cursor: pointer;
  font-size: .75rem; padding: 0; margin-top: .15rem; white-space: nowrap; }
button.vpush:hover, button[form^="vpushreset_"]:hover { text-decoration: underline; }
/* Invoice Void / Un-void: the same small link, in red */
button.link-danger[form^="void_"] { color: #b00020; font-size: .75rem; padding: 0; white-space: nowrap;
  text-decoration: none; }
button.link-danger[form^="void_"]:hover { text-decoration: underline; }
/* Small icons beside the invoice links so they read as clickable; drawn in
   the link's own color (currentColor) through a mask. */
button.vpush::after, button[form^="vpushreset_"]::after, button.link-danger[form^="void_"]::after {
  content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -.1em;
  background-color: currentColor; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
button.vpush { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h10M8 4l4 4-4 4M14 3v10'/%3E%3C/svg%3E"); }
button[form^="vpushreset_"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3 2 6l3 3'/%3E%3Cpath d='M2 6h7a4 4 0 0 1 0 8H6'/%3E%3C/svg%3E"); }
button.link-danger[form^="void_"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M3.8 12.2l8.4-8.4'/%3E%3C/svg%3E"); }

/* Workbook: store switcher as a segmented pill control, not a dropdown.
   Track is a soft neutral background; the active store reads as a raised
   red pill (brand color) with a shadow, no hard divider lines between
   segments — a more refined look than flat bordered blocks. */
.store-toggle { display: inline-flex; gap: .3rem; padding: .35rem; border-radius: 12px;
                background: #eceef1; width: fit-content; }
.store-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.8rem;
             font-size: 1.15rem; font-weight: 600; text-decoration: none;
             color: #5b5d63; border-radius: 9px; transition: background .15s ease, color .15s ease,
             box-shadow .15s ease; }
.store-btn::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; flex: none;
  background: var(--muted); }
.store-btn[data-store="deer-valley"]::before { background: var(--store-deer-valley); }
.store-btn[data-store="norterra"]::before    { background: var(--store-norterra); }
.store-btn[data-store="jvga"]::before        { background: var(--store-jvga); }
.store-btn.active { background: #e4002b; color: #fff; font-weight: 700;
                     box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.store-btn:not(.active):hover { background: rgba(255,255,255,.7); color: #1d1d1f; }
/* Phones: compact store pills so all three fit the screen, and let a page
   title's right-hand button drop under the title instead of squeezing it. */
@media (max-width: 600px) {
  .store-toggle { max-width: 100%; }
  .store-btn { padding: .6rem .7rem; font-size: .95rem; gap: .35rem; white-space: nowrap; }
  /* Title on its own line; Setup and Additional Material side by side under it. */
  .workbook-title { flex-wrap: wrap; justify-content: flex-start; }
  .workbook-title-left { display: contents; }
  .workbook-title-text { flex-basis: 100%; }
}

/* Emergency vendors page: a settings row (text left, On | Off pill right)
   and one card holding the vendor table with an inline add row at the foot.
   The pill is the shared .type-toggle, submitting on change. */
.em-page { display: grid; gap: 1rem; max-width: 720px; }
.em-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
.em-panel table { border: 0; border-radius: 0; }
.em-section { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; padding: 1rem; flex-wrap: wrap; }
.em-section-text { flex: 1 1 18rem; min-width: 0; }
.em-section-text .hint { margin: .25rem 0 0; }
.em-vendors th:last-child, .em-vendors td:last-child { width: 1%; white-space: nowrap; }
.em-inline { display: flex; gap: .5rem; align-items: center; }
.em-inline input { flex: 1 1 0; width: 0; min-width: 0; max-width: 22rem; padding: .35rem .5rem; font-size: .95rem; }
.em-inline button { padding: .35rem .8rem; font-size: .9rem; white-space: nowrap; }
.em-add { padding: .75rem; border-top: 1px solid var(--line); }
/* QR card for the public /log-call form: code left, text + downloads right. */
.em-page h2 { margin: .75rem 0 -.25rem; font-size: 1.2rem; }
.em-qr-hint { margin: 0; }
.em-qr { display: flex; align-items: center; gap: 1rem 1.25rem; padding: 1rem; flex-wrap: wrap; }
.em-qr img { flex: none; width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; image-rendering: pixelated; }
.em-qr-url { margin: .5rem 0 0; font-size: .9rem; word-break: break-all; }
.em-qr-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.em-qr-alt { display: inline-block; padding: .5rem .9rem; border-radius: 8px; font-weight: 700;
  text-decoration: none; }
.onoff-toggle { flex: none; flex-wrap: nowrap; }
.onoff-toggle .type-btn { font-family: var(--sans); }
/* Two columns fit a phone, so keep it a real table instead of stacked cards. */
@media (max-width: 600px) {
  table.access-grid { display: table; width: 100%; }
  table.access-grid thead { display: table-header-group; }
  table.access-grid tbody { display: table-row-group; }
  table.access-grid tr { display: table-row; margin: 0; padding: 0; border-radius: 0; }
  table.access-grid th, table.access-grid td { display: table-cell; padding: .4rem .3rem; }
  table.access-grid thead th { white-space: normal; font-size: .75rem; }
  table.access-grid td::before { content: none; }
  table.em-vendors { display: table; }
  table.em-vendors thead { display: table-header-group; }
  table.em-vendors tbody { display: table-row-group; }
  table.em-vendors tr { display: table-row; margin: 0; padding: 0; border-radius: 0; }
  table.em-vendors th, table.em-vendors td { display: table-cell; border-bottom: 1px solid var(--line); }
  table.em-vendors td::before { content: none; }
}

/* Workbook: month bar — plain "‹ Month Year ›" strip, no picker. Just the
   current month/year with prev/next navigation, nothing clickable to open. */
.monthbar { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.monthbar .month-step { display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border: 1px solid #d5d5d7; border-radius: 8px;
  background: #fff; text-decoration: none; font-weight: 700; font-size: 2.1rem;
  line-height: 1; color: #444; }
.monthbar .month-step:hover { background: #f5f5f7; }
.month-label { font-size: 1.15rem; font-weight: 700; color: #1d1d1f; min-width: 11rem;
  text-align: center; }
/* Workbook: left-align every column, bigger Done checkbox, status labels */
.workbook th, .workbook td { text-align: left; }
/* Workbook rows read as text, not figures: sans-serif instead of the global
   monospace for non-first columns. */
.workbook td { font-family: var(--sans); }
/* Compact "✓ Connor K. · 9/9" sign-off; the full name and date are in the
   title tooltip. */
.signoff { color: #137333; font-weight: 600; font-size: .8rem; white-space: nowrap; }
/* Checkbox + label on one line (the global label is a stacked grid). */
label.inline-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.workbook input[type=checkbox] { transform: scale(1.225); transform-origin: left center; }
.status { font-weight: 700; font-size: .8rem; }
.status.not-started { color: #999; }
.status.in-progress { color: #8a6d00; }
.status.complete { color: #137333; }
.workbook small.who { color: #999; margin-left: .4rem; }
.workbook tr.week-head td { background: #f5f5f7; font-weight: 700; font-size: .85rem;
  color: #555; text-transform: uppercase; letter-spacing: .03em; }

/* Subject-first workbook: one card per vendor/category, banner reflects this
   week's status (green = all resolved, red = something open, grey = nothing
   due / not the viewed month). */
.subject-card { background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 1rem; }
.subject-card table.workbook { box-shadow: none; border-radius: 0; margin: 0; }
.subject-banner { display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; font-size: 1rem; }
.subject-banner .kind-tag { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: #666; font-weight: 600; }
.subject-banner.status-green { background: #e6f4ea; }
.subject-banner.status-red   { background: #fce8e6; }
.subject-banner.status-grey  { background: #f1f3f4; }
/* Cards collapse to just their banner/title; green ones start collapsed. */
.subject-collapse > summary { cursor: pointer; list-style: none; }
.subject-collapse > summary::-webkit-details-marker { display: none; }
.subject-collapse > summary::after { content: '\25B8'; margin-left: auto;
  opacity: .6; font-size: 1.4rem; line-height: 1; }
.subject-collapse[open] > summary::after { content: '\25BE'; }

/* Muted helper text */
.hint { color: #777; font-weight: 400; font-size: .85rem; }

@media (max-width: 600px) {
  .container { margin: .5rem auto; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: .75rem; background: #fff; border-radius: 12px; padding: .5rem; }
  td { text-align: right; border: 0; display: flex; justify-content: space-between; gap: 1rem; }
  td::before { content: attr(data-label); font-weight: 600; flex: none; text-align: left; }
  tr[hidden] { display: none; }   /* the block display above would otherwise show hidden rows */
}

/* Workbook status sections (red = due this week, grey = due later, green = done) */
.wb-section {
  margin: 1.4rem 0 .5rem; padding-bottom: .3rem; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-bottom: 2px solid #e4e9f2; }
.wb-section:first-of-type { margin-top: .4rem; }
.wb-section-red   { color: #b3141f; border-bottom-color: #fce8e6; }
.wb-section-grey  { color: #5f6b7a; border-bottom-color: #e4e9f2; }
.wb-section-green { color: #137333; border-bottom-color: #d8ecdd; }

/* Pinned cards (EOM / one-off / emergency): outside the vendor sections, always
   expanded (no collapse toggle). */
.wb-section-tasks { color: #2b2b2b; border-bottom-color: #cfd6e0; }

/* Director/coordinator checkoffs (cash / inventory): reconciled last, as the
   final step of bill paying — its own group after tasks & calls. */
.wb-section-checkoffs { color: #2b2b2b; border-bottom-color: #cfd6e0; }
.subject-banner.subject-static { cursor: default; }

/* Cash/Inventory checkoffs: square overview tiles side by side, expanding to
   the full checklist (still the same <details>/<summary> disclosure) on
   click. Closed, the tile breaks its done/total down per week (not just one
   month-wide number) — sized to content since a month can run 4-6 weeks. */
/* Both closed tiles stay the same size (row default: align-items stretch
   matches the taller sibling's height) -- but a stretched flex item's block
   children DON'T automatically grow to fill it, so without help the color
   fill would only cover the shorter tile's own content, leaving blank space
   below it. Chained flex (section -> details -> summary, each filling its
   parent) instead carries that stretched height all the way to the summary,
   so the color genuinely covers the whole box on both tiles. */
.tile-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subject-tile { flex: 0 0 auto; min-width: 0; display: flex; }
/* min-width: 0 so an open tile's table can shrink to the row instead of
   growing past it (a flex item defaults to its content's width, and the
   card's overflow: hidden then cut the right side off on phones). */
.subject-tile > details { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* Open tile breaks out to the full row width instead of staying pinned to the
   closed square's footprint -- otherwise the flex item won't grow, the table
   overflows past it off the right edge of the page, and whatever text is left
   inside the clipped square is invisible. */
.subject-tile:has(> details[open]) { flex: 1 1 100%; }
.subject-tile > details:not([open]) { width: 11.5rem; }
.subject-tile > details:not([open]) > summary {
  flex: 1; padding: 1rem;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  text-align: center; gap: .5rem; border-radius: 12px;
}
/* Keep the expand arrow visible when closed (repositioned for the column
   layout) so it's clear the box is clickable, not that its content is gone. */
.subject-tile > details:not([open]) > summary::after {
  margin-left: 0; margin-top: 0; font-size: 1.1rem; opacity: .5; }
.tile-progress { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.7rem; font-weight: 700; color: var(--ink); }
/* The closed tile shows the per-week breakdown instead of this one number;
   the open banner shows it small, next to the name, for context. */
.subject-tile > details:not([open]) > summary .tile-progress { display: none; }
.subject-tile > details[open] > summary .tile-progress {
  font-size: .85rem; font-weight: 600; font-family: var(--sans); color: inherit; }
.tile-weeks { display: flex; flex-direction: column; gap: .2rem; }
.tile-week-row { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .8rem;
  font-weight: 700; color: var(--ink); }
.tile-week-label { font-family: var(--sans); font-weight: 600; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.subject-tile > details[open] > summary .tile-weeks { display: none; }
.tile-hint { font-size: .68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; }
.subject-tile > details[open] > summary .tile-hint { display: none; }
/* Once either tile is open, both become full-width cards: the open one shows
   its table, the closed one a normal one-line banner (name, n/total, arrow)
   instead of a lone square stranded under the open card. */
.tile-row:has(details[open]) { flex-direction: column; gap: 0; }
/* Explicit width: in a wrapping flex row "stretch" sizes each line to its
   widest content, so without it an open table pushed past a phone screen. */
.tile-row:has(details[open]) .subject-tile { flex: 0 0 auto; width: 100%; }
.tile-row:has(details[open]) .subject-tile > details:not([open]) { width: auto; }
.tile-row:has(details[open]) .subject-tile > details:not([open]) > summary {
  flex-direction: row; align-items: center; text-align: left; gap: .6rem;
  padding: .6rem .9rem; border-radius: 0; }
.tile-row:has(details[open]) .subject-tile > details:not([open]) > summary::after {
  margin-left: auto; font-size: 1.4rem; opacity: .6; }
.tile-row:has(details[open]) .subject-tile > details:not([open]) > summary .tile-weeks,
.tile-row:has(details[open]) .subject-tile > details:not([open]) > summary .tile-hint { display: none; }
.tile-row:has(details[open]) .subject-tile > details:not([open]) > summary .tile-progress {
  display: inline; font-size: .85rem; font-weight: 600; font-family: var(--sans); color: inherit; }

/* Admin > Workbook access: one collapsible row per entry user, summary of
   their grants in the header; per store a None/Full/Some toggle, with the
   card boxes shown only under "Some cards". */
.access-user { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; margin: .5rem 0; }
.access-user > summary { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem 1rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.access-user > summary::-webkit-details-marker { display: none; }
.access-user > summary::before { content: '\25B8'; color: var(--muted); }
.access-user[open] > summary::before { content: '\25BE'; }
.access-user[open] > summary { border-bottom: 1px solid var(--line); }
.access-who { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  min-width: 14rem; }
.access-summary { font-size: .9rem; }
.access-summary.access-none { color: var(--muted); }
.access-form { display: grid; gap: .9rem; padding: 1rem; }
.access-card { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.access-form button { justify-self: start; }
/* Per-page, per-store checkboxes at the top of each person's access */
.access-grid { width: auto; max-width: 40rem; border-collapse: collapse; }
.access-grid tr.access-group th { padding: 1rem 0 .3rem; text-align: left; font-size: .95rem;
  text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: 2px solid var(--line); }
.access-grid tbody tr.access-full th, .access-grid tbody tr.access-full td { background: var(--bg); font-weight: 700; }
.access-grid tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .9rem;
  font-weight: 600; color: var(--ink); }
.access-grid tbody th.access-card-name { padding-left: 1rem; font-weight: 500; }
.access-grid td.access-span .access-card { font-family: var(--sans); }
.access-grid td.access-na { color: var(--muted); opacity: .5; }
.access-grid td.access-span { text-align: left; }
.access-grid td.access-span .access-card { font-size: .9rem; }
.access-grid th, .access-grid td { padding: .35rem .9rem; text-align: center; border-bottom: 1px solid var(--line); }
.access-grid th[scope="row"], .access-grid thead th:first-child { text-align: left; padding-left: 0; }
.access-grid thead th { font-size: .85rem; white-space: nowrap; }
.access-grid input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.access-note { margin: -.4rem 0 0; }

/* Admin > Notifications: label on top, dropdown + Save on one row. The
   dropdown's options ("Name (email)") are wider than a default .card, so it
   flexes to the row and min-width:0 lets it shrink instead of overflowing. */
.recipient-card { max-width: 560px; }
.recipient-card .hint { margin: 0; }
.recipient-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.recipient-row select { flex: 1 1 16rem; min-width: 0; max-width: 100%; }
.recipient-card + .recipient-card { margin-top: 1rem; }

/* Marketing: store toggle + month bar reuse the Workbook's. Events list as a
   date-led card per event (calendar-style day block on the left), then the
   add/edit form with itemized Items Used / BOGs Used / Samples rows. */
.workbook-title a.btn { font-size: 1rem; }
.mk-month-summary { color: var(--muted); margin: .9rem 0; font-variant-numeric: tabular-nums; }
.mk-month-summary strong { color: var(--ink); }
.mk-sep { margin: 0 .35rem; }
.mk-events { display: grid; gap: .6rem; margin-bottom: 1.5rem; max-width: 820px; }
.mk-empty { margin: 0; }
.mk-event-head { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.mk-title { flex: 1 1 12rem; min-width: 0; }
.mk-title h3 { margin: 0; font-size: 1.05rem; }
.mk-title .hint { margin: .1rem 0 0; }
.mk-figures { display: flex; gap: 1.25rem; margin: 0; }
.mk-figures div { display: grid; text-align: right; }
.mk-figures dt { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.mk-figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .5rem 1.25rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.mk-linegroup h4 { margin: 0 0 .25rem; font-size: .85rem; display: flex;
  justify-content: space-between; gap: .5rem; }
.mk-linegroup ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.mk-linegroup li { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }
.mk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-event-actions { display: flex; gap: 1rem; align-items: center; justify-content: flex-end;
  font-size: .9rem; }
.mk-event-actions form { margin: 0; }
.mk-form { max-width: 620px; scroll-margin-top: 1rem; }
.mk-linefield { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem .75rem;
  margin: 0; display: grid; gap: .5rem; min-width: 0; }
.mk-linefield legend { font-weight: 700; padding: 0 .3rem; }
.mk-linerows { display: grid; gap: .4rem; }
.mk-linerow { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .4rem; }
.mk-linerow input { min-width: 0; width: 100%; }
.mk-remove { background: none; color: var(--muted); padding: 0 .5rem; font-size: 1.3rem; }
.mk-remove:hover { color: var(--neg); }
.mk-linefoot { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem; }
.mk-addrow { padding: .35rem .75rem; font-size: .9rem; }
.mk-total { font-variant-numeric: tabular-nums; }
.mk-form-actions { display: flex; gap: 1rem; align-items: center; }
@media (max-width: 480px) {
  .mk-linerow { grid-template-columns: minmax(0, 1fr) 5.5rem auto; }
  .mk-figures { width: 100%; justify-content: flex-start; }
  .mk-figures div { text-align: left; }
}

/* Marketing store toggle: "Both Stores" sits on its own row above the two
   restaurants, spanning them. */
.mk-store-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; }
.mk-store-toggle .store-btn { justify-content: center; }
.mk-store-toggle .mk-both { grid-column: 1 / -1; }
.store-btn[data-store="both"]::before {
  background: linear-gradient(90deg, var(--store-deer-valley) 50%, var(--store-norterra) 50%); }
.mk-store { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--ink); }
@media (max-width: 480px) {
  .mk-store-toggle .store-btn { padding: .7rem 1rem; font-size: 1rem; }
}

/* Marketing "Both Stores": read-only, Deer Valley's half on the left and
   Norterra's on the right, split by a dark line down the middle. Stays two
   columns even on a phone — the point is comparing the stores. */
.mk-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem;
  align-items: baseline; padding-top: .5rem; border-top: 1px solid var(--line); }
.mk-mini-date { grid-column: 1 / -1; }
.mk-mini-date { font-size: .8rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.mk-mini-name { display: grid; min-width: 0; }
.mk-mini-figs { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.mk-mini-name strong { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .mk-mini { grid-template-columns: minmax(0, 1fr); font-size: .9rem; }
  .mk-mini-figs { text-align: left; }
}

/* Marketing: Promotion — one description box on the form; shown on the card
   and in the Both Stores columns. */
.mk-promo-label { font-weight: 600; }
.mk-promo textarea { width: 100%; min-width: 0; padding: .5rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; resize: vertical; }
.mk-promo-view { padding-top: .6rem; border-top: 1px solid var(--line); }
.mk-promo-view h4 { margin: 0 0 .2rem; font-size: .85rem; }
.mk-promo-view p { margin: 0; white-space: pre-line; font-size: .92rem; }
.mk-mini-promo { font-size: .85rem; white-space: pre-line; }

/* Marketing: "Not used" on an itemized section hides its rows. */
.mk-linefield { position: relative; }
.mk-notused { position: absolute; top: -.1rem; right: .75rem; display: flex; align-items: center;
  gap: .35rem; font-weight: 600; font-size: .85rem; color: var(--muted); background: var(--panel);
  padding: 0 .3rem; cursor: pointer; }
.mk-notused input { margin: 0; }
.mk-linefield:has(.mk-notused input:checked) .mk-linerows,
.mk-linefield:has(.mk-notused input:checked) .mk-linefoot { display: none; }
.mk-linefield:has(.mk-notused input:checked) legend { color: var(--muted); }
.mk-notused-tag { font-size: .75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .05rem .5rem; }
.mk-linegroup-off h4 { justify-content: flex-start; }

/* Marketing single-store view: two columns — Marketing Events (left, wider)
   and Other Marketing Expenses (right); stacked on narrow screens. */
.mk-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem;
  align-items: start; }
.mk-col { display: grid; gap: .75rem; min-width: 0; }
.mk-col-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  flex-wrap: wrap; }
.mk-col-head h2 { margin: 0; font-size: 1.2rem; }
.mk-col-head .btn { font-size: .9rem; padding: .4rem .8rem; }
.mk-col .mk-events, .mk-col .mk-form { max-width: none; margin: 0; }
.mk-col .error, .mk-col .mk-month-summary { margin: 0; }
.mk-expenses { display: grid; gap: .6rem; }
.mk-details { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); white-space: pre-line; }
.mk-purchased-from { margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }
.mk-expense-actions { justify-content: flex-start; margin-top: .35rem; }
.mk-form textarea { width: 100%; min-width: 0; padding: .5rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; resize: vertical; }
.mk-col-total { margin-left: auto; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) {
  .mk-split { grid-template-columns: minmax(0, 1fr); }
}
/* Events and Expenses pages: the list and its Add form span the full width
   below the top bar. On Events, the Pre / Post Event Forms card sits at the
   top bar's right. */
.mk-full { margin-top: 1rem; }
.mk-forms { grid-template-columns: minmax(0, 1fr); max-width: none; }

/* Marketing: playful skin on the Command tokens. Events are tickets (dark
   date stub, notched perforation), expenses are receipts (zigzag torn edge,
   dotted leader to the amount), and the month totals are stickers. Dark pieces use a neutral
   dark grey (--mk-dark), the same color as the nav bar. */
:root { --mk-dark: var(--navbar); }

/* Divider between the two categories: vertical between the columns,
   horizontal once they stack. */
.mk-split { gap: 0; }
.mk-split > .mk-col:first-child { padding-right: 1.5rem; }
.mk-split > .mk-col + .mk-col { padding-left: 1.5rem; border-left: 3px solid var(--mk-dark);
  align-self: stretch; align-content: start; }
@media (max-width: 900px) {
  .mk-split > .mk-col:first-child { padding-right: 0; padding-bottom: 1.5rem; }
  .mk-split > .mk-col + .mk-col { padding-left: 0; padding-top: 1.5rem; border-left: 0;
    border-top: 3px solid var(--mk-dark); }
}

/* Month totals: stickers */
.mk-stickers { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-sticker { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .7rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: .88rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mk-sticker strong { font-family: var(--mono); }
.mk-sticker-dark { background: var(--mk-dark); border-color: var(--mk-dark); color: #fff; }
.mk-sticker-dark strong { color: #fff; }

/* Event ticket. The shadow sits on the article (filter), the notch mask on
   the inner .mk-ticket, so the outline follows the notches. */
.mk-event { scroll-margin-top: 1rem; transition: transform .15s ease;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.28)) drop-shadow(0 2px 3px rgba(0,0,0,.07)); }
.mk-event:hover { transform: translateY(-2px); }
.mk-event.mk-editing { filter: drop-shadow(0 0 1.5px var(--accent)) drop-shadow(0 0 1.5px var(--accent)); }
.mk-ticket { --stub: 4.6rem; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr);
  background: var(--panel); border-radius: 12px;
  -webkit-mask: radial-gradient(circle at var(--stub) 0, #0000 9px, #000 9.5px) 0 0 / 100% 51% no-repeat,
                radial-gradient(circle at var(--stub) 100%, #0000 9px, #000 9.5px) 0 100% / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--stub) 0, #0000 9px, #000 9.5px) 0 0 / 100% 51% no-repeat,
                radial-gradient(circle at var(--stub) 100%, #0000 9px, #000 9.5px) 0 100% / 100% 51% no-repeat; }
.mk-stub { display: grid; align-content: center; justify-items: center; gap: .1rem;
  background: var(--mk-dark); color: #fff; padding: .75rem .25rem; line-height: 1;
  border-right: 2px dashed rgba(255,255,255,.35); }
.mk-dow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #ff6b81; }
.mk-day { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; }
.mk-mon { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.7); }
.mk-ticket-body { padding: .85rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .7rem; min-width: 0; }
.mk-figures dd { font-family: var(--mono); }
.mk-return dd { padding: 0 .45rem; border-radius: 6px; }
.mk-return-up dd   { background: #e3f4ea; color: var(--pos); }
.mk-return-down dd { background: #fbe6e4; color: var(--neg); }

/* Channel and daypart chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
.mk-chip { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
  background: #eef1f5; color: var(--muted); }
.mk-chip-line { background: none; border: 1px dashed #c3cad4; }
.mk-chip-credit { background: #e6f4ea; color: #137333; }
.mk-ch-drive-thru        { background: #e0ecff; color: #1e40af; }
.mk-ch-mobile-thru       { background: #efe4ff; color: #6b21a8; }
.mk-ch-mobile-drive-thru { background: #fce7f3; color: #9d174d; }
.mk-ch-dine-in           { background: #fff1d6; color: #92400e; }
.mk-ch-all-channels      { background: #dcfce7; color: #166534; }

/* Itemized rows: dotted leaders, monospaced figures */
.mk-linegroup li span:first-child { flex: 1; display: flex; gap: .4rem; }
.mk-linegroup li span:first-child::after { content: ''; flex: 1; margin-bottom: .3em;
  border-bottom: 2px dotted var(--line); }
.mk-num, .mk-linegroup h4 .hint { font-family: var(--mono); }

/* Expense receipt with a zigzag torn bottom edge */
.mk-expense { position: relative; background: var(--panel); padding: .7rem 1rem 1rem;
  margin-bottom: 8px; border-radius: 4px 4px 0 0; scroll-margin-top: 1rem;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.28)) drop-shadow(0 2px 3px rgba(0,0,0,.07));
  transition: transform .15s ease; }
.mk-expense:hover { transform: translateY(-2px); }
.mk-expense::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(135deg, var(--panel) 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
              linear-gradient(-135deg, var(--panel) 50%, transparent 50%) 0 0 / 12px 8px repeat-x; }
.mk-expense.mk-editing { filter: drop-shadow(0 0 1.5px var(--accent)) drop-shadow(0 0 1.5px var(--accent)); }
.mk-receipt-date { margin: 0 0 .3rem; font-family: var(--mono); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mk-receipt-line { display: flex; align-items: baseline; gap: .4rem; }
.mk-receipt-line h3 { margin: 0; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.mk-leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line); }
.mk-expense-amount { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.mk-expenses { gap: 1rem; }

/* Donations: item rows (name, quantity, value) on the card and the form */
.ls-log-items.don-items { margin: .4rem 0 .2rem; }
.don-items .don-qty { color: var(--muted); white-space: nowrap; }
.don-items .don-val { font-family: var(--mono); min-width: 5.5rem; text-align: right; }
.don-itemrow, .don-itemhead { grid-template-columns: minmax(0, 1fr) 5rem 7rem 2rem; }
.don-bogfield .don-itemrow, .don-bogfield .don-itemhead { grid-template-columns: minmax(0, 1fr) 5rem 2rem; }
.don-itemhead { display: grid; gap: .4rem; margin-bottom: .25rem; font-size: .8rem;
  font-weight: 700; color: var(--muted); }
@media (max-width: 640px) {
  .don-itemrow, .don-itemhead { grid-template-columns: minmax(0, 1fr) 4.5rem 5rem 2rem; }
}

/* Empty states */
.mk-empty { padding: 1rem; border: 2px dashed #cfd5dd; border-radius: 12px; text-align: center; }

/* Both Stores halves */
.mk-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin-top: 1rem; position: relative; }
.mk-half { display: grid; gap: .5rem; align-content: start; min-width: 0; padding-right: 1.5rem; }
.mk-half + .mk-half { padding: 0 0 0 1.5rem; border-left: 3px solid var(--mk-dark); }
.mk-half-head { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.3rem;
  padding-bottom: .4rem; border-bottom: 4px solid var(--muted); }
.mk-half[data-store="deer-valley"] .mk-half-head { border-bottom-color: var(--store-deer-valley); }
.mk-half[data-store="norterra"]    .mk-half-head { border-bottom-color: var(--store-norterra); }
.mk-half-head .store-dot { width: .8rem; height: .8rem; }
.mk-half-head a { margin-left: auto; font-size: .9rem; font-weight: 400; }
.mk-half-stats { width: 100%; font-variant-numeric: tabular-nums; }
.mk-half-stats td:last-child { text-align: right; }
.mk-half-stats .mk-row-strong td { font-weight: 700; }
.mk-half-stats .mk-row-sub td { color: var(--muted); font-size: .9rem; }
.mk-half-stats .mk-row-sub td:first-child { padding-left: 1.5rem; }
/* Keep it a real table on phones (overrides the app-wide stacked-card
   tables) so rows line up across the divider. */
@media (max-width: 600px) {
  .mk-half-stats { display: table; }
  .mk-half-stats tbody { display: table-row-group; }
  .mk-half-stats tr { display: table-row; margin: 0; padding: 0; border-radius: 0; }
  .mk-half-stats td { display: table-cell; text-align: left; border-bottom: 1px solid var(--line); }
  .mk-half-stats td::before { content: none; }
  .mk-half-stats td:last-child { text-align: right; }
}
.mk-half-h { margin: .9rem 0 0; font-size: 1.05rem; }
.mk-half .mk-mini { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .75rem; }
.mk-half > .hint { margin: 0; }
.mk-compare-note { margin: 1rem 0 0; }
.mk-mini-figs, .mk-mini-date, .mk-half-stats td:not(:first-child) { font-family: var(--mono); }
@media (max-width: 480px) {
  .mk-half { padding-right: .6rem; }
  .mk-half + .mk-half { padding-left: .6rem; }
  .mk-half-head { font-size: 1.05rem; flex-wrap: wrap; }
  .mk-half-stats { font-size: .85rem; }
  .mk-half-stats td { padding: .35rem .3rem; }
  .mk-half-stats .mk-row-sub td:first-child { padding-left: .6rem; }
}

/* Collapsible event cards: collapsed = header + action row only, and the
   name/chips stay on one line so every collapsed card is the same height. */
.mk-title h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chips { flex-wrap: nowrap; overflow: hidden; }
.mk-chip { white-space: nowrap; }
.mk-collapsible .mk-event:not(.is-open) .mk-event-more { display: none; }
.mk-event-more { display: grid; gap: .7rem; }
.mk-event-actions .mk-toggle { display: none; }
.mk-collapsible .mk-event-actions .mk-toggle { display: inline-flex; }
.mk-toggle { margin-right: auto; align-items: center; gap: .3rem; background: none; border: 0;
  padding: 0; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.mk-toggle::after { content: '▾'; transition: transform .15s ease; }
.mk-event.is-open .mk-toggle::after { transform: rotate(180deg); }
.mk-toggle:hover { color: var(--accent); }
.mk-collapsible .mk-ticket-body { align-content: space-between; }

/* Marketing access (owners/admins): which entry users get the page */
.mk-access { margin-top: 2rem; max-width: 760px; scroll-margin-top: 1rem; }
.mk-access summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .25rem .6rem;
  align-items: baseline; }
.mk-access form { display: grid; gap: .75rem; margin-top: .75rem; }
.mk-access-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-access button { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .mk-event, .mk-expense { transition: none; }
  .mk-toggle::after { transition: none; }
  .mk-event:hover, .mk-expense:hover { transform: none; }
}
@media (max-width: 480px) {
  .mk-ticket { --stub: 3.6rem; }
  .mk-day { font-size: 1.5rem; }
}

/* Pre / Post Event forms (Marketing) */
/* Title, store buttons and month bar on the left; the forms box beside them,
   raised to the title's level so it doesn't push the page down. */
.mk-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; }
.mk-top-left { min-width: 0; }
.mk-forms { margin: 0; flex: 0 1 30rem; min-width: 0; padding: .75rem 1rem; }
.mk-forms .card-head h3 { font-size: 1rem; }
.mk-forms .card-head .hint { font-size: .8rem; }
.mk-forms-add { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.mk-forms-add .card-add-open { text-decoration: none; padding: .5rem .9rem; font-size: .92rem; }
.mk-forms h4 { margin: .6rem 0 .15rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mk-form-list { list-style: none; padding: 0; margin: 0; }
.mk-form-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.mk-form-list .mk-chip { font-size: .72rem; }
.mk-form-link { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.mk-form-link select { padding: .25rem .4rem; font-size: .85rem; max-width: 11rem; }
.mk-form-link button { padding: .25rem .6rem; font-size: .85rem; }
.mk-event-forms { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; }
.mk-form-done { background: #e6f4ea; color: #137333; text-decoration: none; }
.mk-form-missing { opacity: .7; }
.mk-form-del { margin: 0 0 0 auto; }
.mk-form-del button { padding: .1rem .3rem; }

/* Pre / Post Event form page (.efp) — header card, numbered sections, pill
   choices, budget table and a sticky save bar. */
.efp { max-width: 880px; margin: 0 auto; padding-bottom: 1rem; }
.efp-back { display: inline-block; margin: .25rem 0 .75rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
.efp-back:hover { color: var(--ink); }
.efp-hero { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.4rem;
  border-top: 4px solid var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.efp-post { border-top-color: var(--navbar); }
.efp-hero-main { min-width: 0; flex: 1 1 18rem; }
.efp-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.efp-post .efp-kicker { color: var(--muted); }
.efp-hero h1 { margin: .2rem 0 .6rem; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.efp-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.efp-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--bg); font-size: .82rem; font-weight: 600; }
.efp-tag-quiet { color: var(--muted); font-weight: 500; }
.efp-link { flex: 0 1 17rem; display: flex; flex-direction: column; gap: .3rem; justify-content: center;
  padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; }
.efp-link.is-linked { background: #e6f4ea; }
.efp-link.is-unlinked { background: #fff7e0; }
.efp-link-status { margin: 0; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.is-linked .efp-link-status { color: #137333; }
.is-unlinked .efp-link-status { color: #8a6d00; }
.efp-link-event { font-weight: 700; color: var(--ink); }
.efp-link-date { color: var(--muted); font-size: .85rem; }
.efp-link form { margin: .2rem 0 0; }
.efp-link-form { display: flex; gap: .4rem; }
.efp-link-form select { flex: 1; min-width: 0; font-size: .9rem; padding: .4rem; }
.efp-link-form button { padding: .4rem .8rem; }
.efp-link-btn { background: none; color: var(--muted); border: 1px solid var(--line); padding: .3rem .7rem; font-size: .85rem; }
.efp-link-btn:hover { color: var(--ink); background: #fff; }
.efp-flash { margin: .9rem 0 0; padding: .6rem .9rem; border-radius: 8px; background: #e6f4ea; color: #137333; font-weight: 600; }
.efp-flash-error { background: #fce8e6; color: #b00020; }

.efp-form { display: grid; gap: 1rem; margin-top: 1rem; }
.efp-section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.4rem 1.3rem; }
.efp-section h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: 1.05rem; }
.efp-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--navbar); color: #fff; font-size: .8rem; font-weight: 700; flex: none; }
.efp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.efp-full { grid-column: 1 / -1; }
.efp-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; font-weight: 600; font-size: .92rem; }
fieldset.efp-field { border: 0; padding: 0; }
fieldset.efp-field legend { padding: 0; margin-bottom: .1rem; }
.efp-hint { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.efp-field input[type=text], .efp-field input[type=date], .efp-field textarea {
  width: 100%; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-weight: 400; font-size: .95rem; background: #fbfcfd; }
.efp-field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.4; }
.efp-field input:focus, .efp-field textarea:focus { outline: none; border-color: var(--ink); background: #fff;
  box-shadow: 0 0 0 3px rgba(38, 38, 38, .08); }

/* Pill choices: the radio / checkbox is visually hidden; the label is the button. */
.efp-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; }
.efp-pill { position: relative; display: inline-flex; font-weight: 500; font-size: .9rem; cursor: pointer; }
.efp-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.efp-pill span { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  transition: background .12s, border-color .12s, color .12s; }
.efp-pill:hover span { border-color: #c5ccd6; }
.efp-pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.efp-pill input:checked + span { background: var(--navbar); border-color: var(--navbar); color: #fff; }
.efp-check input:checked + span::before { content: "✓ "; }
.efp-pill[data-tone=pos] input:checked + span { background: #e6f4ea; border-color: #34a853; color: #137333; }
.efp-pill[data-tone=neutral] input:checked + span { background: #eef1f5; border-color: #94a3b8; color: #334155; }
.efp-pill[data-tone=neg] input:checked + span { background: #fce8e6; border-color: #e57373; color: #b3141f; }
.efp-scale .efp-pill span { width: 2.6rem; height: 2.6rem; padding: 0; display: grid; place-items: center;
  border-radius: 50%; font-weight: 700; font-size: 1rem; }
.efp-scale .efp-pill input:checked + span { background: var(--accent); border-color: var(--accent); }
.efp-other { margin-top: .35rem; }

/* Budget table */
.efp-budget { gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.efp-budget-head, .efp-budget-row, .efp-budget-total { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 8.5rem;
  gap: .75rem; align-items: center; padding: .5rem .9rem; }
.efp-budget-head { background: var(--bg); color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.efp-budget-row { border-top: 1px solid var(--line); }
.efp-budget-label { font-weight: 600; }
.efp-budget-row input { background: transparent !important; }
.efp-money { position: relative; }
.efp-money::before { content: "$"; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 400; }
.efp-money input { padding-left: 1.4rem !important; text-align: right; }
.efp-budget-total { border-top: 2px solid var(--line); background: var(--bg); }
.efp-budget-total span { grid-column: 1 / 3; font-weight: 600; }
.efp-budget-total strong { text-align: right; font-size: 1.05rem; padding-right: .7rem; }

/* Sticky save bar */
.efp-actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
  padding: .8rem 1rem; margin: 0 -.25rem; background: rgba(244, 246, 248, .92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); }
.efp-actions button { padding: .7rem 1.6rem; font-weight: 700; }
.efp-cancel { color: var(--muted); font-weight: 600; text-decoration: none; }
.efp-delete { margin-top: 1.25rem; text-align: center; }

@media (max-width: 640px) {
  .efp-hero, .efp-section { padding: 1rem; border-radius: 12px; }
  .efp-hero h1 { font-size: 1.3rem; }
  .efp-link { flex-basis: 100%; }
  .efp-grid { grid-template-columns: 1fr; }
  .efp-spacer { display: none; }
  .efp-budget-head { display: none; }
  .efp-budget-row { grid-template-columns: minmax(0, 1fr) 7rem; row-gap: .3rem; }
  .efp-budget-label { grid-column: 1 / -1; }
  .efp-budget-total { grid-template-columns: 1fr auto; }
  .efp-budget-total span { grid-column: auto; }
}

/* Pulse: a key strip, then one running scorecard per store side by side.
   Each metric row reads label + detail | value | On/Off target pill; the
   pill and value carry the green/red so status shows at a glance. The foot
   reuses the Workbook's .card-foot / .card-add pattern for input. */
.pulse-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem;
  margin: .6rem 0 1.1rem; }
.pulse-title h1 { margin: 0; }
.pulse-dash { font-size: 1.6rem; color: #5b6b80; }
.pulse-tagline { margin: 0; font-family: "Dancing Script", "Segoe Script",
  "Brush Script MT", cursive; font-size: 1.6rem; font-weight: 600; color: #5b6b80;
  line-height: 1.2; }
.pulse-key { margin: 0 0 1.25rem; max-width: 1100px; background: var(--panel);
  border: 2px solid #c3cbd6; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
  overflow: hidden; }
.pulse-key-head { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 1rem; background: var(--navbar); color: #fff; }
.pulse-key-head h2 { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; }
.pulse-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: 0;
  list-style: none; font-size: .8rem; color: #d4d4d4; }
.pulse-legend li { display: flex; align-items: center; gap: .4rem; }
.pulse-swatch { width: .95rem; height: .95rem; border-radius: 4px; border: 2px solid; }
.pulse-swatch.is-pos { background: #e6f4ea; border-color: #4f9d6c; }
.pulse-swatch.is-neg { background: #fce8e6; border-color: #d0675b; }
.pulse-swatch.is-empty { background: transparent; border-style: dashed; border-color: #a9b3c0; }
.pulse-key-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; }
.pulse-key-item { display: grid; gap: .1rem; align-content: start; padding: .75rem 1rem .85rem;
  border-left: 2px solid var(--line); min-width: 0; }
.pulse-key-item:first-child { border-left: 0; }
.pulse-key-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.pulse-key-goal { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.pulse-key-basis { font-size: .78rem; color: var(--muted); }
/* Narrow: Sales across the top, the four goals two by two (like the cards). */
@media (max-width: 760px) {
  .pulse-key-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-key-item { border-left: 0; border-top: 2px solid var(--line); }
  .pulse-key-item:nth-child(odd):not(:first-child) { border-right: 2px solid var(--line); }
  .pulse-key-item.is-wide { grid-column: 1 / -1; border-top: 0; }
}
/* Cards stretch to the taller one; History sits at the bottom of each. */
.pulse-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; max-width: 1100px; align-items: stretch; }
@media (max-width: 760px) { .pulse-cards { grid-template-columns: 1fr; } }
.pulse-card { background: var(--panel); border: 2px solid #c3cbd6; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06); min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; }
.pulse-card .pulse-tiles { flex: 1 0 auto; align-content: start; }
.pulse-card-head { display: flex; align-items: center; gap: .45rem; margin: 0;
  padding: .8rem 1rem .6rem; font-size: 1.3rem; border-bottom: 4px solid var(--muted); }
.pulse-card[data-store="deer-valley"] .pulse-card-head { border-bottom-color: var(--store-deer-valley); }
.pulse-card[data-store="norterra"]    .pulse-card-head { border-bottom-color: var(--store-norterra); }
.pulse-card-head .store-dot { width: .8rem; height: .8rem; }
.pulse-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem; padding: .8rem; }
.pulse-tile { display: grid; gap: .15rem; align-content: start; min-width: 0;
  padding: .75rem .9rem .8rem; border-radius: 8px; border: 2px solid #b9c2ce;
  background: var(--bg); }
.pulse-tile-wide { grid-column: 1 / -1; }
.pulse-tile-top { display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; flex-wrap: wrap; }
.pulse-tile-label { font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.pulse-tile-value { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 2rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.pulse-tile-goal { font-size: .85rem; font-weight: 600; }
.pulse-tile-detail { font-size: .78rem; color: var(--muted); }
.pulse-flag { font-size: .72rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 999px; white-space: nowrap; color: #fff; }
.pulse-tile.is-pos { background: #e6f4ea; border-color: #4f9d6c; }
.pulse-tile.is-pos .pulse-tile-value, .pulse-tile.is-pos .pulse-tile-goal { color: var(--pos); }
.pulse-tile.is-pos .pulse-flag { background: var(--pos); }
.pulse-tile.is-neg { background: #fce8e6; border-color: #d0675b; }
.pulse-tile.is-neg .pulse-tile-value, .pulse-tile.is-neg .pulse-tile-goal { color: var(--neg); }
.pulse-tile.is-neg .pulse-flag { background: var(--neg); }
.pulse-tile.is-empty { background: var(--panel); border-style: dashed; border-color: #a9b3c0; }
.pulse-tile.is-empty .pulse-tile-value { color: var(--muted); }
.pulse-tile.is-empty .pulse-tile-goal { color: var(--muted); font-weight: 400; }
@media (max-width: 360px) { .pulse-tiles { grid-template-columns: 1fr; } }
/* Editors click a tile to open its form in place; the open tile spans the
   card. The face is a plain button so it's keyboard reachable. */
.pulse-tile-face { display: grid; gap: .15rem; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; color: inherit; font: inherit;
  font-weight: inherit; text-align: left; }
button.pulse-tile-face { cursor: pointer; }
.pulse-tile:has(> button.pulse-tile-face) { transition: border-color .12s, box-shadow .12s; }
.pulse-tile:has(> button.pulse-tile-face:hover) { border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.pulse-tile-face:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.pulse-tile-cta { justify-self: start; margin-top: .35rem; font-size: .78rem; font-weight: 700;
  color: var(--accent); }
.pulse-tile.is-editing { grid-column: 1 / -1; border-color: var(--ink); }
.pulse-tile.is-editing .pulse-tile-cta { display: none; }
.pulse-tile-form { display: grid; gap: .6rem; margin-top: .6rem; padding-top: .7rem;
  border-top: 1px solid rgba(0,0,0,.1); }
.pulse-tile-form[hidden] { display: none; }
.pulse-form-title { font-size: .95rem; }
.pulse-quarter { display: grid; gap: .25rem; grid-column: 1 / -1; }
.pulse-quarter-label { font-size: .85rem; font-weight: 600; }
.pulse-quarter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pulse-quarter .type-btn { font-family: var(--mono); }
.pulse-quarter-year { font-family: var(--mono); font-weight: 700; }
.pulse-quarter-divider { width: 2px; height: 1.8rem; background: #b9c2ce; border-radius: 1px;
  margin: 0 .15rem; }
.pulse-asof { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; }
.pulse-asof-date { padding: .5rem 0; font-family: var(--mono); font-size: 1rem; }
.pulse-tile-form .error, .pulse-form-hint { margin: 0; }
.pulse-tile-form input { background: var(--panel); }
@media (prefers-reduced-motion: reduce) { .pulse-tile { transition: none !important; } }
.pulse-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* History: a full-width bar at the foot of each card that opens the log. */
.pulse-history { border-top: 2px solid #c3cbd6; }
.pulse-history summary { display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem;
  cursor: pointer; list-style: none; background: #eef1f5; color: var(--ink); }
.pulse-history summary::-webkit-details-marker { display: none; }
.pulse-history summary:hover { background: #e3e8ee; }
.pulse-history summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pulse-history svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pulse-history-title { font-weight: 700; font-size: 1rem; }
.pulse-history-sub { font-size: .82rem; color: var(--muted); }
.pulse-history-chevron { margin-left: auto; transition: transform .15s; }
.pulse-history[open] .pulse-history-chevron { transform: rotate(180deg); }
.pulse-history[open] summary { border-bottom: 2px solid #c3cbd6; }
.pulse-history-body { padding: .75rem 1rem 1rem; }
@media (prefers-reduced-motion: reduce) { .pulse-history-chevron { transition: none; } }
/* History tabs: one metric at a time, as a wrapping row of pills. */
.ph-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ph-tab { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--muted);
  font: 600 .85rem var(--sans); cursor: pointer; }
.ph-tab:hover { color: var(--ink); border-color: #c3cbd6; }
.ph-tab[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ph-count { min-width: 1.25rem; padding: 0 .35rem; border-radius: 99px; background: #eef1f5; color: var(--muted);
  font: 700 .72rem/1.35rem var(--mono); text-align: center; }
.ph-tab[aria-selected=true] .ph-count { background: rgba(255,255,255,.18); color: #fff; }
.ph-goal { margin: .7rem 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
/* The trend chart: bars green/red against the goal (dashed line), oldest on the left. */
.ph-chart-row { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .6rem; }
.ph-chart { flex: 1; min-width: 0; }
/* The chart's key, beside it. */
.ph-key { flex: none; display: grid; gap: .45rem; margin: 0; padding: .55rem .7rem; list-style: none;
  border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb;
  font: 600 .75rem var(--sans); color: var(--ink); white-space: nowrap; }
.ph-key li { display: flex; align-items: center; gap: .45rem; }
.ph-key-bar { width: .7rem; height: .9rem; border-radius: 3px 3px 1px 1px; }
.ph-key-bar.is-pos { background: #6cb48c; }
.ph-key-bar.is-neg { background: #e08a80; }
.ph-key-goal { width: .9rem; border-top: 2px dashed var(--ink); opacity: .55; }
.ph-plot { position: relative; display: flex; gap: 4px; height: 7rem; padding: 0 .1rem;
  border-bottom: 1px solid #c3cbd6; }
.ph-col { position: relative; flex: 1 1 0; min-width: 0; max-width: 2.6rem; }
.ph-bar { position: absolute; left: 0; right: 0; border-radius: 4px 4px 1px 1px; }
.ph-bar.is-pos { background: #6cb48c; }
.ph-bar.is-neg { background: #e08a80; }
.ph-goal-line { position: absolute; left: 0; right: 0; z-index: 1; border-top: 2px dashed var(--ink); opacity: .55; }
.ph-axis { display: flex; gap: 4px; padding: .25rem .1rem 0; }
.ph-axis span { flex: 1 1 0; min-width: 0; max-width: 2.6rem; overflow: hidden; text-align: center; white-space: nowrap;
  font: 600 .62rem var(--sans); color: var(--muted); }
/* Many bars: label every other one (always the newest), each spilling past its bar to show in full. */
.ph-chart.is-dense .ph-axis span { overflow: visible; }
.ph-chart.is-dense .ph-axis span:nth-last-child(even) { visibility: hidden; }
/* Entries: one line each, newest first. */
.ph-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ph-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2rem auto; align-items: center;
  gap: .75rem; padding: .45rem .1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ph-row[hidden] { display: none; }
.ph-when { font-weight: 600; }
.ph-value { min-width: 4.4rem; padding: .12rem .5rem; border-radius: 99px; text-align: center;
  font: 700 .85rem var(--mono); }
.ph-value.is-pos { background: #e3f3ea; color: var(--pos); }
.ph-value.is-neg { background: #fbe9e7; color: var(--neg); }
.ph-change { font: 600 .75rem var(--mono); color: var(--muted); white-space: nowrap; }
.ph-change.is-better { color: var(--pos); }
.ph-change.is-worse { color: var(--neg); }
.ph-row form { margin: 0; }
.ph-del { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .45rem; border: 0; border-radius: 7px;
  background: none; color: #9aa3af; font: 600 .78rem var(--sans); cursor: pointer; }
.ph-del svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ph-del span { display: none; }
.ph-del:hover, .ph-del[data-armed] { background: #fbe9e7; color: var(--neg); }
.ph-del[data-armed] span { display: inline; }
.ph-more { display: block; width: 100%; margin-top: .5rem; padding: .45rem; border: 1px solid var(--line);
  border-radius: 9px; background: #f8f9fb; color: var(--ink); font: 600 .85rem var(--sans); cursor: pointer; }
.ph-more:hover { background: #eef1f5; }
.ph-empty { margin: .5rem 0 0; padding: 1rem; border: 1px dashed #cfd5dd; border-radius: 10px;
  text-align: center; font-size: .85rem; color: var(--muted); }
@media (max-width: 600px) {
  .pulse-history-body { padding: .65rem .75rem .85rem; }
  .ph-row { gap: .5rem; grid-template-columns: minmax(0, 1fr) auto 3.6rem auto; }
  .ph-plot { height: 6rem; gap: 3px; }
  .ph-chart-row { gap: .5rem; }
  .ph-key { gap: .35rem; padding: .45rem .5rem; font-size: .68rem; }
  .ph-axis { gap: 3px; }
  .ph-axis span { font-size: .55rem; letter-spacing: -.02em; }
}
.pulse-walk-kind { font-family: var(--sans); }

/* Workbook note boxes: one line until clicked, then expand to fit the note */
textarea.note-box { display: block; box-sizing: border-box; min-width: 0; height: calc(1.25em + 1rem + 2px);
  padding: .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 1rem;
  line-height: 1.25; resize: none; overflow: hidden; white-space: nowrap; cursor: pointer; }
textarea.note-box:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Expand icon (two diagonal arrows) in its own strip at the right of a
   collapsed note box, so the text stops before it. .note-wrap is added around
   each box by the Workbook script and draws the border instead of the box. */
.note-wrap { position: relative; display: block; min-width: 0; box-sizing: border-box; padding-right: 2rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.note-wrap textarea.note-box { width: 100%; border: 0; border-radius: 8px 0 0 8px; padding-right: 0;
  height: calc(1.25em + 1rem); background: transparent; }
.note-wrap textarea.note-box:focus { outline: none; }
.note-wrap:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.note-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2rem;
  pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v4M14 2l-5 5M6 14H2v-4M2 14l5-5'/%3E%3C/svg%3E") no-repeat center / 15px 15px; }
.note-wrap:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e4002b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v4M14 2l-5 5M6 14H2v-4M2 14l5-5'/%3E%3C/svg%3E"); }
.note-wrap:has(textarea.open) { padding-right: 0; }
.note-wrap:has(textarea.open)::after { display: none; }
.note-wrap:has(textarea.open) textarea.note-box { padding-right: .5rem; border-radius: 8px; }
.note-wrap:has(textarea[disabled]) { background: #f7f7f7; }
textarea.note-box.open { white-space: pre-wrap; overflow: auto; cursor: text; min-height: 4.5rem; }
textarea.note-box[disabled] { pointer-events: none; }
/* Emergency card: a call's Serviced Item box stacked above its Notes box */
.em-call-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; width: 100%; }
.svc-visit .note-wrap { flex: 1 1 12rem; min-width: 8rem; }

/* Workbook: "Weekly Expectations" rules box above the progress / Submit Week row */
.wb-expectations-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.wb-expectations { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #e4002b;
  border-radius: 10px; padding: .7rem 1rem; margin: 0; font-size: .92rem; }
.wb-expectations-title { display: block; margin-bottom: .3rem; }
.wb-expectations-sub { display: block; margin: .6rem 0 .3rem; }
.wb-expectations ul { margin: 0; padding-left: 1.2rem; }
.wb-expectations li { margin: .15rem 0; line-height: 1.4; }

/* Nav: every tab after the first has a divider before it; when Pulse is hidden
   the first tab's divider would sit right after the logo, so drop it. */
.nav-inner > .brand + .nav-divider { display: none; }

/* Standards: the quarter grid (one column per walk, like the paper sheet)
   and the walk form. Both share the walk page's .sv-* card pieces below. */
.std-info { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
  padding: 0 .3rem; vertical-align: middle; }

/* Item numbers, counted straight down the checklist (same on every page). */
.std-num { display: inline-block; min-width: 1.4rem; margin-right: .3rem; font-family: var(--mono);
  font-size: .78rem; font-weight: 700; color: #9aa3ae; font-variant-numeric: tabular-nums; }
.sq { display: grid; gap: 1rem; }
.sq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.sq-head h1 { margin: 0; }
a.sq-new { padding: .7rem 1.3rem; border-radius: 9px; font-weight: 700; text-decoration: none; }
.sq-flash { margin: 0; padding: .6rem .9rem; border-radius: 9px; background: #e3f3ea; color: var(--pos);
  font-weight: 600; width: fit-content; }
.sq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.sq-bar .monthbar { margin: 0; }
.sq-bar .month-label { min-width: 6rem; }
.sq-summary, .sq-empty { max-width: 860px; }
.sq-summary-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.sq-summary-row .sq-summary { flex: 1 1 520px; }
.sq-empty { background: var(--panel); border: 1px dashed #cfd5dd; border-radius: 12px; padding: 1rem 1.25rem; }
.sq-empty p { margin: .1rem 0; }
.sq-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }

.sq-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sq-grid { border: 0; border-radius: 0; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.sq-grid th, .sq-grid td { padding: .55rem .6rem; vertical-align: middle; border-bottom: 1px solid var(--line); }
.sq-grid thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; vertical-align: bottom;
  border-bottom: 1px solid #d6dbe2; }
.sq-item-h { text-align: left; min-width: 20rem; }
.sq-notes-h { text-align: left; min-width: 13rem; }
.sq-walk-h { text-align: center; width: 4.2rem; padding: .5rem .25rem !important; }
.sq-walk-h a { display: grid; justify-items: center; gap: .1rem; padding: .35rem .2rem; border-radius: 8px;
  text-decoration: none; color: var(--ink); text-transform: none; letter-spacing: 0; }
.sq-walk-h a:hover { background: #f1f3f6; }
.sq-date { font-size: .85rem; font-weight: 700; }
.sq-score { font-family: var(--mono); font-size: .8rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px; }
.sq-score.pos { background: #e3f3ea; color: var(--pos); }
.sq-score.neg { background: #fbe9e7; color: var(--neg); }
.sq-met { font-family: var(--mono); font-size: .68rem; color: var(--muted); font-weight: 600; }
.sq-section th { text-align: left; background: #f8f9fb; padding: .6rem .9rem; font-size: .72rem; color: var(--ink);
  border-bottom: 1px solid var(--line); }
.sq-section th span { position: sticky; left: .9rem; }
.sq-grid td.sq-item { font-family: var(--sans); text-align: left; line-height: 1.4; padding-left: .9rem; }
.sq-grid td.sq-cell { position: relative; width: 5rem; min-width: 5rem; text-align: center; font-family: var(--sans); }
.sq-y { color: #6cb48c; font-weight: 700; }
.sq-n { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--neg); color: #fff; font-size: .9rem; font-weight: 800; }
.sq-na { color: #b5b9c0; font-weight: 700; }
/* A repeat miss: a small R on the N (the title gives how many walks in a row). */
.sq-repeat { position: relative; }
.sq-repeat::after { content: "R"; position: absolute; top: -.4rem; right: -.6rem;
  padding: .05rem .28rem; border-radius: 99px; background: #fff; color: var(--neg);
  border: 1.5px solid var(--neg);
  font-family: var(--mono); font-size: .6rem; font-weight: 700; line-height: 1.3; }
.std-repeat { display: inline-block; margin-left: .35rem; padding: .05rem .32rem; border-radius: 99px;
  background: #fff; color: var(--neg); border: 1.5px solid var(--neg); font-family: var(--mono);
  font-size: .7rem; font-weight: 700; line-height: 1.3; vertical-align: .1em; }
/* On the walk form the tag only shows once the item is marked ✕ again. */
.sf-repeat { display: none; }
.sf-row:has(.sf-n input:checked) .sf-repeat { display: inline-block; }
.sq-grid td.sq-note { font-family: var(--sans); text-align: left; color: var(--muted); font-size: .85rem;
  line-height: 1.35; padding-right: .9rem; }
.sq-grid tbody tr:not(.sq-section):hover td { background: #fafbfc; }
.sq-grid tbody tr:last-child td { border-bottom: 0; }

.sf-error { margin: 0; padding: .6rem .9rem; border-radius: 9px; background: #fbe9e7; color: var(--neg);
  font-weight: 600; }
.sf-form { display: grid; gap: 1rem; }
.sf-top { align-items: flex-end; }
.sf-date { display: grid; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.sf-date input { font-size: 1rem; padding: .45rem .6rem; color: var(--ink); }
.sf-top .sv-stats { margin-left: auto; }
button.sf-fill { padding: .55rem 1rem; font-weight: 600; }
.sf-help { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .85rem; }

fieldset.sv-section { margin: 0; padding: 0; min-width: 0; }
.sf-section legend { float: left; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between;
  align-items: baseline; padding: .7rem 1.1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; background: #f8f9fb; border-bottom: 1px solid var(--line); }
.sf-section ul { clear: both; }
.sf-count { font-family: var(--mono); color: var(--muted); letter-spacing: 0; }
.sf-section.sf-done .sf-count { color: var(--pos); }
.sf-section.sf-done .sf-count::after { content: ' ✓'; }
.sf-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem; align-items: center;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.sf-text p { margin: 0 0 .3rem; line-height: 1.4; }
.sf-note { width: 100%; box-sizing: border-box; border: 1px solid transparent; background: #f6f7f9;
  border-radius: 7px; padding: .35rem .55rem; font-size: .88rem; color: #4b5563; }
.sf-note:hover { border-color: var(--line); }
.sf-note:focus { background: var(--panel); border-color: #9aa3ae; outline: none; }
.sf-note:placeholder-shown { background: transparent; }
.sf-note:placeholder-shown:hover, .sf-note:placeholder-shown:focus { background: #f6f7f9; }
.sf-pick { display: inline-flex; gap: .35rem; }
.sf-pick label { position: relative; cursor: pointer; }
.sf-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-pick span { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 1.5px solid #d6dbe2; font-weight: 800; color: #9aa3ae; background: var(--panel);
  transition: background .12s ease, border-color .12s ease, color .12s ease; }
.sf-pick label:hover span { border-color: #9aa3ae; color: var(--ink); }
.sf-pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sf-pick .sf-y input:checked + span { background: var(--pos); border-color: var(--pos); color: #fff; }
.sf-pick .sf-n input:checked + span { background: var(--neg); border-color: var(--neg); color: #fff; }
.sf-pick .sf-na input:checked + span { background: #8a8f98; border-color: #8a8f98; color: #fff; }
.sf-row:has(.sf-n input:checked) { box-shadow: inset 4px 0 0 var(--neg); }
.sf-row:has(.sf-n input:checked) .sf-text p { font-weight: 600; }
.sf-save { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 1rem;
  margin: 0 -1rem; padding: .8rem 1rem; background: rgba(244,246,248,.94); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); }
.sf-save-score { margin-right: auto; font-weight: 600; color: var(--muted); font-family: var(--mono); font-size: .9rem; }
.sf-cancel { color: var(--muted); text-decoration: none; font-weight: 600; }
.sf-cancel:hover { color: var(--ink); }
.sf-save button { padding: .7rem 1.6rem; font-weight: 700; font-size: 1rem; white-space: nowrap; flex: none; }
.sf-delete { margin-top: .25rem; }
@media (max-width: 600px) {
  .sf-row { grid-template-columns: 1fr; }
  .sf-pick { justify-content: flex-start; }
  .sf-top .sv-stats { margin-left: 0; }
  button.sf-fill { width: 100%; }
}

/* Standards: one walk, read-only (opened from a date in the quarter grid).
   A summary card, a Missed / All switch (CSS only), then each section. */
.sv { max-width: 860px; display: grid; gap: 1rem; }
.sv-back { color: var(--muted); font-size: .9rem; text-decoration: none; width: fit-content; }
.sv-back:hover { color: var(--ink); }
.sv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.sv-head h1 { margin: .15rem 0 0; font-size: 1.75rem; }
.sv-store { margin: 0; display: flex; align-items: center; gap: .45rem; color: var(--muted);
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sv-store .store-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
.sv-steps { display: inline-flex; background: #eceef1; border-radius: 10px; padding: .25rem; gap: .25rem; }
.sv-steps a, .sv-steps span { padding: .4rem .75rem; border-radius: 7px; font-weight: 600;
  font-size: .9rem; text-decoration: none; color: var(--ink); }
.sv-steps a:hover { background: var(--panel); }
.sv-steps span { color: #b5b9c0; }

.sv-score { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sv-score-main { flex: 1 1 260px; display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .2rem 1rem; }
.sv-pct { grid-row: span 2; font-size: 2.6rem; font-weight: 800; line-height: 1; font-family: var(--mono); }
.sv-pct small { font-size: 1.2rem; font-weight: 700; }
.sv-pct.pos { color: var(--pos); }
.sv-pct.neg { color: var(--neg); }
.sv-bar { position: relative; height: .55rem; background: #eceef1; border-radius: 99px; }
.sv-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.sv-bar span.pos { background: var(--pos); }
.sv-bar span.neg { background: var(--neg); }
.sv-bar i { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; background: var(--ink); opacity: .55; }
.sv-goal { margin: 0; font-size: .78rem; color: var(--muted); }
.sv-stats { display: flex; gap: 1.5rem; margin: 0; }
.sv-stats div { display: grid; gap: .1rem; }
.sv-stats dt { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sv-stats dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-family: var(--mono); }
.sv-stats dd.neg { color: var(--neg); }
.sv-edit { padding: .5rem .95rem; border-radius: 8px; text-decoration: none; font: inherit;
  font-weight: 600; cursor: pointer; }
.sv-actions { display: flex; flex-direction: column; gap: .5rem; }
.sv-actions .sv-edit { text-align: center; }
.sv-copy-here { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(228, 0, 43, .25); }

.sv-filter .type-btn { display: inline-flex; gap: .45rem; align-items: center; padding: .45rem 1rem;
  border-radius: 7px; font-weight: 600; cursor: pointer; color: #5b5d63; }
.sv-filter .type-btn b { font-family: var(--mono); font-size: .8rem; opacity: .75; }
.sv-empty { margin: 0; color: var(--pos); font-weight: 600; }

.sv-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sv-section h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0;
  padding: .7rem 1.1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); background: #f8f9fb; border-bottom: 1px solid var(--line); }
.sv-section h2 span { font-family: var(--mono); color: var(--muted); letter-spacing: 0; }
/* Rows ruled below; the list tucks its last rule under the card's edge. */
.sv-section ul { list-style: none; margin: 0 0 -1px; padding: 0; }
.sv-row { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; align-items: start;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.sv-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; font-size: .8rem; font-weight: 800; background: #eceef1; color: var(--muted); }
.sv-y .sv-mark { background: #e3f3ea; color: var(--pos); }
.sv-n { box-shadow: inset 4px 0 0 var(--neg); }
.sv-n .sv-mark { background: var(--neg); color: #fff; }
.sv-n .sv-text p:first-child { font-weight: 600; }
.sv-text p { margin: .15rem 0 0; line-height: 1.4; }
.sv-text p:first-child { margin-top: .1rem; }
.sv-y .sv-text p:first-child { color: #4b5563; }
.sv-note { color: var(--muted); font-size: .88rem; padding-left: .6rem; border-left: 2px solid var(--line); }
.sv-n .sv-note { border-left-color: var(--neg); color: #4b5563; }

/* Missed: only rows that missed, only sections that have one. */
.sv:has(#sv-missed:checked) .sv-section:not(.has-miss),
.sv:has(#sv-missed:checked) .sv-row:not(.sv-n) { display: none; }
@media (max-width: 600px) {
  .sv-head h1 { font-size: 1.4rem; }
  .sv-stats { gap: 1rem; }
  .sv-actions { width: 100%; }
}

/* Standards photos: thumbnails on the walk form and walk page, a lightbox,
   and a camera mark in the quarter grid. */
.sf-photos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .45rem; }
.sf-new-thumbs { display: contents; }
.sf-thumb { position: relative; width: 3.6rem; height: 3.6rem; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: #f1f3f6; cursor: pointer; display: inline-block; }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-thumb input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-thumb .sf-thumb-x { position: absolute; top: .15rem; right: .15rem; width: 1.25rem; height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0;
  padding: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .65rem; font-weight: 800; cursor: pointer; }
.sf-thumb:has(input:checked) img { opacity: .3; filter: grayscale(1); }
.sf-thumb:has(input:checked) .sf-thumb-x { background: var(--neg); }
.sf-thumb:has(input:checked)::after { content: 'Removing'; position: absolute; inset: auto 0 .2rem; text-align: center;
  font-size: .6rem; font-weight: 800; color: var(--neg); text-transform: uppercase; }
.sf-thumb-new { border-color: var(--pos); }
.sf-add-photo { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .7rem;
  border-radius: 99px; border: 1px dashed #c3c9d1; color: var(--muted); font-size: .82rem; font-weight: 600;
  cursor: pointer; position: relative; }
.sf-add-photo:hover { border-color: #9aa3ae; color: var(--ink); background: #f6f7f9; }
.sf-add-photo:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.sf-add-photo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-add-photo svg { width: 1rem; height: 1rem; }

.sv-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.sv-photo { display: block; width: 6.5rem; height: 6.5rem; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: #f1f3f6; }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; }
.sv-photo:hover img { transform: scale(1.04); }
.sv-lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.sv-lightbox::backdrop { background: rgba(15,15,15,.82); }
.sv-lightbox img { display: block; max-width: 94vw; max-height: 88vh; border-radius: 10px; }
.sv-lightbox form { position: absolute; top: -.75rem; right: -.75rem; margin: 0; }
.sv-lightbox button { width: 2.2rem; height: 2.2rem; border-radius: 50%; padding: 0; background: #fff; color: var(--ink);
  font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* Pinned to the cell's left edge so the Y / N stays centered with or without a photo. */
.sq-cam { position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: #5b6573; }
.sq-cam:hover { color: var(--ink); }
.sq-cam svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 600px) {
  .sv-photo { width: 5.2rem; height: 5.2rem; }
  .sv-lightbox form { top: .4rem; right: .4rem; }
}
/* Wrapped item text lines up after its number, not under it. */
.sq-grid td.sq-item { padding-left: 2.6rem; text-indent: -1.7rem; }
.sv-text p:first-child, .sf-text p { padding-left: 1.7rem; text-indent: -1.7rem; }
.std-num { text-indent: 0; }

/* Standards walk drafts: the "unsaved walk on this phone" banner and the
   save bar's draft / no-connection messages. */
.sf-draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  padding: .85rem 1.1rem; border-radius: 12px; background: #fff8e1; border: 1px solid #f0d78c; }
.sf-draft-banner[hidden] { display: none; }
.sf-draft-banner p { margin: 0; }
.sf-draft-banner p span { color: #7a6420; }
.sf-draft-banner div { display: flex; gap: .5rem; }
.sf-draft-banner button { padding: .5rem 1rem; font-weight: 600; }
.sf-save-status { margin-right: auto; display: grid; gap: .1rem; }
.sf-save-status .sf-save-score { margin-right: 0; }
.sf-save-score.sf-offline { color: var(--neg); font-family: var(--sans); font-weight: 700; }
.sf-draft-note { font-size: .75rem; color: var(--pos); font-weight: 600; }
.sf-draft-note:empty { display: none; }
.sf-live-note { font-size: .75rem; color: #c0392b; font-weight: 600; }
.sf-live-note:empty { display: none; }
.sf-live-note::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .3rem;
  border-radius: 50%; background: currentColor; vertical-align: .05rem; animation: sl-pulse 1.6s ease-in-out infinite; }

/* Live standards walks: the Standards tab's Walk in Progress link and the watch page */
.sl-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px;
  background: #fde8e6; color: #c0392b; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; }
.sl-badge i { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor;
  animation: sl-pulse 1.6s ease-in-out infinite; }
.sl-badge.sl-idle { background: #eef0f3; color: var(--muted); }
@keyframes sl-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sl-badge i, .sf-live-note::before { animation: none; } }
.sq-live { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .65rem .9rem;
  border: 1px solid #f3c5c0; border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
.sq-live:hover { border-color: #c0392b; }
.sq-live-text { flex: 1 1 12rem; min-width: 0; }
.sq-live-go { color: #c0392b; font-weight: 700; white-space: nowrap; }
.sl-who { margin: 0; text-align: right; line-height: 1.5; }
.sl-who .sl-badge { margin-right: .3rem; }
.sl-note { margin: 0; padding: .6rem .9rem; border-radius: 9px; background: #eef0f3; color: var(--muted); }
.sl-ended { margin: 0; padding: 1rem; border: 2px dashed #cfd5dd; border-radius: 12px; text-align: center; font-weight: 600; }
#sl-body { display: flex; flex-direction: column; gap: inherit; }
@media (max-width: 640px) { .sl-who { text-align: left; } }

/* Marketing > Sampling: month stickers with per-item totals, one card per
   sampling logged on the public /log-sampling form, then the per-store QR
   codes, each in a Service-Call-style panel (.em-panel .em-qr). */
.ls-qr { display: grid; gap: .75rem; margin-top: 1.25rem; }
.ls-qr-store { margin: 0 0 .35rem; }
/* One full-width sampling per row. On wide screens the items sit on the left
   and the samplers / MODs / notes on the right; header and footer span both. */
.ls-logs { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.ls-log { max-width: none; gap: .5rem; align-content: start; }
@media (min-width: 760px) {
  .ls-log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; }
  .ls-log-head, .ls-log-foot { grid-column: 1 / -1; }
  .ls-log-items { max-width: 26rem; }
}
.ls-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; }
.ls-log-head h3 { margin: 0; font-size: 1.05rem; }
.ls-log-head .hint { font-weight: 400; font-size: .85rem; }
.ls-log-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ls-log-items li { display: flex; align-items: baseline; gap: .4rem; }
.ls-log-items strong { font-family: var(--mono); }
.ls-log-people { margin: 0; display: grid; gap: .25rem; font-size: .9rem; }
.ls-log-people div { display: flex; gap: .4rem; }
.ls-log-people dt { color: var(--muted); flex-shrink: 0; }
.ls-log-people dd { margin: 0; overflow-wrap: anywhere; }
.ls-log-notes dd { white-space: pre-line; }
.ls-log-del { margin: 0; margin-left: auto; }
.ls-log-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .5rem;
  border-top: 1px solid #e6e9ee; }
.ls-signal { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.ls-signal .inline-check { color: var(--muted); cursor: pointer; }
.ls-signal.is-done .inline-check { color: var(--pos); }
.ls-signal input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--pos); }
.mk-sticker.ls-signal-due strong { color: #c0392b; }
/* Inventory > Transfers reuses the Sampling cards; a chip says which way it went. */
.tr-dir { font-size: .85rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; }
.tr-dir.is-borrow, .tr-item-dir.is-borrow { background: #fdf3e3; color: #9a5b00; }
.tr-dir.is-lend, .tr-item-dir.is-lend { background: #eaf1fb; color: #1f4f8a; }
.tr-dir.is-both { background: #eef0f3; color: var(--ink); }
.tr-item-dir { flex: none; font-size: .75rem; font-weight: 600; padding: 0 .4rem; border-radius: 999px; }
/* Log Transfer item lines: Borrowing / Lending, item, amount, remove. On
   phones the choice sits on its own line above the item and amount. */
.tr-linerow { grid-template-columns: 9.5rem minmax(0, 1fr) 7rem auto;
  grid-template-areas: "dir name qty rm"; }
.tr-linerow select { grid-area: dir; min-width: 0; width: 100%; }
.tr-linerow [name=item_name] { grid-area: name; }
.tr-linerow [name=item_qty] { grid-area: qty; }
.tr-linerow .mk-remove { grid-area: rm; }
.tr-linerow + .tr-linerow { padding-top: .4rem; border-top: 1px dashed var(--line); }
@media (max-width: 600px) {
  .tr-linerow { grid-template-columns: minmax(0, 1fr) 5.5rem auto;
    grid-template-areas: "dir dir rm" "name qty ."; }
}
/* Public Log Sampling form */
.ls-form { max-width: 560px; }
.ls-store { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; }
.ls-store strong { font-size: 1.05rem; font-weight: 500; text-align: center; }
.ls-items .ls-sub { margin: 0 0 .15rem; font-weight: 600; font-size: .9rem; }
.ls-items .hint { margin: 0 0 .4rem; font-size: .85rem; }
/* Inventory > Shared Table: month totals, then one card per day (ounces on
   the left, counts on the right), reusing the Sampling cards. */
/* Shared Table: Month | Week toggle under the store toggle, plain (no store dot). */
.st-period-toggle { display: flex; margin-top: .6rem; }
.st-period-toggle .store-btn { padding: .5rem 1.3rem; font-size: 1rem; }
.st-period-toggle .store-btn::before { content: none; }
.st-sub { margin: 0 0 .2rem; font-weight: 600; font-size: .85rem; color: var(--muted); }
/* The period's totals read as a summary, not another day: a dark header band
   (like the nav) tagged Week/Month Total, a tinted body and a thicker frame.
   The day cards follow under a "Daily Entries" heading. */
.st-totals { max-width: none; margin-bottom: 1.5rem; padding: 0; overflow: hidden;
  background: #f8f9fb; border: 2px solid var(--navbar); }
.st-totals .st-totals-head { margin: 0; padding: .6rem 1rem; background: var(--navbar);
  color: #fff; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-totals-tag { background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 999px; }
.st-totals .st-cols { padding: .75rem 1rem 1rem; }
.st-totals .ls-log-items strong { font-size: 1.05rem; }
.st-entries-h { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.st-cols { display: grid; gap: .75rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .st-cols { grid-template-columns: minmax(0, 26rem) minmax(0, 26rem); } }
.ls-log-foot .ls-log-people { flex: 1; }
/* Public Log Shared Table form: item name left, amount + unit right. */
.st-day { display: flex; align-items: center; gap: .6rem; }
.st-day input { flex: 1; min-width: 0; }
.st-weekday { min-width: 6.5rem; }
.st-group { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem .75rem; margin: 0;
  display: grid; gap: .35rem; }
.st-group legend { font-weight: 600; padding: 0 .3rem; }
.st-group .hint { margin: 0 0 .2rem; font-size: .85rem; }
/* Shared Table form: each weight item has a pounds box and an ounces box. */
.st-amount.st-lboz { gap: .25rem; }
.st-amount.st-lboz input { width: 3.2rem; }
.st-amount.st-lboz small { width: auto; }
.st-amount.st-lboz small:first-of-type { margin-right: .3rem; }
.st-form .st-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: .75rem; }
.st-row + .st-row { padding-top: .35rem; border-top: 1px dashed var(--line); }
.st-amount { display: flex; align-items: center; gap: .35rem; flex: none; }
.st-amount input { width: 6.5rem; text-align: right; }
.st-amount small { width: 1.4rem; color: var(--muted); }

/* Shared Table "Both Stores": Deer Valley left, Norterra right, split by the
   Marketing dark line (.mk-halves). Each half's totals box stacks Ounces over
   Count, and its day cards are one column. */
.st-halves { margin-top: 0; }
.st-halves .mk-half { gap: 0; }
.st-halves .mk-half-head { margin-bottom: .25rem; }
.st-halves .st-cols { grid-template-columns: minmax(0, 1fr); }
.st-halves .ls-log { grid-template-columns: minmax(0, 1fr); }
.st-halves .ls-log-items strong { white-space: nowrap; }
/* Phones: two narrow halves, so trim padding and stack each card's footer. */
@media (max-width: 600px) {
  .st-halves .mk-half { padding-right: .6rem; }
  .st-halves .mk-half + .mk-half { padding-left: .6rem; }
  .st-halves .mk-half-head { font-size: 1.05rem; }
  .st-halves .card { padding: .6rem; }
  .st-halves .st-totals { padding: 0; }
  .st-halves .st-totals-head { font-size: .9rem; padding: .5rem .6rem; }
  .st-halves .st-cols { padding: .5rem .6rem .7rem; }
  .st-halves .ls-log-items { font-size: .85rem; }
  .st-halves .st-totals .ls-log-items strong { font-size: .9rem; }
  .st-halves .ls-log-items .mk-leader { display: none; }
  .st-halves .ls-log-items li { justify-content: space-between; }
  .st-halves .ls-log-head h3 { font-size: .95rem; }
  .st-halves .ls-log-foot { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .st-halves .ls-log-people div { flex-direction: column; gap: 0; }
}
/* Each half sizes its own boxes: lists run to the box edge, and once a half
   is wide enough (a computer screen) Ounces and Count sit side by side. */
.st-halves .mk-half { container-type: inline-size; }
.st-halves .ls-log-items { max-width: none; }
@container (min-width: 480px) {
  .st-halves .st-cols,
  .st-halves .ls-log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; }
  .st-halves .ls-log-head, .st-halves .ls-log-foot { grid-column: 1 / -1; }
}
/* Room between the "Days Logged" pill and the totals box in each half. */
.st-halves .mk-half .mk-month-summary { margin: .6rem 0 .75rem; }
/* Shared Table: the logged ounces, quieter, after the pounds. */
.st-oz { font-weight: 400; color: var(--muted); font-size: .85em; }
/* Both Stores halves are narrow: ounces go on a small line under the pounds. */
.st-halves .ls-log-items strong:has(.st-oz) { display: inline-block; text-align: right; line-height: 1.15; }
.st-halves .st-oz { display: block; font-size: .75em; }
/* Phones, Both Stores: smaller Signal pill and checkbox so they fit a half. */
@media (max-width: 600px) {
  .st-halves .mk-month-summary .mk-sticker { font-size: .78rem; }
  .st-halves .ls-signal .inline-check { font-size: .85rem; }
  .st-halves .ls-signal small { font-size: .75rem; }
}
/* Week Total: one "Recorded in Signal" box for the whole week, as a band
   under the dark header. */
.st-week-signal { padding: .55rem 1rem; border-bottom: 1px solid var(--line); }
.st-week-signal .inline-check { font-weight: 600; }
@media (max-width: 600px) {
  .st-halves .st-week-signal { padding: .5rem .6rem; }
  .st-halves .st-week-signal .hint { display: none; }
}

/* Waste: the form's time box, unit labels, and the time beside each entry's day. */
.wa-time { width: 100%; box-sizing: border-box; }
.wa-amount small { width: 2.2rem; }
.wa-frame { margin-left: .4rem; font-weight: 500; font-size: .9rem; color: var(--muted); }
.wa-unit { font-weight: 500; font-size: .8rem; color: var(--muted); }

/* Standards quarter grid on phones: stay a real table (the site-wide phone
   rule above stacks tables into cards), with the items pinned on the left and
   the walk columns scrolling sideways inside the box. The latest walk's note
   shows under each item instead of in the wide Notes column. */
.sq-item-note { display: none; }
@media (max-width: 600px) {
  .sq-grid { display: table; min-width: 0; width: 100%; }
  .sq-grid thead { display: table-header-group; }
  .sq-grid tbody { display: table-row-group; }
  .sq-grid tr { display: table-row; margin: 0; padding: 0; background: none; border-radius: 0; }
  .sq-grid th, .sq-grid td { display: table-cell; }
  .sq-grid td::before { content: none; }
  .sq-grid th.sq-notes-h, .sq-grid td.sq-note { display: none; }
  .sq-grid th.sq-item-h, .sq-grid td.sq-item { position: sticky; left: 0; z-index: 1; background: var(--panel);
    min-width: 0; width: 11rem; max-width: 11rem; font-size: .85rem; box-shadow: 1px 0 0 var(--line); }
  .sq-grid thead th.sq-item-h { z-index: 3; font-size: .75rem; }
  .sq-grid td.sq-cell { width: 3.4rem; min-width: 3.4rem; padding: .45rem .2rem; }
  .sq-grid .sq-cam { top: .25rem; left: .15rem; transform: none; }
  .sq-grid .sq-cam svg { width: .85rem; height: .85rem; }
  .sq-item-note { display: block; margin-top: .2rem; text-indent: 0; color: var(--muted); font-size: .78rem; line-height: 1.3; }
}

/* Pulse Enter Scores popup: a tab per metric, one big box, on/off target as you type.
   Full screen on phones. */
dialog.pe { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0;
  border: 0; border-radius: 16px; background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
dialog.pe::backdrop { background: rgba(15, 23, 42, .45); }
.pe-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1rem .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.pe-head h2 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: 1.1rem; }
.pe-head h2 span:last-child { font-weight: 500; color: var(--muted); }
.pe-x { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0;
  border-radius: 99px; background: #eef1f5; color: var(--ink); cursor: pointer; }
.pe-x:hover { background: #e3e8ee; }
.pe-x svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pe-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: .8rem 1rem 0; }
.pe-tab { display: grid; gap: .2rem; justify-items: start; padding: .5rem .6rem; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted);
  font: 600 .74rem var(--sans); cursor: pointer; min-width: 0; }
.pe-tab:hover { border-color: #c3cbd6; color: var(--ink); }
.pe-tab[aria-selected=true] { border: 2px solid var(--ink); padding: calc(.5rem - 1px) calc(.6rem - 1px); color: var(--ink); }
.pe-tab-label { max-width: 100%; text-transform: uppercase; letter-spacing: .04em; font-size: .66rem;
  line-height: 1.25; }
.pe-tab-now { font: 700 .95rem var(--mono); }
.pe-tab-now.is-pos { color: var(--pos); }
.pe-tab-now.is-neg { color: var(--neg); }
.pe-tab-now.is-empty { color: #a9b3c0; }
.pe-form { display: grid; gap: .8rem; margin: 0; padding: 1rem 1.2rem 1.2rem; border: 0; }
.pe-form[hidden] { display: none; }
.pe-form .error { margin: 0; }
.pe-when { display: grid; gap: .3rem; margin: 0; font-size: .85rem; font-weight: 600; }
.pe-when input[type=month] { max-width: 14rem; }
.pe-asof { display: block; font-weight: 600; }
.pe-asof strong { font-family: var(--mono); }
.pe-score { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; }
.pe-input { position: relative; display: block; }
.pe-input input { width: 100%; box-sizing: border-box; padding: .7rem 2.6rem .7rem .9rem;
  font: 700 2rem var(--mono); border-radius: 12px; }
.pe-input input::placeholder { color: #cfd5dd; font-weight: 500; }
.pe-unit { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  font: 700 1.4rem var(--mono); color: var(--muted); pointer-events: none; }
.pe-preview { margin: 0; min-height: 1.9rem; display: flex; align-items: center; padding: 0 .75rem;
  border-radius: 9px; font-weight: 700; font-size: .9rem; }
.pe-preview:empty { visibility: hidden; }
.pe-preview.is-pos { background: #e6f4ea; color: var(--pos); }
.pe-preview.is-neg { background: #fce8e6; color: var(--neg); }
.pe-saved { margin: -.4rem 0 0; color: #9a5b00; font-weight: 600; }
.pe-hint { margin: 0; }
.pe-actions { justify-content: flex-end; padding-top: .3rem; }
.pe-actions button[type=submit] { padding: .7rem 1.4rem; font-weight: 700; }
@media (max-width: 600px) {
  dialog.pe { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .pe-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-actions { display: grid; grid-template-columns: 1fr 2fr; }
}
/* Net Profit month grid in the Enter Scores popup. */
.pe-year { display: flex; align-items: center; gap: .5rem; }
.pe-year .pe-when-label { margin-right: auto; }
.pe-step { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink);
  font: 700 1.2rem/1 var(--sans); cursor: pointer; }
.pe-step:hover:not(:disabled) { background: #eef1f5; }
.pe-step:disabled { opacity: .35; cursor: default; }
.pe-year-label { min-width: 3.2rem; text-align: center; font: 700 1rem var(--mono); }
.pe-month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.pe-month { display: grid; justify-items: center; gap: .05rem; padding: .45rem .2rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink);
  font: 700 .85rem var(--sans); cursor: pointer; }
.pe-month small { font: 700 .66rem var(--mono); color: var(--muted); }
.pe-month small.is-pos { color: var(--pos); }
.pe-month small.is-neg { color: var(--neg); }
.pe-month:hover:not(:disabled) { border-color: #c3cbd6; background: #f8f9fb; }
.pe-month:disabled { opacity: .35; cursor: default; }
.pe-month.is-picked { background: var(--ink); border-color: var(--ink); color: #fff; }
.pe-month.is-picked small { color: rgba(255,255,255,.85); }
@media (max-width: 600px) { .pe-month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }