/* ==========================================================================
   Vitrine UI — design system
   --------------------------------------------------------------------------
   Every visual decision here is a written-down token, not a judgement call
   made per component. The component surfaces stay flat and typographic;
   only the floating app chrome becomes a Vitrine lens, so liquid glass
   remains a functional material rather than decoration applied to
   everything.

   The rules, and why each one is a rule:

     COLOUR    a high-chroma accent with a dark ink on top of it, a
               near-white surface, and cool grey neutrals (#EFF0FA,
               #DFE1EC, #73777F) rather than pure greys — neutrals with a
               hue read as intentional; true greys read as unstyled.
     TYPE      Archivo, with Archivo Condensed for titles and labels, and
               POSITIVE tracking (0.1–0.5). Apple tightens large display
               type; small UI text wants the opposite, because letterforms
               lose separation before they lose size.
     SPACING   one base unit of 16, stepped in quarters: 4 / 8 / 12 / 16 /
               20 / 24 / 32. One rhythm, so nothing lands off-grid.
     SHAPE     radius 6 on controls, 8 on cards, 16 on sheets, pill on
               chips. Small and consistent — radius carries hierarchy once
               depth is flat.
     DEPTH     flat everywhere, rising only while pressed. Structure comes
               from hairlines, not shadows: a shadow that never moves is
               decoration rather than signal.

   The 44pt hit area, the accessibility media queries and the contrast gate
   are not on that list and are not negotiable against it. Those are
   correctness, not style, and a visual language does not get a vote.

   MOTION is not in this file. Anything a finger can touch is driven by
   springs in spring.js, because a CSS transition cannot be interrupted. CSS
   animates only what the pointer never grabs: colour and border.

   The theming contract:
     The HOST owns layout, spacing, hierarchy, depth and motion.
     The TENANT owns accent, ink, radius, typeface and logo. Nothing else.
   ========================================================================== */

/* Archivo, subset to Latin and converted to woff2 — 76 KB for six weights,
   down from 732 KB of TTF. SIL Open Font License 1.1; see docs/CREDITS.md. */
