/* Tangerine Books — component stylesheet (Wave 3 foundation, ADR-0006).
 *
 * This replaces the old review.css outright (no dual stylesheet). It consumes
 * the vendored design tokens (tokens/colors.css, typography.css, spacing.css)
 * via CSS custom properties and never hard-codes a brand value. It carries:
 *
 *   1. a legacy-variable alias block, so every screen's existing component
 *      classes (ported verbatim onto the base layout) pick up the brand
 *      palette without being rewritten screen-by-screen in this slice;
 *   2. the base element look (Space Mono on cream paper, hard ink keylines,
 *      square corners, no shadows);
 *   3. the shared chrome — the sticky app header, the four-cell bottom nav,
 *      and the detail-screen (back-arrow) variant;
 *   4. the ported component rules for every existing screen.
 *
 * Mobile-first: base rules apply at every width; wider viewports are
 * progressively enhanced behind `@media (min-width: ...)` at the very end.
 */

/* --- 1. Legacy variable aliases -> brand tokens --------------------------- */
/* The ported screens reference these names; point them at the brand palette
   so a single mapping re-skins every screen. */
:root {
  --text: var(--tb-ink);
  --muted: var(--tb-ink-soft);
  --rule: var(--tb-ink);
  --surface: var(--tb-paper-raised);
  --surface-alt: var(--tb-paper-sunk);
  /* Warm Four (#132): attention = tangerine-ink; "good" = plain ink.
     --flag-green is unused today but kept so a future ported screen that
     still says flag-green lands on ink, not a missing variable. */
  --flag-red: var(--tb-tangerine-ink);
  --flag-yellow: var(--tb-mustard);
  --flag-green: var(--tb-ink);
}

/* --- 2. Base element look ------------------------------------------------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--tb-font-body);
  color: var(--tb-ink);
  background: var(--tb-paper);
  font-size: var(--tb-size-body);
  line-height: var(--tb-leading-body);
}

/* Main screens carry the sticky header + bottom nav; pad the body so the
   fixed chrome never covers content. Detail/bare screens override below. */
body.tb-body {
  min-height: 100vh;
  padding-top: var(--tb-header-height);
  padding-bottom: calc(var(--tb-bottomnav-height) + env(safe-area-inset-bottom, 0px));
}

body.tb-body--detail {
  padding-bottom: 0;
}

body.tb-body--bare {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--tb-midnight);
  color: var(--tb-midnight-ink);
}

/* Login fills the viewport; don't clamp the bare chrome to the reading column. */
body.tb-body--bare .tb-main {
  max-width: none;
}

a {
  color: var(--tb-tango-ink);
}

h1,
h2,
h3 {
  font-family: var(--tb-font-display);
  letter-spacing: 0.01em;
}

/* Warm Four control shapes: inputs are radius-6, buttons are pills. No
   shadows, no gradients — the flat "counter" feel. */
input,
select,
textarea {
  border-radius: var(--tb-radius-1);
  font-family: inherit;
}

button {
  border-radius: var(--tb-radius-pill);
  font-family: inherit;
}

/* Honest interaction states: 3px tangerine focus ring, 1px press shift. */
:focus-visible {
  outline: var(--tb-keyline) solid var(--tb-tangerine);
  outline-offset: 2px;
}

button:active {
  transform: translateY(1px);
}

/* --- 3. Shared chrome ----------------------------------------------------- */

/* App header — a flat midnight field (the old orange keyline is dropped),
   56px mobile / 64px desktop. Wordmark + (desktop) nav pills + signed-in
   partner (+ OUT on Today); a back-arrow variant on detail screens. */
.tb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--tb-header-height);
  display: flex;
  align-items: center;
  gap: var(--tb-space-4);
  padding: 0 var(--tb-gutter);
  background: var(--tb-midnight);
  color: var(--tb-moon);
}

.tb-header__brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  color: var(--tb-moon);
}

.tb-header__wordmark {
  font-family: var(--tb-font-display);
  font-size: 22px;
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.02em;
  color: var(--tb-tangerine);
}

.tb-header__wordmark-suffix {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-wordmark);
  text-transform: uppercase;
  color: var(--tb-moon);
}

/* Desktop-only horizontal nav — pills; hidden below the breakpoint where the
   bottom nav takes over. */
.tb-header__nav {
  display: none;
  align-items: center;
  gap: 4px;
}

.tb-header__navlink {
  padding: 7px 18px;
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-size-small);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tb-moon-muted);
  background: transparent;
}

.tb-header__navlink:hover {
  color: var(--tb-moon);
}

.tb-header__navlink--active {
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  font-weight: var(--tb-weight-bold);
}

.tb-header__partner {
  margin-left: auto;
  font-size: var(--tb-size-small);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-moon);
  white-space: nowrap;
}

.tb-header__logout {
  font: inherit;
  font-size: var(--tb-size-kicker);
  color: var(--tb-moon-muted);
  background: none;
  border: var(--tb-keyline-thin) solid var(--tb-moon-muted);
  border-radius: var(--tb-radius-pill);
  padding: 5px 14px;
  cursor: pointer;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.tb-header__logout:hover {
  color: var(--tb-tangerine);
  border-color: var(--tb-tangerine);
}

.tb-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-space-1);
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  color: var(--tb-moon);
  background: none;
  border: 0;
  cursor: pointer;
}

.tb-header__back-label {
  font-size: var(--tb-size-small);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

/* Bottom nav — mobile only (hidden at the desktop breakpoint, where the
   header nav replaces it). Four equal pill cells on a flat midnight bar. */
.tb-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--tb-midnight);
}

.tb-bottomnav__cell {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--tb-moon-muted);
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.tb-bottomnav__cell--active {
  color: var(--tb-midnight);
  background: var(--tb-tangerine);
  font-weight: var(--tb-weight-bold);
}

/* The content column all screens render into. */
.tb-main {
  width: 100%;
  max-width: var(--tb-content-max);
  margin: 0 auto;
}

/* --- 4. Ported screen components ------------------------------------------ */
/* These are the existing per-screen rules, carried onto the base layout and
   re-skinned through the alias block above. Bespoke per-screen redesigns land
   in the later Wave 3 slices; this keeps every screen coherent in the meantime.
*/

.review {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--tb-space-4);
  background: var(--tb-paper);
}

.review h1 {
  font-size: var(--tb-size-h1);
  margin: 0 0 var(--tb-space-1);
}

.review .day {
  color: var(--muted);
  margin: 0 0 var(--tb-space-4);
  font-size: 0.95rem;
}

.review .empty-note {
  background: var(--surface-alt);
  padding: var(--tb-space-3);
  border: var(--tb-keyline-thin) solid var(--rule);
  color: var(--muted);
}

.review section {
  margin-bottom: var(--tb-space-5);
}

.review h2 {
  font-size: var(--tb-size-h2);
  margin: 0 0 var(--tb-space-2);
  padding-bottom: var(--tb-space-1);
  border-bottom: var(--tb-keyline) solid var(--rule);
}

.review dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--tb-space-1) var(--tb-space-3);
  margin: 0;
}

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

.review dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Segment CM table. */
.segment-cm table {
  width: 100%;
  border-collapse: collapse;
}

.segment-cm th,
.segment-cm td {
  text-align: left;
  padding: 0.4rem 0.25rem;
  border-bottom: var(--tb-keyline-thin) solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.segment-cm th {
  font-size: var(--tb-size-small);
  color: var(--muted);
  font-weight: var(--tb-weight-bold);
}

/* The RED chip — tangerine pill beside the kicker (Warm Four: attention is
   tangerine, not a separate red hue). */
.segment-cm__flag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  font-size: 10px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  border-radius: var(--tb-radius-pill);
}

/* Rankings (Warm Four #125) — Top & bottom card: Hobo heading + segmented
   MARGIN/VOLUME toggle; ranked rows split by dashed rules; the active pair
   shows and the inactive pair stays in the DOM hidden. */
.today__rank-card {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.today__rank-card .rankings {
  margin: 0;
}

.rankings__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.rankings h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
}

.rank-toggle {
  margin-left: auto;
  display: flex;
  gap: 4px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-pill);
  padding: 3px;
}

.rank-toggle__link {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--tb-radius-pill);
  color: var(--muted);
  text-decoration: none;
}

.rank-toggle__link--active {
  background: var(--tb-ink);
  color: var(--tb-paper);
  font-weight: var(--tb-weight-bold);
}

.rankings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tb-space-4) 20px;
  font-size: var(--tb-size-small);
}

/* The toggle swaps the visible pair; all four lists stay in the DOM. */
.rankings__grid--rank-margin .ranking--by-volume,
.rankings__grid--rank-volume .ranking--by-margin {
  display: none;
}

.ranking h3 {
  margin: 0 0 8px;
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.ranking__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.ranking__list li {
  counter-increment: rank;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 5px 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.ranking__list li::before {
  content: counter(rank) " ·";
  color: inherit;
}

.ranking__list li:last-child {
  border-bottom: 0;
}

.ranking__list .item-performance-link {
  flex: 1 1 auto;
  color: var(--tb-ink);
}

.ranking__metric {
  margin-left: auto;
  font-weight: var(--tb-weight-bold);
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The BOTTOM lists (2nd and 4th) read muted, values plain weight. */
.rankings__grid .ranking:nth-child(even),
.rankings__grid .ranking:nth-child(even) .item-performance-link {
  color: var(--muted);
}

.rankings__grid .ranking:nth-child(even) .ranking__metric {
  font-weight: var(--tb-weight-regular);
  color: var(--muted);
}

/* Goal detail — the dashed-rule footer of the Top & bottom card. */
.goal--legacy {
  margin: 0;
  padding-top: 12px;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.goal--legacy h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.goal--legacy .goal__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}

.goal--legacy .goal__stats > div,
.goal--legacy dt,
.goal--legacy dd {
  display: inline;
}

.goal--legacy dt {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.goal--legacy dd {
  margin: 0 12px 0 0;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  text-align: left;
  color: var(--tb-ink);
}

.below-target ul,
.needs-attention ul {
  margin: 0;
  padding-left: 1.25rem;
}

.needs-attention__note {
  color: var(--muted);
  font-size: 0.9rem;
}

.needs-attention__reason {
  font-weight: var(--tb-weight-bold);
}

.needs-attention__link {
  font-weight: var(--tb-weight-bold);
  white-space: nowrap;
}

/* Sync footer (Warm Four #125) — SYNC NOW pill + last-synced + brand seal
   on one dashed-rule row (the pill styles live with the other tangerine
   pills above). */
.today__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 16px;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.today__footer .sync-control,
.sync-control {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.today__footer .last-sync {
  margin: 0;
}

.today__seal {
  margin-left: auto;
  width: 26px;
  height: 26px;
}

.sync-control__indicator {
  color: var(--muted);
  font-size: var(--tb-size-kicker);
}

.sync-result {
  margin-top: 0.5rem;
}

.sync-result h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  color: var(--muted);
}

.sync-result__errors {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  color: var(--flag-red);
}

.sync-result__error {
  margin-bottom: 0.2rem;
}

/* Signed-in-as row (legacy in-body variant; the header now carries this too). */
.signed-in-as {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--tb-space-4);
  font-size: 0.9rem;
  color: var(--muted);
}

.logout-button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: var(--tb-keyline-thin) solid var(--rule);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.logout-button:hover {
  background: var(--surface-alt);
}

/* Day navigator (Warm Four #125) — round 30/34px arrow buttons around a
   paper-card date-chip pill. The chip carries the visible date; the hidden
   HTMX date input overlays it so tapping the chip opens the picker. */
.day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.day-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-ink);
  text-decoration: none;
  line-height: 1;
}

.day-nav__arrow--dimmed,
.day-nav__arrow[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.day-nav__label {
  position: relative;
  display: block;
}

.day-nav__label-text {
  display: inline-block;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-pill);
  padding: 7px 12px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.1em;
  color: var(--tb-ink);
  white-space: nowrap;
}

.day-nav__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.range-nav__input {
  font: inherit;
  padding: var(--tb-space-2);
  border: var(--tb-keyline-thin) solid var(--rule);
  background: var(--tb-paper-raised);
}

/* Stale-sync banner — the one midnight surface on the paper ground: moon
   text, the day count in mustard, a SYNC NOW pill inside. */
.stale-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 var(--tb-space-4);
  padding: 12px 14px;
  background: var(--tb-midnight);
  color: var(--tb-moon);
  border: 0;
  border-radius: var(--tb-radius-2);
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
}

