/* ---- "Besley Tempo": Besley with its tabular zero repaired ----------------
   Upstream Besley ships a broken tabular ZERO. Its `tnum` feature - the one this
   file turns on for every KPI and dollar amount - swaps each digit for a tabular
   twin, and nine of the ten twins carry weight-variation deltas. The zero's twin
   carries none, so it is frozen at weight 400 while every other digit gets
   heavier: "$100.00" renders a heavy "$1" and a Regular "00.00". The defect is
   upstream (fontsource 5.2.8/5.3.0 and Google's own CDN copy alike), so it
   cannot be fixed by swapping versions - hence this self-hosted repaired face.
   Generated by tempo-pos packages/ui/scripts/patch-besley-zero.py; keep the two
   copies in step. Metrics are byte-identical to upstream, so nothing re-flows.
   Latin only - the latin-ext subset holds no digits. --------------------- */
@font-face {
  font-family: "Besley Tempo";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("assets/fonts/besley-tempo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tempo ink-glass theme (2026-08-03). Palette + glass recipes ported from the
   Tempo POS repo (packages/ui/tokens.css and apps/dashboard). Legacy var names
   keep their historical roles (--ink is text, --panel is tile surface, --red is
   the alert tone); only the values moved to the Tempo palette. */
:root {
  color-scheme: dark;
  /* Tempo brand palette */
  --tempo-ink: #0b1220;
  --tempo-crust: #161e2e;
  --tempo-raised: #1d2740;
  --sauce: #ee4b3a;
  --sauce-light: #f4604e;
  --sauce-dark: #df2713;
  --sauce-border: #c22b1a;
  --sauce-rgb: 238, 75, 58;
  --sauce-text: #ff6f5c; /* sauce as TEXT on ink — clears AA where raw sauce cannot */
  --cheese: #f1c40f;
  --cheese-rgb: 241, 196, 15;
  --basil: #27ae60;
  --basil-rgb: 39, 174, 96;
  --basil-text: #43d17f;
  --char: #2c3e50;
  --steel: #6f86c4;
  --steel-rgb: 111, 134, 196;
  --steel-text: #9fb0c4;
  --font-ui: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* "Besley Tempo" (the repaired face, declared above) must stay FIRST -
     the plain "Besley" behind it is the one with the frozen zero. */
  --font-num: "Besley Tempo", "Besley", Georgia, "Iowan Old Style", serif;
  /* Legacy roles mapped onto the Tempo palette */
  --ink: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.1);
  --paper: var(--tempo-ink);
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --red: var(--sauce);
  --red-dark: var(--sauce-dark);
  --green: var(--basil);
  --blue: var(--steel);
  --gold: var(--cheese);
  --gray: rgba(255, 255, 255, 0.08);
  --shell: #0b1220;
  --shell-2: #101a2c;
  --shell-3: #161e2e;
  --cream: rgba(255, 255, 255, 0.92);
  --cream-2: rgba(255, 255, 255, 0.78);
  --ember: var(--sauce-light);
  --mint: rgba(39, 174, 96, 0.14);
  --sky: rgba(111, 134, 196, 0.16);
  --amber: rgba(241, 196, 15, 0.14);
  --danger-soft: rgba(238, 75, 58, 0.14);
  --focus: 0 0 0 3px rgba(241, 196, 15, 0.35);
  --shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  --shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--tempo-ink);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #0d1526;
  color: rgba(255, 255, 255, 0.92);
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: #101a2c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 2px;
}

.brand-title {
  font-weight: 800;
  line-height: 1.05;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  display: block;
  padding: 10px 12px;
  text-decoration: none;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.nav button:hover,
.nav button.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.sidebar-note {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 22px;
  padding-top: 16px;
}

.main {
  color: var(--ink);
  padding: 24px;
  max-width: 1500px;
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.12;
  margin-bottom: 6px;
}

h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.muted {
  color: var(--muted);
}

/* Right-hand column of pills on a candidate card (verdict above confidence). */
.pill-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.pill {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
  white-space: nowrap;
}

.pill.green {
  background: rgba(39, 174, 96, 0.1);
  border-color: rgba(39, 174, 96, 0.4);
  color: var(--basil-text);
}

.pill.red {
  background: rgba(238, 75, 58, 0.1);
  border-color: rgba(238, 75, 58, 0.4);
  color: var(--sauce-text);
}

.pill.gold {
  background: rgba(241, 196, 15, 0.1);
  border-color: rgba(241, 196, 15, 0.4);
  color: var(--cheese);
}

.pill.blue {
  background: rgba(111, 134, 196, 0.12);
  border-color: rgba(111, 134, 196, 0.45);
  color: var(--steel-text);
}

/* Tempo StatusPill dot: glowing tone dot on stateful pills. The freshness pill
   already renders its own .freshness-dot span (and app.js swaps its tone class
   green/gold/red/blue with staleness), so it is excluded from every tone. */
.pill.green:not(.freshness-pill)::before,
.pill.red:not(.freshness-pill)::before,
.pill.gold:not(.freshness-pill)::before,
.pill.blue:not(.freshness-pill)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: none;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.grid {
  display: grid;
  gap: 14px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-col {
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
  color: var(--ink);
  min-width: 0;
}

.panel .muted {
  color: var(--muted);
}

.sync-overview {
  margin-bottom: 20px;
}

.sync-overview-head,
.source-sync-card-head,
.toast-sync-summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sync-overview-head {
  margin-bottom: 10px;
}

.sync-overview-head h2,
.sync-overview-head p,
.source-sync-card h3 {
  margin-bottom: 0;
}

.sync-overview-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.source-sync-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.source-sync-card h3 {
  font-size: 18px;
}

.source-sync-eyebrow,
.source-sync-label {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.source-sync-rows {
  display: grid;
  gap: 8px;
}

.source-sync-row,
.toast-sync-summary {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
}

.source-sync-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.source-sync-row strong,
.toast-sync-summary strong {
  display: block;
  font-size: 15px;
  margin-top: 2px;
}

/* One labelled fact per line, so the freshness pill can only ever caption the value it
   was computed from. The label column is fixed-width to keep the dates aligned. */
.source-sync-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
}

.source-sync-line-label {
  color: var(--muted);
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  min-width: 96px;
  text-transform: uppercase;
}

.source-sync-line strong {
  display: inline-block;
  margin-top: 0;
  overflow-wrap: anywhere;
}

.source-sync-row-main .source-sync-detail {
  display: block;
  margin-top: 6px;
}

/* Vendor rows carry two labelled lines plus a long button. Side by side, the button eats
   enough width that the two rows wrap their labels differently and look ragged, so stack
   it under the facts. Scoped to this container: the Toast card and the cash-drag rows
   are single-line and still read fine in two columns. */
#vendor-sync-rows .source-sync-row {
  align-items: start;
  grid-template-columns: 1fr;
  gap: 10px;
}

#vendor-sync-rows .sync-action {
  justify-self: start;
}