@font-face { font-family: Archivo; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-400.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-500.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-600.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-Condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/Archivo-Condensed-600.woff2") format("woff2"); }

:root {
  /* ---- WRITABLE: the tenant surface. Five knobs. ----
     Five rather than four because a real brand turned up and needed the
     fifth: a warm yellow accent only works with its own dark ink on top.
     A brand's dark neutral is part of the brand. */
  --vt-accent:      #e8d83f;
  --vt-ink:         #222631;
  --vt-radius:      8px;
  --vt-font:        Archivo, "Archivo Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --vt-font-title:  "Archivo Condensed", Archivo, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --vt-logo-size:   30px;

  /* ---- Derived by theme.js. Do not set by hand. ----
     --vt-accent      the brand colour, for FILLS
     --vt-accent-text the same hue pushed until it clears AA against the page,
                      for accent-coloured TEXT. #e8d83f is 1.47:1 on white —
                      as body copy it is invisible. The gate derives a darker
                      step automatically for any tenant.
     --vt-on-accent   ink or white on the fill, chosen by measured contrast */
  --vt-accent-text: #886c2c;
  --vt-on-accent:   #222631;
  --vt-accent-soft: rgba(232, 216, 63, 0.16);
  --vt-accent-ring: rgba(232, 216, 63, 0.42);

  /* ---- Type: a closed scale, in rem so browser text scaling works.
     Fixed px silently ignores the user's accessibility setting. ---- */
  --vt-t-display:  2.5rem;    /* 40 — displaySmall */
  --vt-t-headline: 2rem;      /* 32 — headlineSmall */
  --vt-t-title:    1.4375rem; /* 23 — titleMediumBold */
  --vt-t-title-sm: 1.25rem;   /* 20 — titleSmall */
  --vt-t-body-lg:  1.125rem;  /* 18 — bodyLarge2 */
  --vt-t-body:     1rem;      /* 16 — bodyLarge */
  --vt-t-label:    0.875rem;  /* 14 — bodyMedium / labelLarge */
  --vt-t-small:    0.75rem;   /* 12 — bodySmall / caption */

  /* Small text opens rather than large text tightening — the inverse of
     Apple's optical tracking, and most of what gives this its voice. */
  --vt-tr-display: -0.01em;
  --vt-tr-title:    0.005em;
  --vt-tr-body:     0em;
  --vt-tr-label:    0.0071em;  /* 0.10px at 14 */
  --vt-tr-caption:  0.0333em;  /* 0.40px at 12 */
  --vt-tr-caps:     0.0417em;  /* 0.50px at 12 */

  /* Leading, one value per step of the scale. */
  --vt-lh-display: 1.2;
  --vt-lh-title:   1.22;
  --vt-lh-body:    1.5;
  --vt-lh-label:   1.43;
  --vt-lh-small:   1.67;

  /* ---- Spacing: base unit 16, stepped in quarters. ---- */
  --vt-s0:  4px;   /* 1x */
  --vt-s1:  8px;   /* 2x */
  --vt-s2: 12px;   /* 3x */
  --vt-s3: 16px;   /* 4x — the unit */
  --vt-s4: 20px;   /* 5x */
  --vt-s5: 24px;   /* 6x */
  --vt-s6: 32px;   /* 8x */

  /* ---- Hit area. HIG's floor. Correctness, not style. ---- */
  --vt-tap: 44px;

  /* ---- Colour. HOST-OWNED. Cool neutrals, re-anchored on the tenant ink.
     ink-3 clears 4.5:1 in both schemes: the obvious pale grey #73777F lands
     at 4.2:1 on white, which fails AA, and a project shipping a contrast
     gate does not get to hand-wave its own body copy. ---- */
  --vt-surface:     #ffffff;
  --vt-surface-2:   #eff0fa;   /* surfaceVariant */
  --vt-surface-3:   #f7f8f8;   /* lightBackground */
  --vt-ink-2:       #45484f;   /* onSurfaceVariant */
  --vt-ink-3:       #676b74;   /* pale grey, darkened to clear AA */
  --vt-hairline:    #dfe1ec;   /* outlineVariant */
  --vt-hairline-2:  #e9eaf2;
  --vt-track:       #dfe1ec;

  /* ---- Depth: flat. No resting elevation, structure from hairlines. The
     only shadow in the system is the one that appears under a pressed
     control, where it is feedback rather than decoration. ---- */
  --vt-shadow:      none;
  --vt-shadow-lift: 0 2px 10px rgba(34, 38, 49, .09);
  --vt-shadow-press:0 3px 8px rgba(0, 0, 0, .28);

  /* ---- Liquid lens. A nearly clear centre plus a deep bevel reads as glass;
     high-opacity white fills read as frosted cards. The SVG displacement map
     is installed by vitrine.js and the blur/saturation pair is its fallback. ---- */
  --vt-material: rgba(255, 255, 255, .26);
  --vt-material-row: rgba(255, 255, 255, .62);
  --vt-material-panel: rgba(255, 255, 255, .76);
  --vt-material-edge: rgba(255, 255, 255, .70);
  --vt-material-filter: url(#vt-liquid-distortion) blur(3px) saturate(1.32);
  --vt-material-panel-filter: blur(13px) saturate(1.18);
  --vt-material-shadow:
    0 16px 34px rgba(30, 36, 48, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .46),
    inset 0 2px 2px rgba(255, 255, 255, .74),
    inset 2px 0 3px rgba(88, 214, 255, .13),
    inset -2px 0 3px rgba(255, 91, 151, .09);
  --vt-material-shadow-soft:
    0 8px 22px rgba(30, 36, 48, .10),
    inset 0 1px 0 rgba(255, 255, 255, .76);

  /* ---- Shape: 6 on controls, 8 on cards, 16 on large surfaces. ---- */
  --vt-radius-ctl: max(4px, calc(var(--vt-radius) - 2px));
  --vt-radius-lg:  calc(var(--vt-radius) * 2);

  --vt-ease: cubic-bezier(0.2, 0, 0, 1);
  --vt-fast: 140ms;
}

[data-vt-scheme="dark"] {
  --vt-ink:         #f2f3f5;
  --vt-surface:     #1a1d1e;   /* darkSurface5 */
  --vt-surface-2:   #24282a;
  --vt-surface-3:   #000000;
  --vt-ink-2:       #c9ccd2;
  --vt-ink-3:       #9aa0a8;
  --vt-hairline:    #34383c;
  --vt-hairline-2:  #26292c;
  --vt-track:       #34383c;
  --vt-shadow-lift: 0 2px 12px rgba(0, 0, 0, .6);
  --vt-accent-soft: rgba(232, 216, 63, 0.14);
  --vt-material: rgba(12, 14, 17, .34);
  --vt-material-row: rgba(18, 21, 25, .62);
  --vt-material-panel: rgba(23, 26, 30, .78);
  --vt-material-edge: rgba(255, 255, 255, .22);
  --vt-material-shadow:
    0 18px 38px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 2px 2px rgba(255, 255, 255, .28),
    inset 2px 0 3px rgba(83, 207, 255, .12),
    inset -2px 0 3px rgba(255, 87, 145, .08);
  --vt-material-shadow-soft:
    0 9px 24px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ---- Three accessibility signals, answered independently. Treating them as
   one switch is how "accessible mode" ends up ugly for everyone who only
   needed one of them. ---- */

@media (prefers-reduced-motion: reduce) {
  .vt *, .vt *::before, .vt *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .vt-thread { scroll-behavior: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --vt-material: var(--vt-surface);
    --vt-material-row: var(--vt-surface);
    --vt-material-panel: var(--vt-surface);
    --vt-material-filter: none;
    --vt-material-panel-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --vt-ink-2: #2e3233; --vt-ink-3: #3a3e45; --vt-hairline: #747881; --vt-hairline-2: #9a9ea8; }
  [data-vt-scheme="dark"] { --vt-ink-2: #f2f3f5; --vt-ink-3: #dcdfe3; --vt-hairline: #8a9098; --vt-hairline-2: #6a7078; }
  .vt-card, .vt-unit, .vt-input, .vt-chip, .vt-slot, .vt-day { border-width: 2px; }
}

/* ==========================================================================
   Shell
   ========================================================================== */

.vt, .vt * { box-sizing: border-box; }

.vt {
  font-family: var(--vt-font);
  font-size: var(--vt-t-body);
  font-weight: 400;
  line-height: var(--vt-lh-body);
  letter-spacing: var(--vt-tr-body);
  color: var(--vt-ink);
  background: var(--vt-surface-3);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.vt-liquid-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* The thread scrolls below the fixed lenses. This gives the displacement map
   actual photography, type and cards to refract instead of decorative blobs. */
.vt-header {
  display: flex;
  align-items: center;
  gap: var(--vt-s2);
  position: absolute;
  top: var(--vt-s2); left: var(--vt-s2); right: var(--vt-s2);
  padding: var(--vt-s2);
  min-height: 60px;
  background: var(--vt-material);
  border: 0;
  border-radius: calc(var(--vt-radius-lg) + 10px);
  box-shadow: var(--vt-material-shadow);
  -webkit-backdrop-filter: var(--vt-material-filter);
  backdrop-filter: var(--vt-material-filter);
  flex: 0 0 auto;
  z-index: 6;
  isolation: isolate;
  overflow: hidden;
}
.vt-header::before,
.vt-composer::before {
  content: "";
  position: absolute; inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(255,255,255,.56), transparent 38%),
    linear-gradient(105deg, transparent 12%, rgba(255,255,255,.16) 46%, transparent 62%);
  opacity: .62;
  pointer-events: none;
}
.vt-header::after,
.vt-composer::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 10px 18px -18px rgba(255,255,255,.95);
  pointer-events: none;
}
.vt-header > *, .vt-composer > * {
  position: relative;
  z-index: 2;
}
.vt-logo {
  width: var(--vt-logo-size);
  height: var(--vt-logo-size);
  border-radius: var(--vt-radius-ctl);
  background: var(--vt-accent);
  color: var(--vt-on-accent);
  display: grid;
  place-items: center;
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-label);
  font-weight: 600;
  letter-spacing: var(--vt-tr-caps);
  flex: 0 0 auto;
}
.vt-title {
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-title-sm); font-weight: 600;
  color: var(--vt-ink);
  letter-spacing: var(--vt-tr-title); line-height: 1.1;
  text-shadow: 0 1px 1px var(--vt-surface), 0 0 10px var(--vt-surface);
}
.vt-title span {
  display: block; font-family: var(--vt-font);
  font-size: var(--vt-t-small); font-weight: 600;
  color: var(--vt-ink); letter-spacing: var(--vt-tr-caption);
  line-height: var(--vt-lh-small);
}
.vt-header-right { margin-left: auto; display: flex; align-items: center; gap: var(--vt-s1); }

.vt-ai-badge {
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-small);
  font-weight: 500;
  letter-spacing: var(--vt-tr-caps);
  text-transform: uppercase;
  color: var(--vt-ink-2);
  border: 1px solid color-mix(in srgb, var(--vt-ink) 13%, transparent);
  background: var(--vt-surface);
  padding: var(--vt-s0) var(--vt-s1);
  border-radius: var(--vt-radius-ctl);
  white-space: nowrap;
  line-height: 1.2;
}

/* ==========================================================================
   Thread
   ========================================================================== */

.vt-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 88px var(--vt-s3) 188px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
  background: var(--vt-surface-3);
}

