/* prototype presentation shell + the app's own design system.
 * Shared by all six prototypes; not one of them owns it.
 *
 * Two systems live on these pages, deliberately:
 *   1. The SHELL (topbar, notes panel) frames the exhibit — it is portfolio
 *      furniture and reads as the site around it.
 *   2. The APP inside the phone is its own product, with its own token set
 *      (the --t-* family): platform type stack, its own radii, its own signal
 *      colours. The contrast is the point — the portfolio frames the work;
 *      the work has its own voice.
 *
 * This file holds no brand values. Every --t-* it references is declared in
 * system/tokens.contract.css (neutral defaults) and overridden by whichever
 * pack a page loads. That is deliberate and it was not always true: these
 * tokens used to be hard-coded here, which quietly exempted the prototypes
 * from a re-skin. Moving them out is what makes the one-file pack swap cover
 * the whole site instead of everything except the part people actually tap.
 */

/* ---------------------------------------------------------------- shell */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body, "Montserrat Ace", sans-serif);
}

.ot-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 40;
}

.ot-topbar a { text-decoration: none; }

/* back to the portfolio — tertiary button: surface fill, border, ink chevron;
   hover fill and pressed border come from the pack's accent, not from a literal */
.ot-topbar .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  transition: background 160ms ease;
}
.ot-topbar .back svg { width: 24px; height: 24px; display: block; }
.ot-topbar .back:hover { background: var(--color-bg); }
.ot-topbar .back:active { background: var(--color-border); }

.ot-topbar .title {
  font-family: var(--font-display, sans-serif);
  color: var(--color-fg-muted);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.ot-topbar .btn-log {
  font-family: var(--font-display, sans-serif);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ot-topbar .btn-log:hover { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }

/* built-because strip — C1: every prototype opens with the JD line or industry
 * signal that justified building it. Promoted organism, all five shells (S5). */
.proto-because {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: var(--type-caption);
  line-height: 1.5;
  color: var(--color-fg-muted);
}
.proto-because b { color: var(--color-fg); font-weight: 600; }
@media (max-width: 640px) { .proto-because { padding: var(--spacing-sm) var(--spacing-md); } }

/* prototype legal footer — B3 disclaimer on the (otherwise footerless) shells */
.proto-legal {
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-eyebrow);
  line-height: 1.6;
  color: var(--color-fg-muted);
  text-align: center;
}
@media (max-width: 640px) { .proto-legal { padding: var(--spacing-lg) var(--spacing-md); } }

.ot-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--spacing-2xl);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-3xl);
  align-items: start;
}

.ot-phone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.ot-caption {
  color: var(--color-fg-muted);
  font-size: 14px;
  margin: 0;
  text-align: center;
}

/* interaction cue — the phone is working software; say so.
   Accent chip (fill-only rule), accent-fg text; bounces toward the phone. */
.ot-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  animation: ot-cue-bounce 2s ease-in-out infinite;
}
.ot-cue .arr { font-size: 15px; }
@keyframes ot-cue-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(9px); }
  60% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ot-cue { animation: none; }
}

/* the device — depicting hardware, so the bezel keeps its curves */
.ot-phone {
  width: min(392px, 94vw);
  background: var(--t-frame);
  border-radius: 54px;
  padding: 12px;
  box-shadow: var(--t-shadow-3);
}

.ot-screen {
  border-radius: 43px;
  overflow: hidden;
  height: min(800px, 80dvh);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* notes panel */
.ot-notes {
  position: sticky;
  top: 92px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  padding: var(--spacing-lg);
}

.ot-notes-head {
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.ot-notes-head .screen-name { color: var(--color-fg-muted); letter-spacing: 0.08em; }

#ot-notes-body { transition: opacity 0.18s ease; }
#ot-notes-body.fading { opacity: 0; }

#ot-notes-body p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 var(--spacing-md);
  color: var(--color-fg);
}

#ot-notes-body p .k {
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  display: block;
  margin-bottom: 2px;
}

