/* ============================================================================
   cafes-tour.css — the /cafes playable product tour
   ============================================================================
   Page-specific composition only: the two-column hero, the menu quadrant plot,
   the trading heatmap, and the call transcript. Everything else on the page is
   a vetra.css component used as-is.

   EVERY value here resolves to a token from vetra.css. No raw hex, no font size
   outside the six-step scale, no radius outside the three. If this page needs a
   NEW primitive rather than a new arrangement of existing ones, it belongs in
   vetra.css and not in here — that distinction is the whole reason the site is
   not back at 232 colours.
   ============================================================================ */

/* ── Shared section rhythm ────────────────────────────────────────────────── */

.t-section-head { margin-bottom: calc(var(--space) * 2); }
.t-mt   { margin-top: var(--space); }
.t-mt-s { margin-top: calc(var(--space) / 2); }
.t-hint { margin-top: 7px; }
.t-cta  { margin-top: calc(var(--space) / 2); }

.t-msg:empty { display: none; }
.t-msg { margin-top: 4px; }

.t-chips { gap: 7px; }

.t-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.t-hero { display: grid; gap: calc(var(--space) * 2); align-items: center; }
@media (min-width: 940px) {
  .t-hero { grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--space) * 2.5); }
}

/* On narrow screens the hero's product panel leads with the headline instead of
   competing with it, so it is pushed below the copy rather than beside it. */
.t-hero__ui { align-self: stretch; }
@media (min-width: 940px) { .t-hero__ui { align-self: center; } }

/* The four "already in your POS" rows: label left, consequence right. Collapses
   to stacked on narrow, because two columns of text at 320px is unreadable. */
.t-have { grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 560px) {
  .t-have { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 10px; }
}

/* ── The wedge — evidence cards + the competitor quote ───────────────────── */

.t-evidence { margin-bottom: calc(var(--space) * 1.5); align-items: start; }
.t-evidence__claim { margin-block: 9px; }
.t-evidence .v-card > * + * { margin-top: 7px; }