.vt-turn { margin-bottom: var(--vt-s3); }
.vt-turn:last-child { margin-bottom: var(--vt-s0); }

.vt-bubble {
  max-width: 84%;
  width: fit-content;
  padding: var(--vt-s2) var(--vt-s2);
  border-radius: var(--vt-radius);
  font-size: var(--vt-t-body);
  line-height: var(--vt-lh-body);
  letter-spacing: var(--vt-tr-body);
}
.vt-bubble.user {
  margin-left: auto;
  background: var(--vt-accent);
  color: var(--vt-on-accent);
  border-bottom-right-radius: 2px;
  font-weight: 500;
}
.vt-bubble.agent {
  background: var(--vt-material-panel);
  color: var(--vt-ink);
  border: 1px solid var(--vt-material-edge);
  border-bottom-left-radius: 2px;
  box-shadow: var(--vt-material-shadow-soft);
  -webkit-backdrop-filter: var(--vt-material-panel-filter);
  backdrop-filter: var(--vt-material-panel-filter);
}
.vt-bubble p { margin: 0 0 var(--vt-s1); }
.vt-bubble p:last-child { margin-bottom: 0; }
.vt-bubble strong { font-weight: 600; }

.vt-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  vertical-align: text-bottom;
  background: currentColor;
  opacity: .5;
  margin-left: 1px;
  animation: vt-blink 1.05s steps(2, start) infinite;
}
@keyframes vt-blink { 50% { opacity: 0; } }