.ot-notes-link {
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-fg);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}
.ot-notes-link:hover { color: var(--color-accent-secondary); }

/* mobile: notes behind a floating button */
.ot-notes-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse-strong);
  border: 0;
  font-family: var(--font-display, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px 20px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .ot-stage { grid-template-columns: 1fr; padding: var(--spacing-lg) var(--spacing-md) 96px; }
  .ot-notes {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    max-height: 70dvh;
    overflow-y: auto;
    transform: translateY(105%);
    transition: transform 0.25s ease;
    z-index: 55;
    box-shadow: var(--t-shadow-3);
  }
  .ot-notes.open { transform: translateY(0); }
  .ot-notes-fab { display: block; }
  .ot-topbar { padding: var(--spacing-sm) var(--spacing-md); }
  .ot-topbar .title { display: none; }
}

/* ------------------------------------------------------------- the app */

.ot-screen {
  /* Values come from the pack (system/tokens.css), defaults from the contract.
     Nothing brand-specific is declared here.

     The face is the pack's, not the platform's. These screens used to run on the system
     stack so they read as "a native app"; they now run on the brand's face because they
     are not a generic app, they are a specific company's, and a real product sets its own
     type. A Carmoola screen in San Francisco reads as a wireframe of their app. In their
     face it reads as their app. */
  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--t-bg);
  color: var(--t-ink);
}

.ot-screen * { -webkit-tap-highlight-color: transparent; }

.ot-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-ink);
  background: var(--t-bg);
}
.ot-status .pins { display: flex; gap: 5px; }
.ot-status .pins span {
  width: 16px; height: 10px; border-radius: 3px; background: var(--t-ink); opacity: 0.85;
}
.ot-status .pins span:nth-child(2) { opacity: 0.35; width: 22px; }

.ot-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 10px;
  background: var(--t-bg);
}

.ot-back {
  border: 0;
  background: var(--t-card);
  color: var(--t-ink);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--t-shadow-1);
  flex: none;
}
.ot-back:disabled { visibility: hidden; }

.ot-appbar .t { font-size: 16px; font-weight: 700; flex: 1; }

.ot-steps { display: flex; gap: 5px; }
.ot-steps i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-line);
}
.ot-steps i.on { background: var(--t-core); }
.ot-steps i.new { background: var(--t-new); }

.ot-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 20px;
  scrollbar-width: none;
}
.ot-body::-webkit-scrollbar { display: none; }