.sync-action {
  background: linear-gradient(180deg, #35455f, #232f45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-width: 112px;
  padding: 8px 10px;
}

.sync-action:hover,
.sync-action:focus-visible {
  background: linear-gradient(180deg, var(--sauce-light), var(--sauce-dark));
  border-color: var(--sauce-border);
}

.sync-action:disabled {
  cursor: wait;
  opacity: 0.65;
}

.source-sync-detail,
.source-sync-note {
  color: var(--muted);
  font-size: 12px;
}

.source-sync-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

.source-sync-note:not(:empty) {
  color: var(--gold);
  font-weight: 700;
}

.history-chart {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 250px;
  overflow: hidden;
  padding: 8px;
}

.history-chart svg {
  display: block;
  height: 250px;
  overflow: visible;
  width: 100%;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.chart-actual {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.chart-forecast {
  fill: none;
  stroke: var(--blue);
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.chart-dot {
  fill: #131c30;
  stroke: var(--red);
  stroke-width: 2;
}

.chart-forecast-dot {
  fill: #131c30;
  stroke: var(--blue);
  stroke-width: 2;
}

.chart-hit-area {
  cursor: help;
  fill: transparent;
  pointer-events: all;
}

.chart-confidence {
  fill: rgba(111, 134, 196, 0.16);
  stroke: none;
}

.forecast-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.forecast-summary span {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 9px;
}

.forecast-summary strong {
  color: var(--ink);
}

.ingredient-history-control {
  min-width: min(360px, 100%);
}

.ingredient-history-chart {
  margin-top: 10px;
}

.ingredients-table {
  max-height: 72vh;
  overflow-y: auto;
}

.ingredients-table thead th {
  background: var(--panel-strong);
  position: sticky;
  top: 0;
  z-index: 2;
}

.recipe-membership {
  min-width: 210px;
}

.recipe-membership summary {
  color: var(--steel-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style-position: outside;
}

.recipe-membership-list {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  max-height: 220px;
  min-width: 260px;
  overflow-y: auto;
  padding: 8px;
}

.recipe-membership-chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  padding: 4px 7px;
}

.ingredient-price-stack {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.ingredient-trend-button {
  white-space: nowrap;
}

.kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.kpi-value {
  font-size: 30px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 6px 0 3px;
}

.kpi-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

td.money,
th.money {
  text-align: right;
  white-space: nowrap;
}

.stack {
  display: grid;
  gap: 10px;
}

.approval-row,
.phase-row,
.location-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.catering-alert {
  background: var(--panel-strong);
}

.catering-alert.urgent {
  border-color: rgba(238, 75, 58, 0.55);
  box-shadow: inset 4px 0 0 var(--red);
}

.catering-alert.acknowledged {
  opacity: 0.72;
}

.forms-board {
  display: grid;
  gap: 10px;
}

.forms-board-group {
  display: grid;
  gap: 10px;
}

.forms-board-group + .forms-board-group {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 16px;
}

.forms-board-group-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.forms-board-group-head h3 {
  font-size: 15px;
  margin-bottom: 0;
}

.form-response-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  padding: 12px;
}

.form-response-row.needs-response {
  border-color: rgba(241, 196, 15, 0.4);
  box-shadow: inset 4px 0 0 var(--gold);
}

.form-response-row.responded {
  opacity: 0.72;
}

.community-surprise-ask {
  border-left: 3px solid var(--gold);
  padding-left: 10px;
}

.community-surprise-ask strong {
  color: var(--gold);
}

.form-response-main {
  display: grid;
  gap: 8px;
}

.form-response-row input {
  accent-color: var(--green);
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.form-response-rundown {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 8px;
}

.form-response-rundown summary {
  color: var(--steel-text);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  list-style-position: inside;
}

.form-response-details {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.form-response-detail {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
}

.form-response-detail dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.35;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.form-response-detail dd {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.form-response-empty {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 8px;
}

.candidate-row .inline-links {
  margin-top: 10px;
}

/* Roster table. The stale accent moved from the old tile border to a gold inset on the
   row's first cell — same signal, table-shaped (box-shadow on a <tr> is unreliable under
   border-collapse). */
.influencer-table tr.stale td:first-child {
  box-shadow: inset 4px 0 0 var(--gold);
}

.influencer-table .influencer-profile {
  color: var(--muted);
  font-size: 0.86rem;
  max-width: 260px;
}

/* Inside the table, action labels stay on one line and the group is wide enough for a
   2×2 wrap — without both, the auto table layout squeezed the column until label text
   wrapped and the buttons stacked four-high, making every row ~200px tall at phone
   width. The table scrolls sideways in its wrap like every other one here. */
.influencer-table .influencer-tile-actions {
  min-width: 260px;
}

.influencer-table .influencer-tile-actions .link-button {
  white-space: nowrap;
}

/* The per-send log folds behind its money summary; the summary row is the toggle. */
.influencer-table .giftcard-details summary {
  cursor: pointer;
  white-space: nowrap;
}

.influencer-table .giftcard-details[open] summary {
  margin-bottom: 4px;
}

.influencer-table .giftcard-log {
  min-width: 300px;
}

/* .influencer-tile-actions survives the tile layout it was named for: the gift-card
   composer modal reuses it, and it is now also the button group in the Actions cell. */
.influencer-tile-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.giftcard-label {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Loud imposter warning inside the gift-card composer (unverified account). */
.giftcard-identity-warning {
  background: rgba(238, 75, 58, 0.14);
  border: 1px solid rgba(238, 75, 58, 0.45);
  color: #ffd9d5;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* "Account check" row on candidate cards: code + waiting state. */
.identity-row strong {
  letter-spacing: 0.04em;
}

/* AI-draft button hides until the local helper is confirmed reachable
   (body.ai-drafts-on toggled by detectDraftServer). Body-scoped so it outranks
   the later glass-theme .link-button rules; !important guards against the
   .inline-links flex rules that would otherwise re-show it. */
body .ai-draft-button { display: none !important; }
body.ai-drafts-on .ai-draft-button { display: inline-flex !important; }

.link-button[data-loading="1"] {
  opacity: 0.7;
  cursor: progress;
}

.reply-composer[hidden] { display: none; }

.reply-composer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.reply-composer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 15, 0.65);
}

.reply-composer-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 12px;
  /* No backdrop-filter: fixed-tree + blur misrenders on scrolled pages
     (Chromium); the gradient is near-opaque so blur added nothing. */
  background: linear-gradient(180deg, rgba(34, 44, 66, 0.96), rgba(20, 27, 42, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 90px rgba(0, 0, 0, 0.55);
  padding: 18px;
}

.reply-composer-field {
  display: grid;
  gap: 4px;
}

.reply-composer-field label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.reply-composer-to {
  font-weight: 600;
  word-break: break-all;
}

.reply-composer-panel textarea.filter-input {
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 160px;
}

.reply-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.giftcard-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Scrollable recipient checklist inside the "Email all partners" composer. */
.announce-recipient-list {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.announce-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
}
.announce-recipient:hover { background: var(--line); }
.announce-recipient input { flex: none; }
.announce-recipient .muted { margin-left: auto; font-size: 0.82rem; }

/* Per-person gift-card send log with a "verified against Toast" checkbox on each row. */
.giftcard-log {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
}
.giftcard-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.giftcard-log-row:hover { background: var(--line); }
.giftcard-log-row input { flex: none; }
.giftcard-log-status { margin-left: auto; font-size: 0.78rem; color: var(--muted); }
.giftcard-log-status.ok { color: var(--basil-text); font-weight: 600; }
/* Logged from a lost reply: the card was almost certainly bought, but only the Toast tick
   proves it. Gold, not red — this is "go check", not "it failed". */
.giftcard-log-status.warn { color: var(--gold); font-weight: 600; }
/* Mid-flight background send — the watcher flips it to ok/warn/bad when the job settles. */
.giftcard-log-status.sending { color: var(--muted); font-style: italic; }
/* The bot reported the checkout failed: nothing was charged, safe to clear. */
.giftcard-log-status.bad { color: var(--sauce-text); font-weight: 600; }

.giftcard-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  font-size: 0.82rem;
  line-height: 1;
  padding: 2px 4px;
}

.giftcard-clear:hover { color: var(--sauce-text); }

/* The modal panel stays light in both themes, but the .muted class flips to a
   near-white "muted on dark page" color in dark mode — invisible here. Pin the
   status line to the muted *variable* (a readable gray in both themes). The ID
   selector outranks the dark-mode .muted rule regardless of the media query. */
#giftcard-composer-status {
  color: var(--muted);
}

/* ---------- Login gate ---------- */
body.locked .app-shell,
body.locked .editor-overlay,
body.locked .reply-composer { display: none !important; }

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent; /* the ink aurora on body::before/::after shows through */
}

.login-card {
  position: relative;
  width: min(380px, 100%);
  display: grid;
  gap: 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(34, 44, 66, 0.9), rgba(20, 27, 42, 0.96));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.55);
  padding: 28px 24px;
}

.login-card img { width: 56px; height: 56px; margin: 0 auto; }
.login-card h1 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.login-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.login-card .login-pass { text-align: center; font-size: 1rem; }
.login-remember {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}
.login-remember input { width: auto; }
.login-error { color: var(--sauce-text); font-size: 0.85rem; margin: 0; }

.catering-alert-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}

.link-button.compact {
  padding: 6px 9px;
}

.catering-meta {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 10px;
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.row-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.approval-row input {
  accent-color: var(--red);
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.approval-progress {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
}

.progress-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.progress-fill {
  background: var(--green);
  height: 100%;
  transition: width 180ms ease;
  width: 0;
}

.inventory-count-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0 16px;
}

.inventory-count-summary > div {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.inventory-count-summary strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.bar-track {
  background: var(--gray);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.bar-fill {
  background: var(--red);
  height: 100%;
  width: 0;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.control {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.control label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

select {
  background: transparent;
  border: 0;
  color: var(--ink);
  outline: 0;
}

input[type="search"] {
  background: rgba(8, 13, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  min-width: 0;
  outline: 0;
  padding: 11px 12px;
  width: 100%;
}

.filter-input {
  background: rgba(8, 13, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  min-width: 0;
  outline: 0;
  padding: 9px 10px;
}

.money-input {
  text-align: right;
  width: 110px;
}

input[type="search"]:focus {
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: var(--focus);
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 14px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  text-decoration: none;
}

/* Tempo "premiere" solid-fill recipe: sheen + seat + sauce lift */
.primary-action {
  background: linear-gradient(180deg, var(--sauce-light), var(--sauce-dark));
  border-color: var(--sauce-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 6px 16px rgba(238, 75, 58, 0.32);
  color: #fff;
}

.danger-action {
  color: var(--sauce-text);
}

.report-back {
  background: rgba(255, 255, 255, 0.06);
}

.report-content {
  display: grid;
  gap: 12px;
}

.report-content h2 {
  font-size: 22px;
  margin-bottom: 2px;
}

.report-content h3 {
  border-top: 1px solid var(--line);
  font-size: 18px;
  margin: 10px 0 0;
  padding-top: 14px;
}

.report-content h4 {
  font-size: 15px;
  margin: 4px 0 0;
}

.report-content p {
  line-height: 1.5;
  margin-bottom: 0;
}

.report-content code {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 1px 5px;
}

.report-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-button:hover {
  border-color: rgba(238, 75, 58, 0.55);
  color: #fff;
}

.primary-action:hover {
  background: linear-gradient(180deg, #f97562, var(--sauce));
  border-color: var(--sauce-border);
  color: #fff;
}

.boundary-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.boundary-list li {
  list-style: none;
  padding-left: 18px;
  position: relative;
}

.boundary-list li::before {
  background: var(--red);
  border-radius: 99px;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 7px;
}

.source-list a {
  color: var(--sauce-text);
  font-weight: 750;
}

.source-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.source-list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  list-style: none;
  padding: 10px;
}

.source-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reminder-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.reminder-week {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.reminder-day-today {
  border-color: rgba(238, 75, 58, 0.45);
  box-shadow: 0 0 0 1px rgba(238, 75, 58, 0.25);
}

.reminder-day-today h3::after {
  content: "Today";
  background: var(--ember);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-left: 8px;
  padding: 2px 7px;
  text-transform: uppercase;
  vertical-align: middle;
}

.reminder-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.reminder-day h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

.reminder-item {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.people-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.people-row span {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  padding: 4px 8px;
}

.sync-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.sync-card code {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  color: var(--ink);
  display: block;
  font-size: 12px;
  overflow-x: auto;
  padding: 8px;
}

.content-panel {
  display: grid;
  gap: 12px;
}

.social-performance {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.social-performance h3 {
  font-size: 15px;
  margin: 0;
}

.social-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.social-metrics span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
}

.social-metrics strong {
  color: var(--ink);
  display: block;
  font-size: 16px;
}

.social-trend-report {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.social-trend-report p {
  color: var(--muted);
  line-height: 1.55;
  margin: 8px 0 0;
}

.daily-content-planner {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.daily-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.daily-card h3 {
  font-size: 14px;
  margin: 0;
}

.daily-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.content-bubble {
  display: none;
}

.content-bubble.active {
  display: grid;
  gap: 14px;
}

.content-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
}

.idea-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.idea-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.idea-card h3 {
  font-size: 14px;
  margin: 0;
}

.idea-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.caption-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  padding: 10px;
}

.trend {
  display: inline-flex;
  font-weight: 850;
  white-space: nowrap;
}

.trend-good {
  color: var(--basil-text);
}

.trend-bad {
  color: var(--sauce-text);
}

.trend-neutral {
  color: var(--muted);
}

.inventory-insight {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.inventory-insight h3 {
  margin: 0;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pill.neutral {
  background: var(--gray);
  color: var(--muted);
}

.nav-group-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 800;
  grid-column: 1 / -1;
  letter-spacing: 0.06em;
  margin: 12px 4px 2px;
  text-transform: uppercase;
}

.nav-group-label:first-child {
  margin-top: 0;
}

.recon-banner:empty {
  display: none;
}

.recon-banner {
  background: rgba(238, 75, 58, 0.12);
  border: 1px solid rgba(238, 75, 58, 0.3);
  border-left: 4px solid var(--sauce);
  border-radius: 8px;
  color: #ffb3a8;
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 14px;
}

.profit-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}

/* Mirrors .panel's box (same values) so a .kpi-card without .panel still
   renders as a padded tile instead of text flush against the glass edges. */
.kpi-card {
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  color: var(--ink);
  gap: 2px;
  min-width: 0;
  padding: 16px;
}

.cash-drag-kpis {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 14px;
}

.cash-drag-automation {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.cash-drag-automation .source-sync-row {
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto;
}

.cash-drag-automation .source-sync-row > * {
  min-width: 0;
}

.cash-drag-automation strong {
  overflow-wrap: anywhere;
}

.cash-drag-automation em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.kpi-card.kpi-warn {
  border-color: rgba(238, 75, 58, 0.38);
  box-shadow: inset 0 0 0 1px rgba(238, 75, 58, 0.2), var(--shadow);
}

.kpi-card.kpi-warn .kpi-value {
  color: var(--sauce-text);
}

.kpi-card.kpi-watch {
  border-color: rgba(241, 196, 15, 0.35);
}

.kpi-card.kpi-watch .kpi-value {
  color: var(--cheese);
}

.has-kpi-hover {
  cursor: help;
  position: relative;
}

.has-kpi-hover:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.info-mark {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 9px;
  height: 14px;
  justify-content: center;
  margin-left: 3px;
  text-transform: lowercase;
  width: 14px;
}

.kpi-hover-card {
  background: var(--tempo-crust);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  color: #fff;
  display: none;
  left: 10px;
  min-width: 290px;
  padding: 12px;
  position: absolute;
  top: calc(100% - 4px);
  width: min(360px, calc(100vw - 48px));
  z-index: 40;
}

.has-kpi-hover:hover .kpi-hover-card,
.has-kpi-hover:focus .kpi-hover-card,
.has-kpi-hover:focus-within .kpi-hover-card {
  display: block;
}

.kpi-hover-card .kpi-note {
  color: rgba(255, 255, 255, 0.66);
  margin-top: 4px;
}

.kpi-hover-card ol {
  margin: 10px 0 6px;
  padding-left: 20px;
}

.kpi-hover-card li {
  margin: 5px 0;
}

.kpi-hover-card li span {
  color: var(--cheese);
  font-size: 11px;
  margin-left: 4px;
}

.cockpit-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
  align-items: start;
}

.subhead {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
  padding-top: 12px;
  text-transform: uppercase;
}

.subhead:first-of-type {
  border-top: 0;
  margin-top: 4px;
  padding-top: 0;
}

.heat {
  border-radius: 6px;
  display: inline-block;
  font-weight: 750;
  min-width: 54px;
  padding: 2px 7px;
  text-align: right;
}

.heat-low {
  background: rgba(39, 174, 96, 0.14);
  color: var(--basil-text);
}

.heat-mid {
  background: rgba(241, 196, 15, 0.14);
  color: var(--cheese);
}

.heat-high {
  background: rgba(238, 75, 58, 0.16);
  color: var(--sauce-text);
}

.heat-none {
  background: var(--gray);
  color: var(--muted);
}

.queue-counts {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.queue-count-row {
  align-items: center;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
}

.queue-count-value {
  font-size: 18px;
  font-weight: 850;
}

.bar-fill.bar-green {
  background: var(--green);
}

.bar-fill.bar-gold {
  background: var(--gold);
}

.bar-fill.bar-red {
  background: var(--red);
}

.bar-fill.bar-neutral {
  background: rgba(255, 255, 255, 0.25);
}

.recon-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

.recon-cell {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.menu-items-table {
  max-height: 70vh;
  overflow-y: auto;
}

.menu-items-table table.dense th,
.menu-items-table table.dense td {
  padding: 7px 8px;
}

.menu-items-table thead th {
  background: var(--panel-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--ink);
}

th.sortable.sorted-asc::after {
  content: " \25B2";
  font-size: 10px;
}

th.sortable.sorted-desc::after {
  content: " \25BC";
  font-size: 10px;
}

.overrides-bar {
  align-items: center;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.overrides-bar > div:first-child {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.recovery-bar {
  align-items: center;
  background: rgba(241, 196, 15, 0.07);
  border: 1px solid rgba(241, 196, 15, 0.28);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.recovery-bar > div:first-child {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.recovery-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recovery-controls select {
  max-width: min(420px, 100%);
  min-width: min(320px, 100%);
}

.recovery-controls button:disabled,
.recovery-controls select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.price-alert-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.price-alert-card {
  background: rgba(241, 196, 15, 0.1);
  border: 1px solid rgba(241, 196, 15, 0.32);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}

.price-alert-card strong,
.price-alert-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.price-alert-card span {
  color: var(--muted);
  font-size: 12px;
}

.price-alert-card:hover,
.price-alert-card:focus-visible {
  border-color: var(--gold);
  box-shadow: var(--focus);
  outline: none;
}

.inline-builder {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

.inline-builder[hidden] {
  display: none;
}

.inline-builder-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.inline-builder-head h2 {
  margin-bottom: 4px;
}

.builder-controls {
  align-items: center;
  margin-bottom: 0;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: var(--panel-strong);
}

.clickable-row:focus {
  box-shadow: inset 3px 0 0 var(--red);
  outline: none;
}

.edit-input {
  background: rgba(8, 13, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: var(--ink);
  padding: 6px 8px;
  text-align: right;
  width: 120px;
}

.edit-input:focus {
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: var(--focus);
  outline: 0;
}

.edit-input.edited {
  background: rgba(241, 196, 15, 0.13);
  border-color: rgba(241, 196, 15, 0.5);
}

.editor-overlay {
  align-items: flex-start;
  background: rgba(3, 7, 15, 0.6);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: auto;
  padding: 40px 16px;
  position: fixed;
  z-index: 50;
}

.editor-overlay[hidden] {
  display: none;
}

.editor-panel {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: min(820px, calc(100vh - 80px));
  max-height: calc(100vh - 32px);
  max-width: calc(100vw - 32px);
  min-height: 420px;
  min-width: min(620px, calc(100vw - 32px));
  overflow: hidden;
  resize: both;
  width: min(900px, calc(100vw - 32px));
}

.editor-panel.picker-open {
  height: min(940px, calc(100vh - 32px));
  width: min(1040px, calc(100vw - 32px));
}

.editor-panel.picker-open .editor-lines {
  max-height: 52vh;
}

.editor-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px;
}

.editor-head h2 {
  margin: 0 0 4px;
}

.editor-metrics {
  display: grid;
  gap: 8px;
  /* 116px wrapped Besley dollar amounts mid-number; 136px fits them */
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  padding: 14px 16px 0;
}

.editor-metrics .kpi-value {
  font-size: 18px;
}

.editor-lines {
  overflow: auto;
  padding: 12px 16px;
}

.editor-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px 0;
}

.qty-calculator {
  align-items: center;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
  padding: 5px;
}

.qty-calculator > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 0 5px;
  text-transform: uppercase;
}

.qty-calculator button {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  min-width: 34px;
  padding: 5px 7px;
}

.qty-calculator button:hover,
.qty-calculator button:focus-visible {
  border-color: rgba(238, 75, 58, 0.55);
  color: var(--sauce-text);
}

.add-ingredient-button {
  color: var(--sauce-text);
  font-weight: 800;
}

.ingredient-picker {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 16px 0;
  max-height: min(440px, 52vh);
  overflow: auto;
  padding: 12px;
}

.ingredient-picker-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ingredient-picker-head.compact {
  margin-bottom: 8px;
}

.ingredient-picker .filter-input {
  width: 100%;
}

.custom-ingredient-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
}

.custom-ingredient-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(100px, 0.7fr) auto;
}

.custom-ingredient-grid label {
  display: grid;
  gap: 4px;
}

.custom-ingredient-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ingredient-group {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 8px;
}

.ingredient-group summary {
  cursor: pointer;
  font-weight: 800;
}

.ingredient-options {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.ingredient-option {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
  text-align: left;
}

.ingredient-option:hover {
  border-color: var(--red);
}

.recipe-picker-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.recipe-option {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.recipe-option:hover,
.recipe-option:focus-visible {
  border-color: var(--red);
}

.recipe-option-meta {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
}

.remove-line-button {
  color: var(--sauce-text);
  font-size: 11px;
  margin-left: 6px;
  padding: 2px 6px;
}

.sell-price-input {
  margin-top: 4px;
  width: 100%;
}

.text-edit-input {
  margin-top: 4px;
  max-width: 100%;
  text-align: left;
  width: 100%;
}

.editor-table input.edit-input {
  width: 108px;
}

.editor-table .unit-select {
  min-width: 72px;
  width: 100%;
}

.editor-foot {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

#editor-approx-note {
  margin: 12px 16px 0;
}

.toast-match-panel {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px;
}

.toast-match-head,
.toast-match-current {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.toast-match-head > div,
.toast-match-current span:first-child {
  min-width: 0;
}

.toast-match-current {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 10px;
}

.toast-match-current span:first-child {
  color: var(--ink);
  font-weight: 700;
}

.toast-match-options {
  display: grid;
  gap: 8px;
}

.toast-match-option {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.toast-match-option:hover,
.toast-match-option:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.toast-match-option > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toast-match-action {
  align-items: flex-end;
  color: var(--steel-text);
  display: grid;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
  justify-items: end;
}

@media (max-width: 1200px) {
  .profit-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cockpit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    position: static;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid,
  .two-col,
  .three-col,
  .sync-overview-grid,
  .reminder-layout,
  .content-grid,
  .price-alert-strip,
  .inventory-count-summary {
    grid-template-columns: 1fr;
  }

  .profit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ingredient-options {
    grid-template-columns: 1fr;
  }

  .custom-ingredient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reminder-week,
  .daily-content-planner,
  .idea-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .editor-panel {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
    min-height: 0;
    min-width: 0;
    resize: none;
    width: calc(100vw - 16px);
  }

  .qty-calculator {
    margin-left: 0;
    width: 100%;
  }

  .main {
    padding: 16px;
  }

  .topbar {
    display: grid;
  }

  .row-head {
    display: grid;
  }

  .inline-builder-head,
  .builder-controls,
  .recovery-bar,
  .recovery-controls,
  .custom-ingredient-grid {
    grid-template-columns: 1fr;
  }

  .builder-controls,
  .recovery-bar,
  .recovery-controls,
  .custom-ingredient-grid {
    display: grid;
  }

  .recovery-controls select {
    min-width: 0;
    width: 100%;
  }

  .money-input {
    width: 100%;
  }

  .ingredient-history-control {
    min-width: 0;
    width: 100%;
  }

  .ingredient-history-control select {
    min-width: 0;
    width: 100%;
  }

  .sync-overview-head,
  .source-sync-card-head,
  .toast-sync-summary {
    align-items: flex-start;
  }

  .sync-overview-head {
    display: grid;
  }

  .source-sync-row,
  .toast-sync-summary {
    display: grid;
  }

  /* Drop the fixed label column so a label and its value are not squeezed onto
     separate lines at phone width. */
  .source-sync-line-label {
    min-width: 0;
    width: 100%;
  }

  .cash-drag-automation {
    grid-template-columns: 1fr;
  }

  .cash-drag-automation .source-sync-row {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .sync-action {
    width: 100%;
  }

  .nav {
    grid-template-columns: 1fr;
  }

  .kpi-value {
    font-size: 25px;
  }

  .reminder-week,
  .daily-content-planner,
  .idea-grid {
    grid-template-columns: 1fr;
  }

  .profit-kpi-grid,
  .recon-grid {
    grid-template-columns: 1fr;
  }

  .toast-match-head,
  .toast-match-current,
  .toast-match-option {
    display: grid;
  }

  .toast-match-action {
    align-items: start;
    justify-items: start;
  }

  .toast-match-panel .links {
    display: grid;
    gap: 8px;
  }

  .social-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Premium cockpit layer --------------------------------------------------- */

body::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 72%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.app-shell {
  background: transparent;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(23, 32, 54, 0.92), rgba(8, 13, 24, 0.97)),
    var(--shell);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 12px 0 44px rgba(0, 0, 0, 0.32);
}

.brand {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 10px;
}

.brand-logo {
  background:
    radial-gradient(circle at 50% 40%, rgba(238, 75, 58, 0.28), transparent 62%),
    #0b1220;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 4px rgba(238, 75, 58, 0.1), 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Tempo wordmark gradient: sauce into cheese, same arc as the TempoMark */
.brand-title {
  letter-spacing: 0;
  background: linear-gradient(100deg, var(--sauce-light) 0%, var(--cheese) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-subtitle,
.sidebar-note,
.nav-group-label {
  color: rgba(255, 255, 255, 0.55);
}

.nav {
  gap: 6px;
}

.nav button,
.nav-link {
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  min-height: 39px;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav button::before,
.nav-link::before {
  background: var(--ember);
  border-radius: 999px;
  content: "";
  inset: 9px auto 9px 0;
  opacity: 0;
  position: absolute;
  transform: scaleY(0.35);
  transition: opacity 160ms ease, transform 160ms ease;
  width: 3px;
}

.nav button:hover,
.nav button.active,
.nav-link:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateX(2px);
}

.nav button.active {
  background: linear-gradient(90deg, rgba(238, 75, 58, 0.24), rgba(255, 255, 255, 0.07));
  border-color: rgba(238, 75, 58, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.25);
}

.nav button.active::before,
.nav button:hover::before,
.nav-link:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.sidebar-note {
  border-color: rgba(255, 255, 255, 0.12);
}

.main {
  color: var(--cream);
  max-width: none;
  padding: 26px;
}

.topbar {
  background:
    linear-gradient(135deg, rgba(255, 246, 233, 0.1), rgba(255, 246, 233, 0.035)),
    rgba(20, 16, 15, 0.42);
  border: 1px solid rgba(255, 246, 233, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  margin-bottom: 16px;
  padding: 18px;
}

h1 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
}

h2,
h3 {
  letter-spacing: 0;
}

.muted {
  color: rgba(255, 255, 255, 0.6);
}

.topbar .muted,
.sync-overview-head .muted {
  color: rgba(255, 255, 255, 0.65);
}

.stack {
  align-items: end;
}

.topbar .stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 520px;
}

/* Tempo StatusPill: tone tint at 10%, tone border at 40%, bright tone text,
   uppercase micro-label. Dot comes from the base-layer ::before rule. */
.pill {
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill.green {
  background: rgba(39, 174, 96, 0.1);
  border-color: rgba(39, 174, 96, 0.4);
  color: var(--basil-text);
}

.pill.red {
  background: rgba(238, 75, 58, 0.1);
  border-color: rgba(238, 75, 58, 0.4);
  color: var(--sauce-text);
}

.pill.gold {
  background: rgba(241, 196, 15, 0.1);
  border-color: rgba(241, 196, 15, 0.4);
  color: var(--cheese);
}

.pill.blue {
  background: rgba(111, 134, 196, 0.12);
  border-color: rgba(111, 134, 196, 0.45);
  color: var(--steel-text);
}

.pill.neutral {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.66);
}

.sync-overview {
  background: rgba(16, 12, 11, 0.24);
  border: 1px solid rgba(255, 246, 233, 0.08);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 14px;
}

.source-sync-card,
.panel,
.kpi-card,
.inventory-count-summary > div,
.social-performance,
.idea-card,
.inventory-insight,
.sync-card,
.approval-progress,
.approval-row,
.form-response-row,
.phase-row,
.location-row,
.reminder-day,
.reminder-item,
.recon-cell,
.queue-count-row,
.inline-builder,
.overrides-bar,
.recovery-bar,
.ingredient-picker,
.source-list li,
.daily-card,
.caption-box {
  background: rgba(15, 23, 40, 0.86);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
}

.source-sync-card,
.panel,
.kpi-card {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.source-sync-card:hover,
.panel:hover,
.kpi-card:hover {
  border-color: rgba(238, 75, 58, 0.28);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.panel .muted,
.source-sync-detail,
.source-sync-note,
.kpi-note,
.daily-card p,
.idea-card p,
.source-list span {
  color: #75665b;
}

.source-sync-eyebrow,
.source-sync-label,
.kpi-label,
th,
.subhead,
.control label,
.custom-ingredient-grid span,
.qty-calculator > span {
  color: #8a7668;
  letter-spacing: 0.04em;
}

.source-sync-row,
.toast-sync-summary,
.history-chart,
.forecast-summary span,
.queue-count-row,
.bar-track,
.progress-track,
.control,
.sync-card code,
.recipe-membership-list,
.custom-ingredient-form,
.ingredient-option,
.recipe-option,
.social-metrics span {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.source-sync-row,
.toast-sync-summary,
.queue-count-row,
.reminder-item,
.idea-card,
.daily-card,
.ingredient-option,
.recipe-option {
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.source-sync-row:hover,
.queue-count-row:hover,
.reminder-item:hover,
.idea-card:hover,
.daily-card:hover,
.ingredient-option:hover,
.recipe-option:hover {
  border-color: rgba(238, 75, 58, 0.3);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.sync-action,
.primary-action {
  background: linear-gradient(180deg, var(--sauce-light), var(--sauce-dark));
  border-color: var(--sauce-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 6px 16px rgba(238, 75, 58, 0.32);
  color: #fff;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.sync-action:hover,
.sync-action:focus-visible,
.primary-action:hover {
  background: linear-gradient(180deg, #f97562, var(--sauce));
  border-color: var(--sauce-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 10px 24px rgba(238, 75, 58, 0.42);
  transform: translateY(-1px);
}

.link-button,
.qty-calculator button {
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.link-button:hover,
.qty-calculator button:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

input[type="search"],
.filter-input,
.edit-input {
  background: rgba(8, 13, 24, 0.6);
  border-color: rgba(255, 255, 255, 0.14);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input[type="search"]:focus,
.filter-input:focus,
.edit-input:focus,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
tr[tabindex]:focus-visible {
  box-shadow: var(--focus);
  outline: 0;
}

table {
  font-size: 13px;
}

th {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

td {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

tbody tr {
  transition: background 120ms ease;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.045);
}

.table-wrap {
  border-radius: 8px;
}

.kpi-value {
  color: #1b1210;
  font-size: clamp(24px, 1.8vw, 30px);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.kpi-card .kpi-value {
  line-height: 1;
}

.kpi-card.kpi-warn {
  background: linear-gradient(180deg, rgba(238, 75, 58, 0.16), rgba(238, 75, 58, 0.04));
  border-color: rgba(238, 75, 58, 0.38);
}

.kpi-card.kpi-watch {
  background: linear-gradient(180deg, rgba(241, 196, 15, 0.14), rgba(241, 196, 15, 0.04));
  border-color: rgba(241, 196, 15, 0.35);
}

.bar-track,
.progress-track {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bar-fill,
.progress-fill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 18px rgba(238, 75, 58, 0.25);
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar-fill.bar-green,
.progress-fill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 18px rgba(39, 174, 96, 0.25);
}

.heat,
.trend {
  letter-spacing: 0;
}

.heat-low {
  background: var(--mint);
}

.heat-mid {
  background: var(--amber);
}

.heat-high {
  background: var(--danger-soft);
}

.recon-banner {
  background: linear-gradient(90deg, rgba(238, 75, 58, 0.16), rgba(238, 75, 58, 0.06));
  border-color: rgba(238, 75, 58, 0.32);
  box-shadow: 0 12px 26px rgba(238, 75, 58, 0.14);
}

.view.active {
  animation: cockpitViewIn 220ms ease both;
}

@keyframes cockpitViewIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HAZARD: no backdrop-filter on fixed overlays/panels. Chromium misplaces
   composited fixed+blur layers once the page behind is scrolled — the modal
   paints offset by the scroll distance. The panels are near-opaque ink glass,
   so blur was invisible anyway. (Same bug family as the sidebar note below.) */
.editor-overlay {
  background: rgba(3, 7, 15, 0.72);
}

.editor-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.editor-head,
.editor-foot {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
  .sidebar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 0;
  }

  .brand {
    margin-bottom: 12px;
  }

  .main {
    padding: 18px;
  }

  .topbar {
    display: grid;
  }

  .stack {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .main {
    padding: 14px;
  }

  .topbar,
  .sync-overview,
  .panel,
  .source-sync-card,
  .kpi-card {
    border-radius: 8px;
  }

  .topbar {
    padding: 14px;
  }

  h1 {
    font-size: 30px;
  }

  .nav button,
  .nav-link {
    min-height: 42px;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control {
    align-items: flex-start;
    display: grid;
    width: 100%;
  }

  .control select,
  .control input {
    width: 100%;
  }

  th,
  td {
    padding: 9px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Dashboard refresh: Action Center, freshness, nav badges,
   mobile nav, reminder + bridge polish, command palette.
   ============================================================ */

/* --- Topbar lead + mobile menu button --- */
.topbar-lead {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.mobile-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --- Data freshness pill --- */
.freshness-pill {
  border: 1px solid transparent;
  cursor: pointer;
}

.freshness-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  display: inline-block;
  opacity: 0.85;
}

/* --- Nav count badges --- */
.nav button[data-view-target] {
  padding-right: 38px;
}

.nav-badge {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.nav-badge-urgent {
  background: var(--ember);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(238, 75, 58, 0.22);
}

/* --- Action Center --- */
.action-hero .row-head {
  align-items: flex-start;
}

.action-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.action-chip {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
}

.action-chip strong {
  color: var(--ink);
  font-weight: 800;
}

.action-list {
  display: grid;
  gap: 10px;
}

.action-row {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding: 13px 15px 13px 0;
  position: relative;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  width: 100%;
}

.action-row:hover {
  border-color: rgba(238, 75, 58, 0.36);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  transform: translateX(2px);
}

.action-row-stripe {
  align-self: stretch;
  width: 5px;
  flex: none;
  border-radius: 0 4px 4px 0;
  background: var(--muted);
}

.action-row.tone-red .action-row-stripe { background: var(--red); }
.action-row.tone-gold .action-row-stripe { background: var(--gold); }
.action-row.tone-blue .action-row-stripe { background: var(--blue); }
.action-row.tone-green .action-row-stripe { background: var(--green); }
.action-row.tone-neutral .action-row-stripe { background: rgba(255, 255, 255, 0.3); }

.action-row-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.action-row-eyebrow {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.action-row-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.action-row-detail {
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-row-count {
  background: var(--panel-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  flex: none;
  padding: 3px 9px;
}

.action-row-cta {
  color: var(--sauce-text);
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.action-empty {
  padding: 26px;
  text-align: center;
}

.sync-action-done {
  background: rgba(39, 174, 96, 0.16) !important;
  border-color: rgba(39, 174, 96, 0.45) !important;
  color: var(--basil-text) !important;
}

.source-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  cursor: help;
  max-width: 360px;
  overflow: hidden;
}

.mapping-progress {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.mapping-progress-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.table-chip-toggle {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  padding: 4px 11px;
}

/* Share-of-total cell: percentage with a slim inline bar. */
.share-cell {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.share-bar {
  background: var(--gray);
  border-radius: 999px;
  display: inline-block;
  height: 6px;
  overflow: hidden;
  width: 54px;
}

.share-bar-fill {
  background: linear-gradient(90deg, var(--cheese), var(--sauce-light));
  display: block;
  height: 100%;
}

.table-chip-toggle.active {
  background: rgba(241, 196, 15, 0.12);
  border-color: rgba(241, 196, 15, 0.4);
  color: var(--cheese);
}

.kpi-jump {
  cursor: pointer;
}

.kpi-jump:hover {
  border-color: rgba(238, 75, 58, 0.4);
}

/* Magnitude bars (spend / volume) read as on-brand fill, not an alarm. Red stays reserved
   for directional "cost up" semantics elsewhere. */
.bar-fill.bar-brand {
  background: linear-gradient(90deg, var(--cheese), var(--sauce-light));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 16px rgba(241, 196, 15, 0.2);
}

/* --- Apple Reminders bridge card --- */
.bridge-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 10px;
}

.bridge-status .bridge-metric {
  display: grid;
}

.bridge-status .bridge-metric strong {
  font-size: 18px;
}

.bridge-status .bridge-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advanced-sync {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 10px;
}

.advanced-sync summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.advanced-sync .sync-card {
  margin-top: 10px;
}

/* --- People chips (reminder center) --- */
.people-row span {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
}

/* --- Show-more for long tables --- */
.table-more {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.table-more-button {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
}

.table-more-button:hover {
  border-color: rgba(238, 75, 58, 0.4);
}

/* --- Command palette --- */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(3, 7, 15, 0.65);
}

.command-palette.open {
  display: flex;
}

.command-panel {
  width: min(560px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

.command-input {
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  outline: none;
  padding: 16px 18px;
  width: 100%;
}

.command-results {
  list-style: none;
  margin: 0;
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px;
}

.command-results li {
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 12px;
}

.command-results li .command-group {
  color: var(--muted);
  font-size: 12px;
}

.command-results li.active,
.command-results li:hover {
  background: var(--panel-strong);
}

/* --- Mobile collapsible navigation --- */
@media (max-width: 980px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 60;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.4);
  }

  .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2, 5, 12, 0.55);
    z-index: 55;
  }

  .nav {
    grid-template-columns: 1fr;
  }
}

/* ===== Glass layer (2026-07-01) ===== */

/* --- 1. Tokens ------------------------------------------------------------
   Glass surfaces, warm glow accents, spring motion, radius scale, and
   on-glass text colors (replace hardcoded #75665b / #8a7668 / #1b1210,
   retuned for ~0.6-alpha panels over the dark mesh). */
:root {
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(21, 30, 50, 0.92);
  --glass-bg-dark: rgba(9, 15, 28, 0.5);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-dark: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;
  --glass-saturate: 140%;
  --glow-ember: 0 0 24px rgba(238, 75, 58, 0.35);
  --glow-gold: 0 0 20px rgba(241, 196, 15, 0.28);
  --glow-green: 0 0 20px rgba(39, 174, 96, 0.3);
  --glow-red: 0 0 20px rgba(238, 75, 58, 0.32);
  --glow-blue: 0 0 20px rgba(111, 134, 196, 0.3);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --ink-on-glass: #f2f6fc;
  --muted-on-glass: rgba(255, 255, 255, 0.62);
}

/* --- 2. Backdrop: Tempo ink aurora ----------------------------------------
   Two calm drifting brand glows (sauce + basil) over --tempo-ink, plus a
   vignette — the same ambient recipe as the Tempo dashboard's Background.tsx.
   body::before grid (cockpit layer) is untouched and reads through the blur.
   The aurora lives on a fixed-position body::after layer, NOT on html with
   background-attachment: fixed — Chromium paints fixed-attachment backgrounds
   black below the first viewport when descendants use backdrop-filter. */
html {
  background: var(--tempo-ink);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2; /* under the body::before grid, which sits at -1 */
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(circle at 8% -4%, rgba(238, 75, 58, 0.17), transparent 46rem),
    radial-gradient(circle at 94% 88%, rgba(39, 174, 96, 0.13), transparent 44rem),
    linear-gradient(160deg, #0d1526 0%, #0b1220 55%, #080d18 100%);
}

/* Keep the shell transparent so the aurora shows through every glass tile. */
.app-shell {
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  body::after {
    animation: glassAmbientDrift 96s ease-in-out infinite;
  }
}

@keyframes glassAmbientDrift {
  0%,
  100% {
    background-position: 0 0, 0px 0px, 0px 0px, 0 0;
  }

  50% {
    background-position: 0 0, 64px 42px, -52px -30px, 0 0;
  }
}

/* --- 3. Glass surfaces -----------------------------------------------------
   True glass (backdrop-filter) ONLY on top-level containers. Row-level
   items get translucent gradients WITHOUT blur (dozens per view). */

/* Tempo white-glass tiles: white 4.5–5% over the ink aurora, blur-and-saturate,
   hairline border, deep soft shadow — the GlassCard recipe. */
.panel,
.kpi-card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 58%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 40px -12px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* Tempo glass-top hairline: thin gradient line along the top edge of every
   glass surface (GlassCard's .glass-top). Pseudo-element, no DOM changes. */
.topbar,
.sync-overview,
.source-sync-card,
.editor-panel,
.command-panel,
.login-card {
  position: relative;
}

.panel::after,
.kpi-card::after,
.topbar::after,
.sync-overview::after,
.source-sync-card::after,
.editor-panel::after,
.command-panel::after,
.reply-composer-panel::after,
.login-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

/* Slightly darker glass strips for the topbar + sync band */
.topbar,
.sync-overview {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01) 60%),
    var(--glass-bg-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 52px rgba(0, 0, 0, 0.45);
}

/* Sidebar: NO backdrop-filter — it is position: sticky with its own scroll
   (overflow-y: auto), and Chromium misplaces composited sticky+blur layers,
   blacking out the page once scrolled. Near-solid gradient reads the same. */
.sidebar {
  background: linear-gradient(180deg, rgba(19, 28, 48, 0.92), rgba(7, 11, 21, 0.97));
  border-right: 1px solid var(--glass-border-dark);
  box-shadow: 12px 0 44px rgba(0, 0, 0, 0.4);
}

/* Floating panels: ink-glass (tokens.css "premiere" dark panel recipe),
   near-opaque for readability over the dim overlay */
.editor-panel,
.command-panel {
  /* No backdrop-filter here: these live inside fixed overlays and Chromium
     misplaces composited fixed+blur layers on scrolled pages. Near-opaque
     ink-glass gradient reads the same. */
  background: linear-gradient(180deg, rgba(34, 44, 66, 0.96), rgba(20, 27, 42, 0.98));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 90px rgba(0, 0, 0, 0.6);
}

.command-input {
  background: rgba(8, 13, 24, 0.6);
  color: var(--ink);
}

/* Warn/watch KPI tints go translucent so the .kpi-card blur still reads */
.kpi-card.kpi-warn {
  background:
    linear-gradient(180deg, rgba(238, 75, 58, 0.16), rgba(238, 75, 58, 0.03)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(238, 75, 58, 0.38);
}

.kpi-card.kpi-watch {
  background:
    linear-gradient(180deg, rgba(241, 196, 15, 0.14), rgba(241, 196, 15, 0.03)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(241, 196, 15, 0.35);
}

/* Row-level items: translucent glass look, NO backdrop-filter (performance) */
.source-sync-card,
.approval-row,
.phase-row,
.location-row,
.form-response-row,
.reminder-day,
.reminder-item,
.recon-cell,
.queue-count-row,
.inline-builder,
.overrides-bar,
.recovery-bar,
.ingredient-picker,
.source-list li,
.daily-card,
.idea-card,
.inventory-insight,
.sync-card,
.approval-progress,
.caption-box,
.inventory-count-summary > div,
.social-performance {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 26px rgba(0, 0, 0, 0.28);
}

.price-alert-card {
  background: linear-gradient(165deg, rgba(241, 196, 15, 0.13), rgba(241, 196, 15, 0.05));
  border-color: rgba(241, 196, 15, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Pills / chips: translucent tints, no blur */
.pill.green {
  background: rgba(39, 174, 96, 0.1);
}

.pill.red {
  background: rgba(238, 75, 58, 0.1);
}

.pill.gold {
  background: rgba(241, 196, 15, 0.1);
}

.pill.blue {
  background: rgba(111, 134, 196, 0.12);
}

.pill.neutral {
  background: rgba(255, 255, 255, 0.07);
}

.action-chip,
.people-row span,
.recipe-membership-chip,
.action-row-count,
.table-chip-toggle,
.table-more-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.sync-action,
.link-button {
  border-radius: var(--r-sm);
}

/* HAZARD: sticky table headers must stay near-opaque so scrolling rows
   don't ghost through them now that panels are translucent. */
.ingredients-table thead th,
.menu-items-table thead th {
  background: rgba(16, 24, 41, 0.97);
}

/* On-glass text: replaces #75665b (L2483), #8a7668 (L2494), #1b1210 (L2613) */
.panel .muted,
.source-sync-detail,
.source-sync-note,
.kpi-note,
.daily-card p,
.idea-card p,
.source-list span,
.social-trend-report p,
.action-row-detail,
.recipe-option-meta,
.source-sync-eyebrow,
.source-sync-label,
.kpi-label,
th,
.subhead,
.control label,
.custom-ingredient-grid span,
.qty-calculator > span,
.action-row-eyebrow,
.bridge-status .bridge-metric span {
  color: var(--muted-on-glass);
}

.kpi-value {
  color: var(--ink-on-glass);
}

/* Quiet glass placeholders for previously-unstyled empty states */
.empty-state,
.command-empty,
.action-empty {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  color: var(--muted-on-glass);
  display: block;
  font-size: 13px;
  line-height: 1.5;
  padding: 22px 18px;
  text-align: center;
}

/* --- 4. High-dopamine feedback -------------------------------------------- */

/* Springy base transitions for tiles (release of press springs back) */
.source-sync-card,
.panel,
.kpi-card {
  transition:
    border-color var(--dur-2) var(--ease-out-expo),
    background var(--dur-2) var(--ease-out-expo),
    box-shadow var(--dur-2) var(--ease-out-expo),
    transform var(--dur-2) var(--spring);
}

/* Pressable things share one springy transition recipe */
.sync-action,
.link-button,
.nav button,
.nav-link,
.action-row,
.price-alert-card,
.qty-calculator button,
.table-more-button,
.table-chip-toggle,
.ingredient-option,
.recipe-option,
.toast-match-option,
.mobile-nav-toggle,
.freshness-pill,
.loc-chip,
.command-results li {
  transition:
    background var(--dur-2) var(--ease-out-expo),
    border-color var(--dur-2) var(--ease-out-expo),
    color var(--dur-2) var(--ease-out-expo),
    box-shadow var(--dur-2) var(--ease-out-expo),
    transform var(--dur-2) var(--spring);
}

/* 4a. Global pressed state (file previously had ZERO :active rules) */
.sync-action:active:not(:disabled),
.link-button:active,
.nav button:active,
.action-row:active,
.price-alert-card:active,
.qty-calculator button:active,
.table-more-button:active,
.table-chip-toggle:active,
.ingredient-option:active,
.recipe-option:active,
.toast-match-option:active,
.mobile-nav-toggle:active,
.freshness-pill:active,
.loc-chip:active,
.kpi-jump:active {
  transform: scale(0.97);
  transition-duration: var(--dur-1);
}

/* 4b. Hover lift + tone-matched glow */
.source-sync-card:hover,
.panel:hover,
.kpi-card:hover {
  border-color: rgba(238, 75, 58, 0.3);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 30px 64px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(238, 75, 58, 0.14);
  transform: translateY(-3px);
}

.kpi-card.kpi-warn:hover {
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 30px 64px rgba(0, 0, 0, 0.5), var(--glow-red);
}

.kpi-card.kpi-watch:hover {
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 30px 64px rgba(0, 0, 0, 0.5), var(--glow-gold);
}

.kpi-jump:hover {
  border-color: rgba(238, 75, 58, 0.45);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 30px 64px rgba(0, 0, 0, 0.5), var(--glow-ember);
}

.action-row:hover,
.price-alert-card:hover {
  transform: translateY(-3px);
}

.action-row:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-ember);
}

.action-row.tone-red:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-red);
}

.action-row.tone-gold:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-gold);
}

.action-row.tone-green:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-green);
}

.action-row.tone-blue:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-blue);
}

.price-alert-card:hover,
.price-alert-card:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.35), var(--glow-gold);
}

/* 4c. Springy nav-active state with sauce glow */
.nav button.active {
  background: linear-gradient(90deg, rgba(238, 75, 58, 0.3), rgba(255, 255, 255, 0.08));
  border-color: rgba(238, 75, 58, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--glow-ember);
  color: #fff;
  transform: translateX(2px);
}

/* 4d. Success pop for completed syncs (animation only — does not fight the
   existing !important background/border/color rules at L2990) */
@media (prefers-reduced-motion: no-preference) {
  .sync-action-done {
    animation: glassSuccessPop var(--dur-3) var(--spring);
  }
}

@keyframes glassSuccessPop {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.35);
    transform: scale(1);
  }

  40% {
    box-shadow: 0 0 0 9px rgba(39, 174, 96, 0), var(--glow-green);
    transform: scale(1.06);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    transform: scale(1);
  }
}

/* 4e. Entrance stagger on view switch (40ms steps, fast) */
@media (prefers-reduced-motion: no-preference) {
  .view.active > * {
    animation: glassTileIn 160ms var(--ease-out-expo) backwards;
  }

  .view.active > *:nth-child(2) { animation-delay: 40ms; }
  .view.active > *:nth-child(3) { animation-delay: 80ms; }
  .view.active > *:nth-child(4) { animation-delay: 120ms; }
  .view.active > *:nth-child(5) { animation-delay: 160ms; }
  .view.active > *:nth-child(6) { animation-delay: 200ms; }
  .view.active > *:nth-child(7) { animation-delay: 240ms; }
  .view.active > *:nth-child(8) { animation-delay: 280ms; }
  .view.active > *:nth-child(n + 9) { animation-delay: 300ms; }
}

@keyframes glassTileIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 4f. Count-up hook for JS number animation */
.count-up {
  transition: text-shadow var(--dur-2) var(--ease-out-expo);
}

.count-up.counting {
  text-shadow: 0 0 16px rgba(238, 75, 58, 0.4), 0 0 3px rgba(238, 75, 58, 0.22);
}

/* --- 5. New components ----------------------------------------------------- */

/* Sales hero (Today view, lives inside a .panel) */
.sales-hero {
  display: grid;
  gap: 12px;
}

.sales-hero-main {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.sales-hero-label {
  color: var(--muted-on-glass);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
}

.sales-hero-value {
  background: linear-gradient(100deg, var(--sauce-light) 8%, var(--cheese) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink-on-glass);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 20px rgba(238, 75, 58, 0.28));
  font-family: var(--font-num);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sales-hero-delta {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 5px;
  padding: 4px 10px;
}

.sales-hero-delta.up {
  background: rgba(39, 174, 96, 0.12);
  border-color: rgba(39, 174, 96, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--glow-green);
  color: var(--basil-text);
}

.sales-hero-delta.down {
  background: rgba(238, 75, 58, 0.12);
  border-color: rgba(238, 75, 58, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--glow-red);
  color: var(--sauce-text);
}

.sales-hero-meta {
  color: var(--muted-on-glass);
  font-size: 12.5px;
}

/* Sparkline bars (heights set inline via style attr; bars grow upward) */
.sales-spark {
  align-items: flex-end;
  display: flex;
  gap: 6px;
  height: 64px;
  margin-top: 8px;
}

.spark-bar {
  background: linear-gradient(180deg, var(--sauce-light), #b93520);
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex: 1 1 0;
  max-width: 14px;
  min-height: 4px;
  min-width: 6px;
  transform-origin: bottom;
  width: 10px;
}

.spark-bar.low {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.16));
}

.spark-bar.high {
  background: linear-gradient(180deg, #2fc973, var(--green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(39, 174, 96, 0.3);
}

.spark-bar.today {
  background: linear-gradient(180deg, #ff8a70, var(--sauce));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--glow-ember);
}

@media (prefers-reduced-motion: no-preference) {
  .spark-bar {
    animation: glassSparkGrow var(--dur-3) var(--ease-out-expo) backwards;
  }

  .spark-bar:nth-child(1) { animation-delay: 30ms; }
  .spark-bar:nth-child(2) { animation-delay: 60ms; }
  .spark-bar:nth-child(3) { animation-delay: 90ms; }
  .spark-bar:nth-child(4) { animation-delay: 120ms; }
  .spark-bar:nth-child(5) { animation-delay: 150ms; }
  .spark-bar:nth-child(6) { animation-delay: 180ms; }
  .spark-bar:nth-child(7) { animation-delay: 210ms; }
  .spark-bar:nth-child(8) { animation-delay: 240ms; }
  .spark-bar:nth-child(9) { animation-delay: 270ms; }
  .spark-bar:nth-child(10) { animation-delay: 300ms; }
  .spark-bar:nth-child(11) { animation-delay: 330ms; }
  .spark-bar:nth-child(12) { animation-delay: 360ms; }
  .spark-bar:nth-child(13) { animation-delay: 390ms; }
  .spark-bar:nth-child(14) { animation-delay: 420ms; }
}

@keyframes glassSparkGrow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* Location chips */
.loc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.loc-chip {
  align-items: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.3);
  color: var(--ink-on-glass);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 8px;
  padding: 6px 12px;
}

.loc-chip:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px rgba(0, 0, 0, 0.35), 0 0 14px rgba(238, 75, 58, 0.2);
  transform: translateY(-2px);
}

.loc-chip-amt {
  color: var(--sauce-text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 850;
}

/* Cash pressure card */
.cash-pressure-card {
  background: linear-gradient(160deg, rgba(241, 196, 15, 0.13), rgba(241, 196, 15, 0.04));
  border: 1px solid rgba(241, 196, 15, 0.3);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.3);
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.cash-pressure-value {
  background: linear-gradient(115deg, var(--cheese), var(--sauce-light) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cheese);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(241, 196, 15, 0.25));
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 850;
  line-height: 1.05;
}

.cash-pressure-meta {
  color: var(--muted-on-glass);
  font-size: 12.5px;
}

/* Per-source freshness badges */
.stale-badge,
.fresh-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.stale-badge {
  background: rgba(238, 75, 58, 0.12);
  border-color: rgba(238, 75, 58, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px rgba(238, 75, 58, 0.2);
  color: var(--sauce-text);
}

.fresh-badge {
  background: rgba(39, 174, 96, 0.12);
  border-color: rgba(39, 174, 96, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px rgba(39, 174, 96, 0.2);
  color: var(--basil-text);
}

/* --- 6. Breakpoints (mirror 1200 / 980 / 560) ------------------------------ */

@media (max-width: 1200px) {
  :root {
    --glass-blur: 16px;
  }

  .sales-hero-value {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }
}

@media (max-width: 980px) {
  :root {
    --glass-blur: 14px;
  }

  /* HAZARD: the sidebar becomes a fixed translateX drawer at this width
     (L3213). backdrop-filter would create a containing block and blur the
     slide — use a near-solid background instead of glass. */
  .sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(180deg, rgba(19, 28, 48, 0.97), rgba(7, 11, 21, 0.99)),
      var(--shell);
  }

  .sales-spark {
    height: 56px;
  }
}

@media (max-width: 560px) {
  .topbar,
  .sync-overview,
  .panel,
  .source-sync-card,
  .kpi-card,
  .editor-panel,
  .command-panel,
  .cash-pressure-card {
    border-radius: 10px;
  }

  .sales-hero-value {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .sales-spark {
    gap: 4px;
    height: 52px;
  }

  .spark-bar {
    border-radius: 4px 4px 2px 2px;
  }

  .loc-chip {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* --- 7. Tempo typography (2026-08-03) --------------------------------------
   Bricolage Grotesque carries the UI (html font-family); Besley carries every
   tabular number — money, KPI counts, metrics — matching Tempo's docs/33 §3
   "Downbeat" pairing. Both load from Google Fonts in index.html/report.html. */
.kpi-value,
td.money,
th.money,
.queue-count-value,
.inventory-count-summary strong,
.bridge-status .bridge-metric strong,
.social-metrics strong,
.action-row-count,
.editor-metrics .kpi-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Slim, dim scrollbars everywhere (Tempo index.css) */
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* --- 8. Reduced motion: belt-and-braces kill for this layer ---------------
   (New animations are already inside no-preference guards; the global
   kill-switch at L2781 also zeroes durations. This removes delays too.) */
@media (prefers-reduced-motion: reduce) {
  html,
  body::after,
  .view.active > *,
  .spark-bar,
  .sync-action-done {
    animation: none !important;
  }

  .source-sync-card:hover,
  .panel:hover,
  .kpi-card:hover,
  .action-row:hover,
  .price-alert-card:hover,
  .loc-chip:hover {
    transform: none;
  }

  .count-up.counting {
    text-shadow: none;
  }
}

/* ---------- Content ledger (Community hub): posts on record + sweep finds ---------- */

.giftcard-content-warning {
  background: rgba(241, 196, 15, 0.1);
  border: 1px solid rgba(241, 196, 15, 0.4);
  color: var(--cheese);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.giftcard-content-ok {
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.4);
  color: var(--basil-text);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.content-details {
  margin-top: 6px;
  font-size: 0.84rem;
}

.content-details summary {
  cursor: pointer;
}

.content-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.content-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 6px;
  border-radius: 8px;
}

.content-log-row:hover {
  background: var(--line);
}

.content-log-row em {
  opacity: 0.8;
}

.content-log-row.suggested {
  border: 1px dashed rgba(241, 196, 15, 0.4);
}

.content-remove {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
}

.content-remove:hover {
  opacity: 1;
}

/* George's eyes-on stamp: quiet until toggled, gold once he's verified it. */
.content-verify {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 1px 8px;
}

.content-verify:hover {
  opacity: 1;
}

.content-verify.on,
.content-verified {
  border: 1px solid rgba(241, 196, 15, 0.4);
  border-radius: 999px;
  background: rgba(241, 196, 15, 0.1);
  color: var(--cheese);
  opacity: 1;
  font-size: 0.78rem;
  padding: 1px 8px;
}

.content-found a {
  color: inherit;
}

/* Profile pictures pulled from the influencer's biggest platform. */
.influencer-id {
  display: flex;
  align-items: center;
  gap: 10px;
}

.influencer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  flex: none;
}

.influencer-avatar.sm {
  width: 34px;
  height: 34px;
}

/* Sits under the KPI cards, full width of the KPI grid. */
.ig-check-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Roster table: readable below ~900px (2026-08-15) --------------
   #community-tiles is a ~1177px-wide table (Partner/Profile/Gift cards/Status
   /Actions) inside an overflow-x:auto wrap with no visible scrollbar. Under a
   laptop-width viewport the right-hand columns - Gift cards included - sit
   off-screen with no hint more content exists, so a real send reads as "None
   yet". At phone/small-tablet width there isn't room to make sideways
   scrolling usable either, so below 900px each row becomes a stacked card
   instead. The <table> markup is untouched (app.js, delegated listeners,
   giftcard <details> all keep working) - this only changes how it paints. */
@media (max-width: 900px) {
  #community-tiles table,
  #community-tiles tbody,
  #community-tiles tr,
  #community-tiles td {
    display: block;
    width: 100%;
  }

  #community-tiles thead {
    display: none;
  }

  #community-tiles tbody tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  #community-tiles td {
    border-bottom: none;
    padding: 8px 0;
  }

  #community-tiles td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }

  #community-tiles .influencer-tile-actions,
  #community-tiles .giftcard-log {
    min-width: 0;


/* ===== Gift card ledger layer (2026-08-15) =====
   Appended, never edited into the middle: this file is four append-only layers and a
   mid-file edit silently changes what the later layers were written against.

   No blur anywhere in here. The glass layer above documents why: blur on anything that
   scrolls or sticks costs real frames on the shop iMac. */

#giftcard-ledger-panel .row-head {
  align-items: flex-start;
}

#giftcard-ledger-status {
  margin: 0 0 12px;
}

/* The only red on the page that means "money we cannot account for". Kept distinct from
   .pill.red, which is used for ordinary bad-trend signals elsewhere. */
#giftcard-ledger-status.giftcard-status-error {
  color: var(--red);
}

#giftcard-ledger-summary {
  margin-bottom: 16px;
}

/* An UNEXPLAINED row is a charge nobody can name. It gets a rail rather than a fill, so a
   table with twenty of them is still readable, and so the evidence pill stays the thing
   the eye lands on. */
.giftcard-row-unexplained td:first-child {
  box-shadow: inset 3px 0 0 0 var(--red);
}

.giftcard-row-unexplained td {
  background: var(--danger-soft);
}

#giftcard-ledger-table table {
  width: 100%;
}

#giftcard-ledger-table td .muted {
  font-style: italic;
}

/* The evidence pill carries the whole point of the panel, so it never wraps mid-word and
   never shrinks below readable. */
#giftcard-ledger-table .pill {
  white-space: nowrap;
}

@media (max-width: 900px) {
  #giftcard-ledger-summary.kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }
}