.vt-typing { display: inline-flex; gap: var(--vt-s0); padding: var(--vt-s0) 0; }
.vt-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vt-ink-3);
  animation: vt-bob 1.15s var(--vt-ease) infinite;
}
.vt-typing i:nth-child(2) { animation-delay: .13s; }
.vt-typing i:nth-child(3) { animation-delay: .26s; }
@keyframes vt-bob { 0%,60%,100% { transform: none; opacity:.4 } 30% { transform: translateY(-4px); opacity:.9 } }

/* ==========================================================================
   Card chrome — readable frosted glass
   ========================================================================== */

.vt-card {
  background: var(--vt-material-panel);
  border: 1px solid var(--vt-material-edge);
  border-radius: calc(var(--vt-radius) + 4px);
  box-shadow: var(--vt-material-shadow-soft);
  -webkit-backdrop-filter: var(--vt-material-panel-filter);
  backdrop-filter: var(--vt-material-panel-filter);
  overflow: hidden;
}
.vt-card + .vt-card { margin-top: var(--vt-s2); }

.vt-card-head { padding: var(--vt-s3) var(--vt-s3) 0; }
.vt-card-title {
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-title-sm); font-weight: 600;
  letter-spacing: var(--vt-tr-title); line-height: 1.15; margin: 0;
}
.vt-card-sub {
  font-size: var(--vt-t-label); color: var(--vt-ink-3);
  margin: var(--vt-s0) 0 0; line-height: var(--vt-lh-label);
  letter-spacing: var(--vt-tr-label);
}
.vt-card-body { padding: var(--vt-s2) var(--vt-s3) var(--vt-s3); }

.vt-skel {
  background: var(--vt-surface);
  border: 1px solid var(--vt-hairline);
  border-radius: var(--vt-radius);
  overflow: hidden;
  position: relative;
}
.vt-skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--vt-ink) 7%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: vt-shimmer 1.4s var(--vt-ease) infinite;
}
@keyframes vt-shimmer { to { transform: translateX(100%); } }
.vt-skel-line { height: 12px; border-radius: 2px; background: var(--vt-track); margin: var(--vt-s2) var(--vt-s3); }
.vt-skel-line.w60 { width: 60%; } .vt-skel-line.w40 { width: 40%; } .vt-skel-line.w80 { width: 80%; }
.vt-skel-block { height: 120px; background: var(--vt-track); margin: var(--vt-s2) var(--vt-s3); border-radius: var(--vt-radius-ctl); }

/* ==========================================================================
   Controls — radius 6, flat, shadow only while pressed
   --------------------------------------------------------------------------
   No `transition: transform`. Press states are springs driven from
   pointerdown in spring.js, and a CSS transition on the same property would
   fight them. CSS animates colour and border only.
   ========================================================================== */

.vt-btn {
  font-family: var(--vt-font);
  font-size: var(--vt-t-label);
  font-weight: 500;
  letter-spacing: var(--vt-tr-label);
  border: 1px solid transparent;
  border-radius: var(--vt-radius-ctl);
  min-height: var(--vt-tap);
  padding: var(--vt-s2) var(--vt-s3);
  cursor: pointer;
  background: var(--vt-accent);
  color: var(--vt-on-accent);
  transition: filter var(--vt-fast) var(--vt-ease), box-shadow var(--vt-fast) var(--vt-ease), background var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
}
/* Pressed state: the fill drops to 80% and the control lifts. */
.vt-btn:hover { filter: brightness(.94); }
.vt-btn:active { box-shadow: var(--vt-shadow-press); }
.vt-btn.ghost { background: transparent; color: var(--vt-ink); border-color: var(--vt-hairline); }
.vt-btn.ghost:hover { background: var(--vt-surface-2); filter: none; }
.vt-btn.quiet { background: var(--vt-surface-2); color: var(--vt-ink); }
.vt-btn[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; }
.vt-btn.block { display: block; width: 100%; }

.vt :focus-visible {
  outline: 2px solid var(--vt-ink);
  outline-offset: 2px;
  border-radius: var(--vt-radius-ctl);
}

/* Chips are pills — radius 25, well past any height they take. */
.vt-chips { display: flex; flex-wrap: wrap; gap: var(--vt-s1); }
.vt-chip {
  font-family: var(--vt-font);
  font-size: var(--vt-t-label);
  font-weight: 500;
  letter-spacing: var(--vt-tr-label);
  min-height: var(--vt-tap);
  padding: var(--vt-s2) var(--vt-s3);
  border-radius: 999px;
  border: 1px solid var(--vt-material-edge);
  background: var(--vt-material-panel);
  color: var(--vt-ink);
  box-shadow: var(--vt-material-shadow-soft);
  -webkit-backdrop-filter: var(--vt-material-panel-filter);
  backdrop-filter: var(--vt-material-panel-filter);
  cursor: pointer;
  transition: background var(--vt-fast) var(--vt-ease), border-color var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
}
.vt-chip:hover { background: var(--vt-accent-soft); border-color: var(--vt-accent); }