.ot-body.anim { animation: ot-slide 0.26s ease; }
@keyframes ot-slide {
  from { transform: translateX(26px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.ot-body.anim-back { animation: ot-slide-b 0.26s ease; }
@keyframes ot-slide-b {
  from { transform: translateX(-26px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.ot-foot {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 8px));
  background: var(--t-card);
  border-top: 1px solid var(--t-line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ot-foot .sum { flex: 1; }
.ot-foot .sum .l { font-size: 12px; color: var(--t-ink-soft); }
.ot-foot .sum .v { font-size: 20px; font-weight: 700; }

/* atoms */
.ot-h1 { font-size: 28px; font-weight: 700; margin: 10px 4px 2px; letter-spacing: -0.02em; }
.ot-sub { font-size: 14px; color: var(--t-ink-soft); margin: 0 4px 14px; line-height: 1.4; }

.ot-card {
  background: var(--t-card);
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow-1);
  padding: 16px;
  margin-bottom: 12px;
}

.ot-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--t-r);
  background: var(--t-core);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.ot-btn:active { transform: scale(0.985); }
.ot-btn.dark { background: var(--t-ink); }
.ot-btn.ghost {
  background: transparent;
  color: var(--t-ink-soft);
  font-weight: 600;
  box-shadow: none;
  padding: 12px;
}
.ot-btn.ghost:hover { color: var(--t-ink); }

.ot-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--t-core-soft);
  color: var(--t-core);
}
.ot-chip.new { background: var(--t-new-soft); color: var(--t-new); }
.ot-chip.good { background: var(--t-good-soft); color: var(--t-good); }
.ot-chip.plain { background: var(--t-plain-soft); color: var(--t-ink-soft); }

/* search screen */
.ot-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 2px;
  gap: 10px;
}
.ot-field + .ot-field { border-top: 1px solid var(--t-line); }
.ot-field .l { font-size: 12px; color: var(--t-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.ot-field .v { font-size: 16px; font-weight: 700; text-align: right; }
.ot-field .v small { display: block; font-size: 12px; color: var(--t-ink-soft); font-weight: 600; }

/* train result rows */
.ot-train {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 2px solid transparent;
  background: var(--t-card);
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow-1);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--t-ink);
  transition: border-color 0.12s ease;
}
.ot-train:hover { border-color: var(--t-core); }
.ot-train .times { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ot-train .times span { color: var(--t-ink-soft); font-weight: 500; font-size: 14px; }
.ot-train .meta { font-size: 12.5px; color: var(--t-ink-soft); margin-top: 3px; }
.ot-train .price { margin-left: auto; text-align: right; }
.ot-train .price .p { font-size: 18px; font-weight: 700; }
.ot-train .price .f { font-size: 11px; color: var(--t-ink-soft); }

/* the trip spine */
.ot-spine { position: relative; padding-left: 26px; margin-top: 6px; }
.ot-spine::before {
  content: "";
  position: absolute;
  left: 8px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--t-line);
}
.ot-node { position: relative; margin-bottom: 14px; }
.ot-node::before {
  content: "";
  position: absolute;
  left: -24px; top: 16px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--t-core);
  border: 2.5px solid var(--t-bg);
  box-shadow: 0 0 0 2px var(--t-core);
}
.ot-node.new::before { background: var(--t-new); box-shadow: 0 0 0 2px var(--t-new); }
.ot-node.probe::before { background: var(--t-bg); box-shadow: 0 0 0 2px var(--t-new); }

.ot-node .ot-card { margin-bottom: 0; }
.ot-node .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ot-node .head .d { font-size: 12px; font-weight: 700; color: var(--t-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.ot-node .head a { font-size: 13px; font-weight: 700; color: var(--t-core); text-decoration: none; cursor: pointer; }
.ot-node .big { font-size: 17px; font-weight: 700; margin-top: 4px; }
.ot-node .sub2 { font-size: 13px; color: var(--t-ink-soft); margin-top: 2px; }

.ot-node.probe .ot-card {
  box-shadow: none;
  border: 1.5px dashed var(--t-new);
  background: transparent;
  cursor: pointer;
}

/* hotel rows */
.ot-hotel {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--t-card);
  border: 2px solid var(--t-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--t-ink);
  transition: border-color 0.12s ease;
}
.ot-hotel:hover { border-color: var(--t-new); }
.ot-hotel.sel { border-color: var(--t-new); background: var(--t-new-soft); }
.ot-hotel .r1 { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; gap: 8px; }
.ot-hotel .r2 { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--t-ink-soft); margin-top: 3px; gap: 8px; }
.ot-hotel .r3 { margin-top: 6px; }

.ot-stars { color: var(--t-new); letter-spacing: 1px; font-size: 12px; }

/* toggle (trip cover) */
.ot-toggle-row { display: flex; align-items: center; gap: 12px; }
.ot-toggle-row .tx { flex: 1; }
.ot-toggle-row .tx .t1 { font-weight: 700; font-size: 15px; }
.ot-toggle-row .tx .t2 { font-size: 13px; color: var(--t-ink-soft); line-height: 1.45; margin-top: 3px; }
.ot-switch {
  position: relative;
  width: 52px; height: 32px;
  border-radius: 999px;
  background: var(--t-line);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  flex: none;
}
.ot-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.ot-switch.on { background: var(--t-good); }
.ot-switch.on::after { transform: translateX(20px); }

/* summary + confirmation */
.ot-row { display: flex; justify-content: space-between; font-size: 15px; padding: 9px 0; gap: 10px; }
.ot-row + .ot-row { border-top: 1px solid var(--t-line); }
.ot-row .a { color: var(--t-ink-soft); }
.ot-row .b { font-weight: 700; text-align: right; }
.ot-row.total .a, .ot-row.total .b { font-weight: 700; font-size: 17px; color: var(--t-ink); }