.t-quote { border-left: 3px solid var(--accent); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.t-quote__text { margin: 0 0 10px; font-style: normal; max-width: var(--measure); }

.t-wedge__close { margin-top: calc(var(--space) * 1.5); }

/* ── The six-card grid ────────────────────────────────────────────────────── */

/* Same behaviour as /bars: cards sit in a responsive grid, and an open card
   spans the full row so its panel renders below rather than squeezing a
   demo into a 220px column. */
.t-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.t-card-grid .v-expand[data-level="2"],
.t-card-grid .v-expand[data-level="3"] { grid-column: 1 / -1; }

/* ── 01 · Ask ─────────────────────────────────────────────────────────────── */

/* The placeholder line the answer replaces. It carries no visual of its own —
   the rule exists so that every class in the markup resolves to something in a
   stylesheet, which is a cheap invariant to hold and a real one to lose. */
.t-ask__idle { margin: 0; }

.t-ask__answer > * + * { margin-top: 8px; }
.t-ask__answer .t-ask__fig {
  font-family: var(--mono);
  font-size: var(--t-title);
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
}
.t-ask__trace {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-muted);
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

/* ── 02 · Menu quadrant ───────────────────────────────────────────────────── */

.t-quad { position: relative; padding-left: 22px; padding-bottom: 20px; }

.t-quad__label {
  position: absolute;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-quad__label--y { left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.t-quad__label--x { left: 50%; bottom: 0; transform: translateX(-50%); }

.t-quad__plot {
  position: relative;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(to right, var(--border) 1px, transparent 1px) 50% 0 / 100% 100%,
    linear-gradient(to bottom, var(--border) 1px, transparent 1px) 0 50% / 100% 100%;
  background-repeat: no-repeat;
}

.t-quad__zone {
  position: absolute;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 8px;
}
.t-quad__zone--tl { top: 0; left: 0; }
.t-quad__zone--tr { top: 0; right: 0; }
.t-quad__zone--bl { bottom: 0; left: 0; }
.t-quad__zone--br { bottom: 0; right: 0; }

/* A plotted item. Position comes from inline left/top because it is DATA —
   where a drink sits on margin × volume is a value, not a style. */
.t-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--t-small);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.t-dot:hover { border-color: var(--text-muted); color: var(--text-primary); }
.t-dot[data-on="1"] { border-color: var(--accent); color: var(--text-primary); }

.t-quad__out { margin-top: var(--space); }
.t-quad__out > * + * { margin-top: 6px; }

/* ── 03 · Price ladder ────────────────────────────────────────────────────── */

.t-ladder { grid-template-columns: 1fr auto 56px; }

/* ── 04 · Trading heatmap ─────────────────────────────────────────────────── */

.t-heat {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  gap: 3px;
  font-size: var(--t-micro);
}
.t-heat__h {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 2px;
}
.t-heat__r {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* Intensity is derived from the accent token by mixing it into the surface, so
   the five steps stay one hue and stay in the system. Never five new colours. */
.t-cell {
  aspect-ratio: 1 / 1;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  transition: outline-color .15s var(--ease);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.t-cell[data-v="0"] { background: var(--surface); }
.t-cell[data-v="1"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.t-cell[data-v="2"] { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.t-cell[data-v="3"] { background: color-mix(in srgb, var(--accent) 52%, var(--surface)); }
.t-cell[data-on="1"] { outline-color: var(--accent); }

.t-heat__key { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.t-heat__swatch {
  width: 16px; height: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.t-heat__swatch[data-v="0"] { background: var(--surface); }
.t-heat__swatch[data-v="1"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.t-heat__swatch[data-v="2"] { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.t-heat__swatch[data-v="3"] { background: color-mix(in srgb, var(--accent) 52%, var(--surface)); }

.t-aim > * + * { margin-top: 8px; }

/* ── The table — captured enquiry rows ───────────────────────────────────── */

/* The same two-column shape as .t-lapsed below, WITHOUT its cursor:pointer and
   hover state. These rows are a static sample, not buttons, and a pointer cursor
   on a div promises a click that never comes. */
.t-enquiry { grid-template-columns: 1fr auto; align-items: center; text-align: left; }

/* ── 05 · Lapsed regulars ─────────────────────────────────────────────────── */

.t-lapsed {
  grid-template-columns: 1fr auto;
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.t-lapsed:hover { background: var(--surface-sub); }

.t-person > * + * { margin-top: 6px; }

/* ── 06 · Call transcript ─────────────────────────────────────────────────── */

.t-call { min-height: 96px; }
.t-call__idle { margin: 0; }

.t-turn { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding-block: 6px; }
.t-turn__who {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.t-turn__said { font-size: var(--t-small); }
.t-turn--agent .t-turn__said { color: var(--text-primary); }
.t-turn--caller .t-turn__said { color: var(--text-secondary); }

/* The tool call the agent made to answer. Shown because "traced to a field you
   set, never invented" is a claim, and this is the evidence for it. */
.t-turn__tool {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── The catalog cards ────────────────────────────────────────────────────── */

/* The state legend. Sits under the first catalog heading and explains the build
   tag once, so no individual card has to carry a disclaimer. */
.t-legend { gap: var(--space); margin-top: var(--space); }
.t-legend__item { gap: 7px; flex-wrap: nowrap; }

/* Name left, mode tag right, description below. The tag has to survive being
   pushed onto its own line on a narrow column, so the row wraps rather than
   letting a long feature name squash the pill into an ellipsis. */
.t-cat__top {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

/* ── Either-or paths ──────────────────────────────────────────────────────── */

.t-path__h { margin: 8px 0 12px; }
.t-path__list { gap: 7px; }
.t-path__note { margin-top: var(--space); padding-top: var(--space); border-top: 1px solid var(--border); }

/* ── Honesty + pricing + pilot ────────────────────────────────────────────── */

.t-honest__close { margin-top: calc(var(--space) * 1.5); }
.t-price__note { margin-top: var(--space); }

.t-pilot { display: grid; gap: calc(var(--space) * 2); align-items: start; }
@media (min-width: 940px) { .t-pilot { grid-template-columns: 1.15fr 0.85fr; } }
.t-pilot__list { gap: 7px; margin-top: 6px; }
.t-pilot .v-card > .v-stack-s > .v-btn { width: 100%; }

/* The one accent-coloured TEXT on the page. Safe because it is display size:
   #c0551d on #fdfaf6 is 4.43:1, which clears AA-large (3:1) with room, and would
   NOT clear AA for body copy — which is why the accent is a fill token everywhere
   else and this is the single deliberate exception. */
.t-hero__em { color: var(--accent); font-style: italic; font-weight: inherit; }


/* ── Audience fork badges (row 2420 — merged Restaurants & cafes card) ────── */

/* Two jump badges at the very top of the hero — one per audience, both linking
   into this page. --lead marks the one the page opens with (restaurants) and gets
   the accent dot; the other uses the border token. It is NOT a status badge and
   must not be read as one — no raw hex, every value resolves to a token. */
.t-audience-fork {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.t-audience-fork__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: var(--t-micro);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
}

.t-audience-fork__badge--lead {
  border-color: var(--accent);
  color: var(--text-secondary);
}

.t-audience-fork__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Restaurant notification section (row 2420) ──────────────────────────── */

/* Sits at the bottom of /cafes to serve restaurant visitors from the merged
   homepage card. Uses v-section--dark so it recedes from the café content above
   and reads as a secondary destination, not a competitor. */
.t-restaurant {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.t-restaurant__honesty {
  text-align: left;
  margin: calc(var(--space) * 0.75) 0;
}

.t-restaurant__form {
  max-width: 400px;
  margin: 0 auto;
}

.t-restaurant__input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: var(--t-body);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.t-restaurant__input:focus { border-color: var(--accent); }

.t-msg--err { color: var(--text-primary); opacity: 0.6; }