/* ============================================================
   SARAP D2 — Premium editorial aesthetic (Rev16)
   Neutral, warm-gray foundation; each tab projects its own accent
   hue (scoped via #view-* below) onto a shared component system.
   ============================================================ */

:root {
  --ink: #17181B;
  --ink-soft: #64656C;
  --paper: #F5F3EF;
  --paper-dim: #EAE7E0;
  --paper-card: #FFFFFF;

  /* Semantic roles — reused everywhere regardless of active tab */
  --herb: #1F6E52;
  --herb-deep: #143F30;
  --tomato: #B5502D;
  --tomato-deep: #8A3A1F;
  --gold: #A8791E;
  --gold-deep: #7C5A14;
  --yellowgreen: #5C7A3A;
  --yellowgreen-deep: #435A29;
  --line: #E3E0D8;
  --line-strong: #D0CCC0;

  /* Default accent (used outside any #view-* scope) — Track's green */
  --accent: #1F6E52;
  --accent-deep: #143F30;
  --accent-rgb: 31, 110, 82;

  --font-display: 'Fraunces', serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(23, 24, 27, 0.04), 0 10px 28px rgba(23, 24, 27, 0.05);
  --shadow-elevated: 0 4px 14px rgba(23, 24, 27, 0.07), 0 20px 44px rgba(23, 24, 27, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F1F0EC;
  --ink-soft: #A6A6A0;
  --paper: #18181A;
  --paper-dim: #202123;
  --paper-card: #232426;

  --herb: #4FAE87;
  --herb-deep: #7BC9A8;
  --tomato: #D97C55;
  --tomato-deep: #E9A57F;
  --gold: #C79A44;
  --gold-deep: #DDB86B;
  --yellowgreen: #93AC6E;
  --yellowgreen-deep: #B0C994;
  --line: #303133;
  --line-strong: #3D3E41;

  --accent: #4FAE87;
  --accent-deep: #7BC9A8;
  --accent-rgb: 79, 174, 135;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.32);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.42), 0 22px 48px rgba(0,0,0,0.38);
}

/* ---------------- Per-tab accent projection ----------------
   Each tab's content container overrides --accent/--accent-deep/
   --accent-rgb; shared components (buttons, chips, eyebrows, table
   dividers) read those variables generically, so one tab's palette
   never leaks into another. */
#view-track       { --accent: #1F6E52; --accent-deep: #143F30; --accent-rgb: 31, 110, 82; }
#view-admin       { --accent: #B5652E; --accent-deep: #8A4A1F; --accent-rgb: 181, 101, 46; }
#view-expenses    { --accent: #8E3352; --accent-deep: #6B2540; --accent-rgb: 142, 51, 82; }
#view-stats       { --accent: #35468C; --accent-deep: #26336B; --accent-rgb: 53, 70, 140; }
#view-profit      { --accent: #146B6B; --accent-deep: #0D4D4D; --accent-rgb: 20, 107, 107; }
#view-charts      { --accent: #6B3F94; --accent-deep: #4C2C6B; --accent-rgb: 107, 63, 148; }
#view-export      { --accent: #445266; --accent-deep: #2E3847; --accent-rgb: 68, 82, 102; }
[data-theme="dark"] #view-track    { --accent: #4FAE87; --accent-deep: #7BC9A8; --accent-rgb: 79, 174, 135; }
[data-theme="dark"] #view-admin    { --accent: #E2954F; --accent-deep: #F0B074; --accent-rgb: 226, 149, 79; }
[data-theme="dark"] #view-expenses { --accent: #D97C9B; --accent-deep: #E9A8C0; --accent-rgb: 217, 124, 155; }
[data-theme="dark"] #view-stats    { --accent: #8FA0E8; --accent-deep: #B3C0F0; --accent-rgb: 143, 160, 232; }
[data-theme="dark"] #view-profit   { --accent: #5FC2C2; --accent-deep: #8EDBDB; --accent-rgb: 95, 194, 194; }
[data-theme="dark"] #view-charts   { --accent: #C99EE8; --accent-deep: #DABBF2; --accent-rgb: 201, 158, 232; }
[data-theme="dark"] #view-export   { --accent: #A8B6C9; --accent-deep: #C6D1DE; --accent-rgb: 168, 182, 201; }

/* The tab bar sits in the masthead, outside any #view-* container —
   this mirrors the same seven hues so its active-tab underline still
   projects whichever tab is currently open. Set via a tiny JS hook
   (documentElement.dataset.activeTab) on load and on every tab switch. */