.vt-field { display: block; margin-bottom: var(--vt-s2); }
.vt-field:last-child { margin-bottom: 0; }
.vt-label {
  display: block;
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-small);
  font-weight: 500;
  color: var(--vt-ink-2);
  letter-spacing: var(--vt-tr-caps);
  text-transform: uppercase;
  margin-bottom: var(--vt-s0);
  line-height: 1.33;
}
.vt-input {
  font-family: var(--vt-font);
  font-size: var(--vt-t-body);
  width: 100%;
  min-height: var(--vt-tap);
  padding: var(--vt-s2);
  border-radius: var(--vt-radius-ctl);
  border: 1px solid var(--vt-hairline);
  background: var(--vt-surface);
  color: var(--vt-ink);
  transition: border-color var(--vt-fast) var(--vt-ease), box-shadow var(--vt-fast) var(--vt-ease);
}
.vt-input:focus { border-color: var(--vt-ink); box-shadow: inset 0 0 0 1px var(--vt-ink); outline: none; }
.vt-input::placeholder { color: var(--vt-ink-3); }

/* ==========================================================================
   unit_carousel — a dragged track, not an overflow container
   ========================================================================== */

.vt-rail {
  position: relative;
  overflow: hidden;
  padding: var(--vt-s2) 0 var(--vt-s3);
  touch-action: pan-y;
  cursor: grab;
}
.vt-rail:active { cursor: grabbing; }
.vt-rail-track {
  display: flex;
  gap: var(--vt-s1);
  padding: 0 var(--vt-s3);
  width: max-content;
  will-change: transform;
}

.vt-unit {
  flex: 0 0 232px;
  border: 1px solid var(--vt-material-edge);
  border-radius: calc(var(--vt-radius) + 6px);
  background: var(--vt-material-panel);
  box-shadow: var(--vt-material-shadow-soft);
  -webkit-backdrop-filter: var(--vt-material-panel-filter);
  backdrop-filter: var(--vt-material-panel-filter);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--vt-fast) var(--vt-ease), box-shadow 200ms var(--vt-ease);
  touch-action: inherit;
}
.vt-unit::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.78),
    inset 1px 0 2px rgba(90,214,255,.12),
    inset -1px 0 2px rgba(255,91,151,.08);
  pointer-events: none;
  z-index: 3;
}
.vt-unit:hover { border-color: var(--vt-accent); box-shadow: var(--vt-material-shadow); }
.vt-unit[aria-pressed="true"] { border-color: var(--vt-ink); box-shadow: inset 0 0 0 1px var(--vt-ink); }

.vt-unit-art {
  height: 132px; position: relative; overflow: hidden;
  background: var(--vt-surface-2);
  display: grid; place-items: center;
}
/* The photo. Real inventory photography is the point of the component; the
   generated silhouette below is only what shows when the network is gone. */
.vt-unit-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--vt-surface-2);
  -webkit-user-drag: none;
  user-select: none;
}
.vt-unit-art svg { width: 74%; height: 74%; position: relative; }
.vt-unit-tag {
  position: absolute; top: var(--vt-s1); left: var(--vt-s1); z-index: 2;
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-small); font-weight: 600;
  letter-spacing: var(--vt-tr-caps); text-transform: uppercase;
  padding: var(--vt-s0) var(--vt-s1); border-radius: 2px;
  background: var(--vt-accent);
  color: var(--vt-on-accent);
  line-height: 1.33;
}
.vt-unit-body {
  padding: var(--vt-s2);
  display: flex; flex-direction: column; gap: var(--vt-s0); flex: 1;
  background: linear-gradient(145deg, rgba(255,255,255,.15), transparent 48%);
  border-top: 1px solid rgba(255,255,255,.42);
}
.vt-unit-name {
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-body-lg); font-weight: 600;
  letter-spacing: var(--vt-tr-title); line-height: 1.15;
}
.vt-unit-meta { font-size: var(--vt-t-small); color: var(--vt-ink-3); letter-spacing: var(--vt-tr-caption); line-height: var(--vt-lh-small); }
.vt-unit-price {
  margin-top: auto; padding-top: var(--vt-s1);
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-title-sm); font-weight: 600; letter-spacing: var(--vt-tr-title);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.vt-unit-mo { font-family: var(--vt-font); font-size: var(--vt-t-small); color: var(--vt-ink-3); font-weight: 400; letter-spacing: var(--vt-tr-caption); }