.stale-banner__text {
  flex: 1 1 auto;
}

.stale-banner__days {
  color: var(--tb-mustard);
}

/* Config-changes banner — paper-warm pill panel with a tangerine dot. The
   quiet (older-changes) variant `.config-changes` wears the same look per
   the handoff; only the alert semantics differ. */
.config-changes,
.config-changes-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--tb-space-4);
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border: 0;
  border-radius: var(--tb-radius-2);
  font-size: var(--tb-size-small);
  line-height: 1.5;
}

.config-changes__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-tangerine);
  flex: none;
}

.config-changes__link {
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
}

/* The tangerine primary pill — SYNC NOW everywhere it appears. */
.stale-banner__sync,
.empty-store__sync,
.sync-control__button {
  display: inline-block;
  padding: 9px 22px;
  font: inherit;
  font-size: var(--tb-size-small);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-midnight);
  background: var(--tb-tangerine);
  border: 0;
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
}

.stale-banner__sync {
  font-size: 10px;
  padding: 6px 16px;
}

.stale-banner__sync:hover,
.empty-store__sync:hover,
.sync-control__button:hover {
  background: var(--tb-tangerine-ink);
}

.stale-banner__sync:disabled,
.empty-store__sync:disabled,
.sync-control__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.last-sync {
  margin: 0 0 var(--tb-space-5);
  color: var(--muted);
  font-size: var(--tb-size-kicker);
}

/* Empty store — centered paper-card panel: seal, Hobo heading, explainer,
   SYNC NOW pill. */
.empty-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px auto 0;
  width: 100%;
  max-width: 420px;
  padding: 28px 22px;
  background: var(--tb-paper-card);
  border: 0;
  border-radius: var(--tb-radius-3);
  text-align: center;
}

.empty-store__seal {
  width: 44px;
  height: 44px;
}

.empty-store h2 {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--tb-size-h2);
  line-height: 1.2;
}

.empty-store__message {
  color: var(--muted);
  margin: 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.7;
}

/* No-day-data — paper-warm panel, italic ink lead, muted body. */
.review .empty-note--day {
  background: var(--tb-paper-warm);
  border: 0;
  border-radius: var(--tb-radius-3);
  padding: 22px;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  line-height: 1.7;
}

.review .empty-note--day em {
  color: var(--tb-ink);
}

/* Login — full-viewport midnight (Warm Four #125). Centered column, split
   wordmark, midnight-deep form panel, pill partner toggles, tangerine
   SIGN IN. 420px column on desktop; full width minus 48px on mobile. */
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
  min-height: 100vh;
  width: 100%;
  max-width: calc(420px + 48px);
  margin: 0 auto;
  padding: var(--tb-space-6) 24px;
  background: var(--tb-midnight);
  color: var(--tb-moon);
}

.login__brand {
  margin: 0;
  text-align: center;
}

.login__lockup {
  margin: 0;
}

.login__wordmark {
  font-family: var(--tb-font-display);
  font-size: 34px;
  font-weight: var(--tb-weight-regular);
  line-height: 1.08;
  color: var(--tb-moon);
}

.login__wordmark-accent {
  color: var(--tb-tangerine);
}

.login__kicker {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-wordmark);
  text-transform: uppercase;
  color: var(--tb-moon-muted);
}

.login__error {
  margin: 0;
  padding: 10px 14px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-2);
  background: transparent;
  color: var(--tb-moon);
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  text-align: left;
}

.login__form {
  margin: 0;
}

.login__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 0;
  border-radius: var(--tb-radius-3);
  background: var(--tb-midnight-deep);
  text-align: left;
}

.login__who {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.login__who-label {
  padding: 0;
  margin: 0 0 8px;
  float: none;
  width: 100%;
  font-size: 10px;
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-moon-muted);
}

.login__toggle-group {
  display: flex;
  gap: var(--tb-space-2);
}

.login__toggle {
  position: relative;
  cursor: pointer;
  flex: 1 1 0;
}

.login__toggle input {
  /* Visually hidden but reachable for assistive tech / focus. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login__toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: var(--tb-keyline-thin) solid var(--tb-moon-muted);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-moon-muted);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-kicker);
  text-align: center;
  text-transform: uppercase;
}

.login__toggle input:checked + span {
  background: var(--tb-tangerine);
  border-color: var(--tb-tangerine);
  color: var(--tb-midnight);
  font-weight: var(--tb-weight-bold);
}

.login__toggle input:focus-visible + span {
  outline: var(--tb-keyline) solid var(--tb-tangerine);
  outline-offset: 2px;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login__field-label {
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-moon-muted);
}

.login__field input {
  font: inherit;
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-size-body);
  height: 44px;
  padding: 0 14px;
  border: var(--tb-keyline-thin) solid var(--tb-moon-muted);
  border-radius: var(--tb-radius-1);
  background: var(--tb-midnight);
  color: var(--tb-moon);
}

.login__field input::placeholder {
  color: var(--tb-moon-muted);
}

/* Border deepens on focus; the global :focus-visible rule supplies the
   3px tangerine ring (do not outline:none — that hid the Warm Four ring). */
.login__field input:focus-visible {
  border-color: var(--tb-tangerine);
}

/* Failed attempt: the passphrase input wears the tangerine keyline. */
.login__field input.login__input--error {
  border-color: var(--tb-tangerine);
}

.login__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-size-small);
  letter-spacing: var(--tb-tracking-kicker);
  padding: 12px var(--tb-space-4);
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  cursor: pointer;
  text-transform: uppercase;
}

.login__submit:hover {
  background: var(--tb-tangerine-ink);
}

.login__submit:focus-visible {
  outline: var(--tb-keyline) solid var(--tb-moon);
  outline-offset: 2px;
}

.login__footer {
  margin: 0;
  text-align: center;
}

.login__footer p {
  margin: 0;
  font-size: 10px;
  color: var(--tb-moon-muted);
}

/* Coverage sub-lines (SKU ids under names, editor meta, breakdown ids). */
.sku-row__id,
.item-row__id {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Health indicators — Warm Four #129 dot ramp (settles #124's interim
   recolor, per the approved Stock prototype #128): severity is how much
   tangerine the dot carries. Red = 12px filled tangerine; yellow = 12px
   hollow tangerine ring (2.5px stroke); green = a quiet 7px ink-muted dot.
   No green/yellow/red hue channel anywhere. */
.health-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: -1px;
}

.health-dot--red {
  background: var(--tb-tangerine);
}

.health-dot--yellow {
  background: transparent;
  border: 2.5px solid var(--tb-tangerine);
}

.health-dot--green {
  width: 7px;
  height: 7px;
  background: var(--tb-ink-muted);
  margin: 0 2.5px;
}

/* --- Warm Four #129: Stock screens (Variant A "Counter cards") ------------
   SKU/item coverage extend the Reports Counter dialect (#126/#127):
   mobile-first single column with 18px gaps; the desktop 7/5 grid lands in
   the 768px block at the end of this sheet. All test anchors and behaviour
   hooks are untouched — presentation only. */
.review.stock {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

/* Title row: kicker + Hobo h1 left, the pill-tray tabs right. */
.stock__titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
}

.stock__kicker {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.stock__titlebar h1 {
  margin: 0;
  font-size: var(--tb-size-h1);
  line-height: 1.08;
}

/* Tabs — pills in a paper-warm tray (the segmented-toggle dialect). */
.stock-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-pill);
}

.stock-tabs__link {
  padding: 8px 18px;
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-tabs__link:hover {
  color: var(--tb-ink);
}

.stock-tabs__link--active {
  background: var(--tb-ink);
  color: var(--tb-paper);
  pointer-events: none;
}

/* The screen body: a column of cards (the 12-col grid on desktop). */
.stock__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Needs-work hero card: kicker, Hobo numeral, the summary as its note. */
.stock-hero {
  margin-bottom: 0;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.stock-hero__kicker {
  margin: 0 0 6px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.stock-hero__numeral {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: 48px;
  line-height: 1.1;
}

.stock-hero__of {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.stock-summary {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

/* Filter-chips + CTA card beside the hero. */
.stock-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.stock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.stock-chips__link {
  padding: 6px 15px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.stock-chips__link:hover {
  color: var(--tb-ink);
  border-color: var(--tb-ink);
}

.stock-chips__link--active {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: var(--tb-paper);
  font-weight: var(--tb-weight-bold);
  pointer-events: none;
}

.stock-side__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

/* CTA pills: + NEW SKU filled tangerine; BULK EDIT the outlined ghost. */
.stock-cta {
  display: inline-block;
  padding: 9px 22px;
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  border: 0;
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.stock-cta:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.stock-cta--ghost {
  background: transparent;
  color: var(--tb-ink);
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  padding: 7.5px 20.5px;
}

.stock-cta--ghost:hover {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-tangerine);
}

/* Single-item filter line (?item= deep link from the morning review). */
.stock-item-filter {
  margin: 0;
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  color: var(--muted);
  font-size: var(--tb-size-small);
}

/* The list: a full-width paper card with dashed rules between rows. */
.stock-list {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
}

.stock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 13px 0;
}

.stock-row + .stock-row {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.stock-row__main {
  min-width: 0;
}

.stock-row__name {
  font-weight: var(--tb-weight-bold);
  text-decoration: none;
  color: inherit;
}

.stock-row__name:hover {
  text-decoration: underline;
}

.stock-row__sub {
  display: block;
  color: var(--muted);
  font-size: var(--tb-size-small);
  margin-top: 2px;
}

/* Badges (No cost / Dangling / Unmapped) — outlined tangerine chips:
   attention is tangerine, never a separate hue. */
.stock-row__badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-tangerine-ink);
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-row__figure {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--tb-size-small);
}

.stock-row__actions {
  grid-column: 2 / -1;
  margin: 0;
  font-size: var(--tb-size-small);
}

/* Empty filter state — paper-warm panel. */
.stock-empty {
  margin-bottom: 0;
  padding: 20px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  color: var(--muted);
}

.stock-empty__message {
  margin: 0 0 8px;
}

.stock-empty__reset {
  font-weight: var(--tb-weight-bold);
}

.stock-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-size: var(--tb-size-small);
}

.stock-footer__count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Cost editor forms — Warm Four #129: a fieldset stack (dashed radius-12
   fieldsets, kicker legends) inside a single paper card; tangerine pill
   submits. Serves Sold as-is / New SKU (.cost-editor) and the SKU editor's
   cost column. */
.cost-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 24px;
}

.cost-editor h1 {
  margin: 0;
  line-height: 1.15;
}

.cost-editor .day {
  margin: 0;
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

.cost-editor section {
  margin-bottom: 0;
}

.cost-form,
.cost-current,
.cost-derived {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.cost-form form {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-3);
}

.cost-form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-3);
  margin: 0;
  padding: 14px 16px;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
  border-radius: var(--tb-radius-2);
}