:root[data-active-tab="track"]    { --header-accent: #1F6E52; }
:root[data-active-tab="admin"]    { --header-accent: #B5652E; }
:root[data-active-tab="expenses"] { --header-accent: #8E3352; }
:root[data-active-tab="stats"]    { --header-accent: #35468C; }
:root[data-active-tab="profit"]   { --header-accent: #146B6B; }
:root[data-active-tab="charts"]   { --header-accent: #6B3F94; }
:root[data-active-tab="export"]   { --header-accent: #445266; }
[data-theme="dark"]:root[data-active-tab="track"]    { --header-accent: #4FAE87; }
[data-theme="dark"]:root[data-active-tab="admin"]    { --header-accent: #E2954F; }
[data-theme="dark"]:root[data-active-tab="expenses"] { --header-accent: #D97C9B; }
[data-theme="dark"]:root[data-active-tab="stats"]    { --header-accent: #8FA0E8; }
[data-theme="dark"]:root[data-active-tab="profit"]   { --header-accent: #5FC2C2; }
[data-theme="dark"]:root[data-active-tab="charts"]   { --header-accent: #C99EE8; }
[data-theme="dark"]:root[data-active-tab="export"]   { --header-accent: #A8B6C9; }

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  position: relative;
  transition: background 0.25s ease, color 0.25s ease;
}

.ticket-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(23,24,27,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.9;
}
[data-theme="dark"] .ticket-texture {
  background-image: radial-gradient(circle, rgba(241,240,236,0.035) 1px, transparent 1px);
}

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- Sticky Masthead ---------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(23,24,27,0.02);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.masthead-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 28px 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.masthead-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  min-width: 0;
  flex: 1 1 auto;
}
.masthead-mark > div { min-width: 0; }

.masthead-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  object-fit: cover;
  background: var(--paper-dim);
  flex-shrink: 0;
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.masthead-sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  overflow-wrap: break-word;
}

.masthead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 12px;
  flex: 0 0 auto;
}

.save-status {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.save-status::before {
  content: "●";
  font-size: 0.55rem;
  color: var(--herb);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle:hover {
  background: var(--paper-dim);
  border-color: var(--header-accent, var(--accent));
  color: var(--ink);
}

.theme-toggle-mark {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1;
  color: var(--ink-soft);
  user-select: none;
}

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.86rem;
  padding: 10px 10px 13px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  position: relative;
}
.tab-btn:hover { color: var(--ink); }
.tab-num {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  line-height: 1.4;
}
.tab-btn.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--header-accent, var(--accent));
}
.tab-btn.is-active .tab-num {
  color: var(--header-accent, var(--accent));
  border-color: currentColor;
  background: transparent;
}

/* ---------------- Launch reminder ---------------- */

.launch-reminder {
  position: relative;
  z-index: 90;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.86rem;
  font-family: var(--font-body);
  color: var(--ink-soft);
  text-align: center;
}
.launch-reminder strong { color: var(--ink); font-weight: 600; }
.launch-reminder-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.launch-reminder.is-hidden { display: none !important; }

/* ---------------- Layout ---------------- */

.app-main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 100px;
}

.view { display: none; }
.view.is-active { display: block; animation: fade-in 0.22s ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 26px 28px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.panel:hover {
  box-shadow: var(--shadow-elevated);
}

/* Top performers / Needs attention — soft semantic-tinted cards, no
   heavy border. Positive uses a slightly different green tone
   (--yellowgreen) than the generic --herb success color so the two
   "good news" surfaces (a plain stat card vs. this list) still read
   as visually distinct, not identical. */
.panel-tint-positive {
  background: rgba(92, 122, 58, 0.07);
  border-color: rgba(92, 122, 58, 0.28);
}
.panel-tint-positive .panel-head h2 { color: var(--yellowgreen-deep); }
.panel-tint-positive .eyebrow { color: var(--yellowgreen); }
[data-theme="dark"] .panel-tint-positive { background: rgba(147, 172, 110, 0.1); border-color: rgba(147, 172, 110, 0.3); }

.panel-tint-negative {
  background: rgba(181, 80, 45, 0.06);
  border-color: rgba(181, 80, 45, 0.25);
}
.panel-tint-negative .panel-head h2 { color: var(--tomato-deep); }
.panel-tint-negative .eyebrow { color: var(--tomato); }
[data-theme="dark"] .panel-tint-negative { background: rgba(217, 124, 85, 0.1); border-color: rgba(217, 124, 85, 0.3); }

.track-dashed-panel,
.panel-accent-green {
  border-color: var(--line);
}

/* Sections 04, 05, 10, 11, 12, 13, 14 — same tinted-card treatment as
   Top performers/Needs attention (soft background, colored heading and
   eyebrow, no heavy border), but each table gets its own distinct hue
   purely to tell them apart at a glance — not tied to tab identity or
   good/bad semantics like the pairs above. */
.panel-shade-1 { background: rgba(74, 111, 165, 0.07); border-color: rgba(74, 111, 165, 0.26); }
.panel-shade-1 .panel-head h2 { color: #345580; }
.panel-shade-1 .eyebrow { color: #4A6FA5; }
[data-theme="dark"] .panel-shade-1 { background: rgba(143, 168, 212, 0.1); border-color: rgba(143, 168, 212, 0.3); }
[data-theme="dark"] .panel-shade-1 .panel-head h2 { color: #C4D3EC; }
[data-theme="dark"] .panel-shade-1 .eyebrow { color: #8FA8D4; }

.panel-shade-2 { background: rgba(166, 124, 61, 0.08); border-color: rgba(166, 124, 61, 0.28); }
.panel-shade-2 .panel-head h2 { color: #765A2C; }
.panel-shade-2 .eyebrow { color: #A67C3D; }
[data-theme="dark"] .panel-shade-2 { background: rgba(217, 173, 110, 0.1); border-color: rgba(217, 173, 110, 0.3); }
[data-theme="dark"] .panel-shade-2 .panel-head h2 { color: #F0DBB8; }
[data-theme="dark"] .panel-shade-2 .eyebrow { color: #D9AD6E; }

.panel-shade-3 { background: rgba(160, 82, 122, 0.07); border-color: rgba(160, 82, 122, 0.26); }
.panel-shade-3 .panel-head h2 { color: #723A57; }
.panel-shade-3 .eyebrow { color: #A0527A; }
[data-theme="dark"] .panel-shade-3 { background: rgba(212, 136, 172, 0.1); border-color: rgba(212, 136, 172, 0.3); }
[data-theme="dark"] .panel-shade-3 .panel-head h2 { color: #F2D3E1; }
[data-theme="dark"] .panel-shade-3 .eyebrow { color: #D488AC; }

.panel-shade-4 { background: rgba(110, 90, 158, 0.07); border-color: rgba(110, 90, 158, 0.27); }
.panel-shade-4 .panel-head h2 { color: #4C3F72; }
.panel-shade-4 .eyebrow { color: #6E5A9E; }
[data-theme="dark"] .panel-shade-4 { background: rgba(168, 150, 212, 0.1); border-color: rgba(168, 150, 212, 0.3); }
[data-theme="dark"] .panel-shade-4 .panel-head h2 { color: #DFD6F2; }
[data-theme="dark"] .panel-shade-4 .eyebrow { color: #A896D4; }

.panel-shade-5 { background: rgba(61, 143, 138, 0.07); border-color: rgba(61, 143, 138, 0.26); }
.panel-shade-5 .panel-head h2 { color: #285D59; }
.panel-shade-5 .eyebrow { color: #3D8F8A; }
[data-theme="dark"] .panel-shade-5 { background: rgba(126, 202, 196, 0.1); border-color: rgba(126, 202, 196, 0.3); }
[data-theme="dark"] .panel-shade-5 .panel-head h2 { color: #CDEEEC; }
[data-theme="dark"] .panel-shade-5 .eyebrow { color: #7ECAC4; }

.panel-shade-6 { background: rgba(122, 143, 61, 0.07); border-color: rgba(122, 143, 61, 0.26); }
.panel-shade-6 .panel-head h2 { color: #57642A; }
.panel-shade-6 .eyebrow { color: #7A8F3D; }
[data-theme="dark"] .panel-shade-6 { background: rgba(184, 206, 122, 0.1); border-color: rgba(184, 206, 122, 0.3); }
[data-theme="dark"] .panel-shade-6 .panel-head h2 { color: #E8F0D2; }
[data-theme="dark"] .panel-shade-6 .eyebrow { color: #B8CE7A; }

.panel-shade-7 { background: rgba(156, 90, 90, 0.07); border-color: rgba(156, 90, 90, 0.26); }
.panel-shade-7 .panel-head h2 { color: #6E3E3E; }
.panel-shade-7 .eyebrow { color: #9C5A5A; }
[data-theme="dark"] .panel-shade-7 { background: rgba(212, 154, 154, 0.1); border-color: rgba(212, 154, 154, 0.3); }
[data-theme="dark"] .panel-shade-7 .panel-head h2 { color: #F2DADA; }
[data-theme="dark"] .panel-shade-7 .eyebrow { color: #D49A9A; }

.wrap-cell { white-space: normal; }

.pdf-tab-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 12px;
}
.pdf-tab-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.entry-grid > .panel,
.stats-row > .stat-card {
  margin-bottom: 0;
}

.panel-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel-head-row .panel-head { margin-bottom: 0; }

.panel:not(.panel-head-row) > .panel-head {
  margin-bottom: 12px;
}

.panel-subhead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.panel-subhead h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.panel-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: -2px 0 12px;
}
.hint-inline { margin: 0; }
.material-suggestion {
  font-size: 0.78rem;
  color: var(--accent-deep);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  margin: -4px 0 12px;
}
[data-theme="dark"] .material-suggestion { color: var(--accent); }
.hint code {
  background: var(--paper-dim);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.callout {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
}

.form-error {
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 500;
  background: rgba(181, 80, 45, 0.09);
  border: 1px solid rgba(181, 80, 45, 0.3);
  color: var(--tomato-deep);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 0;
}

/* ---------------- Search & Filter bar ---------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.search-wrap {
  position: relative;
  flex: 1 1 200px;
  max-width: 320px;
}
.admin-summary {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.category-rename-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.category-rename-row .field { flex: 1 1 160px; min-width: 140px; }
.category-rename-row .btn { flex-shrink: 0; }
.search-wrap input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s;
}
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
  outline: none;
}
.search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: 0.95rem;
  pointer-events: none;
}

.section-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 12px;
}
.section-filters .field-inline {
  margin: 0;
}
.section-filter-select {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 6px 10px;
  min-width: 140px;
}
[data-theme="dark"] .section-filter-select { color-scheme: dark; }
[data-theme="dark"] .section-filter-select option {
  background: var(--paper);
  color: var(--ink);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------------- Badges & category chips (materials/expenses) ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-perishable { background: rgba(92, 122, 58, 0.15); color: var(--yellowgreen-deep); }
.badge-consumable { background: rgba(168, 121, 30, 0.18); color: var(--gold-deep); }
.badge-untracked { background: var(--paper-dim); color: var(--ink-soft); }
[data-theme="dark"] .badge-perishable { color: var(--yellowgreen); }
[data-theme="dark"] .badge-consumable { color: var(--gold); }

.chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--panel-pad, 20px) 12px;
}
.material-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-deep);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
[data-theme="dark"] .material-chip { color: var(--accent); }

/* ---------------- Date panel ---------------- */

.date-panel-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline span { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.field-inline input {
  font-family: var(--font-mono);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--paper);
}

/* ---------------- Entry grid ---------------- */

.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}


.ticket-form, .admin-form { display: flex; flex-direction: column; gap: 12px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.field input, .field select, .bulk-textarea {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Date inputs: don't stretch full-width like other fields — sizing to
   content keeps the native calendar icon right next to the date value
   (matching the compact look of the section-15 inline date fields)
   instead of stranding it far to the right of a full-width box. */
.field input[type="date"] {
  align-self: flex-start;
  width: auto;
  min-width: 150px;
}
/* A hint paragraph directly following a field (no wrapping form with its
   own gap between them) had almost no separation from the field above it
   — the hint's slight negative top margin (tuned for flex-gap contexts)
   left it crowding the field's bottom edge. */
.field + .hint { margin-top: 10px; }
.field input:focus, .field select:focus, .bulk-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
  outline: none;
}

/* All form/UI chrome above is built from --ink/--paper*/--line* tokens,
   which already redefine themselves under [data-theme="dark"] — so
   dark mode needs only the handful of things that don't have a plain
   token equivalent (native control chrome, placeholder contrast, and
   accent-tinted focus rings/hovers that must track the active tab's
   hue rather than a fixed brand color). */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .bulk-textarea,
[data-theme="dark"] .search-wrap input,
[data-theme="dark"] .inline-category-select,
[data-theme="dark"] .inline-category-input,
[data-theme="dark"] .field-inline input,
[data-theme="dark"] .popover-new-row input,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="number"] {
  color-scheme: dark;
}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .bulk-textarea::placeholder,
[data-theme="dark"] .search-wrap input::placeholder {
  color: var(--ink-soft);
  opacity: 0.8;
}
[data-theme="dark"] .field select option,
[data-theme="dark"] .inline-category-select option {
  background: var(--paper);
  color: var(--ink);
}
[data-theme="dark"] .row-remove:hover {
  background: rgba(233, 165, 127, 0.15);
}
[data-theme="dark"] .unmatched-flag {
  background: rgba(217, 124, 85, 0.16);
  border-color: rgba(217, 124, 85, 0.4);
}
[data-theme="dark"] .form-error {
  background: rgba(217, 124, 85, 0.13);
  border-color: rgba(217, 124, 85, 0.4);
}

.field-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.field-narrow { flex: 1; }
.slash {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--line-strong);
  padding-bottom: 8px;
}

.bulk-textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.55;
}

.bulk-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.admin-form-actions { display: flex; gap: 8px; margin-top: 2px; }

/* ---------------- Buttons ---------------- */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s, color 0.15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}

.btn-secondary {
  background: var(--paper-dim);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--tomato);
  color: var(--tomato-deep);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.75rem;
}

.restore-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-align: center;
}

.export-btn-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.export-btn-list .btn { width: 100%; text-align: center; }
.export-btn-list-spaced { margin-top: 12px; }

.is-hidden { display: none !important; }

/* ---------------- Segmented control ---------------- */

.segmented {
  display: inline-flex;
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.segmented-btn {
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.segmented-btn:hover { color: var(--ink); }
.segmented-btn.is-active {
  background: var(--accent);
  color: var(--paper);
}

.expense-warning-banner {
  background: rgba(181, 80, 45, 0.05);
  border: 1px solid var(--tomato);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
[data-theme="dark"] .expense-warning-banner { background: rgba(217, 124, 85, 0.08); }
.expense-warning-title {
  font-weight: 600;
  color: var(--tomato-deep);
  margin-bottom: 6px;
}
.expense-warning-banner ul {
  margin: 0;
  padding-left: 1.2em;
}
.expense-warning-banner li {
  color: var(--ink);
  font-size: 0.9rem;
  margin: 3px 0;
}

/* ---------------- Stats row ---------------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  border-top: 2px solid var(--line-strong);
  transition: transform 0.15s ease, box-shadow 0.15s, border-color 0.15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.stat-revenue { border-top-color: var(--herb); }
.stat-loss { border-top-color: var(--tomato); }
.stat-sellthrough { border-top-color: var(--gold); }
.stat-best { border-top-color: var(--accent); }

.stat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.stat-period-tag { font-weight: 500; opacity: 0.7; text-transform: none; letter-spacing: 0; }

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 6px 0 2px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stat-value-text { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; }

.stat-revenue .stat-value { color: var(--herb-deep); }
.stat-loss .stat-value { color: var(--tomato-deep); }
.stat-sellthrough .stat-value { color: var(--gold-deep); }
.stat-best .stat-value { color: var(--accent-deep); }

.stat-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
}

/* ---------------- Tables ---------------- */

/* The card itself now hugs whichever child is widest — normally the
   table — instead of always stretching to the full column width, so a
   compacted table's card boundary sits right after its last column
   instead of leaving a dead gap. Every other direct child (heading row,
   toolbar, hint text, filter chips) gets width:0 + min-width:100%: a
   percentage width on a child of an auto-sized (fit-content) parent
   resolves against the parent's *final* width rather than contributing
   to it, so these children stretch to match whatever the table decided
   without themselves inflating the shrink-wrap calculation — a stray
   long sentence in a .hint paragraph can't force the card wider. */
.table-panel {
  margin-bottom: 20px;
  width: fit-content;
  max-width: 100%;
}
.table-panel > *:not(.table-scroll) {
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}
.table-scroll {
  /* Columns now size to their own content (see .slip-table below), so a
     table only needs to scroll if its natural width genuinely exceeds
     the viewport — this is a safety net, not the default state. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.slip-table {
  width: auto;
  max-width: 100%;
  table-layout: auto; /* columns shrink to their own content — no wasted space */
  border-collapse: collapse;
  font-size: 0.86rem;
}

.slip-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  padding: 6px 10px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--paper-card);
  z-index: 2;
}

.slip-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

/* A thin accent-tinted rule between columns — the tab's own hue reads
   subtly through the whole table without needing colored text. */
.slip-table th:not(:first-child),
.slip-table td:not(:first-child) {
  border-left: 1px solid rgba(var(--accent-rgb), 0.22);
}

.slip-table .num {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap; /* keep numbers on one line */
}
/* Section 03 (the main Track slip) reads better as prose than as a
   ledger — words and numbers both use the sans body font here, unlike
   every other table's still-monospace .num columns. Headers are
   untouched — they already inherit the sans font, nothing to change. */
#slip-table .num { font-family: var(--font-body); }

/* Shared 05/06 filter chips */
.shared-period-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.shared-period-filters .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.shared-period-filters .filter-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  min-width: 52px;
}
.shared-period-filters .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.shared-period-filters .chip {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.shared-period-filters .chip:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.shared-period-filters .chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.shared-period-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
}

.slip-table tbody tr:hover { background: var(--paper-dim); }

.empty-row td {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  padding: 32px 16px;
  white-space: normal;
}

.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--ink-soft);
}
.empty-state-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.empty-state-desc {
  font-size: 0.88rem;
  margin: 0 0 14px;
}

.dish-name-cell { font-weight: 600; }

/* Sell-through progress bar */
.st-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}
.st-bar {
  width: 48px;
  min-width: 14px;
  flex: 0 1 48px;
  height: 6px;
  background: var(--paper-dim);
  border-radius: 3px;
  overflow: hidden;
}
.st-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.st-bar-fill.high { background: var(--herb); }
.st-bar-fill.mid { background: var(--gold); }
.st-bar-fill.low { background: var(--tomato); }

.inactive-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}

.category-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.inline-category-select, .inline-category-input {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--paper-dim);
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 180px;
  transition: background 0.15s, border-color 0.15s;
}
.inline-category-select:hover, .inline-category-select:focus,
.inline-category-input:focus {
  background: var(--paper-card);
  border-color: var(--line-strong);
  outline: none;
}

/* ---------------- Menu & Prices — dish card list ---------------- */

.dish-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dish-category-group + .dish-category-group { margin-top: 2px; }

.dish-category-header {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.dish-category-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dish-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.dish-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dish-card-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dish-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dish-card-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-right: 4px;
}

.dish-card-meta { margin-top: 6px; }

.dish-card-history {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}


.icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn-lg {
  width: 38px;
  height: 38px;
  border-width: 1.5px;
}
.icon-btn-danger:hover {
  border-color: var(--tomato);
  color: var(--tomato-deep);
  background: rgba(181, 80, 45, 0.1);
}
[data-theme="dark"] .icon-btn-danger:hover { background: rgba(217, 124, 85, 0.16); }

/* Group headers — each row's own background is a quiet tint that
   complements its header box's color rather than matching it exactly,
   so the box (unchanged) still reads as the accent sitting on a calmer
   backdrop, not just more of the same color. */
.date-group-row td {
  background: var(--paper-dim);
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
}

/* Month — tied to the tab's own accent (Track = forest green), so the
   top level of the hierarchy reads as "this tab's color". */
.month-group-row td { background: rgba(var(--accent-rgb), 0.06); border-bottom: 1px solid rgba(var(--accent-rgb), 0.25); }

/* Week — independent navy, deliberately distinct from the accent so the
   three levels never get confused with each other. */
.week-group-row td { background: rgba(53, 70, 140, 0.06); border-bottom: 1px solid rgba(53, 70, 140, 0.22); }
[data-theme="dark"] .week-group-row td { background: rgba(143, 160, 232, 0.08); border-bottom: 1px solid rgba(143, 160, 232, 0.25); }

/* Date — warm umber, the third independent tone. */
.day-group-row td { background: rgba(154, 98, 45, 0.06); border-bottom: 1px solid rgba(154, 98, 45, 0.22); }
[data-theme="dark"] .day-group-row td { background: rgba(224, 169, 120, 0.08); border-bottom: 1px solid rgba(224, 169, 120, 0.25); }

.date-toggle-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--ink);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: normal;
}
.date-toggle-btn:hover { color: var(--accent-deep); }
.date-toggle-caret { font-family: var(--font-mono); color: var(--ink-soft); }
.date-toggle-summary { font-weight: 500; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.76rem; margin-left: auto; padding-left: 12px; }

.month-toggle-btn {
  padding: 11px 12px;
  font-size: 0.92rem;
  font-weight: 700;
}

.week-toggle-btn { padding-left: 24px; font-weight: 600; }
.date-toggle-btn.day-level { padding-left: 40px; }

/* Dish rows report to the Date header above them — indent one step past
   the day-level header itself so the hierarchy reads visually, without
   touching .dish-name-cell elsewhere in the app (Statistics, Net Profit). */
#slip-tbody .dish-name-cell { padding-left: 48px; }
#slip-tbody .batch-strip-label { padding-left: 48px; }

/* Hierarchical accordion badges (section 03) — a compact rounded chip
   carries the level's identity color; the chevron sits outside it, and
   the trailing "— N dishes, revenue" summary stays plain and right-aligned. */
.date-toggle-id-box {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.78rem;
}

.id-box-month {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-deep);
}

.id-box-week {
  background: rgba(53, 70, 140, 0.12);
  border-color: rgba(53, 70, 140, 0.4);
  color: #26336B;
}
[data-theme="dark"] .id-box-week {
  background: rgba(143, 160, 232, 0.16);
  border-color: rgba(143, 160, 232, 0.4);
  color: #DCE3FA;
}

.id-box-date {
  background: rgba(154, 98, 45, 0.14);
  border-color: rgba(154, 98, 45, 0.4);
  color: #6B3F17;
}
[data-theme="dark"] .id-box-date {
  background: rgba(224, 169, 120, 0.16);
  border-color: rgba(224, 169, 120, 0.4);
  color: #F5D9BE;
}

.batch-strip-row td {
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom: 1px dashed var(--line-strong);
  padding: 6px 12px;
  white-space: normal;
}
.batch-strip-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.batch-remove {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--tomato-deep);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.batch-remove:hover { background: rgba(181, 80, 45, 0.1); border-color: var(--tomato); }
[data-theme="dark"] .batch-remove:hover { background: rgba(217, 124, 85, 0.14); }

.dish-name-cell.label-mismatch {
  border: 2px solid var(--tomato);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(181, 80, 45, 0.15) inset;
}
[data-theme="dark"] .dish-name-cell.label-mismatch { box-shadow: 0 0 0 1px rgba(217, 124, 85, 0.18) inset; }
#qf-label.label-mismatch-input {
  border-color: var(--tomato) !important;
  box-shadow: 0 0 0 2px rgba(181, 80, 45, 0.15);
}
[data-theme="dark"] #qf-label.label-mismatch-input { box-shadow: 0 0 0 2px rgba(217, 124, 85, 0.18); }

/* Lets the "no price set"/"label edit" chip drop to its own line inside
   the cell instead of overflowing past a narrow column's edge — so the
   .label-mismatch red border (drawn on the td) always fully encloses it
   rather than the chip poking out through the border. */
.dish-name-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

.unmatched-wrap { position: relative; display: inline-block; }
.unmatched-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--tomato-deep);
  background: rgba(181, 80, 45, 0.1);
  border: 1px solid rgba(181, 80, 45, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  cursor: pointer;
}
.unmatched-flag:hover { background: rgba(181, 80, 45, 0.18); }
[data-theme="dark"] .unmatched-flag:hover { background: rgba(217, 124, 85, 0.22); }

.label-edit-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
tr:hover .label-edit-flag, .label-edit-flag:focus { opacity: 1; }
.label-edit-flag:hover { background: var(--paper-card); border-color: var(--gold); color: var(--gold-deep); opacity: 1; }

.price-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 40;
  background: var(--paper-card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-elevated);
  padding: 12px 14px;
  min-width: 250px;
  white-space: normal;
}
.popover-title {
  font-weight: 700;
  font-size: 0.84rem;
  margin-bottom: 8px;
}
.popover-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 8px 0 4px;
}
.popover-suggestion-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink);
  cursor: pointer;
}
.popover-suggestion-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.popover-new-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.popover-new-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--paper);
}
.popover-close-row { margin-top: 10px; text-align: right; }
.popover-live-suggestions {
  margin-top: 6px;
  max-height: 150px;
  overflow-y: auto;
}
.popover-live-chip { margin-bottom: 3px; }

.row-remove {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 6px;
}
.row-remove:hover { color: var(--tomato-deep); background: rgba(181, 80, 45, 0.08); }
[data-theme="dark"] .row-remove:hover { background: rgba(217, 124, 85, 0.12); }

.row-edit {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 6px;
}
.row-edit:hover { color: var(--accent-deep); background: rgba(var(--accent-rgb), 0.08); }
[data-theme="dark"] .row-edit:hover { color: var(--accent); }

.row-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.net-positive { color: var(--herb-deep); font-weight: 600; }
.net-negative { color: var(--tomato-deep); font-weight: 600; }
.trend-up { color: var(--herb-deep); }
.trend-down { color: var(--tomato-deep); }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--paper-dim); }
.selected-row td { background: rgba(var(--accent-rgb), 0.1); font-weight: 600; }

/* ---------------- Keyboard hint ---------------- */

.kbd-hint {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 50;
  max-width: 280px;
  box-shadow: var(--shadow-elevated);
}
.kbd-hint.is-visible { opacity: 0.95; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .entry-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .masthead-inner { padding: 14px 16px 0; flex-wrap: wrap; }
  .masthead-right { align-items: flex-start; width: 100%; }
  .tabs { width: 100%; justify-content: flex-start; }
  .app-main { padding: 20px 14px 80px; }
  .launch-reminder { padding: 10px 14px; }
}

@media (max-width: 540px) {
  .stats-row { grid-template-columns: 1fr; }
  .masthead h1 { font-size: 1.15rem; }
  .masthead-logo { width: 40px; height: 40px; }
  .tab-btn { padding: 8px 8px 12px; font-size: 0.78rem; }
  .search-wrap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.86rem;
  padding: 10px 20px;
  border-radius: 999px;
  border-bottom: 3px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ---------------- Charts tab ---------------- */
.chart-panel { margin-bottom: 20px; }
.chart-wrap {
  width: 100%;
  min-height: 280px;
  height: 280px;
  margin-top: 8px;
  position: relative;
  background: transparent;
}
/* Pareto (C5, C7) renders 30% larger than the other charts — see the
   matching S=1.3 scale in drawParetoChart(). */
#chart-pareto-wrap,
#chart-material-pareto-wrap {
  min-height: 364px;
  height: 364px;
}
.line-chart {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.line-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.line-chart .axis-line {
  stroke: var(--line-strong);
  stroke-width: 1.25;
}
.line-chart .series-line {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-chart .series-area {
  fill: rgba(184, 134, 46, 0.12);
  stroke: none;
}
.line-chart .series-dot {
  fill: var(--paper-card);
  stroke: var(--gold-deep);
  stroke-width: 2;
}
.line-chart .axis-label {
  fill: var(--ink-soft);
  font-size: 11px;
  font-family: var(--font-mono);
}
.line-chart .y-label {
  fill: var(--ink-soft);
  font-size: 11px;
  font-family: var(--font-mono);
  text-anchor: end;
}
.line-chart .empty-chart-msg {
  fill: var(--ink-soft);
  font-size: 14px;
  font-family: var(--font-body);
  text-anchor: middle;
}
.chart-period-chips { margin: 0; }
[data-theme="dark"] .line-chart .series-area { fill: rgba(224, 178, 74, 0.12); }
[data-theme="dark"] .line-chart .series-line { stroke: var(--accent); }
[data-theme="dark"] .line-chart .series-dot { fill: var(--paper-card); stroke: var(--accent); }
.line-chart.series-dishes .series-line { stroke: var(--herb-deep); }
.line-chart.series-dishes .series-area { fill: rgba(122, 173, 104, 0.14); }
.line-chart.series-dishes .series-dot { stroke: var(--herb-deep); }
.line-chart.series-lost .series-line { stroke: var(--tomato-deep); }
.line-chart.series-lost .series-area { fill: rgba(196, 86, 64, 0.12); }
.line-chart.series-lost .series-dot { stroke: var(--tomato-deep); }
[data-theme="dark"] .line-chart.series-dishes .series-line { stroke: #7AAD68; }
[data-theme="dark"] .line-chart.series-dishes .series-dot { stroke: #7AAD68; }
[data-theme="dark"] .line-chart.series-lost .series-line { stroke: #E07A5F; }
[data-theme="dark"] .line-chart.series-lost .series-dot { stroke: #E07A5F; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 4px 0 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); }
.legend-item::before {
  content: "";
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-bar::before { background: rgba(122, 173, 104, 0.55); border: 1px solid #4A7A3C; }
.legend-line::before { height: 3px; background: #B04A38; border-radius: 2px; }
[data-theme="dark"] .legend-bar::before { background: rgba(122, 173, 104, 0.35); border-color: #7AAD68; }
[data-theme="dark"] .legend-line::before { background: #E07A5F; }

.legend-sales-bar::before { background: rgba(31, 110, 82, 0.22); border: 1px solid var(--herb); }
.legend-exp-bar::before { background: rgba(181, 80, 45, 0.18); border: 1px solid var(--tomato); }
.legend-sales-line::before { height: 3px; background: var(--herb-deep); border-radius: 2px; }
.legend-exp-line::before { height: 3px; background: var(--tomato-deep); border-radius: 2px; }
.legend-sales-dashed::before { height: 0; background: none; border-top: 2px dashed var(--herb-deep); }
.legend-exp-dashed::before { height: 0; background: none; border-top: 2px dashed var(--tomato-deep); }

.legend-pareto-bar::before { background: rgba(var(--accent-rgb), 0.24); border: 1px solid var(--accent); }
.legend-pareto-line::before { height: 3px; background: var(--gold); border-radius: 2px; }
[data-theme="dark"] .legend-sales-bar::before { background: rgba(79, 174, 135, 0.35); border-color: var(--herb); }
[data-theme="dark"] .legend-exp-bar::before { background: rgba(217, 124, 85, 0.3); border-color: var(--tomato); }

/* ============================================================
   Rev21 — typed prices, Menu & Prices category tools, Pareto
   drill-down, dish price history (C8)
   ============================================================ */

/* ---- Track slip: "new price" tag, price cell, hint swatches ---- */
.new-price-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #35468C;
  background: rgba(53, 70, 140, 0.1);
  border: 1px solid rgba(53, 70, 140, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  cursor: help;
}
[data-theme="dark"] .new-price-tag { color: #8FA0E8; background: rgba(143, 160, 232, 0.12); border-color: rgba(143, 160, 232, 0.4); }
.slip-table td.price-cell-new { color: #35468C; font-weight: 700; }
[data-theme="dark"] .slip-table td.price-cell-new { color: #8FA0E8; }
.hint .unmatched-flag-static { cursor: default; }
.hint .new-price-tag { cursor: default; }

/* The Fix popover opens below its row; on wide screens let it overflow the
   slip's scroll box instead of being clipped at the table's bottom edge. */
@media (min-width: 900px) {
  .table-scroll.slip-scroll { overflow: visible; }
}

/* ---- Popovers: explanation note, inline info, edit fields ---- */
.popover-note {
  font-size: 0.74rem;
  line-height: 1.4;
  margin: 6px 0 2px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(53, 70, 140, 0.07);
  color: var(--ink);
}
[data-theme="dark"] .popover-note { background: rgba(143, 160, 232, 0.1); }
.popover-inline-info { flex: 1; font-size: 0.76rem; color: var(--ink-soft); align-self: center; }
.popover-hint { margin: 8px 0 0; line-height: 1.35; }
.popover-field {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--paper);
  color: var(--ink);
}
.popover-field + .popover-field { margin-top: 6px; }
.popover-field-wrap { display: flex; flex-direction: column; min-width: 0; }
.popover-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.popover-similar-item { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); padding: 2px 0; }
.popover-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.popover-actions .btn:first-child { margin-right: auto; }
.price-popover .form-error { margin-top: 8px; }

/* Section 11 dish edit window, anchored to its card */
.dish-card { position: relative; }
.dish-edit-popover { left: auto; right: 0; width: 320px; max-width: calc(100vw - 48px); }

/* ---- Section 08: live library suggestions under the dish name ---- */
.library-suggestions {
  margin-top: -4px;
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
}
.library-suggestions-head { font-size: 0.74rem; color: var(--ink-soft); margin-bottom: 6px; }
.library-suggestion-btn:last-child { margin-bottom: 0; }

/* ---- Section 10: delete a category ---- */
.btn-danger-outline {
  border: 1px solid rgba(181, 80, 45, 0.45);
  color: var(--tomato-deep);
  background: transparent;
}
.btn-danger-outline:hover { background: rgba(181, 80, 45, 0.08); border-color: var(--tomato); }

/* ---- Section 11: category chips, collapsible groups, 2 columns ---- */
.cat-chip-row { margin: 4px 0 12px; }
.chip .chip-count { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.7; margin-left: 5px; }
#view-admin .dish-list { gap: 10px; }
.dish-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
}
.dish-acc-header:hover { background: rgba(var(--accent-rgb), 0.1); }
.dish-acc-header .date-toggle-caret { width: 12px; color: var(--accent); }
.dish-acc-header .date-toggle-summary { font-size: 0.8rem; color: var(--ink-soft); }
.dish-category-cards.dish-cards-2col { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
@media (min-width: 760px) {
  .dish-category-cards.dish-cards-2col { grid-template-columns: 1fr 1fr; }
}

/* ---- C5 / C7: drill-down bar, clickable bars, data table ---- */
.drill-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 30px; margin: 2px 0 4px; }
.drill-crumb { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-soft); }
.drill-crumb b { color: var(--accent); }
.pareto-bar-hit { cursor: pointer; outline: none; }
.pareto-bar-hit:hover .pareto-bar,
.pareto-bar-hit:focus .pareto-bar { fill-opacity: 1; stroke-width: 2.5; }
.pareto-table-wrap { max-width: 720px; margin: 14px auto 0; overflow-x: auto; }
.pareto-table-caption { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 6px; }
.pareto-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.pareto-table th {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-strong);
}
.pareto-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pareto-table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.pareto-table tr.vital td { background: rgba(var(--accent-rgb), 0.06); }
.pareto-table tr.clickable { cursor: pointer; }
.pareto-table tr.clickable:hover td,
.pareto-table tr.clickable:focus td { background: rgba(var(--accent-rgb), 0.13); outline: none; }
.pareto-table tr.total-row td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: none; }
.pareto-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
  background: rgba(var(--accent-rgb), 0.28);
  border: 1px solid var(--accent);
}
.pareto-swatch.terminal {
  background: repeating-linear-gradient(45deg, rgba(100, 101, 108, 0.25) 0 3px, transparent 3px 6px);
  border: 1px dashed var(--ink-soft);
}
.pareto-table-legend { text-align: center; font-size: 0.72rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ---- C8: dish price history ---- */
.c8-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
@media (min-width: 900px) {
  .c8-grid { grid-template-columns: 280px minmax(0, 1fr); }
}
.c8-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  max-height: 420px;
  overflow: auto;
  background: var(--paper-card);
}
.c8-picker .search-wrap { margin-bottom: 8px; }
.c8-cat-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 7px;
  padding: 6px 9px;
  margin-top: 6px;
  color: var(--ink);
  text-align: left;
}
.c8-dish-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 9px 5px 22px;
  color: var(--ink);
  text-align: left;
}
.c8-dish-btn:hover { background: var(--paper-dim); }
.c8-dish-btn.is-active { background: rgba(var(--accent-rgb), 0.14); font-weight: 700; }
.c8-dish-btn.flat { padding-left: 9px; }
.c8-count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); white-space: nowrap; margin-left: 8px; font-weight: 400; }
.c8-count.hot { color: var(--accent); font-weight: 600; }
.c8-empty { font-size: 0.8rem; color: var(--ink-soft); padding: 8px; margin: 0; }
.c8-chart-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 2px; color: var(--ink); }
.c8-chart-sub { font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 4px; }
.legend-c8-menu::before { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-card); border: 2px solid var(--accent); }
.legend-c8-track::before { width: 10px; height: 10px; border-radius: 50%; background: #35468C; border: 2px solid #35468C; }
[data-theme="dark"] .legend-c8-track::before { background: #8FA0E8; border-color: #8FA0E8; }
/* Keep popover row buttons on one line; the text field takes the rest. */
.popover-new-row input { min-width: 0; }
.popover-new-row .btn { flex-shrink: 0; white-space: nowrap; }

/* ============================================================
   Rev22 — header badge, save banner, buy types, Kitchen
   Ingredients tab, profit ladder, phone-width layout
   ============================================================ */

#view-kitchen { --accent: #8A7414; --accent-deep: #5E4F0B; --accent-rgb: 138, 116, 20; }
[data-theme="dark"] #view-kitchen { --accent: #D6BE5A; --accent-deep: #E8D68C; --accent-rgb: 214, 190, 90; }

/* ---- Header: revision badge, a little more room between the tools ---- */
.header-tools { gap: 14px; }
.app-rev-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  white-space: nowrap;
  cursor: default;
}

/* ---- Save banner (replaces the launch reminder) ---- */
.save-banner[data-state="warn"] { background: rgba(214, 150, 20, 0.14); border-bottom-color: rgba(214, 150, 20, 0.45); color: var(--ink); }
.save-banner[data-state="ok"] { background: rgba(31, 110, 82, 0.08); border-bottom-color: rgba(31, 110, 82, 0.3); }
[data-theme="dark"] .save-banner[data-state="warn"] { background: rgba(214, 170, 70, 0.14); }
[data-theme="dark"] .save-banner[data-state="ok"] { background: rgba(79, 174, 135, 0.1); }
.save-banner[data-state="ok"] .save-banner-text::before { content: "● "; color: var(--herb); }
.save-banner[data-state="warn"] .save-banner-text::before { content: "● "; color: #C98A10; }

/* ---- Right-aligned tag groups in table name cells (slip, logs) ---- */
.slip-table .dish-name-flex { width: 100%; }
.row-flags { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; position: relative; }
.row-flags .price-popover,
.price-popover.popover-right { left: auto; right: 0; }
.unit-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #8A5A00;
  background: rgba(214, 150, 20, 0.12);
  border: 1px solid rgba(214, 150, 20, 0.45);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  cursor: help;
}
[data-theme="dark"] .unit-flag { color: #E9C46A; background: rgba(233, 196, 106, 0.1); border-color: rgba(233, 196, 106, 0.4); }
.hint .unit-flag { cursor: default; }

/* ---- Expenses: quantities, buy types ---- */
.field-row-wrap { flex-wrap: wrap; }
.field-row-wrap .field-narrow { min-width: 90px; }
.buy-type-toggle { display: flex; flex-wrap: wrap; }
.buy-type-toggle .segmented-btn { flex: 1 1 auto; }
.purchase-name-block { min-width: 0; }
.purchase-meta { margin-top: 2px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); font-weight: 400; }
.buy-badge { display: inline-block; border-radius: 4px; padding: 0 5px; margin-right: 4px; border: 1px solid transparent; font-size: 0.66rem; }
.buy-weekly { background: rgba(181, 80, 45, 0.1); border-color: rgba(181, 80, 45, 0.35); color: var(--tomato-deep); }
.buy-daily { background: rgba(214, 150, 20, 0.12); border-color: rgba(214, 150, 20, 0.4); color: #8A5A00; }
.buy-bulk { background: rgba(107, 63, 148, 0.1); border-color: rgba(107, 63, 148, 0.35); color: #4C2C6B; }
.buy-legacy { background: var(--paper-dim); border-color: var(--line-strong); color: var(--ink-soft); cursor: help; }
[data-theme="dark"] .buy-daily { color: #E9C46A; }
[data-theme="dark"] .buy-bulk { color: #DABBF2; }
.id-box-weekly-buy { background: rgba(181, 80, 45, 0.12); border-color: rgba(181, 80, 45, 0.4); color: var(--tomato-deep); }

/* ---- Kitchen Ingredients ---- */
.kitchen-list-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.kitchen-list-add .field { flex: 1 1 150px; min-width: 130px; }
.kitchen-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.kitchen-list-group .table-scroll { margin-top: 6px; }
.kitchen-list-table { width: 100%; }
.kitchen-unit-select.unit-unset { border-color: rgba(181, 80, 45, 0.6); color: var(--tomato-deep); }
.kitchen-cat-input { max-width: 170px; }
.k-unit { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.k-unit small { font-size: 0.68rem; opacity: 0.8; }
.k-unit-missing { color: var(--tomato-deep); font-style: italic; }
#kitchen-log-tbody .dish-name-cell { min-width: 200px; }

.week-nav, .ladder-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.week-nav-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.week-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper-card); color: var(--ink);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.week-nav-btn:disabled { opacity: 0.35; cursor: default; }

.usage-grid { border-collapse: collapse; width: 100%; font-size: 0.84rem; }
.usage-grid th { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); text-align: right; white-space: nowrap; }
.usage-grid th:first-child, .usage-grid td:first-child, .usage-grid th:nth-child(2), .usage-grid td.usage-unit { text-align: left; }
.usage-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-mono); color: var(--ink); }
.usage-grid td:first-child { font-family: var(--font-body); font-weight: 600; white-space: nowrap; }
.usage-grid td.usage-unit { color: var(--ink-soft); }
.usage-grid td.heat { position: relative; }
.usage-grid td.heat span { position: relative; z-index: 1; }
.usage-grid td.heat::before { content: ""; position: absolute; inset: 3px; border-radius: 4px; background: rgba(var(--accent-rgb), var(--heat, 0)); }
.usage-grid td.zero { color: var(--line-strong); }
.usage-grid td.tot { font-weight: 700; border-left: 1px solid var(--line-strong); }
.usage-grid td.usage-empty { text-align: left; color: var(--ink-soft); font-family: var(--font-body); }
.trend-up { color: var(--tomato-deep); }
.trend-down { color: var(--herb); }

/* ---- Net Profit: profit ladder ---- */
.ladder-period { font-family: var(--font-display); font-size: 1.15rem; margin: 4px 0 10px; color: var(--ink); }
.ladder-period small { display: block; font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-soft); }
.ladder { max-width: 780px; }
.ladder-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 64px; align-items: baseline; gap: 4px 10px; padding: 9px 4px; border-bottom: 1px dashed var(--line); }
.ladder-sign { font-family: var(--font-mono); color: var(--ink-soft); text-align: center; }
.ladder-label { font-weight: 600; color: var(--ink); min-width: 0; }
.ladder-formula { display: block; font-weight: 400; font-size: 0.76rem; color: var(--ink-soft); font-family: var(--font-mono); margin-top: 2px; overflow-wrap: anywhere; }
.ladder-amt { font-family: var(--font-mono); text-align: right; white-space: nowrap; color: var(--ink); }
.ladder-pct { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-soft); text-align: right; }
.ladder-row.cost .ladder-amt { color: var(--tomato-deep); }
.ladder-row.revenue .ladder-amt { font-weight: 700; color: var(--herb); }
.ladder-row.subtotal { border-bottom: none; border-top: 2px solid var(--ink); background: rgba(var(--accent-rgb), 0.07); border-radius: 0 0 8px 8px; margin-bottom: 6px; }
.ladder-row.subtotal .ladder-label { font-family: var(--font-display); font-size: 1.05rem; }
.ladder-row.subtotal .ladder-amt { font-weight: 700; font-size: 1.05rem; }
.ladder-row.subtotal .ladder-amt.neg { color: var(--tomato-deep); }
.math-toggle { grid-column: 2 / -1; justify-self: start; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.math-box { grid-column: 2 / -1; margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--paper-dim); font-family: var(--font-mono); font-size: 0.74rem; }
.math-line { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--ink); }
.math-line span:first-child { color: var(--ink-soft); overflow-wrap: anywhere; }
.math-line span:last-child { white-space: nowrap; }
.closed-note { padding: 18px; text-align: center; color: var(--ink-soft); background: var(--paper-dim); border-radius: 10px; }
.split-wrap { margin-top: 16px; max-width: 780px; }
.split-title { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.split-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line-strong); }
.split-bar div { height: 100%; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.78rem; color: var(--ink); }
.split-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.split-note { font-size: 0.78rem; color: var(--tomato-deep); margin-top: 6px; }
.period-table tbody tr { cursor: pointer; }
.period-table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.08); }
.period-table tbody tr.is-selected td { background: rgba(var(--accent-rgb), 0.16); }
.period-table td.period-sub { font-weight: 700; }

/* ---- Phone-width layout (≤ 600px): nothing wider than the screen ---- */
.entry-grid > .panel, .entry-grid > div { min-width: 0; }
.bulk-textarea { box-sizing: border-box; max-width: 100%; }
@media (max-width: 600px) {
  .app-main { padding-left: 12px; padding-right: 12px; }
  .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .table-panel { width: 100%; }
  .field-row { flex-wrap: wrap; }
  .field-row .field-narrow { min-width: 0; flex: 1 1 110px; }
  .ladder-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .ladder-pct { display: none; }
  .header-tools { flex-wrap: wrap; gap: 8px; }
  .app-rev-badge { margin-left: 0; }
  .toolbar { flex-wrap: wrap; }
  .search-wrap { min-width: 0; }
}

/* Eight tabs no longer fit beside the title on narrower desktops — wrap the
   tab row under the title instead of squeezing the title into a column. */
.masthead-inner { flex-wrap: wrap; row-gap: 0; }
.masthead-mark { flex: 1 0 320px; }
.masthead-right { max-width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .masthead-mark { flex-basis: 100%; }
  .masthead-right { align-items: flex-start; width: 100%; }
}
/* Units and kitchen categories read as typed — not in the dish-category caps style. */
.kitchen-unit-select, .kitchen-cat-input { text-transform: none; letter-spacing: normal; }

/* ================= Rev23: line icons ================= */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tab-btn .tab-ico { margin-right: 4px; }

/* ================= Rev23: Charts — shared range bar for C1–C4 ================= */
.chart-range-bar { position: sticky; top: 0; z-index: 5; background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 12px 16px; margin-bottom: 18px; }
.chart-range-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chart-range-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.range-custom { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.85rem; }
.range-custom.is-open { display: flex; }
.range-custom input { font-family: var(--font-mono); font-size: 0.82rem; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); }
.range-err { color: var(--tomato-deep); font-size: 0.8rem; }
.chart-range-showing { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.chart-range-showing b { color: var(--ink); font-weight: 600; }
.crowd-note { display: none; margin: 4px 0 0; font-size: 0.78rem; color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 6px; padding: 3px 8px; width: fit-content; }
.crowd-note.is-on { display: block; }
.link-btn { font: inherit; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* ================= Rev23: Insights tab ================= */
#view-insights { --good: var(--herb); --watch: var(--gold); --bad: var(--tomato);
  --good-bg: color-mix(in srgb, var(--herb) 8%, transparent); --watch-bg: color-mix(in srgb, var(--gold) 10%, transparent); --bad-bg: color-mix(in srgb, var(--tomato) 8%, transparent); }
#view-insights .is-good { --c: var(--good); --c-bg: var(--good-bg); }
#view-insights .is-watch { --c: var(--watch); --c-bg: var(--watch-bg); }
#view-insights .is-bad { --c: var(--bad); --c-bg: var(--bad-bg); }
#view-insights .is-flat, #view-insights .is-none { --c: var(--ink-soft); --c-bg: var(--paper-dim); }
#view-insights td.is-good, #view-insights td.is-bad, #view-insights td.is-flat, #view-insights span.is-good, #view-insights span.is-bad { color: var(--c); }
.ins-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.ins-period p { margin: 0; font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-soft); }
#view-insights .range-custom { margin: 4px 0 10px; }
.ins-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 30px 0 12px; }
.ins-head .ico { font-size: 1.15rem; color: var(--ink-soft); align-self: center; }
.ins-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.ins-head .sub { color: var(--ink-soft); font-size: 0.8rem; }
.ins-head .code { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); }
.ins-empty { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); padding: 14px 4px; }
.ins-empty-sm { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .8rem; margin: 10px 0; }
#view-insights .num { font-family: var(--font-mono); color: var(--ink); }

/* I1 */
.ins-verdict { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-card); margin-top: 10px; }
.ins-verdict:has(> .ins-empty) { display: block; }
.ins-dial { width: 112px; height: 112px; }
.ins-dial circle { fill: none; stroke-width: 8; }
.ins-dial .track { stroke: var(--line); }
.ins-dial .val { stroke: var(--c); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ins-dial .n { font-family: var(--font-display); font-size: 32px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.ins-dial .of { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-soft); text-anchor: middle; }
.ins-verdict h2 { margin: 2px 0 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.ins-story { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .9rem; }
.ins-story span { display: inline-flex; align-items: center; gap: 5px; }
.ins-story .ar { font-size: 1.15rem; color: var(--c); }
.ins-story .sep { color: var(--ink-soft); font-size: .8rem; }
.ins-verdict-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); }
.ins-verdict-foot .cnt { display: inline-flex; align-items: center; gap: 6px; }
.ins-verdict-foot .cnt b { font-family: var(--font-display); font-size: 1.15rem; color: var(--c); }
.ins-verdict-foot .cnt .ico { color: var(--c); font-size: 1.05rem; }
.ins-verdict-foot .recover { margin-left: auto; font-family: var(--font-mono); color: var(--ink); }

/* I2 — vital sign cards; hover (or tap / keyboard focus) lifts the card and slides out the why */
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ins-tile { position: relative; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 8px; outline: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ins-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.ins-tile-top { display: flex; align-items: center; gap: 6px; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.ins-tile-top .v { margin-left: auto; color: var(--c); font-size: .95rem; }
.ins-tile-mid { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ins-tile-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.ins-arr { font-size: 1.5rem; color: var(--c); display: inline-flex; }
.ins-tile-sub { font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }
.ins-tile-sub b { font-family: var(--font-mono); font-weight: 500; color: var(--c); }
.ins-spark { width: 100%; height: 26px; display: block; margin-top: 6px; }
.ins-spark path { fill: none; stroke: var(--c); stroke-width: 1.6; opacity: .8; }
.ins-spark circle { fill: var(--c); }
.ins-tile.is-none .ins-spark path { stroke: var(--ink-soft); }
.ins-tile.is-none .ins-spark circle { fill: var(--ink-soft); }
.ins-why { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--paper-card); border: 1px solid var(--line-strong); border-top: 1px dashed var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px 14px 10px; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); box-shadow: var(--shadow-elevated); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.ins-why b { color: var(--ink); font-weight: 600; }
.ins-why .prev { display: block; font-family: var(--font-mono); font-size: .72rem; margin-bottom: 3px; color: var(--c); }
.ins-tile:hover, .ins-tile:focus { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-elevated); border-color: var(--line-strong); z-index: 3; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ins-tile:hover .ins-why, .ins-tile:focus .ins-why { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ins-tile, .ins-why { transition: none; } .ins-tile:hover, .ins-tile:focus { transform: none; } }

/* I3 / I4 lists */
.ins-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; }
.ins-two .ins-head { margin-top: 0; }
@media (max-width: 880px) { .ins-two { grid-template-columns: minmax(0, 1fr); } }
.ins-list { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 10px; }
.ins-list-h { display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; color: var(--c); }
.ins-list-h h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.ins-list-h .ico { font-size: 1.2rem; }
.ins-list-h small { margin-left: auto; color: var(--ink-soft); font-size: .74rem; }
.ins-it { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ins-it-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--c-bg); color: var(--c); display: grid; place-items: center; font-size: 1rem; }
.ins-it-t { font-weight: 600; font-size: .92rem; }
.ins-it-d { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ins-it-d .to { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); color: var(--ink); }
.ins-it-d .to .ico { color: var(--ink-soft); font-size: .85rem; }
.ins-it-d .to b { color: var(--c); }
.ins-it-d .ar-c { font-size: 1rem; color: var(--c); }
.ins-it-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ins-it-r .amt { font-family: var(--font-mono); font-weight: 600; color: var(--c); font-size: .88rem; white-space: nowrap; }
.ins-it-r .amt small { font-weight: 400; color: var(--ink-soft); font-size: .68rem; }
.ins-it-r .meter { width: 70px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ins-it-r .meter i { display: block; height: 100%; background: var(--c); }
.ins-it .acts { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.ins-it:hover .acts, .ins-it .acts:focus-within { opacity: 1; }
.ins-it .ib { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; font-size: .95rem; }
.ins-it .ib:hover { background: var(--paper-dim); color: var(--ink); }
.ins-it .dots { display: inline-flex; gap: 3px; }
.ins-it .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ins-it .dots i.on { background: var(--c); }
.ins-it .worked { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); border-radius: 99px; padding: 0 7px; }
.ins-it .tried { font-size: .7rem; font-weight: 600; color: var(--watch); border: 1px solid color-mix(in srgb, var(--watch) 40%, transparent); border-radius: 99px; padding: 0 7px; }
.ins-more { margin-top: 4px; }

/* I5 matrix */
.ins-panel { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.ins-panel-table { padding: 6px 16px 10px; overflow-x: auto; }
.ins-mx { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ins-mx .q { border-radius: 10px; padding: 10px 12px; min-height: 104px; background: var(--c-bg); }
.ins-mx .q-star { --c: var(--good); --c-bg: var(--good-bg); }
.ins-mx .q-promo, .ins-mx .q-reprice { --c: var(--watch); --c-bg: var(--watch-bg); }
.ins-mx .q-dog { --c: var(--bad); --c-bg: var(--bad-bg); }
.ins-mx .q-h { display: flex; align-items: center; gap: 6px; color: var(--c); font-weight: 600; font-size: .86rem; flex-wrap: wrap; }
.ins-mx .q-h small { color: var(--ink-soft); font-weight: 400; font-size: .72rem; margin-left: auto; }
.ins-mx .dish { display: inline-block; font-size: .76rem; background: var(--paper-card); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; margin: 6px 3px 0 0; }
.ins-mx .dish.more { color: var(--ink-soft); }
.ins-axes { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }

/* I6 / I7 / I8 tables */
.ins-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ins-table th { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); font-weight: 600; }
.ins-table th:first-child, .ins-table td:first-child { text-align: left; }
.ins-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.ins-table td:first-child { font-family: var(--font-body); font-weight: 600; white-space: normal; }
.ins-table td small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: var(--ink-soft); }
.ins-table tr:last-child td { border-bottom: 0; }
.ins-table .ar-c { font-size: 1.2rem; vertical-align: -0.2em; }
.ins-table .vb { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--c); }
.ins-prep td.c .n { font-size: .95rem; }
.ins-prep td.c small { display: block; font-family: var(--font-mono); }
.ins-prep td.na { color: var(--line-strong); }
.ins-prep td.more { background: var(--good-bg); }
.ins-prep td.less { background: var(--bad-bg); }
.ins-prep td.more .n { color: var(--good); font-weight: 600; }
.ins-prep td.less .n { color: var(--bad); font-weight: 600; }
.ins-prep .mk { font-size: .8rem; vertical-align: -0.1em; }
.ins-prep th.best { color: var(--ink); }
.ins-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .74rem; color: var(--ink-soft); margin-top: 10px; }
.ins-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ins-legend .is-good { color: var(--good); } .ins-legend .is-bad { color: var(--bad); }

/* I9 rules */
.ins-rule { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.ins-rule .rn { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ins-rule .rn .ico { color: var(--ink-soft); }
.ins-rule .zone { position: relative; height: 6px; border-radius: 99px; display: flex; }
.ins-rule .zone i { height: 100%; opacity: .75; background: var(--c); }
.ins-rule .zone i:first-child { border-radius: 99px 0 0 99px; }
.ins-rule .zone i:nth-child(3) { border-radius: 0 99px 99px 0; }
.ins-rule .knob { position: absolute; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--paper-card); border: 3px solid var(--ink); }
.ins-rule .rv { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.ins-rule .rule-in { width: 52px; font-family: var(--font-mono); font-size: .8rem; padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); }
.ins-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-soft); margin: 10px 0 0; }
@media (max-width: 640px) {
  .ins-verdict { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px; }
  .ins-story, .ins-verdict-foot { justify-content: center; }
  .ins-verdict-foot .recover { margin-left: 0; }
  .ins-rule { grid-template-columns: minmax(0, 1fr); }
  .ins-it { grid-template-columns: 30px minmax(0, 1fr); }
  .ins-it-r { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* Rev23a: sales dated after today are included, and flagged */
.future-flag { display: none; margin: 6px 0 0; font-size: .78rem; color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 6px; padding: 3px 8px; width: fit-content; max-width: 100%; }
.future-flag.is-on { display: block; }
#ins-future-flag { margin: 0 0 8px; }

/* ================= Rev24: compact entry panels ================= */
.hint:empty { display: none; }
.field-wide { flex: 1.4; min-width: 0; }
.field-row .field-narrow { min-width: 0; }
.panel.compact { padding: 12px 14px 14px; margin-bottom: 12px; }
.panel.compact > .panel-head { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 8px; }
.panel.compact > .panel-head h2 { font-size: 1.05rem; }
.panel.compact .ticket-form, .panel.compact .admin-form { gap: 8px; }
.panel.compact .field { gap: 3px; font-size: 0.68rem; letter-spacing: 0.02em; }
.panel.compact .field input, .panel.compact .field select, .panel.compact .bulk-textarea { padding: 6px 10px; min-height: 36px; box-sizing: border-box; font-size: 0.9rem; border-radius: 9px; }
.panel.compact .field input[type="date"], .panel.compact .field input[type="month"] { align-self: stretch; width: 100%; min-width: 0; }
.panel.compact .bulk-textarea { min-height: 76px; line-height: 1.4; font-size: 0.82rem; }
.panel.compact .field-row { gap: 8px; }
.panel.compact .slash { padding-bottom: 6px; font-size: 1.1rem; }
.panel.compact .btn { padding: 0 14px; min-height: 36px; font-size: 0.86rem; white-space: nowrap; }
.panel.compact .admin-form-actions { margin-top: 0; flex: 0 0 auto; }
.panel.compact .bulk-actions { margin-top: 8px; }
.panel.compact .field + .hint { margin-top: 6px; }
.panel.compact .hint { margin: 0; }
.panel.compact .form-error { margin: 0; }
.panel.compact .category-rename-row, .panel.compact .kitchen-list-add { gap: 8px; margin-bottom: 0; }
.panel.compact .buy-type-toggle .segmented-btn { padding-top: 6px; padding-bottom: 6px; font-size: 0.78rem; }
.entry-grid { gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) {
  .panel.compact .field-row { flex-wrap: nowrap; }
  .panel.compact .field-row > .field-narrow { flex: 1 1 0; min-width: 0; }
  .panel.compact .field-row > .field-wide { flex: 1.5 1 0; min-width: 0; }
  .panel.compact .field-row-wrap { flex-wrap: wrap; }
  .panel.compact .field-row-wrap > .field-narrow { flex: 1 1 42%; }
}

/* "?" explanation card: hover / keyboard focus on a computer, tap on a phone */
.panel-head.has-qm { flex-direction: row; align-items: center; gap: 8px; }
.qm { position: relative; margin-left: auto; flex-shrink: 0; }
.qm-line { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.qm-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); font: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1; display: grid; place-items: center; cursor: help; padding: 0; }
.qm:hover .qm-btn, .qm.open .qm-btn, .qm-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.qm-card { position: absolute; right: -6px; top: 32px; width: min(320px, calc(100vw - 40px)); background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-elevated); padding: 10px 12px; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s; text-transform: none; letter-spacing: normal; font-weight: 400; white-space: normal; text-align: left; font-family: var(--font-body); }
.qm-card::before { content: ""; position: absolute; top: -6px; right: 14px; width: 10px; height: 10px; background: var(--paper-card); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); }
.qm-card b { color: var(--ink); }
.qm-card code { font-family: var(--font-mono); font-size: 0.74rem; background: var(--paper-dim); padding: 0 4px; border-radius: 4px; }
.qm:hover .qm-card, .qm.open .qm-card, .qm:focus-within .qm-card { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .qm-card { transition: none; } }

