/* ============================================================================
   os-tour.css — page-local layout for /os, the Vetra OS homepage
   ============================================================================

   Same contract as bars-tour.css and cafes-tour.css: LAYOUT ONLY. Every colour,
   size, radius and weight below resolves to a token in assets/vetra.css. There
   is no raw hex in this file and there must never be one — the moment a page
   defines its own palette the site is back to the 232-colour state vetra.css
   was written to end.

   Prefix is `t-` for the same reason the other tours use it: `v-` belongs to
   the design system, `t-` belongs to one page, and the split makes it obvious
   at a glance which rules travel and which do not.
   ============================================================================ */

/* ── Shared layout helpers (same names/values as bars-tour.css) ───────────── */

.t-split { display: grid; gap: calc(var(--space) * 1.75); align-items: start; }
@media (min-width: 900px) {
  .t-split { grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 2.5); }
}

.t-section-head { margin-bottom: calc(var(--space) * 2); }
.t-mt    { margin-top: var(--space); }
.t-mt-s  { margin-top: 8px; }
.t-mt-lg { margin-top: calc(var(--space) * 1.5); }
.t-ico   { width: 16px; height: 16px; }

/* ── The industry selector ────────────────────────────────────────────────
   The one interactive element above the fold. Four trades, one product: the
   argument the whole page makes is easier to SHOW by switching the panel than
   to assert in a paragraph. */

.t-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.t-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.t-tab:hover { background: var(--surface-sub); color: var(--text-primary); }
.t-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
/* The status pill inside a selected tab has to stop borrowing the accent
   background it is now sitting on, or LIVE goes green-on-violet and drops
   under contrast. */
.t-tab[aria-selected="true"] .v-pill { background: rgba(255,255,255,0.22); color: #fff; box-shadow: none; }

.t-panel[hidden] { display: none; }

/* ── Transcript / conversation surface ────────────────────────────────────
   A phone call rendered as markup rather than a screenshot, so it can never go
   stale against the product and it stays selectable, translatable and legible
   to a screen reader. */

.t-chat { display: flex; flex-direction: column; gap: 7px; }
.t-msg {
  padding: 8px 11px;
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.5;
  max-width: 92%;
}
.t-msg--caller {
  background: var(--surface-sub);
  color: var(--text-primary);
  align-self: flex-start;
  border: 1px solid var(--border);
}
.t-msg--agent {
  background: var(--wash-violet);
  color: var(--text-primary);
  align-self: flex-end;
}
.t-tool {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.t-tool b { color: var(--text-secondary); font-weight: var(--w-medium); }

/* ── POS strip ────────────────────────────────────────────────────────────── */

.t-pos { display: flex; flex-wrap: wrap; gap: 8px; }
.t-pos span {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--t-small);
  color: var(--text-secondary);
  white-space: nowrap;
}
.v-section--dark .t-pos span {
  border-color: var(--dark-border);
  background: var(--dark-surface-sub);
  color: var(--dark-secondary);
}

/* ── Numbered steps ───────────────────────────────────────────────────────── */

.t-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-sub);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}
.v-section--dark .t-num {
  border-color: var(--dark-border);
  background: var(--dark-surface-sub);
  color: var(--dark-secondary);
}

/* ── Vertical card: name and status pill share a baseline ─────────────────── */

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

/* A card that is not for sale yet must not look clickable. */
.t-card--soon { opacity: .82; }

/* ── Closing call-to-action ───────────────────────────────────────────────── */

.t-dial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Honesty list ─────────────────────────────────────────────────────────
   Two columns on a wide screen so the section reads as a spec sheet rather
   than a wall of disclaimers nobody finishes. */

.t-honesty-grid { display: grid; gap: var(--space); }
@media (min-width: 800px) { .t-honesty-grid { grid-template-columns: 1fr 1fr; } }

/* ── Hero product surface ─────────────────────────────────────────────────
   .v-ui-row is a grid with NO template — the page supplies the columns, the
   same way bars-tour.css supplies .t-ledger. min-width + the scroll wrapper
   keep the status column from running past the card edge on a narrow screen. */

.t-regulars { grid-template-columns: 7rem 1fr auto; }
@media (max-width: 430px) {
  .t-regulars { grid-template-columns: 1fr auto; }
  .t-regulars > :nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* ── Cards that are links ─────────────────────────────────────────────────
   .v-card is a surface, not a control. When a whole card is the click target
   it needs the underline off and a visible hover/focus state, or it reads as
   decoration and a keyboard user cannot tell where they are. */

a.v-card {
  text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
a.v-card:hover { border-color: var(--accent); transform: translateY(-2px); }
a.v-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a.v-card, a.v-card:hover { transition: none; transform: none; }
}

/* A pill in a v-stack stretches, because the stack's align-items is `stretch`.
   Fine for a card, wrong for a badge — it draws a full-column outline around
   three words. Scoped to the two places this page uses one as a label. */
.t-badge { align-self: start; }

/* .v-benefits is two columns above 640px, which is right in a full-width
   section and wrong inside a selector panel that is already half the shell.
   Three items in two columns also leaves a hole that reads as a mistake. */
.t-panel .v-benefits { grid-template-columns: 1fr; }

/* The reset makes every <svg> display:block, so an inline arrow after link text
   drops to its own line. Every place this page puts a glyph next to words needs
   to be a flex row rather than relying on inline layout. */
.t-inline { display: flex; align-items: center; gap: 6px; }