.ot-check {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--t-good);
  color: #fff;
  font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  margin: 26px auto 12px;
}

.ot-center { text-align: center; }
.ot-ref { font-size: 13px; color: var(--t-ink-soft); margin-bottom: 16px; }
.ot-ref b { color: var(--t-ink); letter-spacing: 0.08em; }

.ot-it { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.ot-it + .ot-it { border-top: 1px solid var(--t-line); }
.ot-it .ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--t-core);
  background: var(--t-core-soft);
}
.ot-it.new .ic { color: var(--t-new); }
.ot-it.new .ic { background: var(--t-new-soft); }
.ot-it .t1 { font-weight: 700; font-size: 14.5px; }
.ot-it .t2 { font-size: 12.5px; color: var(--t-ink-soft); margin-top: 2px; }

.ot-note { font-size: 12px; color: var(--t-ink-soft); text-align: center; margin-top: 12px; line-height: 1.5; }
.ot-note a { color: var(--t-core); font-weight: 600; text-decoration: none; }

/* bottom sheet (car hire fake door) */
.ot-sheet-wrap {
  position: absolute;
  inset: 0;
  background: rgba(16, 19, 27, 0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}
.ot-sheet-wrap.open { opacity: 1; pointer-events: auto; }
.ot-sheet {
  background: var(--t-card);
  border-radius: 22px 22px 0 0;
  padding: 20px 20px 28px;
  width: 100%;
  transform: translateY(30px);
  transition: transform 0.22s ease;
}
.ot-sheet-wrap.open .ot-sheet { transform: translateY(0); }
.ot-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--t-line); margin: 0 auto 14px; }
.ot-sheet h3 { margin: 8px 0 8px; font-size: 19px; }
.ot-sheet p { font-size: 14px; color: var(--t-ink-soft); line-height: 1.5; margin: 0 0 16px; }

/* toast */
.ot-toast {
  position: absolute;
  left: 50%; bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  background: var(--t-ink);
  color: var(--t-card);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 30;
  white-space: nowrap;
}
.ot-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------- a11y + shared additions */

/* in-flow actions that read as links but are real buttons (keyboard-reachable) */
.ot-linklike {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--t-core);
  cursor: pointer;
}
.ot-node .head .ot-linklike { font-size: 13px; font-weight: 700; }

/* visible focus for keyboard users — shell and app */
:focus-visible {
  outline: 3px solid var(--color-accent-secondary);
  outline-offset: 2px;
}
.ot-screen button:focus-visible,
.ot-screen a:focus-visible {
  outline: 3px solid var(--t-core);
  outline-offset: 2px;
}

/* The second signal as TEXT uses the darker tone (WCAG AA on soft grounds);
   as GRAPHIC (borders, dots, fills) it keeps --t-new. Both values live in the pack. */
.ot-chip.new { color: var(--t-new-text); }
.ot-stars { color: var(--t-new-text); }

/* alert tone (disruption surfaces) */
.ot-chip.alert { background: var(--t-alert-soft); color: var(--t-alert); }
.ot-alert-card {
  border-left: 4px solid var(--t-alert);
  background: var(--t-card);
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow-1);
  padding: 16px;
  margin-bottom: 12px;
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ot-body.anim, .ot-body.anim-back { animation: none; }
  .ot-sheet, .ot-sheet-wrap, .ot-switch::after, .ot-notes, .ot-toast, .ot-btn { transition: none; }
}

/* =====================================================================
   SHARED PROTOTYPE COMPONENTS

   These were built inline on one prototype and are used by several, so they
   live here now rather than being copied. Every value below is a token; the
   pack decides what they look like. Anything that is genuinely one screen's
   problem stays inline on that page — that is the promotion policy, and the
   test for it is "does a second prototype need this".
   ===================================================================== */