/* ================= Rev24: phone header — slim pinned bar ================= */
.phone-bar { display: none; }
@media (max-width: 700px) {
  .masthead { position: static; }
  .phone-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; height: 44px; padding: 0 12px; box-sizing: border-box; background: var(--paper); border-bottom: 1px solid var(--line); transition: height .18s ease, opacity .15s ease; }
  .phone-bar-logo { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); object-fit: cover; flex-shrink: 0; }
  .phone-bar-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 4px 6px; border-radius: 8px; cursor: pointer; min-width: 0; }
  .phone-bar-tab .tab-num { font-family: var(--font-mono); font-size: 0.68rem; border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 4px; color: var(--ink-soft); font-weight: 500; }
  .phone-bar-tab .ico { color: var(--ink-soft); }
  .phone-bar-sp { flex: 1; }
  .phone-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--herb); flex-shrink: 0; }
  .phone-bar-dot.is-warn { background: var(--gold); }
  .phone-bar-theme { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ink); font-size: 1rem; cursor: pointer; flex-shrink: 0; }
  html.kb-open .phone-bar { height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; overflow: hidden; opacity: 0; }
  .phone-menu { position: absolute; top: 46px; left: 8px; right: 8px; z-index: 110; background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-elevated); padding: 6px; }
  .phone-menu[hidden] { display: none; }
  .phone-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 0.92rem; padding: 9px 10px; border: 0; background: none; border-radius: 8px; color: var(--ink); cursor: pointer; }
  .phone-menu button.on { background: var(--paper-dim); font-weight: 600; }
  .phone-menu .ico { font-size: 1.1rem; color: var(--ink-soft); }
  .phone-menu .pm-dot { width: 1.1rem; height: 1.1rem; display: grid; place-items: center; }
  .phone-menu .pm-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
  .phone-menu .tab-num { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
  .chart-range-bar { top: 44px; }
  html.kb-open .chart-range-bar { top: 0; }
}