.vt-rail::before, .vt-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px; z-index: 2; pointer-events: none;
}
.vt-rail::before { left: 0;  background: linear-gradient(90deg, var(--vt-surface), transparent); }
.vt-rail::after  { right: 0; background: linear-gradient(270deg, var(--vt-surface), transparent); }

.vt-carousel-dots {
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-s1);
  margin: 0 var(--vt-s3) var(--vt-s2);
}
.vt-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--vt-ink-3);
  opacity: .36;
  transform: scale(.84);
  transition: transform var(--vt-fast) var(--vt-ease), opacity var(--vt-fast) var(--vt-ease), background var(--vt-fast) var(--vt-ease);
}
.vt-carousel-dot[data-active="true"] {
  background: var(--vt-accent-text);
  opacity: 1;
  transform: scale(1.34);
}

/* ==========================================================================
   unit_compare
   ========================================================================== */

.vt-cmp { width: 100%; border-collapse: collapse; font-size: var(--vt-t-label); }
.vt-cmp th, .vt-cmp td {
  padding: var(--vt-s2) var(--vt-s3);
  text-align: left;
  border-top: 1px solid var(--vt-hairline-2);
  vertical-align: top;
}
.vt-cmp thead th {
  border-top: none;
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-body); font-weight: 600; letter-spacing: var(--vt-tr-title);
  color: var(--vt-ink); padding-top: var(--vt-s0); line-height: 1.2;
}
.vt-cmp thead th:first-child {
  color: var(--vt-ink-3); font-size: var(--vt-t-small); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--vt-tr-caps);
}
.vt-cmp tbody th { font-size: var(--vt-t-small); font-weight: 400; color: var(--vt-ink-3); width: 34%; letter-spacing: var(--vt-tr-caption); }
.vt-cmp td { font-variant-numeric: tabular-nums; color: var(--vt-ink); }
/* Accent as TEXT uses the contrast-corrected token. With a light amber accent this
   is the entire difference between a readable cell and a blank one. */
.vt-cmp td.best { color: var(--vt-accent-text); font-weight: 600; }
.vt-cmp-wrap { overflow-x: auto; padding: var(--vt-s0) 0 var(--vt-s1); }

/* ==========================================================================
   finance_slider
   ========================================================================== */

.vt-fin-figure { display: flex; align-items: baseline; gap: var(--vt-s1); padding: var(--vt-s0) 0 var(--vt-s3); }
.vt-fin-amount {
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-display); font-weight: 600;
  letter-spacing: var(--vt-tr-display); line-height: var(--vt-lh-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.vt-fin-per { font-size: var(--vt-t-label); color: var(--vt-ink-3); letter-spacing: var(--vt-tr-label); }

.vt-slider { margin-bottom: var(--vt-s3); }
.vt-slider:last-of-type { margin-bottom: var(--vt-s0); }
.vt-slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--vt-s0); }
.vt-slider-name {
  font-family: var(--vt-font-title); font-size: var(--vt-t-small); color: var(--vt-ink-2);
  letter-spacing: var(--vt-tr-caps); text-transform: uppercase;
}
.vt-slider-val { font-size: var(--vt-t-label); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Custom, because <input type=range> cannot honour a grab offset: grab the
   thumb 8px off centre and it teleports. The track is 4px; the CONTROL is 44,
   because the target is the row, not the hairline. */
.vt-range {
  position: relative;
  height: var(--vt-tap);
  display: flex; align-items: center;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.vt-range-track {
  position: absolute; left: 0; right: 0; height: 4px;
  border-radius: 2px; background: var(--vt-track); overflow: hidden;
}
.vt-range-fill {
  position: absolute; inset: 0;
  background: var(--vt-accent);
  transform-origin: left center;
  will-change: transform;
}
.vt-range-thumb {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--vt-ink);
  border: 3px solid var(--vt-accent);
  will-change: transform;
  pointer-events: none;
}

/* Regulation Z / Regulation M. A rendered monthly payment is an advertised
   trigger term; the disclosure travels with the card by construction, and the
   renderer refuses to draw the card without it. */
.vt-disclosure {
  margin-top: var(--vt-s3);
  padding: var(--vt-s2);
  border-radius: var(--vt-radius-ctl);
  background: var(--vt-surface-2);
  font-size: var(--vt-t-small);
  line-height: var(--vt-lh-small);
  letter-spacing: var(--vt-tr-caption);
  color: var(--vt-ink-2);
}
.vt-disclosure b {
  font-family: var(--vt-font-title);
  color: var(--vt-ink); font-weight: 600; display: block; margin-bottom: var(--vt-s0);
  letter-spacing: var(--vt-tr-caps); text-transform: uppercase; line-height: 1.33;
}
.vt-disclosure dl { display: grid; grid-template-columns: auto 1fr; gap: var(--vt-s0) var(--vt-s2); margin: 0 0 var(--vt-s1); }
.vt-disclosure dt { color: var(--vt-ink-3); }
.vt-disclosure dd { margin: 0; color: var(--vt-ink); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }

/* ==========================================================================
   schedule
   ========================================================================== */

.vt-days { display: flex; gap: var(--vt-s1); overflow-x: auto; padding-bottom: var(--vt-s0); margin-bottom: var(--vt-s2); scrollbar-width: none; }
.vt-days::-webkit-scrollbar { display: none; }
.vt-day {
  flex: 0 0 auto; min-width: 56px; min-height: 64px;
  border: 1px solid var(--vt-hairline); border-radius: var(--vt-radius-ctl);
  background: var(--vt-surface); color: var(--vt-ink);
  padding: var(--vt-s1) var(--vt-s0); text-align: center; cursor: pointer; font: inherit;
  transition: background var(--vt-fast) var(--vt-ease), border-color var(--vt-fast) var(--vt-ease), color var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
}
.vt-day[aria-pressed="true"] { background: var(--vt-accent); color: var(--vt-on-accent); border-color: var(--vt-accent); }
.vt-day .dow {
  display: block; font-family: var(--vt-font-title); font-size: var(--vt-t-small);
  text-transform: uppercase; letter-spacing: var(--vt-tr-caps); color: inherit; opacity: .75; line-height: 1.33;
}
.vt-day .dnum {
  display: block; font-family: var(--vt-font-title); font-size: var(--vt-t-title-sm); font-weight: 600;
  letter-spacing: var(--vt-tr-title); font-variant-numeric: tabular-nums; line-height: 1.2;
}

.vt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--vt-s1); }
.vt-slot {
  font-family: var(--vt-font); font-size: var(--vt-t-label); font-variant-numeric: tabular-nums;
  letter-spacing: var(--vt-tr-label);
  min-height: var(--vt-tap);
  padding: var(--vt-s1) var(--vt-s0); border-radius: var(--vt-radius-ctl);
  border: 1px solid var(--vt-hairline); background: var(--vt-surface); color: var(--vt-ink);
  cursor: pointer;
  transition: background var(--vt-fast) var(--vt-ease), border-color var(--vt-fast) var(--vt-ease), color var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
}
.vt-slot:hover:not([disabled]) { border-color: var(--vt-accent); background: var(--vt-accent-soft); }
.vt-slot[aria-pressed="true"] { background: var(--vt-accent); color: var(--vt-on-accent); border-color: var(--vt-accent); }
.vt-slot[disabled] { opacity: .36; cursor: not-allowed; text-decoration: line-through; }