/* the slider — money, term and mileage all set the same way */
.ot-screen input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--t-line);
  outline-offset: 4px;
  margin: 14px 0 6px;
}
.ot-screen input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--t-core);
  border: 3px solid var(--t-card);
  box-shadow: var(--t-shadow-1);
  cursor: pointer;
}
.ot-screen input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--t-core);
  border: 3px solid var(--t-card);
  box-shadow: var(--t-shadow-1);
  cursor: pointer;
}

/* segmented choice */
.ot-filter {
  border: 2px solid var(--t-line);
  background: var(--t-card);
  color: var(--t-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ot-filter.on { border-color: var(--t-core); background: var(--t-core-soft); color: var(--t-core); }
.ot-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* a selectable row — a car, a month, an offer, a plan */
.ot-pick {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--t-card);
  border: 2px solid transparent;
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow-1);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--t-ink);
  transition: border-color 0.12s ease;
}
.ot-pick:hover { border-color: var(--t-core); }
/* Out of reach, not hidden. It loses its surface and its shadow and the type drops to the
   muted ink, so it reads as present and unaffordable rather than as an error. The muted ink
   still measures 6.94:1 on the ground, so subordinate never means unreadable — which is the
   failure mode of doing this with opacity. */
.ot-pick.over { background: transparent; box-shadow: none; border-color: var(--t-line); }
.ot-pick.over .r1 .nm,
.ot-pick.over .r1 .pr { color: var(--t-ink-soft); }
.ot-pick .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ot-pick .r1 .nm { font-size: 16px; font-weight: 700; }
.ot-pick .r1 .pr { font-size: 18px; font-weight: 700; white-space: nowrap; }
.ot-pick .r1 .pr small { font-size: 11px; font-weight: 600; color: var(--t-ink-soft); display: block; text-align: right; }
.ot-pick .r2 { font-size: 12.5px; color: var(--t-ink-soft); margin-top: 3px; }
.ot-pick .r3 { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }
.ot-chip.warn { background: var(--t-alert-soft); color: var(--t-alert); }

/* verdict first, evidence underneath — the shape every check on this site takes */
.ot-verdict {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--t-card);
  border-radius: var(--t-r);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--t-shadow-1);
}
.ot-verdict .vi {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--t-card);
}
.ot-verdict.good .vi { background: var(--t-good); }
.ot-verdict.warn .vi { background: var(--t-alert); }
.ot-verdict .vt { font-size: 17px; font-weight: 700; }
.ot-verdict .vs { font-size: 13px; color: var(--t-ink-soft); margin-top: 3px; line-height: 1.5; }
.ot-it .ic.warn { color: var(--t-alert); background: var(--t-alert-soft); }

/* small type that has to be present and must not shout */
.ot-quiet {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-ink-soft);
  margin: 10px 0 0;
}

/* a full-width secondary action */
.ot-wide {
  display: block; width: 100%; text-align: center;
  padding: 12px; margin-bottom: 10px;
  font-size: 14px; font-weight: 700;
}

/* text entry */
.ot-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--t-ink);
  background: var(--t-bg);
  border: 2px solid var(--t-line);
}
.ot-input:focus { outline: 2px solid var(--t-core); outline-offset: 2px; border-color: var(--t-core); }

/* A brand colour used the only way it measures: as a ground, carrying the ink.
   Nothing inside a ground goes below 15px, because these surfaces are the loud part
   of the brand and small type on them is where the contrast argument gets lost. */
.ot-ground {
  border-radius: var(--t-r);
  padding: 18px;
  margin-bottom: 12px;
  color: var(--t-ink);
}
.ot-ground .gh { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.ot-ground .gp { font-size: 15px; line-height: 1.5; margin-top: 6px; }
.ot-ground.amber { background: var(--t-ground-amber); }
.ot-ground.green { background: var(--t-ground-green); }
.ot-ground.mint  { background: var(--t-ground-mint); }
.ot-ground.sky   { background: var(--t-ground-sky); }
.ot-ground.pink  { background: var(--t-ground-pink); }