.cost-form legend {
  padding: 0 8px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.cost-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.cost-form input[type="number"],
.cost-form input[type="text"],
.cost-form select {
  font: inherit;
  color: var(--tb-ink);
  padding: 7px 10px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-1);
  background: var(--tb-paper-card);
}

.cost-form label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.cost-form button[type="submit"] {
  align-self: flex-start;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 9px 22px;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  cursor: pointer;
}

.cost-form button[type="submit"]:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.cost-preview {
  min-height: 1.4rem;
  font-size: 1rem;
}

.cost-preview__net,
.cost-current__net {
  font-size: 1.1rem;
}

.cost-form__hint {
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

/* Unpriced leaves read as attention — tangerine ink, no red hue. */
.cost-derived__unpriced {
  color: var(--tb-tangerine-ink);
}

.cost-breakdown {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.cost-breakdown th {
  text-align: left;
  padding: 0 10px 6px 0;
  border-bottom: var(--tb-keyline-thin) solid var(--tb-ink);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
}

.cost-breakdown td {
  padding: 8px 10px 8px 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
  font-size: var(--tb-size-small);
  font-variant-numeric: tabular-nums;
}

.cost-breakdown tr:last-child td {
  border-bottom: 0;
}

.cost-breakdown__row--unpriced td {
  color: var(--tb-tangerine-ink);
}

/* Bulk upload — Warm Four #129: three numbered step cards (ink step
   numerals in circles, Hobo step headings, dashed dropzone on paper-warm,
   tangerine pill CTAs). Progressive flow and hooks unchanged (issue #49). */
.upload {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 24px;
}

.upload__header {
  margin: 0;
}

.upload__title {
  margin: 0;
  font-size: var(--tb-size-h1);
  line-height: 1.08;
}

.upload__kicker {
  margin: 4px 0 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

/* APPLIED confirmation — the paper-warm dot-banner dialect. */
.upload-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tb-space-3);
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
}

.upload-applied__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.1em;
  color: var(--tb-ink);
}

.upload-applied__label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-tangerine);
}

.upload-applied__log {
  font-size: var(--tb-size-small);
  text-underline-offset: 3px;
}

.upload-step {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.upload-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.upload-step__numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tb-ink);
  color: var(--tb-paper);
  font-family: var(--tb-font-display);
  font-size: 18px;
  line-height: 1;
}

.upload-step__label {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
}

.upload-step__copy {
  margin: 0 0 14px;
  font-size: var(--tb-size-small);
  color: var(--muted);
  line-height: 1.6;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-3);
}

.upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 26px 16px;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
  border-radius: var(--tb-radius-2);
  background: var(--tb-paper-warm);
  cursor: pointer;
  text-align: center;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  color: var(--muted);
}

.upload-dropzone:hover {
  border-color: var(--tb-tangerine);
}

.upload-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.upload-dropzone__filename {
  color: var(--tb-ink);
}

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

.upload-step--gated {
  background: transparent;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.upload-step-placeholder__copy {
  margin: 0;
  font-size: var(--tb-size-small);
  color: var(--muted);
  text-align: center;
}

/* Pill CTAs — tangerine primary, outlined ghost secondary. */
.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 9px 22px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
}

.upload-btn--primary {
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
}

.upload-btn--primary:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.upload-btn--secondary {
  background: transparent;
  color: var(--tb-ink);
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  padding: 7.5px 20.5px;
}

.upload-btn--secondary:hover {
  border-color: var(--tb-tangerine);
}

.upload-section-label {
  margin: 14px 0 4px;
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.upload-section-label--errors {
  color: var(--tb-tangerine-ink);
}

.upload-diff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.upload-diff {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--tb-size-small);
  padding: 0.5rem 0;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.upload-diff__name {
  min-width: 0;
}

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

.upload-diff__values {
  text-align: right;
  flex-shrink: 0;
}

.upload-diff__old {
  text-decoration: line-through;
  color: var(--muted);
}

.upload-diff__new {
  color: var(--tb-ink);
}

.upload-error__message {
  white-space: normal;
  text-align: right;
  color: var(--tb-tangerine-ink);
}

.upload-confirm {
  margin-top: 0.75rem;
}

/* SKU editor — Warm Four #129: detail screen; the recipe card (desktop
   span 7) beside the derived-cost / new-cost column (span 5); the health
   dot rides the h1; SAVED as a paper-warm banner. */
.review.sku-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 24px;
}

.sku-editor__header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1.15;
}

.sku-editor__meta {
  margin: 4px 0 0;
}

.sku-editor__meta .sku-row__id {
  display: inline;
}

.sku-editor__saved {
  margin: 0;
  padding: 10px 16px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  font-size: var(--tb-size-small);
}