/* ==========================================================================
   trade_in / lead_capture
   ========================================================================== */

.vt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vt-s2); }
@media (max-width: 460px) { .vt-grid2 { grid-template-columns: 1fr; } }

.vt-estimate {
  margin-top: var(--vt-s2); padding: var(--vt-s3);
  border-radius: var(--vt-radius-ctl);
  background: var(--vt-accent-soft);
  border-left: 4px solid var(--vt-accent);
}
.vt-estimate .k {
  font-family: var(--vt-font-title); font-size: var(--vt-t-small); text-transform: uppercase;
  letter-spacing: var(--vt-tr-caps); color: var(--vt-ink-2); font-weight: 500;
}
.vt-estimate .v {
  font-family: var(--vt-font-title); font-size: var(--vt-t-title); font-weight: 600;
  letter-spacing: var(--vt-tr-title); margin-top: var(--vt-s0); font-variant-numeric: tabular-nums; line-height: 1.22;
}
.vt-estimate .n { font-size: var(--vt-t-small); color: var(--vt-ink-2); margin-top: var(--vt-s0); line-height: var(--vt-lh-small); }

/* ==========================================================================
   summary_receipt
   ========================================================================== */

.vt-receipt-check {
  width: 44px; height: 44px; border-radius: var(--vt-radius-ctl);
  background: var(--vt-accent); color: var(--vt-on-accent);
  display: grid; place-items: center; margin-bottom: var(--vt-s2);
}
.vt-receipt dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--vt-s1) var(--vt-s3);
  margin: var(--vt-s2) 0 0; font-size: var(--vt-t-label);
}
.vt-receipt dt { color: var(--vt-ink-3); letter-spacing: var(--vt-tr-label); }
.vt-receipt dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Composer
   ========================================================================== */