.sku-editor__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sku-editor__cost {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sku-editor section {
  margin-bottom: 0;
}

.recipe-editor {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

/* Card headings in the Stock detail scopes drop the base h2 underline. */
.sku-editor h2,
.cost-editor h2,
.upload h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

.recipe-rows {
  list-style: none;
  margin: 0 0 var(--tb-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recipe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.recipe-row select,
.recipe-editor input[type="text"],
.recipe-editor input[type="number"],
.sku-create input,
.sku-create select {
  font: inherit;
  color: var(--tb-ink);
  padding: 7px 10px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-1);
  background: var(--tb-paper-card);
}

.recipe-row input[name="quantity"] {
  width: 7.5rem;
}

/* Row controls — quiet outlined round buttons. */
.recipe-row__up,
.recipe-row__down,
.recipe-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.recipe-row__up:hover,
.recipe-row__down:hover,
.recipe-row__remove:hover {
  border-color: var(--tb-ink);
  color: var(--tb-ink);
}

/* + ADD INGREDIENT ghost pill; SAVE RECIPE tangerine pill. */
.recipe-row__add {
  align-self: flex-start;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 7.5px 20.5px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-ink);
  cursor: pointer;
}

.recipe-row__add:hover {
  border-color: var(--tb-tangerine);
}

.recipe-editor form {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-3);
}

.recipe-editor label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.recipe-editor .prep-field,
.recipe-editor .yield-field {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.yield-field__badge {
  display: inline-block;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-tangerine-ink);
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.recipe-editor button[type="submit"] {
  align-self: flex-start;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 9px 22px;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  cursor: pointer;
}

.recipe-editor button[type="submit"]:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

/* Delete recipe — the quiet, outlined destructive affordance. */
.recipe-delete {
  margin: 14px 0 0;
}

.recipe-delete__button {
  font: inherit;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 6px 15px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.recipe-delete__button:hover {
  border-color: var(--tb-tangerine-ink);
  color: var(--tb-tangerine-ink);
}

/* Inline "Create new SKU…" sub-form — paper-warm sunk panel. */
.sku-create {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 10px;
  border-radius: var(--tb-radius-2);
  background: var(--tb-paper-warm);
}

.sku-create[hidden] {
  display: none;
}

.sku-create__submit {
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  cursor: pointer;
}

.recipe-preview__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.recipe-preview__total {
  margin: 0.3rem 0 0;
  font-size: 1rem;
}

/* --- Warm Four #131: Log & Admin (Variant A "Counter grid") ----------------
   Extends the landed Reports/Stock Counter dialect: titlebars, 7/5 hero
   grids, dashed-rule list cards, fieldset-card forms, 860px import column.
   Routes, form actions, and section anchors are untouched. */

/* Audit — titlebar + chips + 7/5 hero/review + dashed entry card. */
.review.audit {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.audit__titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
}

.audit__kicker {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.audit-head {
  margin: 0;
}

.audit-head__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h1);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.08;
  text-transform: none;
}

.audit-head__subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
}

.audit__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.audit__chip {
  padding: 6px 15px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.audit__chip:hover {
  color: var(--tb-ink);
  border-color: var(--tb-ink);
}

.audit__chip--active {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: var(--tb-paper);
  font-weight: var(--tb-weight-bold);
  pointer-events: none;
}

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

.audit-hero,
.audit-unreviewed {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
  margin: 0;
  border: 0;
}

.audit-hero__kicker,
.audit-unreviewed__kicker {
  margin: 0 0 6px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.audit-hero__numeral {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: 48px;
  line-height: 1.1;
}

.audit-hero__of {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.audit-hero__note,
.audit-unreviewed__note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

.audit-unreviewed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.audit-unreviewed__mark {
  padding: 9px 22px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-midnight);
  background: var(--tb-tangerine);
  border: 0;
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
  white-space: nowrap;
}

.audit-unreviewed__mark:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.audit-unreviewed__mark:active {
  transform: translateY(1px);
}

/* Entries: one paper card, dashed rules between rows (not separate cards). */
.audit-entries {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  display: block;
}

.audit-row {
  padding: 13px 0;
  background: transparent;
  border: 0;
}

.audit-row + .audit-row {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

/* Unreviewed marker is the dot ramp (filled tangerine) + NEW chip —
   the mustard left keyline is retired. Class kept for test contracts. */
.audit-row--unreviewed {
  border-left: 0;
}

.audit-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-row__who-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.audit-row__who {
  font-weight: var(--tb-weight-bold);
  color: var(--tb-ink);
}

.audit-row__new {
  display: inline-block;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-tangerine-ink);
  background: transparent;
  font-size: 10px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}

.audit-row__when {
  color: var(--muted);
  font-size: var(--tb-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audit-row__what {
  margin: 4px 0 0;
  font-size: var(--tb-size-small);
}

.audit-row__table,
.audit-row__kind {
  color: var(--muted);
}

.audit-changes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.audit-changes__row {
  font-size: var(--tb-size-small);
  padding: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}

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

.audit-changes__old {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--muted);
}

.audit-changes__new {
  font-weight: var(--tb-weight-bold);
}

.audit-row__reason {
  margin: 6px 0 0;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.audit-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.audit-row__session-form {
  margin-right: auto;
}

.audit-row__actions form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.audit-row__reason-input {
  width: 9rem;
  padding: 5px 8px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-1);
  background: var(--tb-paper-card);
  color: var(--tb-ink);
}

.audit-row__revert,
.audit-row__revert-session {
  padding: 3.5px 12.5px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-ink);
  background: transparent;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
}

.audit-row__revert:hover,
.audit-row__revert-session:hover {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-tangerine);
}

.audit-row__revert:active,
.audit-row__revert-session:active {
  transform: translateY(1px);
}

/* Quiet ink — teal retired. */
.audit-row__reverted {
  padding: 0;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Admin landing — 7/5 hero + latest-change over grouped link card. */
.review.admin {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.admin__titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
}

.admin__kicker {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.admin__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h1);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.08;
}

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

.admin-hero,
.admin-latest {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.admin-hero__kicker,
.admin-latest__kicker {
  margin: 0 0 6px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.admin-hero__heading {
  margin: 0 0 4px;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.admin__note,
.admin-latest__note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

.admin-latest__who {
  color: var(--tb-ink);
}

.admin-latest__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-tangerine-ink);
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.admin-latest__cta {
  margin: 14px 0 0;
}

.admin-latest__link {
  display: inline-block;
  padding: 7.5px 20.5px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-ink);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
}

.admin-latest__link:hover {
  border-color: var(--tb-tangerine);
}

.admin-links__list {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-links__group {
  padding: 14px 0 6px;
}

.admin-links__group + .admin-links__row,
.admin-links__row + .admin-links__group {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.admin-links__group-label {
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-ink);
}

.admin-links__row {
  padding: 13px 0;
}

.admin-links__row + .admin-links__row {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.admin-links__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-links__link {
  font-weight: var(--tb-weight-bold);
  color: inherit;
  text-decoration: none;
}

.admin-links__link:hover {
  text-decoration: underline;
  color: var(--tb-tangerine-ink);
}

.admin-links__fig {
  font-size: var(--tb-size-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-links__meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
}

/* Shared Admin sub-page dialect (fixed costs / suppliers / buckets / spend). */
.review.admin-sub {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.admin-sub__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
}

.admin-sub__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--tb-ink);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: var(--tb-weight-regular);
}

.admin-sub__back-label {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.admin-sub__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h1);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.08;
  text-transform: none;
}

.admin-sub__tag {
  display: inline-block;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  margin-left: 0;
}

.admin-sub__intro {
  margin: 0;
  font-size: var(--tb-size-small);
  color: var(--muted);
  line-height: 1.6;
}

.admin-sub__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-sub__form {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  border: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-sub__form h2,
.fixed-cost-form__heading,
.spend-bucket-form__heading,
.cash-spend-form__heading {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  color: var(--tb-ink);
  text-transform: none;
}

.admin-sub__fform {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-sub__fform fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
  border-radius: var(--tb-radius-2);
}

.admin-sub__fform legend {
  padding: 0 8px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.fixed-cost-form__row,
.spend-bucket-form__row,
.cash-spend-form__row,
.cash-spend-filter__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fixed-cost-form__label,
.spend-bucket-form__label,
.cash-spend-form__label,
.cash-spend-filter__label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.fixed-cost-form__label span,
.spend-bucket-form__label span,
.cash-spend-form__label span,
.cash-spend-filter__label span {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.admin-sub__fform input,
.admin-sub__fform select,
.fixed-cost-form input,
.fixed-cost-form select,
.spend-bucket-form input,
.cash-spend-form input,
.cash-spend-form select,
.cash-spend-filter input,
.cash-spend-filter select,
.supplier-edit-form input {
  width: 100%;
  font: inherit;
  font-size: var(--tb-size-small);
  color: var(--tb-ink);
  padding: 7px 10px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-1);
  background: var(--tb-paper-card);
}

.admin-sub__fform input:focus-visible,
.admin-sub__fform select:focus-visible {
  outline: var(--tb-keyline) solid var(--tb-tangerine);
  outline-offset: 2px;
}

.cash-spend-form__label--wide {
  grid-column: 1 / -1;
}

.cash-spend-form__check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.cash-spend-form__check input {
  width: auto;
}

.fixed-cost-form__error,
.spend-bucket-form__error,
.cash-spend-form__error {
  margin: 0;
  font-size: var(--tb-size-small);
  font-weight: var(--tb-weight-bold);
  color: var(--tb-tangerine-ink);
}

.fixed-cost-form__save,
.spend-bucket-form__save,
.cash-spend-form__save,
.cash-spend-filter__apply {
  align-self: flex-start;
  min-height: 0;
  padding: 9px 22px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  cursor: pointer;
}

.fixed-cost-form__save:hover,
.spend-bucket-form__save:hover,
.cash-spend-form__save:hover,
.cash-spend-filter__apply:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.cash-spend-filter__clear {
  align-self: center;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.admin-sub__list {
  background: transparent;
  border: 0;
  padding: 0;
}

.admin-sub__dlist {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
}

.admin-sub__list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 6px;
}

.admin-sub__list-kicker,
.fixed-cost-list-section__title,
.spend-bucket-list-section__title,
.cash-spend-list-section__title {
  margin: 0;
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-ink);
}

.admin-sub__list-fig,
.fixed-cost-list-section__recurring-total {
  margin: 0;
  font-size: var(--tb-size-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-sub__row {
  padding: 13px 0;
  border: 0;
}

.admin-sub__row + .admin-sub__row,
.admin-sub__list-head + .admin-sub__row {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.admin-sub__row--ended .admin-sub__row-name,
.fixed-cost-list__row--ended .fixed-cost-list__label,
.spend-bucket-list__row--retired .spend-bucket-list__name {
  color: var(--muted);
  text-decoration: line-through;
}

.admin-sub__row-top,
.admin-sub__row-bottom,
.fixed-cost-list__top,
.fixed-cost-list__bottom,
.spend-bucket-list__top,
.spend-bucket-list__bottom,
.cash-spend-list__top,
.cash-spend-list__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-sub__row-bottom,
.fixed-cost-list__bottom,
.spend-bucket-list__bottom,
.cash-spend-list__bottom {
  align-items: center;
  margin-top: 4px;
}

.admin-sub__row-name,
.fixed-cost-list__label,
.spend-bucket-list__name,
.cash-spend-list__supplier {
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-size-body);
  color: inherit;
}

.admin-sub__row-fig,
.fixed-cost-list__amount,
.cash-spend-list__amount {
  font-variant-numeric: tabular-nums;
  font-size: var(--tb-size-small);
  white-space: nowrap;
  text-align: right;
}

.admin-sub__row-meta,
.fixed-cost-list__meta,
.fixed-cost-list__per,
.spend-bucket-list__meta,
.cash-spend-list__description,
.cash-spend-list__date {
  color: var(--muted);
  font-size: var(--tb-size-small);
}

.admin-sub__row-actions,
.fixed-cost-list__actions,
.spend-bucket-list__actions,
.cash-spend-list__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.admin-sub__row-actions form,
.fixed-cost-list__actions form,
.spend-bucket-list__actions form,
.cash-spend-list__actions form {
  display: inline;
  margin: 0;
}

.supplier-edit-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.supplier-edit-form input {
  width: 8rem;
}

.admin-sub__status,
.fixed-cost-list__status,
.cash-spend-list__bucket {
  display: inline-block;
  padding: 1px 8px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}

.fixed-cost-list__status--active,
.fixed-cost-list__status--muted {
  color: var(--muted);
}

.admin-sub__ghost,
.fixed-cost-list__end,
.fixed-cost-list__delete,
.spend-bucket-list__retire,
.spend-bucket-list__delete,
.cash-spend-list__delete,
.cash-spend-list__edit-button {
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 3.5px 12.5px;
  background: transparent;
  color: var(--tb-ink);
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
  list-style: none;
}

.admin-sub__ghost::-webkit-details-marker,
.cash-spend-list__edit-button::-webkit-details-marker {
  display: none;
}

.admin-sub__ghost:hover,
.fixed-cost-list__end:hover,
.fixed-cost-list__delete:hover,
.spend-bucket-list__retire:hover,
.spend-bucket-list__delete:hover,
.cash-spend-list__delete:hover,
.cash-spend-list__edit-button:hover {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-tangerine);
}

.admin-sub__list-foot,
.admin-sub__empty,
.fixed-cost-list-section__footer,
.fixed-cost-list--empty,
.spend-bucket-list-section__footer,
.spend-bucket-list--empty,
.cash-spend-list-section__footer,
.cash-spend-list--empty {
  margin: 0;
  padding: 12px 0 8px;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  margin-top: 6px;
  list-style: none;
}

.spend-bucket-list__row--retired {
  color: inherit;
}

.cash-spend-hero {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.cash-spend-hero__kicker {
  margin: 0 0 6px;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.cash-spend-hero__numeral {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: 48px;
  line-height: 1.1;
}

.cash-spend-hero__of {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.cash-spend-hero__note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

.cash-spend-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.cash-spend-hero__chip {
  padding: 6px 15px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.cash-spend-hero__chip:hover {
  color: var(--tb-ink);
  border-color: var(--tb-ink);
}

.cash-spend-hero__chip--active {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: var(--tb-paper);
  font-weight: var(--tb-weight-bold);
  pointer-events: none;
}

.cash-spend-filter {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.cash-spend-filter__heading {
  margin: 0 0 12px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.cash-spend-list__edit-form {
  margin-top: 10px;
  padding: 12px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
}

/* Cash-spend import — FULL treatment (860px step-card column). */
.review.cash-spend-import {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.cash-spend-import__header {
  margin: 0;
}

.cash-spend-import__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h1);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.08;
}

.cash-spend-import__kicker {
  margin: 4px 0 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.cash-spend-import__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
}

.cash-spend-import__applied-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cash-spend-import__applied-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-tangerine);
}

.cash-spend-import__error {
  margin: 0;
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
}

.cash-spend-import__step {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 20px;
}

.cash-spend-import__step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cash-spend-import__numeral {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: 50%;
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-size-small);
}

.cash-spend-import__step-label {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
}

.cash-spend-import__copy {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

.cash-spend-import__step--gated {
  opacity: 0.55;
}

.cash-spend-import__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 12px 0;
  padding: 26px 16px;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
  border-radius: var(--tb-radius-2);
  background: var(--tb-paper-warm);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.cash-spend-import__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.cash-spend-import__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cash-spend-import__btn {
  display: inline-block;
  align-self: flex-start;
  padding: 9px 22px;
  border-radius: var(--tb-radius-pill);
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.cash-spend-import__btn--primary {
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
}

.cash-spend-import__btn--primary:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

.cash-spend-import__btn--secondary {
  background: transparent;
  color: var(--tb-ink);
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  padding: 7.5px 20.5px;
}

.cash-spend-import__btn--secondary:hover {
  border-color: var(--tb-tangerine);
}

.cash-spend-import__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
}

.cash-spend-import__banner-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cash-spend-import__banner-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
}

.cash-spend-import__section-label {
  margin: 0 0 6px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.cash-spend-import__section-label--errors {
  color: var(--tb-tangerine-ink);
}

.cash-spend-import__diff-list,
.cash-spend-import__invoice-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.cash-spend-import__diff {
  padding: 7px 0;
  font-size: var(--tb-size-small);
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.cash-spend-import__diff:first-child {
  border-top: 0;
}

.cash-spend-import__diff-name {
  color: var(--muted);
  margin-right: 8px;
}

.cash-spend-import__invoice-list {
  padding: 4px 16px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  margin-bottom: 14px;
}

.cash-spend-import__invoice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 0;
  font-size: var(--tb-size-small);
}

.cash-spend-import__invoice + .cash-spend-import__invoice {
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.cash-spend-import__invoice-date,
.cash-spend-import__invoice-count {
  color: var(--muted);
}

.cash-spend-import__invoice-supplier {
  font-weight: var(--tb-weight-bold);
}

.cash-spend-import__invoice-total {
  font-variant-numeric: tabular-nums;
}

.cash-spend-import__placeholder,
.cash-spend-import__empty-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--tb-size-small);
}

.cash-spend-import__confirm {
  margin-top: 8px;
}

@media (max-width: 520px) {
  .fixed-cost-form__row,
  .spend-bucket-form__row,
  .cash-spend-form__row,
  .cash-spend-filter__row {
    grid-template-columns: 1fr;
  }
}


.fixed-costs-block__lines {
  list-style: none;
  padding: 0;
}

.fixed-costs-block__line {
  padding: 0.25rem 0;
}

.fixed-costs-block__apportioned,
.fixed-costs-block__estimate-note,
.fixed-costs-block__entity-note,
.fixed-costs-block__empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.headline__net-profit {
  font-weight: var(--tb-weight-bold);
  color: var(--tb-ink);
}

/* Drill-down: breadcrumb + day-by-day tables. */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0 0 var(--tb-space-3);
  padding: 0;
  font-size: 0.9rem;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "\203A";
  margin: 0 0.4rem;
  color: var(--muted);
}

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

.period-days__table,
.item-days__table {
  width: 100%;
  border-collapse: collapse;
}

.period-days__table th,
.period-days__table td,
.item-days__table th,
.item-days__table td {
  text-align: left;
  padding: 0.4rem 0.25rem;
  border-bottom: var(--tb-keyline-thin) solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.period-days__table th,
.item-days__table th {
  font-size: var(--tb-size-small);
  color: var(--muted);
  font-weight: var(--tb-weight-bold);
}

/* Warm Four #129: BELOW TARGET is a filled tangerine chip; on target is
   plain muted weight — no hue channel. */
.item-performance__below-target {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
  font-size: 10px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}

.item-performance__on-target {
  color: var(--muted);
}

.edit-recipe__link {
  font-weight: var(--tb-weight-bold);
}

/* Trends (Warm Four #127) — metric/span chips are outlined pills, ink-filled
   when active. */
.trend-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--tb-space-3);
}

.trend-picker__link {
  padding: 6px 15px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-pill);
  text-decoration: none;
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.trend-picker__link:hover {
  color: var(--tb-ink);
  border-color: var(--tb-ink);
  background: transparent;
}

.trend-picker__link--active {
  background: var(--tb-ink);
  color: var(--tb-paper);
  font-weight: var(--tb-weight-bold);
  border-color: var(--tb-ink);
  pointer-events: none;
}

.trend-sparkline {
  display: block;
  width: 100%;
  height: 120px;
  margin-bottom: 0.5rem;
  stroke: var(--tb-ink);
  stroke-width: 2;
  background: transparent;
}

.trend-bars {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.trend-bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

a.trend-bar:hover .trend-bar__fill {
  background: var(--tb-tangerine);
}

/* Monochrome bars (#127): ink fills with softly rounded tops; tangerine is
   reserved for hover — the only accent. */
.trend-bar__fill {
  display: block;
  height: calc(var(--bar-height, 0%) * 0.6 + 3px);
  background: var(--tb-ink);
  border-radius: 4px 4px 0 0;
}

.trend-bar__value {
  order: -1;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-bar__label {
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-bars--weekday {
  gap: 0.5rem;
}

.trend-chart__note {
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- Wave 3 #47: Reports (period / month / trends) ----------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The Reports tabs reuse the pill-tray base above; the variant only stops
   the tray stretching (it shares the title row with the screen name) and
   keeps the four pills on one line where they fit (#127). */
.mode-switcher--reports {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 0;
}

.mode-switcher--reports .mode-switcher__link {
  padding: 8px 20px;
}

/* Range navigator (Warm Four #127) — round outlined arrow buttons around a
   paper-card date-chip pill, matching Today's day navigator dialect. */
.range-nav--arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--tb-space-4);
}

.range-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-ink);
  text-decoration: none;
  font-weight: var(--tb-weight-regular);
  font-size: 15px;
  line-height: 1;
}

.range-nav__arrow--dimmed,
.range-nav__arrow[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.range-nav__label-block {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

.range-nav__kicker {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

/* The visible range reads as a paper-card chip pill (#127). Scoped to the
   arrows variant — the plain range-nav form's label is a flex column. */
.range-nav--arrows .range-nav__label {
  display: inline-block;
  padding: 7px 18px;
  margin-top: 4px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-pill);
  font-size: 13px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.range-nav__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.range-nav--arrows .range-nav__input {
  font-size: var(--tb-size-kicker);
  padding: 5px 8px;
  border: var(--tb-keyline-thin) solid var(--muted);
  border-radius: var(--tb-radius-1);
  background: var(--tb-paper-card);
  color: var(--tb-ink);
}

.range-nav--arrows .range-nav__apply {
  font: inherit;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  padding: 5px 14px;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-ink);
  cursor: pointer;
}

.range-nav--arrows .range-nav__apply:hover {
  background: var(--tb-ink);
  color: var(--tb-paper);
}

/* Gross-margin hero card (Warm Four #125) — flat paper-card, radius 20,
   Hobo hero numeral, dashed-rule stat row, tangerine goal bar. */
.headline--card {
  background: var(--tb-paper-card);
  border: 0;
  border-radius: var(--tb-radius-3);
  padding: 20px;
  margin-bottom: var(--tb-space-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.headline__hero-label {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
}

.headline__hero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.headline__hero-value {
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-hero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.headline__hero-unit {
  color: var(--muted);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.headline--card .headline__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.65rem;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.headline--card .headline__row--net {
  margin-top: 0.65rem;
}

.headline--card .headline__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 0;
}

/* Dashed rules between the three stats (desktop, per the mock). */
@media (min-width: 768px) {
  .headline--card .headline__stat + .headline__stat {
    border-left: var(--tb-keyline-thin) dashed var(--tb-ink);
    padding-left: 16px;
  }
}

.headline--card .headline__stat--end {
  text-align: right;
  margin-left: auto;
}

.headline--card .headline__stat dt {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.headline--card .headline__stat dd {
  margin: 0;
  text-align: inherit;
  font-weight: var(--tb-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Issue #71 honesty callout — appears in the headline card when part of the
   gross-sales revenue carries unknown COGS (unmapped / unknown-price rows).
   Names the implicit zero-COGS assumption rather than hiding it in the math. */
.headline__uncosted-note {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.headline__uncosted-note strong {
  color: var(--tb-tangerine-ink);
}

.headline__uncosted-note a {
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
  text-decoration: underline;
}

.headline__goal {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.headline__goal-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.headline__goal-bar {
  height: 14px;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-paper-warm);
  overflow: hidden;
}

.headline__goal-fill {
  display: block;
  height: 100%;
  background: var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
}

/* Met keeps the same tangerine fill — the status line says MET (Warm Four:
   "good" is plain ink weight, not its own hue). */
.headline__goal-fill--met {
  background: var(--tb-tangerine);
}

.headline__goal-status {
  margin: 0;
  font-size: var(--tb-size-kicker);
  color: var(--muted);
}

.headline__goal-status strong {
  color: var(--tb-ink);
}

/* Segment cards (Warm Four #125) — CAFE·DAY on paper-card, TAPS·NIGHT on
   midnight with moon text and a mustard CM numeral. Kicker row carries the
   RED chip and the single-stroke sun/moon marker; the canonical name is
   kept for assistive tech / assertions but visually retired. */
.segment-cm > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.segment-cm__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.segment-cm__row {
  background: var(--tb-paper-card);
  border: 0;
  border-radius: var(--tb-radius-3);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
}

.segment-cm__row--night {
  background: var(--tb-midnight);
  color: var(--tb-moon);
}

.segment-cm__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.segment-cm__kicker {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--tb-weight-regular);
  color: var(--muted);
}

.segment-cm__row--night .segment-cm__kicker {
  color: var(--tb-moon-muted);
}

.segment-cm__icon {
  margin-left: auto;
  display: flex;
  color: var(--muted);
}

.segment-cm__row--night .segment-cm__icon {
  color: var(--tb-mustard);
}

.segment-cm__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.segment-cm__cm {
  font-family: var(--tb-font-display);
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
}

.segment-cm__row--night .segment-cm__cm {
  color: var(--tb-mustard);
}

.segment-cm__cards .segment-cm__figures {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin: 0;
}

.segment-cm__figure {
  display: flex;
  gap: 6px;
  font-size: var(--tb-size-small);
  color: var(--muted);
}

.segment-cm__row--night .segment-cm__figure {
  color: var(--tb-moon-muted);
}

.segment-cm__figure dt {
  margin: 0;
}

.segment-cm__figure dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--tb-weight-bold);
  color: var(--tb-ink);
}

.segment-cm__row--night .segment-cm__figure dd {
  color: var(--tb-moon);
}

.segment-cm__one-liner {
  margin: 0;
  padding-top: 8px;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.segment-cm__row--night .segment-cm__one-liner {
  border-top-color: var(--tb-moon);
  color: var(--tb-moon-muted);
}

.segment-cm__flagged {
  margin: 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.segment-cm__row--night .segment-cm__flagged {
  color: var(--tb-moon-muted);
}

.segment-cm__note {
  margin: 0.4rem 0 var(--tb-space-4);
  font-size: 0.8rem;
  color: var(--muted);
}

.row-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 var(--tb-space-4);
  padding: 0.85rem 0.9rem;
  background: var(--tb-paper-raised);
  border: var(--tb-keyline) solid var(--tb-ink);
  text-decoration: none;
  color: inherit;
}

.row-link-card:hover {
  background: var(--tb-paper);
}

.row-link-card__label {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--tb-weight-bold);
}

.row-link-card__meta {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
}

/* Needs a fix (Warm Four #125) — the card wrapper `.today__fix-card` wears
   the one 3px tangerine keyline; the sections inside are flat. */
.today__fix-card {
  background: var(--tb-paper-card);
  border: var(--tb-keyline) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-3);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.needs-attention--card {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.needs-attention--card h2 {
  margin: 0 0 4px;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--tb-ink);
  border: 0;
  padding: 0;
}

.needs-attention--card .needs-attention__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--tb-size-small);
  line-height: 1.65;
}

.needs-attention--card .needs-attention__list li {
  margin: 0;
}

.needs-attention__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
  text-decoration: none;
  color: inherit;
}

.needs-attention__row:last-child {
  border-bottom: 0;
}

.needs-attention__what {
  flex: 1 1 auto;
}

.needs-attention__name {
  font-weight: var(--tb-weight-bold);
}

.needs-attention__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.needs-attention__link {
  color: var(--tb-tangerine-ink);
}

/* Below-target list — the dashed-rule sub-section of the fix card. */
.today__fix-card .below-target {
  margin: 0;
  padding-top: 12px;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.today__fix-card .below-target h2 {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-regular);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.today__fix-card .below-target__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--tb-size-small);
}

.today__fix-card .below-target__list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}

.below-target__actual {
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
  white-space: nowrap;
}

/* All chips share one outlined-pill register now (#127); the old stretched
   --primary treatment is retired with the multi-hue palette. */
.trend-picker--chips {
  gap: 6px;
}

.trend-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Chart card headings join the Hobo card-heading register (#127). */
.trend-chart__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--tb-ink);
  font-weight: var(--tb-weight-regular);
  border: 0;
  padding: 0;
}

.trend-chart__span {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

/* Monochrome line chart (#127): ink polyline with ink point dots; the goal
   line and the latest point wear tangerine — the only accent. */
.trend-sparkline {
  stroke: var(--tb-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  background: transparent;
}

.trend-sparkline__goal {
  stroke: var(--tb-tangerine);
  stroke-width: 2;
}

.trend-sparkline__dot {
  fill: var(--tb-ink);
  stroke: none;
}

.trend-sparkline__dot--end {
  fill: var(--tb-tangerine);
}

.weekday-bars {
  list-style: none;
  margin: 0;
  padding: 0;
}

.weekday-bars__row {
  display: grid;
  grid-template-columns: 38px 1fr 62px;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.weekday-bars__day {
  font-size: 0.75rem;
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Warm tracks, ink fills; the strongest day's fill is tangerine (#127). */
.weekday-bars__track {
  display: block;
  height: 12px;
  border: 0;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-paper-warm);
  overflow: hidden;
}

.weekday-bars__fill {
  display: block;
  height: 100%;
  border-radius: var(--tb-radius-pill);
  background: var(--tb-ink);
}

.weekday-bars__row--best .weekday-bars__fill {
  background: var(--tb-tangerine);
}

.weekday-bars__value {
  font-size: 0.8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Chart cards join the paper-card register (#127). */
.reports .trend-chart {
  background: var(--tb-paper-card);
  border: 0;
  border-radius: var(--tb-radius-3);
  padding: 22px;
  margin-bottom: var(--tb-space-4);
}

/* --- Wave 3 #88: report-surface component vocabulary (look-lift slice 2) ---
   The lifted vocabulary for the report surfaces (Period, Month, and the
   Profit-Report screen #84). Additions only — no existing class is rewritten.
   Every value consumes a --tb-* token (ADR-0006); no hardcoded hex anywhere.
   `.tb-main` (mobile 480px) and `.tb-main--wide` (960px) stay unchanged;
   `.tb-main--report` is the third width, parallel to them. The classes land
   dead here and are proven by consumption in slices 3 and 4. */

/* In-page Tangerine Taps wordmark — distinct from the "Tangerine Books"
   chrome header above it. Sits inside the report content column. */
.report-header {
  margin: 0 0 var(--tb-space-3);
  padding-bottom: 0;
  border-bottom: 0;
}

.report-header__h1 {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: 1.75rem;
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.02em;
  line-height: var(--tb-leading-tight);
}

/* The "Taps" word wears tango. */
.report-header__h1 b {
  color: var(--tb-tango);
  font-weight: var(--tb-weight-bold);
}

/* The "— Profit Report" suffix drops back to the body face. */
.report-header__h1 .report-header__suffix {
  font-family: var(--tb-font-body);
  font-weight: var(--tb-weight-regular);
  color: var(--tb-ink-soft);
  font-size: 1rem;
  letter-spacing: 0;
}

.report-header__sub {
  margin: 0.3rem 0 0;
  font-size: var(--tb-size-small);
  color: var(--tb-ink-soft);
  letter-spacing: 0.02em;
}

/* Editorial / honesty callout — Warm Four (#127): the paper-warm dot-banner
   dialect (tangerine dot + uppercase kicker), same register as the
   config-changes banner. Distinct from .stale-banner (midnight alert) and
   .headline__uncosted-note (inline footnote). */
.report-banner {
  background: var(--tb-paper-warm);
  border: 0;
  border-radius: var(--tb-radius-2);
  padding: 12px 18px;
  margin: 0 0 var(--tb-space-4);
  font-size: var(--tb-size-small);
  line-height: 1.5;
}

.report-banner::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-tangerine);
  margin-right: 9px;
}

.report-banner__kicker {
  display: inline;
  font-family: var(--tb-font-body);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-tangerine-ink);
  font-size: 10px;
  margin-right: 8px;
}

.report-banner b {
  font-weight: var(--tb-weight-bold);
}

/* The report-surface card register — square, 3px ink keyline, cream-raised.
   Wraps every chart and P&L panel so they share one card form. */
.report-panel {
  background: var(--tb-paper-raised);
  border: var(--tb-keyline) solid var(--tb-ink);
  padding: var(--tb-space-4);
  margin: 0 0 var(--tb-space-4);
}

.report-panel__title {
  margin: 0 0 var(--tb-space-3);
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-bold);
  letter-spacing: 0.01em;
}

/* Kicker variant drops to body face, uppercase tangerine-ink. */
.report-panel__title--kicker {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--tb-tangerine-ink);
}

.report-panel__note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--tb-ink-soft);
  line-height: 1.5;
}

/* Responsive tile grid — reserved for the Profit-Report screen (#84); ships
   now so #84 composes against a stable token. No Period/Month surface renders
   tiles in this spec. */
/* Warm Four (#127): 2×2 on mobile, one row of four on desktop; paper cards
   with Hobo values; negative values read tangerine-ink. */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 var(--tb-space-4);
}

.tile {
  background: var(--tb-paper-card);
  border: 0;
  border-radius: var(--tb-radius-3);
  padding: 16px 18px;
}

.tile__label {
  margin: 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.tile__value {
  font-family: var(--tb-font-display);
  font-size: 26px;
  font-weight: var(--tb-weight-regular);
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.tile__unit {
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.tile__sub {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}

.tile--good .tile__value { color: var(--tb-ink); }
.tile--bad .tile__value { color: var(--tb-tangerine-ink); }
.tile--pend .tile__value { color: var(--muted); }

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* P&L table. Joins .segment-cm / .period-days__table in the 1px ink internal-
   rules register. Row variants make the two-lens pattern possible (#85). */
.pnl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--tb-size-small);
}

/* Warm Four (#127): receipt-table register — muted uppercase column heads,
   1.5px dashed internal rules, bold right-aligned numerals. */
.pnl thead th {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
  text-align: left;
  padding: 0 8px 8px 0;
}

.pnl td,
.pnl tbody th {
  padding: 9px 8px 9px 0;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  text-align: left;
}

.pnl tbody th {
  font-weight: var(--tb-weight-bold);
}

.pnl td.num {
  text-align: right;
  padding-right: 0;
  font-weight: var(--tb-weight-bold);
}

.pnl__row--major td {
  font-weight: var(--tb-weight-bold);
}

.pnl__row--sub td {
  color: var(--muted);
  padding-left: 1.6rem;
  font-size: 0.9rem;
}

.pnl__row--total td {
  font-weight: var(--tb-weight-bold);
  background: var(--tb-paper-warm);
}

.pnl__row--ghost td {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: var(--tb-weight-regular);
}

.pnl__row--neg td.num {
  color: var(--tb-tangerine-ink);
}

.pnl__note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--tb-ink-soft);
  line-height: 1.5;
}

.pnl__note i {
  font-style: italic;
}

/* P&L block wrapper (#114): the section that carries the two-lens .pnl table
   on the Profit Report. The wrapper owns the heading and the spacing between
   the tiles above and the table below; the table itself reuses the shared
   .pnl styles already defined. */
/* Warm Four (#127): the two-lens panel is a paper card — grid span 7
   beside spend-by-category on desktop. */
.pnl-block {
  margin: 0 0 var(--tb-space-4);
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.pnl-block__h {
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}

/* The honesty callout sits inside the P&L block, just under the table. Reuses
   .headline__uncosted-note (#71 / ADR-0008) so the labelling matches the
   period/day headlines — same tango left-rule, same voice. */
.pnl-block .headline__uncosted-note {
  margin-top: 0.6rem;
}

/* Bestseller rankings (#116, parent #112) — two sales-side lists side by side:
   top-N by revenue (THB) and top-N by units. Both share the same aggregation,
   rendered as ordered lists (rank is meaningful, so <ol> not <ul>). Mobile-
   first single column, two columns ≥720px, matching .split's register. */
/* Warm Four (#127): one paper card, the two ranked lists 2-up inside on
   desktop, dashed rules between rows, "CM unknown" as an outlined chip. */
.bestsellers {
  margin: 0 0 var(--tb-space-4);
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.bestsellers__head {
  margin: 0 0 14px;
}

.bestsellers__head h2 {
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
  margin: 0 0 4px;
  border: 0;
  padding: 0;
}

.bestsellers__note {
  margin: 0;
  font-size: var(--tb-size-kicker);
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
}

.bestsellers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 768px) {
  .bestsellers__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bestsellers__list {
  background: transparent;
  border: 0;
  padding: 0;
}

.bestsellers__list-h {
  font-family: var(--tb-font-display);
  font-size: 16px;
  font-weight: var(--tb-weight-regular);
  margin: 0 0 8px;
}

.bestsellers__list-unit {
  color: var(--tb-ink-soft);
  font-weight: normal;
}

.bestsellers__items {
  list-style: none;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.bestsellers__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "rank name value"
    "rank sub sub";
  align-items: baseline;
  gap: 0 0.4rem;
  padding: 0.3rem 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.bestsellers__item:last-child {
  border-bottom: none;
}

.bestsellers__rank {
  grid-area: rank;
  color: var(--tb-ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
}

.bestsellers__name {
  grid-area: name;
}

.bestsellers__value {
  grid-area: value;
  text-align: right;
  font-weight: var(--tb-weight-bold);
}

.bestsellers__sub {
  grid-area: sub;
  text-align: right;
  color: var(--tb-ink-soft);
  font-size: 0.8rem;
}

/* "CM unknown" marker — carried inline after the name so it wraps with it.
   Muted tango so it reads as a caveat, not a warning. */
.bestsellers__cm {
  grid-area: name;
  justify-self: start;
  margin-left: 0.35rem;
  font-size: 9px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  color: var(--tb-tangerine-ink);
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-pill);
  padding: 1px 7px;
  white-space: nowrap;
  text-transform: uppercase;
}

.bestsellers__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tb-ink-soft);
}

/* Chart legend + swatch. Swatch is square (--tb-radius: 0), not the HTML's 3px. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--tb-ink-soft);
  margin: 0 0 0.5rem;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.swatch {
  width: 12px;
  height: 12px;
  display: inline-block;
}

/* Split panel pair — single column on mobile, two columns ≥720px.
   Written mobile-first to match the file's convention. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* SVG chart-text classes — scoped under `svg .chart__*` so they don't collide
   with any future HTML-scoped class. Space Mono via the existing body token;
   no --tb-font-data token is introduced (decision 5 of #80). */
svg .chart__grid {
  stroke: var(--tb-ink);
  stroke-width: 1;
  opacity: 0.35;
}

svg .chart__tick {
  font: 11px var(--tb-font-body);
  fill: var(--tb-ink-soft);
}

svg .chart__axis-label {
  font: 12.5px var(--tb-font-body);
  fill: var(--tb-ink);
}

svg .chart__value-label {
  font: var(--tb-weight-bold) 12px var(--tb-font-body);
  fill: var(--tb-ink);
}

svg .chart__peak-label {
  font: var(--tb-weight-bold) 11px var(--tb-font-body);
  fill: var(--tb-ink-soft);
}

svg .chart__bar {
  cursor: pointer;
}

svg .chart__bar:hover {
  filter: brightness(1.08);
}

/* --- Warm Four #125: Today screen layout ----------------------------------
   Mobile-first single column with 18px section gaps; the desktop grids
   (7fr/5fr and 5fr/7fr) land in the 768px block below. */
.review.today {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.today section {
  margin-bottom: 0;
}

.today #review-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.today .breadcrumb__list,
.today .mode-switcher,
.today .config-changes-banner,
.today .stale-banner {
  margin-bottom: 0;
}

.today__titlebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.today__titlebar .day-nav {
  margin-left: auto;
}

.today h1 {
  margin: 0;
  font-size: var(--tb-size-h1);
  line-height: 1.08;
}

.today__subtitle {
  margin: 0;
  font-size: var(--tb-size-small);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

/* "For YYYY-MM-DD" is the date chip's job now; the paragraph stays in the
   DOM (the #review-body swap contract reads it) but is visually retired. */
.today .day {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.today__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.today__row > section {
  margin: 0;
}

/* Row A right column: the segment section stretches so its two cards split
   the hero card's height on desktop. */
.today .segment-cm {
  display: flex;
  flex-direction: column;
}

.today .segment-cm__cards {
  flex: 1 1 auto;
}

.today .headline--card {
  margin-bottom: 0;
}

.today .needs-attention__note {
  margin: 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

/* Respect reduced-motion / no animations (user story 45). Also kill the
   1px press-shift transform so active states stay still. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  button:active,
  .audit-row__revert:active,
  .audit-row__revert-session:active {
    transform: none !important;
  }
}

/* --- 5. Desktop — the one breakpoint (768px) ------------------------------ */
@media (min-width: 768px) {
  :root {
    --tb-header-height: 64px;
    --tb-size-hero: 64px;
  }

  .tb-header {
    padding: 0 var(--tb-gutter-desktop);
  }

  /* Header nav replaces the bottom nav on desktop. */
  .tb-header__nav {
    display: flex;
  }

  .tb-bottomnav {
    display: none;
  }

  body.tb-body {
    padding-bottom: 0;
  }

  /* Desktop content column: 1124px content + 28px gutters each side. */
  .tb-main {
    max-width: calc(var(--tb-content-max-wide) + 2 * var(--tb-gutter-desktop));
    padding: 0 var(--tb-gutter-desktop);
  }

  .review {
    max-width: 720px;
    padding: var(--tb-space-6);
  }

  .review h1 {
    font-size: 1.9rem;
  }

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

  /* Today (Warm Four #125): full-width dashboard grids on the 1124 column. */
  .review.today {
    max-width: none;
    padding: 28px 0 34px;
  }

  .today h1 {
    font-size: 28px;
  }

  .today__row--a {
    grid-template-columns: 7fr 5fr;
  }

  .today__row--b {
    grid-template-columns: 5fr 7fr;
  }

  /* No fix card this morning: the rankings card takes the full row. */
  .today__row--b > .today__rank-card:only-child {
    grid-column: 1 / -1;
  }

  .headline--card {
    padding: 28px;
    gap: 16px;
  }

  .segment-cm__row {
    padding: 20px 24px;
  }

  .segment-cm__cm {
    font-size: 34px;
  }

  .day-nav__arrow {
    width: 34px;
    height: 34px;
  }

  .day-nav__label-text {
    font-size: 13px;
    letter-spacing: var(--tb-tracking-kicker);
    padding: 8px 20px;
  }

  .headline--card .headline__stat dd {
    font-size: 15px;
  }

  /* Login: 420px column, 44px wordmark, roomier panel. */
  .login {
    max-width: calc(420px + 48px);
    padding: var(--tb-space-6) 24px;
    gap: 24px;
  }

  .login__wordmark {
    font-size: 44px;
  }

  .login__kicker {
    font-size: var(--tb-size-small);
    margin-top: 10px;
  }

  .login__panel {
    padding: 28px;
    gap: 18px;
  }

  .login__who-label,
  .login__field-label {
    font-size: var(--tb-size-kicker);
  }

  .login__toggle span {
    font-size: var(--tb-size-small);
  }

  .login__submit {
    font-size: 13px;
  }

  .login__footer p {
    font-size: var(--tb-size-kicker);
  }

  /* Wide tables get more room than the reading column. */
  .tb-main--wide {
    max-width: calc(var(--tb-content-max-wide) + 2 * var(--tb-gutter-desktop));
  }

  /* Report surfaces (Period / Month / Profit-Report) get a third width so the
     P&L table, daily-revenue chart, and spend-by-category chart can breathe
     side-by-side. Parallels .tb-main--wide; .tb-main (mobile) stays default. */
  .tb-main--report {
    max-width: calc(var(--tb-content-max-report) + 2 * var(--tb-gutter-desktop));
  }

  .review.coverage,
  .review.audit {
    max-width: 960px;
  }
}

/* --- Warm Four #127: Reports screens (Variant A "Counter") -----------------
   Period / Month / Trends / Profit implement Today's dialect: mobile-first
   single column with 18px gaps; the desktop 12-col grid (7/5 card spans)
   lands in the 768px block at the end. The Loyverse export/diff pages get
   the FULL treatment (cards, dropzone, pill CTAs, status chips). All test
   anchors and behaviour hooks are untouched — presentation only. */

.review.reports {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.reports section {
  margin-bottom: 0;
}

.reports #review-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reports .breadcrumb__list,
.reports .mode-switcher,
.reports .range-nav--arrows,
.reports .trend-picker,
.reports .headline--card,
.reports .trend-chart,
.reports .pnl-block,
.reports .bestsellers,
.reports .tiles,
.reports .report-header,
.reports .report-banner {
  margin-bottom: 0;
}

/* Breadcrumb joins the uppercase-kicker register. */
.reports .breadcrumb__list {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.reports .breadcrumb__link {
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
  text-decoration: none;
}

/* Title row: screen name + kicker left, the tab tray right. */
.reports__titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
}

.reports__titlebar .report-header {
  margin: 0;
}

.reports h1 {
  margin: 0;
  font-size: var(--tb-size-h1);
  line-height: 1.08;
}

.reports__kicker {
  margin: 2px 0 0;
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

/* Card headings inside the reports scope drop the base h2 underline. */
.reports h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Trends: metric chips left, span chips right, one row where they fit. */
.reports__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}

.reports__chips .trend-picker {
  margin-bottom: 0;
}

/* Segment cards stretch to split the hero card's height on desktop. */
.reports .segment-cm {
  display: flex;
  flex-direction: column;
}

.reports .segment-cm__cards {
  flex: 1 1 auto;
}

/* The fixed-costs card: row-link header, entity note, dashed line items. */
.reports__fixed-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.reports__fixed-card .row-link-card {
  margin: 0;
  padding: 0 0 10px;
  background: transparent;
  border: 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
}

.reports__fixed-card .row-link-card:hover {
  background: transparent;
}

.reports__fixed-card .row-link-card__meta {
  color: var(--tb-tangerine-ink);
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-size-kicker);
}

.reports__fixed-card .segment-cm__note {
  margin: 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.reports .fixed-costs-block {
  margin: 0;
}

.reports .fixed-costs-block__line {
  padding: 8px 0;
  border-bottom: var(--tb-keyline-thin) dashed var(--tb-ink);
  font-size: var(--tb-size-small);
}

.reports .fixed-costs-block__line:last-child {
  border-bottom: 0;
}

.reports .fixed-costs-block__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-top: 10px;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  font-size: var(--tb-size-body);
}

.reports .fixed-costs-block__apportioned,
.reports .fixed-costs-block__estimate-note,
.reports .fixed-costs-block__entity-note,
.reports .fixed-costs-block__empty {
  margin: 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
}

/* Day-by-day: the wide receipt table lives inside a radius-20 card with
   dashed internal rules (per the handoff's "Remaining screens" note). */
.reports .period-days {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
  overflow-x: auto;
}

.reports .period-days h2 {
  margin: 0 0 10px;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h2);
  font-weight: var(--tb-weight-regular);
}

.reports .period-days__table th {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
  border-bottom: 0;
  padding: 0 8px 8px 0;
}

.reports .period-days__table td {
  border-bottom: 0;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  padding: 8px 8px 8px 0;
  font-size: var(--tb-size-small);
}

.reports .period-days__link {
  font-weight: var(--tb-weight-bold);
  text-decoration: none;
}

/* Needs a fix — the card wears the one 3px tangerine keyline (Today's
   dialect); on Today the wrapper .today__fix-card carries it instead. */
.reports .needs-attention--card {
  background: var(--tb-paper-card);
  border: var(--tb-keyline) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.reports .needs-attention--card .needs-attention__note {
  margin: 0 0 8px;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.reports .needs-attention__detail,
.reports .needs-attention__reason {
  font-size: var(--tb-size-kicker);
  color: var(--muted);
}

/* Chart card notes. */
.reports .trend-chart__note,
.reports .trend-chart__empty {
  margin: 12px 0 0;
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

.reports .pnl__note {
  font-size: var(--tb-size-kicker);
  line-height: 1.6;
  color: var(--muted);
}

/* --- Loyverse export / diff pages: FULL treatment (#127) ------------------ */

.review.loyverse-export {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  padding: 18px 18px 24px;
}

.loyverse-export section {
  margin-bottom: 0;
}

/* Title row: back link, Hobo title, ADMIN outline chip. */
.loyverse-export__subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.loyverse-export__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tb-tangerine-ink);
  white-space: nowrap;
}

.loyverse-export__title {
  margin: 0;
  font-family: var(--tb-font-display);
  font-size: var(--tb-size-h1);
  font-weight: var(--tb-weight-regular);
  line-height: 1.08;
}

.loyverse-export__admin-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  border: var(--tb-keyline-thin) solid var(--tb-ink);
  border-radius: var(--tb-radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.loyverse-export__intro,
.loyverse-export__summary {
  margin: 0;
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

/* Drift badge — the paper-warm dot-banner dialect. */
.loyverse-export__drift-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 12px 18px;
  background: var(--tb-paper-warm);
  border-radius: var(--tb-radius-2);
  font-size: var(--tb-size-small);
  line-height: 1.5;
}

.loyverse-export__drift-badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tb-tangerine);
}

.loyverse-export__error {
  margin: 0;
  padding: 12px 18px;
  border: var(--tb-keyline-thin) solid var(--tb-tangerine);
  border-radius: var(--tb-radius-2);
  background: var(--tb-paper-card);
  font-size: var(--tb-size-small);
  line-height: 1.6;
}

/* Step cards. */
.loyverse-export__form,
.loyverse-export__diff,
.loyverse-export__confirm {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.loyverse-export__step-label {
  margin: 0 0 8px;
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-kicker);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding-bottom: 0;
}

.loyverse-export__step-copy {
  margin: 0 0 14px;
  font-size: var(--tb-size-small);
  color: var(--muted);
  line-height: 1.6;
}

/* Upload dropzone — dashed 1.5px border on paper-warm, radius 12. */
.loyverse-export__upload {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.loyverse-export__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 34px 18px;
  border: var(--tb-keyline-thin) dashed var(--tb-ink);
  border-radius: var(--tb-radius-2);
  background: var(--tb-paper-warm);
  text-align: center;
  cursor: pointer;
}

.loyverse-export__dropzone:hover {
  border-color: var(--tb-tangerine);
}

.loyverse-export__dropzone-prompt {
  font-size: var(--tb-size-small);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.loyverse-export__dropzone:hover .loyverse-export__dropzone-prompt {
  color: var(--tb-ink);
}

.loyverse-export__file-input {
  font: inherit;
  font-size: var(--tb-size-kicker);
  color: var(--muted);
  max-width: 100%;
}

/* Tangerine pill CTAs — the primary-button dialect. */
.loyverse-export__btn {
  display: inline-block;
  padding: 9px 22px;
  font: inherit;
  font-size: var(--tb-size-small);
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--tb-radius-pill);
  cursor: pointer;
}

.loyverse-export__btn--primary {
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
}

.loyverse-export__btn--primary:hover {
  background: var(--tb-tangerine-ink);
  color: var(--tb-paper-card);
}

/* Diff table — receipt register with dashed rules and status chips. */
.loyverse-export__diff {
  overflow-x: auto;
}

.loyverse-export__diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tb-size-small);
}

.loyverse-export__diff-table th {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
  text-align: left;
  padding: 0 8px 8px 0;
}

.loyverse-export__diff-table td {
  padding: 9px 8px 9px 0;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  vertical-align: top;
}

.loyverse-export__diff-table th.loyverse-export__diff-loyverse,
.loyverse-export__diff-table th.loyverse-export__diff-books,
.loyverse-export__diff-table td.loyverse-export__diff-loyverse,
.loyverse-export__diff-table td.loyverse-export__diff-books {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.loyverse-export__diff-sku {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.loyverse-export__status-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  border-radius: var(--tb-radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.loyverse-export__status-chip--differs {
  background: var(--tb-tangerine);
  color: var(--tb-midnight);
}

.loyverse-export__status-chip--filled {
  background: var(--tb-paper-warm);
  color: var(--tb-ink);
}

.loyverse-export__status-chip--no-cost {
  border: var(--tb-keyline-thin) solid var(--muted);
  color: var(--muted);
}

.loyverse-export__refile-hint {
  display: block;
  margin: 0 0 14px;
  font-size: var(--tb-size-kicker);
  color: var(--muted);
  line-height: 1.6;
}

.loyverse-export__refile-hint .loyverse-export__file-input--optional {
  display: block;
  margin: 0 0 6px;
  font: inherit;
  font-size: var(--tb-size-kicker);
  color: var(--muted);
  max-width: 100%;
}

/* --- Desktop (768px): the Counter grid ------------------------------------ */
@media (min-width: 768px) {
  .review.reports {
    max-width: none;
    padding: 28px 0 34px;
  }

  .reports h1 {
    font-size: 28px;
  }

  /* The asymmetric 12-col grid — 7/5 card spans, Today's rhythm. Dense
     flow lets a 5-span slot beside an earlier 7-span regardless of the
     odd one-out sections between them. */
  .reports #review-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 18px;
    align-items: stretch;
  }

  .reports #review-body > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* Period / Month: hero (7) beside the segment stack (5); fixed costs (5)
     beside day-by-day (7); Needs a fix (5) closes the grid. */
  .reports .headline--card {
    grid-column: span 7;
  }

  .reports .segment-cm {
    grid-column: span 5;
  }

  .reports__fixed-card {
    grid-column: span 5;
    padding: 26px;
  }

  .reports .period-days {
    grid-column: span 7;
    padding: 26px;
  }

  .reports .needs-attention--card {
    grid-column: span 5;
    padding: 26px;
  }

  .reports .trend-chart,
  .reports .pnl-block,
  .reports .bestsellers {
    padding: 26px;
  }

  /* Trends: line chart (7) beside BY WEEKDAY (5). */
  .reports--trends .trend-chart {
    grid-column: span 7;
  }

  .reports--trends .trend-chart--weekday {
    grid-column: span 5;
  }

  /* Profit: tiles full row; two-lens P&L (7) beside spend-by-category (5);
     the daily-revenue calendar, Needs a fix, and bestsellers span full. */
  .reports--profit .tiles {
    grid-column: 1 / -1;
  }

  .reports--profit .pnl-block {
    grid-column: span 7;
  }

  .reports--profit .trend-chart--spend {
    grid-column: span 5;
  }

  .reports--profit .trend-chart--daily,
  .reports--profit .needs-attention--card,
  .reports--profit .bestsellers {
    grid-column: 1 / -1;
  }

  /* Export / diff pages: a roomier single column. */
  .review.loyverse-export {
    max-width: 860px;
    padding: 28px 0 34px;
  }

  .loyverse-export__form,
  .loyverse-export__diff,
  .loyverse-export__confirm {
    padding: 26px;
  }
}

/* --- Warm Four #129: Stock detail + item review, Counter dialect ---------- */

/* Item review joins the Reports Counter grid: the period-performance hero
   card beside the day-by-day card. Mobile: both are paper cards in the
   single column. */
.reports--item .headline,
.reports--item .item-days {
  background: var(--tb-paper-card);
  border-radius: var(--tb-radius-3);
  padding: 22px;
}

.reports--item .day {
  margin: 0;
  font-size: var(--tb-size-small);
}

.reports--item .headline dt {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
}

.reports--item .headline dd {
  font-weight: var(--tb-weight-bold);
}

.reports--item .item-days__table th {
  font-size: var(--tb-size-kicker);
  letter-spacing: var(--tb-tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--tb-weight-regular);
  border-bottom: 0;
  padding: 0 8px 8px 0;
}

.reports--item .item-days__table td {
  border-bottom: 0;
  border-top: var(--tb-keyline-thin) dashed var(--tb-ink);
  padding: 8px 8px 8px 0;
  font-size: var(--tb-size-small);
}

.reports--item .edit-recipe {
  margin: 0;
}

/* --- Desktop (768px): the Stock Counter grids ------------------------------ */
@media (min-width: 768px) {
  /* Coverage lists: full 1124 column; hero (7) beside filters/CTAs (5);
     the list card spans the row. */
  .review.stock {
    max-width: none;
    padding: 28px 0 34px;
  }

  .stock__titlebar h1 {
    font-size: 28px;
  }

  .stock__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 18px;
    align-items: stretch;
  }

  .stock__grid > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .stock-hero {
    grid-column: span 7;
    padding: 26px;
  }

  .stock-side {
    grid-column: span 5;
    padding: 26px;
  }

  .stock-list {
    padding: 10px 26px;
  }

  .stock-row {
    padding: 15px 0;
  }

  /* SKU editor: recipe card (7) beside the cost column (5). */
  .review.sku-editor {
    max-width: none;
    padding: 28px 0 34px;
  }

  .sku-editor__header h1 {
    font-size: 28px;
  }

  .sku-editor__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 18px;
    align-items: start;
  }

  .recipe-editor,
  .cost-derived,
  .cost-current,
  .cost-form {
    padding: 26px;
  }

  /* Bulk edit: a roomier single column of step cards. */
  .review.upload {
    max-width: 860px;
    padding: 28px 0 34px;
  }

  .upload__title {
    font-size: 28px;
  }

  .upload-step {
    padding: 26px;
  }

  /* Sold as-is / New SKU: the ~560px fieldset-stack column. */
  .review.cost-editor {
    max-width: 560px;
    padding: 28px 0 34px;
  }

  .cost-editor h1 {
    font-size: 28px;
  }

  /* Item review: performance hero (7) beside day-by-day (5); the date
     line and the Admin escape hatch span the row. */
  .reports--item .headline {
    grid-column: span 7;
    padding: 26px;
  }

  .reports--item .item-days {
    grid-column: span 5;
    padding: 26px;
  }
}

/* --- Desktop (768px): Log & Admin Counter grids (#131) --------------------- */
@media (min-width: 768px) {
  .review.audit,
  .review.admin,
  .review.admin-sub {
    max-width: none;
    padding: 28px 0 34px;
  }

  .audit-head__title,
  .admin__title,
  .admin-sub__title {
    font-size: 28px;
  }

  .audit__grid,
  .admin__grid,
  .admin-sub__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 18px;
    align-items: stretch;
  }

  .audit__grid > *,
  .admin__grid > *,
  .admin-sub__grid > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .audit-hero,
  .admin-hero,
  .cash-spend-hero {
    grid-column: span 7;
    padding: 26px;
  }

  .audit-unreviewed,
  .admin-latest,
  .admin-sub__form {
    grid-column: span 5;
    padding: 26px;
  }

  .admin-sub__form {
    grid-column: span 5;
  }

  .admin-sub__list {
    grid-column: span 7;
  }

  .cash-spend__grid .cash-spend-hero {
    grid-column: span 7;
  }

  .cash-spend__grid .cash-spend-form {
    grid-column: span 5;
  }

  .cash-spend__grid .cash-spend-filter,
  .cash-spend__grid .cash-spend-list-section {
    grid-column: 1 / -1;
  }

  .audit-entries,
  .admin-links__list,
  .admin-sub__dlist {
    padding: 10px 26px;
  }

  .audit-row,
  .admin-links__row,
  .admin-sub__row,
  .cash-spend-import__invoice {
    padding: 15px 0;
  }

  .review.cash-spend-import {
    max-width: 860px;
    padding: 28px 0 34px;
  }

  .cash-spend-import__title {
    font-size: 28px;
  }

  .cash-spend-import__step {
    padding: 26px;
  }
}