.vt-composer {
  position: absolute;
  left: var(--vt-s2); right: var(--vt-s2); bottom: var(--vt-s2);
  padding: var(--vt-s2);
  background: var(--vt-material);
  border: 0;
  border-radius: calc(var(--vt-radius-lg) + 12px);
  box-shadow: var(--vt-material-shadow);
  -webkit-backdrop-filter: var(--vt-material-filter);
  backdrop-filter: var(--vt-material-filter);
  flex: 0 0 auto;
  z-index: 6;
  isolation: isolate;
  overflow: hidden;
}
.vt-composer-row {
  display: flex; align-items: flex-end; gap: var(--vt-s1);
  background: var(--vt-material-row);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: calc(var(--vt-radius-lg) + 4px);
  padding: var(--vt-s0) var(--vt-s0) var(--vt-s0) var(--vt-s2);
  transition: border-color var(--vt-fast) var(--vt-ease), box-shadow var(--vt-fast) var(--vt-ease);
}
.vt-composer-row:focus-within { border-color: var(--vt-accent); box-shadow: 0 0 0 3px var(--vt-accent-ring), inset 0 1px 0 rgba(255,255,255,.32); }
.vt-composer.demo-mode .vt-composer-row {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--vt-ink) 24%, transparent);
  background: color-mix(in srgb, var(--vt-material-row) 82%, var(--vt-surface));
}
.vt-composer textarea {
  flex: 1; border: none; outline: none; background: transparent; resize: none;
  font-family: var(--vt-font); font-size: var(--vt-t-body); color: var(--vt-ink);
  padding: var(--vt-s2) 0; min-height: var(--vt-tap); max-height: 120px;
  line-height: var(--vt-lh-label);
}
.vt-composer textarea::placeholder { color: var(--vt-ink-3); }
.vt-composer textarea:disabled {
  color: var(--vt-ink-3);
  cursor: not-allowed;
  opacity: .95;
}
.vt-send {
  flex: 0 0 auto; width: var(--vt-tap); height: var(--vt-tap);
  border-radius: var(--vt-radius-ctl); border: none; padding: 0;
  background: var(--vt-accent); color: var(--vt-on-accent);
  cursor: pointer; display: grid; place-items: center;
  transition: opacity var(--vt-fast) var(--vt-ease), filter var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: vt-send-pulse 2.6s var(--vt-ease) 1.1s infinite;
}
.vt-send::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 22%, rgba(255,255,255,.35) 48%, transparent 68%);
  transform: translateX(-130%);
  animation: vt-send-sheen 3.2s linear 1.2s infinite;
  pointer-events: none;
  z-index: 0;
}
.vt-send svg { position: relative; z-index: 1; }
.vt-send:hover { filter: brightness(.94); }
.vt-send[disabled] { opacity: .3; cursor: default; }
.vt-composer.demo-mode .vt-send,
.vt-send[disabled] {
  animation: none;
}
.vt-send[disabled]::before {
  animation: none;
}

.vt-suggestions {
  display: flex; gap: var(--vt-s1); margin-bottom: var(--vt-s2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--vt-s0) var(--vt-s1) var(--vt-s0) 0;
}
.vt-suggestions::-webkit-scrollbar { display: none; }
.vt-sugg {
  --vt-chip-delay: 0s;
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  font-family: var(--vt-font); font-size: var(--vt-t-small);
  letter-spacing: var(--vt-tr-caption);
  line-height: 1.2;
  min-height: var(--vt-tap);
  padding: var(--vt-s1) var(--vt-s2); border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vt-accent) 66%, var(--vt-hairline));
  background: color-mix(in srgb, var(--vt-material-row) 78%, var(--vt-surface));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 0 color-mix(in srgb, var(--vt-accent) 24%, transparent);
  color: var(--vt-ink); cursor: pointer;
  transition: background var(--vt-fast) var(--vt-ease), color var(--vt-fast) var(--vt-ease), border-color var(--vt-fast) var(--vt-ease), box-shadow var(--vt-fast) var(--vt-ease);
  touch-action: manipulation;
  animation:
    vt-chip-float 1.7s var(--vt-ease) var(--vt-chip-delay) infinite alternate,
    vt-chip-glow 2.6s var(--vt-ease) var(--vt-chip-delay) infinite;
}
.vt-sugg:nth-child(2) { --vt-chip-delay: .12s; }
.vt-sugg:nth-child(3) { --vt-chip-delay: .24s; }
.vt-sugg:nth-child(4) { --vt-chip-delay: .36s; }
.vt-sugg:hover {
  background: var(--vt-accent-soft);
  color: var(--vt-ink);
  border-color: var(--vt-accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 20px color-mix(in srgb, var(--vt-accent) 20%, transparent);
}
.vt-sugg:disabled {
  opacity: .5;
  cursor: not-allowed;
  animation: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.vt-demo-note {
  margin: var(--vt-s1) 0 0;
  font-family: var(--vt-font-title);
  font-size: var(--vt-t-small);
  font-weight: 500;
  letter-spacing: var(--vt-tr-caps);
  text-transform: uppercase;
  color: var(--vt-ink-3);
  text-align: center;
}

@keyframes vt-send-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  45% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--vt-accent) 18%, transparent); }
}

@keyframes vt-send-sheen {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(150%); }
}

@keyframes vt-chip-float {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes vt-chip-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 0 0 color-mix(in srgb, var(--vt-accent) 0%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      0 0 0 5px color-mix(in srgb, var(--vt-accent) 20%, transparent),
      0 10px 22px color-mix(in srgb, var(--vt-accent) 28%, transparent);
  }
}

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