/* ════════════════════════════════════════════════════════════════════════
   LTF STUDIO — dial-based Long-Term-Finance composer (v2 "premium")
   Replaces the old timing__expand-panel form stack with:
     • machined rotary amount dials (knurled bezel, grooved face, accent
       bleed on the neumorphic shadows and tick tips)
     • month-tick age picking ON the graph's own age axis
     • animated brackets/stems/pins drawn over the wealth graph
     • the Billie finance chat — bright, near-transparent glass
   PERFORMANCE: zero backdrop-filter. All "glass" is layered alpha
   gradients + inset highlights (rasterized once, cheap on mobile GPUs).
   Animations stick to transform/opacity wherever possible.
   Mobile rules at the bottom (≤768px).
   ════════════════════════════════════════════════════════════════════════ */

/* The old form panel is fully replaced by the studio. */
.timing__expandable-container { display: none !important; }

/* While the finance panel is open, the floating Ask-Billie column steps
   aside (it owns every center click at z20 otherwise — and LTF has its own
   Billie chat inside the panel). Mirrors the app's existing mobile rule. */
@media (min-width: 769px) {
  .timing__panel.is-open ~ .ai-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity var(--dur-slow) var(--ease-standard);
  }
  .timing__panel.is-open ~ .ai-panel * { pointer-events: none !important; }
}

/* ── Studio root: the free band BELOW the age axis ─────────────────────── */
.ltf-studio {
  position: absolute;
  left: 75.5px;
  right: 30px;
  bottom: 4px;
  height: 172px;
  display: grid;
  grid-template-columns: 156px 1fr 156px;
  gap: 14px;
  align-items: center;
  z-index: 6;
  pointer-events: none;               /* children opt back in explicitly */
  font-family: inherit;
}
/* Only the truly interactive pieces catch the pointer — the wraps and the
   center column stay click-through so the age axis underneath is reachable. */
.ltf-dial-wrap, .ltf-center { pointer-events: none; }
.ltf-dial, .ltf-dial-action, .ltf-desc-ext { pointer-events: auto; }

/* ── Dial ──────────────────────────────────────────────────────────────── */
.ltf-dial-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.ltf-dial-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--dur-base) var(--ease-standard), text-shadow var(--dur-base) var(--ease-standard);
}

/* Accent per dial kind (green income / red expense / blue event / violet goal) */
.ltf-dial-wrap[data-kind="income"]  { --ltf-accent: 142, 235, 158; }
.ltf-dial-wrap[data-kind="expense"] { --ltf-accent: 255, 138, 138; }
.ltf-dial-wrap[data-kind="event"]   { --ltf-accent: 138, 186, 255; }
.ltf-dial-wrap[data-kind="goal"]    { --ltf-accent: 205, 160, 255; }

/* The dial body — brushed metal: a soft conic sheen over a warm grey base,
   deep drop shadow, crisp rim light. Layers (bottom→top):
   dial bg → bezel (knurling) → face (grooves) → ticks → splash → dip bar */
.ltf-dial {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.40);
  background:
    radial-gradient(115% 95% at 30% 12%, rgba(255, 255, 255, 0.22), transparent 44%),
    conic-gradient(from 210deg,
      rgba(255, 255, 255, 0.14) 0deg,
      rgba(148, 152, 164, 0.10) 70deg,
      rgba(255, 255, 255, 0.20) 140deg,
      rgba(128, 132, 146, 0.12) 215deg,
      rgba(255, 255, 255, 0.16) 290deg,
      rgba(255, 255, 255, 0.14) 360deg),
    linear-gradient(135deg, rgba(228, 230, 236, 0.16) 0%, rgba(176, 180, 192, 0.10) 55%, rgba(148, 152, 166, 0.14) 100%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 3px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.38),
    inset 0 -10px 18px -8px rgba(0, 0, 0, 0.30),
    inset 0 0 20px 4px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  touch-action: none;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-standard),
    border-color var(--dur-slow) var(--ease-standard);
}
.ltf-dial:hover { transform: scale(1.03); }
.ltf-dial.is-armed { cursor: grab; }
.ltf-dial.is-dragging { cursor: grabbing; transform: scale(1.04); }

/* Knurled bezel — fine machined teeth around the rim (mask keeps it a ring) */
.ltf-dial-bezel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.20) 0deg 1.1deg,
      rgba(20, 22, 30, 0.16) 1.1deg 2.2deg,
      transparent 2.2deg 4.4deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 82%, #000 83%);
  mask: radial-gradient(farthest-side, transparent 82%, #000 83%);
  opacity: 0.9;
}
/* Machined face — concentric grooves + soft vignette inside the bezel */
.ltf-dial-face {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(100% 100% at 32% 18%, rgba(255, 255, 255, 0.14), transparent 52%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.055) 0 1px,
      transparent 1px 5px),
    radial-gradient(farthest-side, transparent 58%, rgba(0, 0, 0, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 14px rgba(0, 0, 0, 0.14);
}
/* Accent glow layer — animated by OPACITY only (cheap), never box-shadow */
.ltf-dial-glow {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(farthest-side,
    transparent 62%,
    rgba(var(--ltf-accent, 255, 255, 255), 0.28) 82%,
    rgba(var(--ltf-accent, 255, 255, 255), 0.10) 92%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}

.ltf-dial-wrap.is-selected .ltf-dial {
  border-color: rgba(var(--ltf-accent), 0.75);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 6px 16px rgba(var(--ltf-accent), 0.18),          /* accent bleeding into the drop shadow */
    inset 0 1px 1px rgba(255, 255, 255, 0.40),
    inset 0 -10px 18px -8px rgba(var(--ltf-accent), 0.22),  /* …and into the inner shade */
    inset 0 0 20px 4px rgba(var(--ltf-accent), 0.07);
}
.ltf-dial-wrap.is-selected .ltf-dial-glow { opacity: 0.8; }
.ltf-dial-wrap.is-selected .ltf-dial-title {
  color: rgba(var(--ltf-accent), 0.95);
  text-shadow: 0 0 10px rgba(var(--ltf-accent), 0.55);
}

/* Selection splash — CONTAINED: ripples inside the dial, clipped by an
   overflow-hidden circle so nothing explodes past the rim. */
.ltf-splash {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.ltf-splash::before,
.ltf-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.ltf-splash::before {
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--ltf-accent, 255, 255, 255), 0.55) 0%,
    rgba(var(--ltf-accent, 255, 255, 255), 0.20) 42%,
    transparent 68%);
}
.ltf-splash::after {
  border: 2px solid rgba(var(--ltf-accent, 255, 255, 255), 0.75);
  inset: 4px;
}
.ltf-dial.is-splashing .ltf-splash::before { animation: ltf-splash-core 0.65s var(--ease-out) forwards; }
.ltf-dial.is-splashing .ltf-splash::after  { animation: ltf-splash-ring 0.7s  var(--ease-out) forwards; }
@keyframes ltf-splash-core {
  0%   { opacity: 0.95; transform: scale(0.25); }
  100% { opacity: 0;    transform: scale(1.12); }
}
@keyframes ltf-splash-ring {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0;   transform: scale(1.0); }
}

/* Ticks that live INSIDE the dial and "shoot out" when the amount is live.
   Body fades white→grey with an ACCENT TIP on the outer end. */
.ltf-dial-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform 0.25s var(--ease-standard);
}
.ltf-dial-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5px;
  height: 9px;
  margin: -4.5px 0 0 -1.25px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(var(--ltf-accent, 255, 255, 255), 0.55) 0%,
    rgba(255, 255, 255, 0.50) 38%,
    rgba(255, 255, 255, 0.26) 100%);
  transform: rotate(var(--a)) translateY(-47px);
  transition:
    transform 0.45s var(--ease-spring),
    background var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.ltf-dial-tick.is-major { height: 12px; margin-top: -6px; width: 3px; margin-left: -1.5px; }
.ltf-dial.is-live .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-67px);
  background: linear-gradient(180deg,
    rgba(var(--ltf-accent, 255, 255, 255), 0.95) 0%,
    rgba(255, 255, 255, 0.85) 45%,
    rgba(255, 255, 255, 0.40) 100%);
  box-shadow: 0 0 7px rgba(var(--ltf-accent, 255, 255, 255), 0.55);
}
.ltf-dial.is-locked-shut .ltf-dial-tick {
  background: rgba(255, 255, 255, 0.20);
  transform: rotate(var(--a)) translateY(-38px);
}

/* The dip — now a HORIZONTAL near-white bar across the middle: clearly a
   pressed-in channel, but bright, with only a whisper of shadow. The accent
   fades into its neumorphic edges when a kind is selected. */
.ltf-dial-dip {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(250, 251, 253, 0.94) 0%, rgba(233, 236, 242, 0.90) 100%);
  box-shadow:
    inset 0 2px 4px rgba(15, 20, 30, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 8px;
  text-align: center;
  overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease-standard);
}
.ltf-dial-wrap.is-selected .ltf-dial-dip {
  box-shadow:
    inset 0 2px 4px rgba(var(--ltf-accent), 0.30),      /* accent seeping into the dip shadow */
    inset 0 -1px 1px rgba(255, 255, 255, 0.85),
    inset 0 0 10px rgba(var(--ltf-accent), 0.10),
    0 1px 0 rgba(255, 255, 255, 0.30);
}
.ltf-dial-amount {
  max-width: 100%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #262b35;
  font-size: 1.0rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ltf-dial-amount.is-xl   { font-size: 0.9rem; }
.ltf-dial-amount.is-lg   { font-size: 0.78rem; }
.ltf-dial-amount.is-md   { font-size: 0.66rem; }
.ltf-dial-amount.is-sm   { font-size: 0.56rem; }
.ltf-dial-hintline {
  font-size: 0.46rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(38, 45, 58, 0.52);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Slang line sits on the dial face just UNDER the dip, subtle grey */
.ltf-dial-slang {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

/* Description input — lives INSIDE the white dip bar: dark ink on bright */
.ltf-dial-desc {
  width: 100%;
  padding: 2px 4px;
  border: none;
  border-bottom: 1.5px solid rgba(var(--ltf-accent, 120, 130, 150), 0.55);
  border-radius: 0;
  background: transparent;
  color: #232833;
  font-family: inherit;
  font-size: 16px;              /* stops iOS zoom */
  text-align: center;
  outline: none;
}
.ltf-dial-desc::placeholder { color: rgba(40, 48, 62, 0.40); font-size: 0.62rem; }
/* …except the pop-out edit box, which floats above the dial on dark glass */
.ltf-desc-ext {
  border: 1px solid rgba(var(--ltf-accent, 255, 255, 255), 0.45);
  border-radius: 10px;
  background: rgba(12, 14, 20, 0.72);
  color: #fff;
  padding: 6px 9px;
}

/* Lock / confirm pill under the dial */
.ltf-dial-action {
  min-height: 25px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(253, 253, 253, 0.30);
  background: rgba(197, 197, 197, 0.22);
  box-shadow: 0 2px 8px rgba(151, 151, 151, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: rgba(250, 250, 250, 0.9);
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none !important;
  transition: all var(--dur-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ltf-dial-action.is-on { opacity: 1; transform: none; pointer-events: auto !important; }
.ltf-dial-action:hover { background: rgba(197, 197, 197, 0.38); color: #fff; transform: translateY(-1px); }
.ltf-dial-action:active { transform: scale(0.94); }

/* Hold-to-commit progress ring (conic sweep around the dial) */
.ltf-hold-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(rgba(var(--ltf-accent, 255, 255, 255), 0.9) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.ltf-dial.is-holding .ltf-hold-ring { opacity: 1; }

/* Armed nudge — pulse the GLOW LAYER's opacity (transform/opacity only) */
.ltf-dial.is-armed .ltf-dial-glow,
.ltf-dial.is-armed ~ .ltf-dial-glow { opacity: 0.85; }
.ltf-dial.is-armed .ltf-dial-glow { animation: ltf-armed-breathe 2.2s ease-in-out infinite; }
@keyframes ltf-armed-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* ── Center column: hint + month picker ───────────────────────────────── */
.ltf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}
.ltf-hint {
  max-width: 100%;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
  min-height: 2em;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.ltf-hint b { color: rgba(var(--ltf-live-accent, 255, 255, 255), 0.95); font-weight: 800; }
.ltf-hint.is-swap { opacity: 0; }

/* Month picker — 12 vertical rounded ticks, labelled JAN…DEC */
.ltf-months {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all var(--dur-slow) var(--ease-spring);
}
.ltf-months.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ltf-months-title {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ltf-months-title b { color: rgba(var(--ltf-live-accent, 255, 255, 255), 0.9); }
.ltf-months-row { display: flex; gap: 6px; }
.ltf-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ltf-month-bar {
  width: 12px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(253, 253, 253, 0.30);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ltf-month:hover .ltf-month-bar {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.24);
}
.ltf-month.is-picked .ltf-month-bar {
  background: rgba(var(--ltf-live-accent, 255, 255, 255), 0.85);
  border-color: rgba(var(--ltf-live-accent, 255, 255, 255), 0.9);
  box-shadow: 0 0 10px rgba(var(--ltf-live-accent, 255, 255, 255), 0.55);
}
.ltf-month-lab {
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ── Graph overlay: hotspots, points, brackets, stems, pins ────────────────
   The layer mirrors .age-markers-placeholder's box EXACTLY (left 8px /
   width 98%) so every % position lands on the real axis — and everything
   stays INSIDE .graph-stage (overflow:hidden clips anything below it). */
.ltf-age-layer {
  position: absolute;
  left: 8px;
  width: 98%;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 8;
}
.ltf-age-hotspot {
  position: absolute;
  bottom: 8px;                        /* covers tick + number label zone */
  width: 18px;
  height: 36px;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  border-radius: 7px;
  -webkit-tap-highlight-color: transparent;
}
.ltf-age-hotspot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  background: rgba(var(--ltf-live-accent, 255, 255, 255), 0.9);
  box-shadow: 0 0 8px rgba(var(--ltf-live-accent, 255, 255, 255), 0.6);
  transition: transform var(--dur-base) var(--ease-spring);
}
.ltf-age-layer.is-picking .ltf-age-hotspot:hover::after { transform: translateX(-50%) scale(1); }
.ltf-age-layer.is-picking .ltf-age-hotspot { cursor: crosshair; }
.ltf-age-layer.is-picking .ltf-age-hotspot:hover { background: rgba(255, 255, 255, 0.06); }

/* A placed month-point on the age axis (sits ON the tick line) */
.ltf-point {
  position: absolute;
  bottom: 30px;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  background: rgb(var(--pt, 255, 255, 255));
  box-shadow: 0 0 9px rgba(var(--pt, 255, 255, 255), 0.65);
  animation: ltf-point-in 0.4s var(--ease-spring) forwards;
}
@keyframes ltf-point-in { to { transform: translateX(-50%) scaleY(1); } }

/* Bracket connecting the two ticks along their BOTTOMS (the "little bowl") */
.ltf-bracket {
  position: absolute;
  bottom: 20px;
  height: 12px;
  border-bottom: 2px solid rgba(var(--bk, 255, 255, 255), 0.85);
  border-left: 2px solid rgba(var(--bk, 255, 255, 255), 0.85);
  border-right: 2px solid rgba(var(--bk, 255, 255, 255), 0.85);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 3px 10px -2px rgba(var(--bk, 255, 255, 255), 0.4);
  transform-origin: left center;
  animation: ltf-bracket-in 0.6s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ltf-bracket-in {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
/* Stream description pill ABOVE the bowl */
.ltf-bracket-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  max-width: calc(100% + 26px);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--bk, 255, 255, 255), 0.4);
  background: rgba(10, 12, 18, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: default;
}
.ltf-bracket-label .ltf-x {
  display: none;
  margin-left: 5px;
  cursor: pointer;
  color: rgba(255, 150, 150, 0.9);
  font-weight: 900;
}
.ltf-bracket-label:hover .ltf-x { display: inline; }

/* One-time event stem: thin vertical line rising from its month */
.ltf-stem {
  position: absolute;
  bottom: 38px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(var(--bk, 138, 186, 255), 0.0), rgba(var(--bk, 138, 186, 255), 0.9));
  box-shadow: 0 0 8px rgba(var(--bk, 138, 186, 255), 0.5);
  transform-origin: bottom;
  animation: ltf-stem-in 0.5s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ltf-stem-in { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
.ltf-stem-label {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(var(--bk, 138, 186, 255), 0.45);
  background: rgba(10, 12, 18, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.52rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
}
.ltf-stem-label .ltf-x { display: none; margin-left: 4px; cursor: pointer; color: rgba(255,150,150,.9); font-weight: 900; }
.ltf-stem-label:hover .ltf-x { display: inline; }

/* Month fan for one-time/goal picking (12 mini ticks along the axis) */
.ltf-fan { position: absolute; inset: 0; pointer-events: none; }
.ltf-fan-tick {
  position: absolute;
  bottom: 30px;
  width: 5px;
  height: 14px;
  border-radius: 3px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  cursor: pointer;
  animation: ltf-point-in 0.3s var(--ease-spring) forwards;
  animation-delay: var(--d, 0s);
}
.ltf-fan-tick:hover { background: rgba(var(--ltf-live-accent, 255, 255, 255), 0.95); }

/* Chooser chip pair (Event / Goal) that pops over a clicked age */
.ltf-chooser {
  position: absolute;
  bottom: 54px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(253, 253, 253, 0.32);
  background: rgba(16, 18, 26, 0.78);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: ltf-chooser-in 0.3s var(--ease-spring);
  z-index: 3;
}
@keyframes ltf-chooser-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); } }
.ltf-chooser button {
  border: 1px solid rgba(253, 253, 253, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(197, 197, 197, 0.18);
  color: #fff;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ltf-chooser button.ltf-choose-event:hover { background: rgba(138, 186, 255, 0.35); }
.ltf-chooser button.ltf-choose-goal:hover  { background: rgba(205, 160, 255, 0.35); }

/* Goal pin (age-axis marker for a committed goal) */
.ltf-goal-pin {
  position: absolute;
  bottom: 31px;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(205, 160, 255, 0.95);
  background: rgba(20, 16, 30, 0.8);
  box-shadow: 0 0 10px rgba(205, 160, 255, 0.6);
  animation: ltf-chooser-in 0.35s var(--ease-spring);
  pointer-events: none;
}

/* ── Billie finance chat — BRIGHT, barely-there glass ──────────────────────
   No backdrop-filter: the frosted look is faked with bright alpha
   gradients, a top sheen and a strong inner highlight ring. */
.ltf-chat {
  position: absolute;
  top: -7px;
  left: 6.4%;
  width: 93.6%;
  height: 208px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 34%, rgba(226, 230, 238, 0.15) 70%, rgba(255, 255, 255, 0.19) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -12px 24px -18px rgba(255, 255, 255, 0.45),
    0 12px 30px rgba(20, 24, 34, 0.14);
  overflow: hidden;
}
/* soft sheen sweeping the top-left corner — pure gradient, zero blur */
.ltf-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 12% -8%, rgba(255, 255, 255, 0.30), transparent 55%);
  pointer-events: none;
}
.ltf-chat-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}
.ltf-chat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ambient-text-primary, #ffc4d6);
  box-shadow: 0 0 8px var(--ambient-text-primary, #ffc4d6);
}
.ltf-chat-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(15, 20, 30, 0.45);
  white-space: nowrap;
}

/* Model switcher chip + popover (writes the same keys as Settings) */
.ltf-model {
  position: relative;
  margin-left: 4px;
  flex: 0 0 auto;
}
.ltf-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(15, 20, 30, 0.4);
  font-family: inherit;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-standard);
}
.ltf-model-chip:hover { background: rgba(255, 255, 255, 0.30); }
.ltf-model-chip .caret { font-size: 0.5rem; opacity: 0.7; }
.ltf-model-chip.is-locked { cursor: default; opacity: 0.75; }
.ltf-model-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 148px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(170deg, rgba(252, 253, 255, 0.94), rgba(233, 237, 244, 0.92));
  box-shadow: 0 14px 30px rgba(20, 24, 34, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 5;
}
.ltf-model-menu.is-open { display: flex; }
.ltf-model-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #262b35;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ltf-model-opt small { font-weight: 600; opacity: 0.55; font-size: 0.52rem; }
.ltf-model-opt:hover { background: rgba(30, 40, 60, 0.08); }
.ltf-model-opt.is-active { background: rgba(30, 40, 60, 0.12); }

/* Energy bar — same source of truth as the Ask-Billie panel */
.ltf-energy {
  margin-left: auto;
  flex: 0 1 150px;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ltf-energy-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(15, 20, 30, 0.4);
  text-align: right;
}
.ltf-energy-track {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
}
.ltf-energy-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(120, 220, 180, 0.95) 0%, rgba(110, 180, 240, 0.95) 100%);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-emphasized);
}
.ltf-energy-fill.is-low   { background: linear-gradient(90deg, rgba(255, 180, 80, 0.95), rgba(240, 120, 90, 0.95)); }
.ltf-energy-fill.is-empty { background: linear-gradient(90deg, rgba(220, 80, 80, 0.95), rgba(180, 60, 60, 0.95)); }

.ltf-chat-log {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}
.ltf-chat-log::-webkit-scrollbar { display: none; }
.ltf-msg {
  max-width: 86%;
  padding: 7px 11px;
  border-radius: 13px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(15, 20, 30, 0.35);
  white-space: pre-wrap;
  word-break: break-word;
}
.ltf-msg--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--ambient-text-primary, #ffc4d6), transparent 55%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  border-bottom-right-radius: 4px;
}
.ltf-msg--ai {
  align-self: flex-start;
  background: rgba(28, 34, 48, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border-bottom-left-radius: 4px;
}
.ltf-msg--thinking { opacity: 0.6; font-style: italic; }
.ltf-msg-think {
  align-self: flex-start;
  max-width: 86%;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.40);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(15, 20, 30, 0.35);
  font-size: 0.6rem;
  line-height: 1.4;
  max-height: 64px;
  overflow: hidden;
  white-space: pre-wrap;
}
.ltf-chat-inrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.30);
}
.ltf-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.85), rgba(238, 241, 247, 0.80));
  box-shadow: inset 0 1px 2px rgba(15, 20, 30, 0.10);
  color: #232833;
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
.ltf-chat-input::placeholder { color: rgba(40, 48, 62, 0.45); font-size: 0.72rem; }
.ltf-chat-send, .ltf-chat-photo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(15, 20, 30, 0.4);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ltf-chat-send:hover, .ltf-chat-photo:hover { background: rgba(255, 255, 255, 0.48); }
.ltf-chat-send:active, .ltf-chat-photo:active { transform: scale(0.92); }
.ltf-chat-photo { display: none; }               /* Select-only, JS reveals */
.ltf-chat-photo.is-select { display: inline-flex; }

/* Photo consent chip */
.ltf-consent {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(138, 186, 255, 0.55);
  background: rgba(24, 32, 48, 0.72);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
}
.ltf-consent button {
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  cursor: pointer;
}
.ltf-consent button.ok { background: rgba(138, 186, 255, 0.35); }

/* Boot sequence — Billie initializing, apple-clean terminal.
   (NO backdrop-filter — solid-enough alpha does the separation.) */
.ltf-boot {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 18, 0.90);
  border-radius: 16px;
  transition: opacity 0.6s var(--ease-standard);
}
.ltf-boot.is-done { opacity: 0; pointer-events: none; }
.ltf-boot-card {
  width: min(86%, 330px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 20, 28, 0.92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.ltf-boot-bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ltf-boot-bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.ltf-boot-bar i:first-child { background: rgba(255, 120, 120, 0.7); }
.ltf-boot-bar i:nth-child(2) { background: rgba(255, 210, 120, 0.7); }
.ltf-boot-bar i:nth-child(3) { background: rgba(140, 235, 155, 0.7); }
.ltf-boot-lines {
  padding: 12px 14px 14px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  line-height: 1.7;
  color: rgba(190, 220, 255, 0.85);
  min-height: 108px;
  white-space: pre-wrap;
}
.ltf-boot-lines .ok { color: rgba(140, 235, 155, 0.9); }
.ltf-boot-caret {
  display: inline-block;
  width: 6px; height: 11px;
  background: rgba(190, 220, 255, 0.85);
  animation: ltf-caret 0.9s steps(1) infinite;
  vertical-align: -1px;
}
@keyframes ltf-caret { 50% { opacity: 0; } }

/* ── Mobile (≤768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ltf-studio {
    left: 2vw;
    right: 2vw;
    top: 54svh;
    bottom: auto;
    height: auto;
    max-height: 34svh;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hintzone hintzone"
      "income   expense";
    gap: 8px;
    align-items: start;
  }
  .ltf-center { grid-area: hintzone; gap: 8px; }
  .ltf-dial-wrap[data-kind="income"]  { grid-area: income; justify-self: center; }
  .ltf-dial-wrap[data-kind="expense"] { grid-area: expense; justify-self: center; }
  .ltf-dial { width: 118px; height: 118px; }
  .ltf-dial-face { inset: 8px; }
  .ltf-dial-dip { left: 13px; right: 13px; height: 32px; }
  .ltf-dial-tick { transform: rotate(var(--a)) translateY(-43px); }
  .ltf-dial.is-live .ltf-dial-tick { transform: rotate(var(--a)) translateY(-61px); }
  .ltf-dial.is-locked-shut .ltf-dial-tick { transform: rotate(var(--a)) translateY(-34px); }
  .ltf-dial-amount { font-size: 0.9rem; }
  .ltf-dial-slang { bottom: 12px; }
  /* Mobile's .age-markers-placeholder is width:96% — mirror it exactly */
  .ltf-age-layer { width: 96%; }
  .ltf-age-hotspot { width: 24px; height: 42px; bottom: 4px; }
  .ltf-month-bar { width: 15px; height: 34px; }   /* fatter touch targets */
  .ltf-months-row { gap: 5px; }
  .ltf-month-lab { font-size: 0.36rem; letter-spacing: 0.02em; }
  .ltf-hint { font-size: 0.66rem; }
  .ltf-bracket-label { font-size: 0.5rem; max-width: calc(100% + 40px); }
  /* Chat mirrors the mobile cards-holder box */
  .ltf-chat {
    top: 1%;
    left: 3%;
    width: 90%;
    height: 188px;
  }
  .ltf-energy { flex-basis: 110px; min-width: 74px; }
  .ltf-model-chip { padding: 3px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LTF STUDIO — premium instrument pass
   This block intentionally sits last. It upgrades the physical language and
   layout without changing the app's established ambient color system.
   ════════════════════════════════════════════════════════════════════════ */

/* Keep the graph and its controls in separate, predictable bands. */
.timing__panel:has(.ltf-studio) {
  top: 0;
  height: calc(100svh - 94px);
  max-height: 98%;
}
.timing__panel .graph-panel {
  top: 207px;
  bottom: 189px;
  min-height: 0;
}
.timing__panel .graph-panel-requirebar {
  top: 0;
}
.timing__panel .graph-stage {
  top: 0 !important;
  min-height: 0;
  margin-bottom: 3px;
  overflow: visible;
}
.timing__panel .wealth-svg {
  position: relative;
  height: 88%;
  z-index: 10;
}
.timing__panel .wealth-markers-placeholder {
  top: 0;
  bottom: auto;
  height: 88%;
}
.ltf-studio {
  left: 75.5px;
  right: auto;
  bottom: 0;
  width: 93.5%;
  height: 180px;
  grid-template-columns: 148px minmax(240px, 1fr) 148px;
  gap: 18px;
  align-items: center;
  z-index: 10;
}
.ltf-dial-wrap {
  gap: 4px;
}
.ltf-dial-title {
  min-height: 18px;
  padding: 3px 9px 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 1px 3px rgba(5, 8, 14, 0.48);
  transition:
    color 320ms var(--ease-standard),
    background 320ms var(--ease-standard),
    border-color 320ms var(--ease-standard),
    transform 420ms var(--ease-spring);
}
.ltf-dial-wrap.is-selected .ltf-dial-title {
  border-color: rgba(var(--ltf-accent), 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(15, 18, 26, 0.24);
  color: rgba(var(--ltf-accent), 0.98);
  text-shadow: 0 0 12px rgba(var(--ltf-accent), 0.36), 0 1px 2px rgba(0,0,0,.55);
  transform: translateY(-1px);
}

/* Dial chassis: separate load-bearing rim, knurl, face and moving highlights. */
.ltf-dial {
  width: 130px;
  height: 130px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background:
    radial-gradient(100% 90% at 27% 14%, rgba(255,255,255,.28), transparent 45%),
    radial-gradient(85% 80% at 72% 83%, rgba(8,10,15,.32), transparent 58%),
    conic-gradient(from 218deg,
      #a8aab0 0deg,
      #e5e6e8 34deg,
      #8b8e96 78deg,
      #d9dadd 124deg,
      #71747d 174deg,
      #c8cacf 226deg,
      #858891 278deg,
      #e4e5e7 329deg,
      #a8aab0 360deg);
  box-shadow:
    0 19px 28px -13px rgba(0, 0, 0, 0.72),
    0 7px 12px -7px rgba(0, 0, 0, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 1px 1px rgba(255, 255, 255, 0.66),
    inset 0 -2px 3px rgba(5, 7, 11, 0.58);
  isolation: isolate;
  will-change: transform;
  transition:
    transform 520ms var(--ease-spring),
    box-shadow 420ms var(--ease-standard),
    border-color 360ms var(--ease-standard);
}
.ltf-dial:hover {
  transform: translateY(-2px) scale(1.018);
}
.ltf-dial:active {
  transform: translateY(1px) scale(0.995);
  transition-duration: 100ms;
}
.ltf-dial.is-dragging {
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 24px 34px -14px rgba(0, 0, 0, 0.78),
    0 8px 16px -8px rgba(var(--ltf-accent), 0.34),
    inset 0 1px 1px rgba(255,255,255,.62),
    inset 0 -2px 4px rgba(0,0,0,.62);
}
.ltf-dial-wrap.is-selected .ltf-dial {
  border-color: rgba(var(--ltf-accent), 0.66);
  box-shadow:
    0 20px 30px -13px rgba(0,0,0,.74),
    0 9px 20px -11px rgba(var(--ltf-accent), .72),
    0 1px 0 rgba(255,255,255,.42),
    inset 0 1px 1px rgba(255,255,255,.66),
    inset 0 -3px 5px rgba(var(--ltf-accent),.19);
  animation: ltf-dial-seat 640ms var(--ease-spring) both;
}
@keyframes ltf-dial-seat {
  0%   { transform: scale(.965) rotate(-1.4deg); }
  52%  { transform: scale(1.025) rotate(.45deg); }
  100% { transform: scale(1) rotate(0); }
}

.ltf-dial-chassis {
  position: absolute;
  inset: 4px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 1deg,
      rgba(255,255,255,.34) 0deg .7deg,
      rgba(17,20,28,.48) .7deg 1.55deg,
      rgba(255,255,255,.08) 1.55deg 3.2deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 77% 100%);
  mask: radial-gradient(farthest-side, transparent 76%, #000 77% 100%);
  opacity: .78;
}
.ltf-dial-bezel {
  inset: 9px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.38);
  background:
    conic-gradient(from 215deg,
      rgba(20,22,29,.50),
      rgba(255,255,255,.28) 48deg,
      rgba(25,28,36,.46) 114deg,
      rgba(255,255,255,.24) 176deg,
      rgba(18,20,27,.48) 255deg,
      rgba(255,255,255,.24) 318deg,
      rgba(20,22,29,.50));
  -webkit-mask: radial-gradient(farthest-side, transparent 84%, #000 85%);
  mask: radial-gradient(farthest-side, transparent 84%, #000 85%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  opacity: 1;
}
.ltf-dial-face {
  inset: 13px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(110% 100% at 28% 12%, rgba(255,255,255,.16), transparent 43%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.045) 0 1px,
      rgba(20,23,31,.018) 1px 3px,
      transparent 3px 5px),
    conic-gradient(from 205deg,
      rgba(95,99,110,.55), rgba(189,192,199,.42) 65deg,
      rgba(87,91,102,.62) 152deg, rgba(178,181,188,.42) 245deg,
      rgba(78,82,94,.62) 330deg, rgba(95,99,110,.55));
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.20),
    inset 0 -8px 16px rgba(3,5,9,.30),
    0 1px 2px rgba(255,255,255,.16);
}
.ltf-dial-specular {
  position: absolute;
  inset: 15px;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(132deg, rgba(255,255,255,.24), transparent 23% 66%, rgba(255,255,255,.055)),
    radial-gradient(60% 34% at 48% 7%, rgba(255,255,255,.18), transparent 72%);
  mix-blend-mode: screen;
  opacity: .72;
  transition: transform 620ms var(--ease-spring), opacity 320ms ease;
}
.ltf-dial.is-dragging .ltf-dial-specular {
  transform: rotate(10deg);
  opacity: .94;
}
.ltf-dial-glow {
  inset: -10px;
  z-index: -1;
  background: radial-gradient(farthest-side,
    transparent 57%,
    rgba(var(--ltf-accent,255,255,255),.08) 70%,
    rgba(var(--ltf-accent,255,255,255),.30) 83%,
    rgba(var(--ltf-accent,255,255,255),.08) 92%,
    transparent 100%);
}
.ltf-dial-wrap.is-selected .ltf-dial-glow {
  opacity: .74;
}

/* Ticks remain physical white inserts. Only transform and opacity animate. */
.ltf-dial-ticks {
  z-index: 3;
}
.ltf-dial-tick {
  width: 2px;
  height: 7px;
  margin: -3.5px 0 0 -1px;
  transform: rotate(var(--a)) translateY(-48px);
  background: linear-gradient(180deg,
    rgba(255,255,255,.92),
    rgba(230,232,237,.66) 46%,
    rgba(71,76,88,.58));
  box-shadow: 0 1px 1px rgba(0,0,0,.32);
  opacity: .72;
  transition:
    transform 560ms var(--ease-spring),
    opacity 260ms var(--ease-standard),
    background 260ms var(--ease-standard);
  transition-delay: calc(var(--i) * 4ms);
}
.ltf-dial-tick.is-major {
  width: 2.5px;
  height: 11px;
  margin: -5.5px 0 0 -1.25px;
  opacity: .94;
}
.ltf-dial.is-live .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-67px);
  background: linear-gradient(180deg,
    rgba(var(--ltf-accent),.98) 0 24%,
    rgba(255,255,255,.96) 25% 70%,
    rgba(116,121,133,.70));
  box-shadow: 0 0 6px rgba(var(--ltf-accent),.42);
  opacity: .96;
}
.ltf-dial.is-locked-shut .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-40px);
  opacity: .34;
}

/* A small machined depression, not an LCD. The text is embossed into it. */
.ltf-dial-dip {
  left: 50%;
  right: auto;
  top: 50%;
  width: 69px;
  height: 45px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background:
    radial-gradient(75% 60% at 50% 74%, rgba(255,255,255,.11), transparent 70%),
    linear-gradient(180deg, rgba(35,39,48,.92), rgba(71,75,85,.84) 53%, rgba(29,32,40,.94));
  box-shadow:
    inset 0 4px 7px rgba(3,5,9,.72),
    inset 0 -2px 3px rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.22),
    0 -1px 1px rgba(0,0,0,.54);
  overflow: hidden;
}
.ltf-dial-dip::before {
  content: "";
  position: absolute;
  inset: 2px 7px auto;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}
.ltf-dial-wrap.is-selected .ltf-dial-dip {
  border-color: rgba(var(--ltf-accent),.20);
  background:
    radial-gradient(70% 60% at 50% 72%, rgba(var(--ltf-accent),.14), transparent 72%),
    linear-gradient(180deg, rgba(29,33,42,.94), rgba(68,72,82,.86) 54%, rgba(25,28,36,.96));
  box-shadow:
    inset 0 4px 8px rgba(2,4,8,.76),
    inset 0 -2px 3px rgba(255,255,255,.14),
    inset 0 0 8px rgba(var(--ltf-accent),.10),
    0 1px 0 rgba(255,255,255,.20);
}
.ltf-dial-amount {
  position: relative;
  z-index: 1;
  color: rgba(247,248,251,.97);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: -.015em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.88),
    0 -1px 0 rgba(255,255,255,.16),
    0 2px 5px rgba(0,0,0,.54);
}
.ltf-dial-amount.is-xl { font-size: .78rem; }
.ltf-dial-amount.is-lg { font-size: .69rem; }
.ltf-dial-amount.is-md { font-size: .59rem; }
.ltf-dial-amount.is-sm { font-size: .49rem; }
.ltf-dial-hintline {
  position: relative;
  z-index: 1;
  max-width: 52px;
  color: rgba(228,231,238,.52);
  font-size: .38rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-shadow: 0 1px 1px rgba(0,0,0,.72);
}
.ltf-dial-slang {
  bottom: 17px;
  z-index: 6;
  font-size: .49rem;
  color: rgba(240,242,247,.48);
  text-shadow: 0 1px 2px rgba(0,0,0,.64);
}
.ltf-dial-desc {
  position: relative;
  z-index: 2;
  padding: 1px 0;
  border-bottom-color: rgba(var(--ltf-accent),.52);
  color: rgba(250,251,253,.96);
  font-size: 16px;
  font-weight: 720;
  text-shadow: 0 1px 2px rgba(0,0,0,.64);
}
.ltf-dial-desc::placeholder {
  color: rgba(235,238,244,.42);
  font-size: .51rem;
}

.ltf-splash {
  inset: 9px;
  z-index: 4;
}
.ltf-splash::before {
  background:
    conic-gradient(from 24deg,
      transparent 0 16%,
      rgba(var(--ltf-accent),.54) 19%,
      transparent 26% 54%,
      rgba(var(--ltf-accent),.28) 59%,
      transparent 68%),
    radial-gradient(circle, rgba(var(--ltf-accent),.24), transparent 66%);
}
.ltf-splash::after {
  inset: 8px;
  border-width: 1px;
  box-shadow: inset 0 0 14px rgba(var(--ltf-accent),.24);
}
.ltf-dial.is-splashing .ltf-splash::before {
  animation: ltf-premium-sweep 760ms var(--ease-out) forwards;
}
.ltf-dial.is-splashing .ltf-splash::after {
  animation: ltf-premium-ring 720ms var(--ease-out) forwards;
}
@keyframes ltf-premium-sweep {
  0% { opacity: 0; transform: scale(.62) rotate(-38deg); }
  25% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.13) rotate(46deg); }
}
@keyframes ltf-premium-ring {
  0% { opacity: 0; transform: scale(.58); }
  38% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.05); }
}

.ltf-hold-ring {
  inset: -8px;
  z-index: 9;
  background: conic-gradient(
    from -90deg,
    rgba(var(--ltf-accent),.98) calc(var(--p, 0) * 1%),
    rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: none;
}
.ltf-dial-action {
  min-height: 24px;
  padding: 4px 13px 3px;
  border-color: rgba(255,255,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    rgba(22,25,33,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 5px 12px -8px rgba(0,0,0,.72);
  font-size: .51rem;
  color: rgba(255,255,255,.82);
}
.ltf-dial-action.is-on {
  animation: ltf-action-arrive 420ms var(--ease-spring) both;
}
@keyframes ltf-action-arrive {
  from { opacity: 0; transform: translateY(5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Center guidance reads as calm system chrome rather than floating copy. */
.ltf-center {
  gap: 8px;
}
.ltf-hint {
  width: fit-content;
  max-width: min(100%, 620px);
  min-height: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  color: rgba(255,255,255,.66);
  font-size: .64rem;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
.ltf-months {
  gap: 5px;
}
.ltf-months-title {
  font-size: .49rem;
  color: rgba(255,255,255,.48);
}
.ltf-months-row {
  gap: clamp(3px, .42vw, 7px);
}
.ltf-month {
  min-width: 16px;
}
.ltf-month-bar {
  width: 11px;
  height: 27px;
  border-color: rgba(255,255,255,.23);
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 46%, rgba(0,0,0,.08)),
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 3px 8px -6px rgba(0,0,0,.8);
}
.ltf-month.is-locked {
  cursor: not-allowed;
}
.ltf-month.is-locked .ltf-month-bar {
  opacity: .18;
  transform: scaleY(.82);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
.ltf-month.is-locked .ltf-month-lab {
  opacity: .24;
}
.ltf-month.is-denied .ltf-month-bar {
  animation: ltf-month-denied 360ms var(--ease-spring);
}
@keyframes ltf-month-denied {
  0%,100% { transform: translateX(0) scaleY(.82); }
  30% { transform: translateX(-3px) scaleY(.82); }
  65% { transform: translateX(3px) scaleY(.82); }
}

/* Timeline readability: a quiet axis shelf, nested bracket lanes and pills
   mounted directly on their lines. */
.ltf-age-layer {
  z-index: 9;
}
.ltf-age-layer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 46px;
  border-radius: 13px 13px 20px 20px;
  background:
    linear-gradient(180deg, transparent, rgba(9,12,18,.12) 38%, rgba(9,12,18,.28));
  border-bottom: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
.ltf-age-layer::after {
  content: "";
  position: absolute;
  left: var(--ltf-reject-x, -100px);
  bottom: 27px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,132,132,.88);
  transform: translate(-50%, 50%) scale(.35);
  opacity: 0;
  pointer-events: none;
}
.ltf-age-layer.is-rejecting::after {
  animation: ltf-age-reject 650ms var(--ease-out);
}
@keyframes ltf-age-reject {
  0% { opacity: .9; transform: translate(-50%,50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%,50%) scale(1.8); }
}
.ltf-age-hotspot {
  bottom: 5px;
  height: 44px;
  transition: opacity 260ms ease, background 260ms ease;
}
.ltf-age-hotspot.is-before-start {
  opacity: .20;
  cursor: not-allowed !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 6px);
}
.ltf-age-layer.is-end-picking::before {
  background:
    linear-gradient(90deg,
      rgba(255,126,126,.05) 0 var(--ltf-min-x),
      rgba(var(--ltf-live-accent),.035) var(--ltf-min-x) 100%),
    linear-gradient(180deg, transparent, rgba(9,12,18,.12) 38%, rgba(9,12,18,.28));
}
.ltf-point {
  bottom: 29px;
  width: 5px;
  height: 15px;
  box-shadow:
    0 0 8px rgba(var(--pt),.55),
    0 5px 12px -6px rgba(var(--pt),.85);
}
.ltf-bracket {
  bottom: calc(20px + (var(--lane, 0) * 14px));
  height: 11px;
  border-width: 0 1.5px 1.5px;
  box-shadow: 0 4px 10px -6px rgba(var(--bk),.76);
  z-index: calc(2 + var(--lane, 0));
}
.ltf-bracket-label {
  left: 50%;
  top: 100%;
  bottom: auto;
  max-width: calc(100% - 8px);
  min-height: 15px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  padding: 2px 8px 1px;
  border-color: rgba(var(--bk),.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.055)),
    rgba(13,16,23,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 12px -7px rgba(0,0,0,.84);
  color: rgba(255,255,255,.96);
  font-size: .51rem;
  font-weight: 780;
  letter-spacing: .035em;
  text-shadow: 0 1px 2px rgba(0,0,0,.72);
}
.ltf-stem {
  bottom: 38px;
  width: 1.5px;
  background: linear-gradient(180deg,
    rgba(var(--bk),.12),
    rgba(var(--bk),.56) 35%,
    rgba(var(--bk),.92));
  box-shadow: 0 0 7px rgba(var(--bk),.33);
}
.ltf-stem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(var(--bk));
  box-shadow: 0 0 0 3px rgba(var(--bk),.12), 0 0 9px rgba(var(--bk),.55);
}
.ltf-stem--goal {
  width: 1px;
  background: linear-gradient(180deg,
    rgba(var(--bk),.10), rgba(var(--bk),.58) 35%, rgba(var(--bk),.92));
}
.ltf-stem-label {
  top: -30px;
  min-height: 18px;
  box-sizing: border-box;
  padding: 3px 9px 2px;
  border-color: rgba(var(--bk),.43);
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.055)),
    rgba(12,15,22,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 16px -9px rgba(0,0,0,.88),
    0 0 10px -7px rgba(var(--bk),.72);
  color: rgba(255,255,255,.97);
  font-size: .51rem;
  font-weight: 760;
  letter-spacing: .025em;
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
}
.ltf-fan-tick {
  bottom: 29px;
  width: 6px;
  height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.43));
  box-shadow: 0 0 7px rgba(255,255,255,.26);
}

/* One-time and goal composers rise from the chosen month inside the graph. */
.ltf-float-composer {
  position: absolute;
  bottom: calc(50% + 4px);
  z-index: 24;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, 9px) scale(.96);
  transform-origin: center bottom;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-standard), transform 560ms var(--ease-spring);
}
.ltf-float-composer.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.ltf-float-composer.is-switching {
  opacity: 0;
  transform: translate(-50%, -4px) scale(.96);
}
.ltf-float-composer.has-full-dial {
  bottom: calc(50% + 8px);
}
.ltf-float-knot {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgb(var(--ltf-accent, 205,160,255));
  box-shadow: 0 0 0 4px rgba(var(--ltf-accent,205,160,255),.10);
}
.ltf-dial-wrap.is-floating {
  pointer-events: none;
}
.ltf-dial-wrap.is-floating .ltf-dial {
  width: 118px;
  height: 118px;
}
.ltf-dial-wrap.is-floating .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-43px);
}
.ltf-dial-wrap.is-floating .ltf-dial.is-live .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-61px);
}
.ltf-dial-wrap.is-floating .ltf-dial.is-locked-shut .ltf-dial-tick {
  transform: rotate(var(--a)) translateY(-36px);
}
.ltf-dial-wrap.is-floating .ltf-dial-title {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
    rgba(10,13,19,.52);
}
.ltf-direction-card {
  width: 246px;
  box-sizing: border-box;
  padding: 10px 12px 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 18% 0, rgba(255,255,255,.14), transparent 54%),
    linear-gradient(165deg, rgba(39,44,56,.88), rgba(15,18,25,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 18px 32px -18px rgba(0,0,0,.86);
  pointer-events: auto;
}
.ltf-direction-title,
.ltf-direction-sub {
  display: block;
  text-align: center;
}
.ltf-direction-title {
  color: rgba(255,255,255,.95);
  font-size: .64rem;
  font-weight: 820;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ltf-direction-sub {
  margin-top: 2px;
  color: rgba(255,255,255,.50);
  font-size: .50rem;
}
.ltf-direction-options {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 9px;
}
.ltf-direction-dial {
  --dir: 255,255,255;
  position: relative;
  width: 70px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ltf-direction-dial[data-direction="income"] { --dir: 142,235,158; }
.ltf-direction-dial[data-direction="expense"] { --dir: 255,138,138; }
.ltf-direction-rim,
.ltf-direction-core {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
.ltf-direction-rim {
  position: absolute;
  inset: -3px 7px 15px;
  background:
    repeating-conic-gradient(rgba(255,255,255,.22) 0 1deg, rgba(0,0,0,.16) 1deg 3deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
  mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
  transition: transform 520ms var(--ease-spring);
}
.ltf-direction-core {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--dir),.52);
  background:
    radial-gradient(70% 54% at 31% 19%, rgba(255,255,255,.26), transparent 72%),
    conic-gradient(from 210deg, rgba(82,87,99,.96), rgba(170,173,181,.90), rgba(55,60,72,.96));
  box-shadow:
    0 9px 14px -8px rgba(0,0,0,.82),
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -3px 5px rgba(var(--dir),.16);
  color: rgb(var(--dir));
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 48px;
  text-shadow: 0 0 10px rgba(var(--dir),.48);
  transition: transform 420ms var(--ease-spring), box-shadow 320ms ease;
}
.ltf-direction-dial b {
  display: block;
  margin-top: 4px;
  font-size: .49rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.ltf-direction-dial:hover .ltf-direction-core {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 12px 18px -9px rgba(0,0,0,.86),
    0 0 13px -4px rgba(var(--dir),.66),
    inset 0 1px 1px rgba(255,255,255,.38);
}
.ltf-direction-dial:hover .ltf-direction-rim {
  transform: rotate(8deg);
}

@media (max-height: 780px) and (min-width: 769px) {
  .ltf-float-composer {
    bottom: 38px;
  }
  .ltf-float-composer.has-full-dial {
    bottom: 8px;
  }
  .ltf-dial-wrap.is-floating .ltf-dial {
    width: 92px;
    height: 92px;
  }
  .ltf-dial-wrap.is-floating .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-33px);
  }
  .ltf-dial-wrap.is-floating .ltf-dial.is-live .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-46px);
  }
  .ltf-dial-wrap.is-floating .ltf-dial-dip {
    width: 54px;
    height: 36px;
  }
}

/* Billie chat now shares the exact graph/require-bar width and mates to it. */
.ltf-chat {
  top: 0;
  left: 75.5px;
  width: 93.5%;
  height: 207px;
  box-sizing: border-box;
  border-radius: 22px 22px 0 0;
  border-bottom-color: rgba(255,255,255,.22);
  background:
    radial-gradient(90% 70% at 12% -8%, rgba(255,255,255,.26), transparent 64%),
    linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.075) 45%, rgba(231,235,244,.13));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 14px 32px -20px rgba(13,17,25,.54);
}
.ltf-chat::before {
  border-radius: 22px 22px 0 0;
}
.ltf-chat-head {
  padding: 8px 13px 7px;
}
.ltf-chat-log {
  padding: 9px 12px;
}
.ltf-msg {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.ltf-chat-inrow {
  padding: 7px 10px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.08));
}
.ltf-chat-input {
  background:
    linear-gradient(180deg, rgba(252,253,255,.86), rgba(232,236,244,.78));
  box-shadow:
    inset 0 2px 3px rgba(20,25,36,.11),
    0 1px 0 rgba(255,255,255,.28);
}

/* Reduce visual competition in dense graphs while preserving the data. */
.timing__panel .graph-area {
  opacity: .11;
}
.timing__panel .graph-line {
  stroke-width: 1.55;
}
.timing__panel .rtr-wealth-marker::after {
  opacity: .54;
}
.timing__panel .rtr-age-marker-label {
  color: rgba(255,255,255,.82);
}

/* Mobile: smaller physical assets, fewer live tick layers and a stable three
   band layout (chat → graph → composer). */
@media (max-width: 768px) {
  .timing__panel .graph-panel {
    top: 200px;
    bottom: 180px;
    min-height: 0;
  }
  .ltf-chat {
    top: 6px;
    left: 3%;
    width: 96.5%;
    height: 194px;
    border-radius: 18px 18px 0 0;
  }
  .ltf-chat::before {
    border-radius: 18px 18px 0 0;
  }
  .ltf-chat-title {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ltf-studio {
    left: 3%;
    right: auto;
    top: auto;
    bottom: 7px;
    width: 96.5%;
    height: 166px;
    max-height: none;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hintzone hintzone"
      "income expense";
    grid-template-rows: auto 1fr;
    gap: 5px 8px;
    align-items: start;
  }
  .ltf-center {
    position: relative;
    min-height: 42px;
    gap: 5px;
  }
  .ltf-hint {
    max-width: 94vw;
    padding: 5px 9px;
    font-size: .56rem;
  }
  .ltf-months {
    position: absolute;
    left: 50%;
    top: 0;
    width: max-content;
    transform: translate(-50%, 7px);
  }
  .ltf-months.is-on {
    transform: translate(-50%, 0);
  }
  .ltf-center:has(.ltf-months.is-on) .ltf-hint {
    opacity: 0;
  }
  .ltf-dial {
    width: 98px;
    height: 98px;
  }
  .ltf-dial-title {
    min-height: 13px;
    padding: 2px 7px 1px;
    font-size: .49rem;
  }
  .ltf-dial-face { inset: 11px; }
  .ltf-dial-specular { inset: 13px; }
  .ltf-dial-dip {
    left: 50%;
    right: auto;
    width: 60px;
    height: 39px;
    transform: translate(-50%,-50%);
  }
  .ltf-dial-amount.is-xl { font-size: .68rem; }
  .ltf-dial-amount.is-lg { font-size: .59rem; }
  .ltf-dial-amount.is-md { font-size: .51rem; }
  .ltf-dial-amount.is-sm { font-size: .43rem; }
  .ltf-dial-hintline { font-size: .34rem; }
  .ltf-dial-slang { bottom: 12px; font-size: .43rem; }
  .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-36px);
  }
  .ltf-dial.is-live .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-50px);
  }
  .ltf-dial.is-locked-shut .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-30px);
  }
  .ltf-dial-tick:nth-child(even) {
    display: none;
  }
  .ltf-dial-action {
    min-height: 21px;
    padding: 3px 10px;
    font-size: .44rem;
  }
  .ltf-months-row { gap: 2px; }
  .ltf-month { min-width: 15px; }
  .ltf-month-bar { width: 12px; height: 28px; }
  .ltf-month-lab { font-size: .32rem; }
  .ltf-age-layer { width: 96%; }
  .ltf-bracket {
    bottom: calc(20px + (var(--lane, 0) * 12px));
  }
  .ltf-bracket-label {
    max-width: calc(100% - 4px);
    font-size: .45rem;
    padding-inline: 6px;
  }
  .ltf-stem-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .46rem;
  }
  .ltf-float-composer,
  .ltf-float-composer.has-full-dial {
    top: 8px;
    bottom: auto;
  }
  .ltf-dial-wrap.is-floating .ltf-dial {
    width: 92px;
    height: 92px;
  }
  .ltf-dial-wrap.is-floating .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-33px);
  }
  .ltf-dial-wrap.is-floating .ltf-dial.is-live .ltf-dial-tick {
    transform: rotate(var(--a)) translateY(-46px);
  }
  .ltf-dial-wrap.is-floating .ltf-dial-dip {
    width: 54px;
    height: 36px;
  }
  .ltf-direction-card {
    width: min(226px, 74vw);
    padding: 8px 10px 9px;
  }
  .ltf-direction-options {
    gap: 16px;
    margin-top: 7px;
  }
  .ltf-direction-core {
    width: 43px;
    height: 43px;
    line-height: 43px;
  }
}

/* Performance safety: low-power mode keeps the geometry but drops ambient
   compositing and long-running pulses. */
.perf-lite .ltf-dial-specular {
  mix-blend-mode: normal;
  opacity: .42;
}
.perf-lite .ltf-dial-glow,
.perf-lite .ltf-stem {
  box-shadow: none;
}
.perf-lite .ltf-dial.is-armed .ltf-dial-glow {
  animation: none;
}
.perf-lite .ltf-chat,
.perf-lite .ltf-bracket-label,
.perf-lite .ltf-stem-label {
  background-color: rgba(28,31,40,.90);
}

@media (prefers-reduced-motion: reduce) {
  .ltf-dial,
  .ltf-dial-tick,
  .ltf-dial-specular,
  .ltf-splash::before,
  .ltf-splash::after,
  .ltf-bracket,
  .ltf-point,
  .ltf-stem,
  .ltf-fan-tick,
  .ltf-float-composer,
  .ltf-dial-action {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FINAL DIAL INTERACTION PASS
   Rounded material wells, deliberate hold confirmation and one edit surface.
   ════════════════════════════════════════════════════════════════════════ */

/* A rounded rectangular depression: soft pill geometry, never an oval. */
.ltf-dial-dip {
  left: 50%;
  right: auto;
  width: 78px;
  height: 42px;
  border-radius: 15px;
  transform: translate(-50%, -50%);
}
.ltf-dial-dip::before {
  border-radius: 10px 10px 7px 7px;
}

/* Locking an amount is intentional: the accent quietly fills for one second. */
.ltf-dial-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ltf-dial-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(var(--ltf-accent, 255,255,255), .42)
      calc(var(--hold-p, 0) * 1%),
      transparent 0);
  opacity: 0;
  transition: opacity 160ms ease;
}
.ltf-dial-action.is-hold-action::before {
  opacity: 1;
}
.ltf-dial-action.is-holding {
  transform: translateY(-1px) scale(.985);
  border-color: rgba(var(--ltf-accent), .58);
  color: rgba(255,255,255,.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 6px 16px -10px rgba(var(--ltf-accent),.68);
}

/* One coherent glass edit pill replaces the old loose text field. */
.ltf-edit-well {
  position: absolute;
  z-index: 34;
  top: 39px;
  left: calc(50% + 134px);
  width: 208px;
  min-height: 42px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 15px;
  background:
    radial-gradient(120% 160% at 16% -22%, rgba(255,255,255,.38), transparent 54%),
    linear-gradient(150deg, rgba(247,249,253,.90), rgba(213,218,228,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(67,75,91,.08),
    0 14px 26px -18px rgba(17,22,32,.62),
    0 7px 18px -14px rgba(var(--ltf-accent),.48);
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.94);
  transform-origin: center;
  transition:
    opacity 190ms ease,
    transform 440ms cubic-bezier(.18,.88,.24,1.12);
}
.ltf-dial-wrap[data-side="right"] .ltf-edit-well {
  left: calc(50% - 134px);
}
.ltf-dial-wrap.is-floating .ltf-edit-well {
  top: -47px;
  left: 50%;
}
.ltf-edit-well.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.ltf-edit-well::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--ltf-accent));
  box-shadow: 0 0 8px rgba(var(--ltf-accent),.46);
}
.ltf-edit-well-label {
  position: absolute;
  left: 22px;
  top: 4px;
  color: rgba(57,64,77,.48);
  font-size: .39rem;
  font-weight: 790;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.ltf-edit-input {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ambient-text-primary, #30343d);
  font-family: inherit;
  font-size: .69rem;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ltf-edit-well-status {
  align-self: end;
  margin-bottom: 2px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(var(--ltf-accent),.16);
  color: color-mix(in srgb, rgb(var(--ltf-accent)), #303641 38%);
  font-size: .39rem;
  font-weight: 850;
  letter-spacing: .10em;
}

@media (max-width: 768px) {
  .ltf-dial-dip {
    width: 64px;
    height: 37px;
    border-radius: 13px;
  }
  .ltf-edit-well,
  .ltf-dial-wrap[data-side="right"] .ltf-edit-well,
  .ltf-dial-wrap.is-floating .ltf-edit-well {
    top: -43px;
    left: 50%;
    width: min(176px, 45vw);
    min-height: 40px;
    border-radius: 14px;
  }
  .ltf-edit-input {
    font-size: 16px;
  }

  /* Move the entire interaction rail below the line's busy starting area,
     while preserving an inset buffer so labels/brackets never clip out. */
  .timing__panel .age-markers-placeholder {
    bottom: 14px !important;
  }
  .timing__panel .ltf-age-hotspot {
    bottom: -4px;
  }
  .timing__panel .ltf-point {
    bottom: 13px;
    height: 14px;
  }
  .timing__panel .ltf-bracket {
    bottom: calc(2px + (var(--lane, 0) * 8px));
    height: 11px;
  }
  .timing__panel .ltf-stem {
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ltf-edit-well,
  .ltf-dial-action {
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LTF WHITE INSTRUMENT PASS
   Quiet optical-white controls with restrained ambient accents. No blur or
   continuously animated filters: motion stays on transform + opacity.
   ════════════════════════════════════════════════════════════════════════ */
.ltf-dial {
  border-color: rgba(255,255,255,.86);
  background:
    radial-gradient(90% 78% at 30% 16%, rgba(255,255,255,1), rgba(255,255,255,.42) 48%, transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(235,237,242,.90));
  box-shadow:
    0 16px 24px -16px rgba(19,25,36,.44),
    0 5px 11px -8px rgba(19,25,36,.30),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 5px rgba(82,89,104,.10);
  will-change: auto;
}
.ltf-dial:hover {
  transform: translateY(-2px) scale(1.012);
}
.ltf-dial.is-live,
.ltf-dial.is-dragging {
  will-change: transform;
}
.ltf-dial.is-dragging {
  box-shadow:
    0 19px 28px -17px rgba(19,25,36,.46),
    0 8px 18px -12px rgba(var(--ltf-accent),.30),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 5px rgba(82,89,104,.11);
}
.ltf-dial-wrap.is-selected .ltf-dial {
  border-color: rgba(var(--ltf-accent),.48);
  box-shadow:
    0 17px 26px -17px rgba(19,25,36,.44),
    0 9px 22px -14px rgba(var(--ltf-accent),.38),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(var(--ltf-accent),.055),
    inset 0 -2px 5px rgba(82,89,104,.09);
}

.ltf-dial-chassis {
  inset: 4px;
  background:
    repeating-conic-gradient(from 2deg,
      rgba(93,99,112,.26) 0deg .55deg,
      transparent .55deg 4deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 79%, #000 80% 100%);
  mask: radial-gradient(farthest-side, transparent 79%, #000 80% 100%);
  opacity: .54;
}
.ltf-dial-bezel {
  inset: 8px;
  border-color: rgba(112,119,132,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(160,166,178,.14));
  -webkit-mask: radial-gradient(farthest-side, transparent 86%, #000 87%);
  mask: radial-gradient(farthest-side, transparent 86%, #000 87%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
  opacity: .74;
}
.ltf-dial-face {
  inset: 13px;
  border-color: rgba(103,110,124,.09);
  background:
    radial-gradient(90% 78% at 30% 15%, rgba(255,255,255,.88), transparent 58%),
    linear-gradient(145deg, rgba(252,252,253,.88), rgba(225,228,234,.50));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.96),
    inset 0 -5px 10px rgba(83,90,105,.055);
}
.ltf-dial-specular {
  inset: 15px;
  background:
    linear-gradient(132deg, rgba(255,255,255,.58), transparent 25% 70%, rgba(255,255,255,.15)),
    radial-gradient(60% 32% at 48% 6%, rgba(255,255,255,.52), transparent 72%);
  mix-blend-mode: normal;
  opacity: .56;
}
.ltf-dial-glow {
  inset: -8px;
  background: radial-gradient(farthest-side,
    transparent 66%,
    rgba(var(--ltf-accent,255,255,255),.17) 78%,
    rgba(var(--ltf-accent,255,255,255),.055) 88%,
    transparent 96%);
}
.ltf-dial-wrap.is-selected .ltf-dial-glow {
  opacity: .58;
}

.ltf-dial-tick {
  background: linear-gradient(180deg,
    rgba(104,110,123,.68),
    rgba(148,153,164,.48));
  box-shadow: none;
  opacity: .58;
}
.ltf-dial-tick.is-major {
  opacity: .80;
}
.ltf-dial.is-live .ltf-dial-tick {
  background: linear-gradient(180deg,
    rgba(var(--ltf-accent),.88) 0 20%,
    rgba(112,118,131,.72) 22% 100%);
  box-shadow: 0 0 5px rgba(var(--ltf-accent),.20);
  opacity: .92;
}
.ltf-dial.is-locked-shut .ltf-dial-tick {
  opacity: .26;
}

/* A shallow depression in the same white material—not a dark display. */
.ltf-dial-dip {
  width: 70px;
  height: 45px;
  border-color: rgba(103,110,124,.12);
  background:
    radial-gradient(78% 60% at 50% 82%, rgba(255,255,255,.58), transparent 72%),
    linear-gradient(180deg, rgba(229,232,237,.78), rgba(245,246,248,.84));
  box-shadow:
    inset 0 2px 4px rgba(54,61,74,.12),
    inset 0 -1px 1px rgba(255,255,255,.90),
    0 1px 0 rgba(255,255,255,.46);
}
.ltf-dial-dip::before {
  inset: 2px 8px auto;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent);
}
.ltf-dial-wrap.is-selected .ltf-dial-dip {
  border-color: rgba(var(--ltf-accent),.16);
  background:
    radial-gradient(72% 58% at 50% 80%, rgba(var(--ltf-accent),.055), transparent 75%),
    linear-gradient(180deg, rgba(228,231,236,.80), rgba(247,248,250,.86));
  box-shadow:
    inset 0 2px 4px rgba(54,61,74,.13),
    inset 0 0 7px rgba(var(--ltf-accent),.045),
    inset 0 -1px 1px rgba(255,255,255,.92),
    0 1px 0 rgba(255,255,255,.48);
}
.ltf-dial-amount {
  color: var(--ambient-text-primary, #30343d);
  font-size: .84rem;
  font-weight: 820;
  letter-spacing: -.015em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.74),
    0 1px 3px rgba(25,31,42,.16);
  transform-origin: center;
}
.ltf-dial-hintline {
  color: rgba(74,81,94,.50);
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.ltf-dial-slang {
  color: rgba(76,83,96,.50);
  text-shadow: 0 1px 0 rgba(255,255,255,.44);
}
.ltf-dial-desc {
  color: var(--ambient-text-primary, #30343d);
  text-shadow: 0 1px 0 rgba(255,255,255,.62);
}
.ltf-dial-desc::placeholder {
  color: rgba(71,78,91,.42);
}
.ltf-splash::before {
  background:
    conic-gradient(from 24deg,
      transparent 0 18%,
      rgba(var(--ltf-accent),.32) 21%,
      transparent 28% 57%,
      rgba(var(--ltf-accent),.17) 61%,
      transparent 70%),
    radial-gradient(circle, rgba(255,255,255,.56), transparent 64%);
}
.ltf-splash::after {
  border-color: rgba(var(--ltf-accent),.42);
  box-shadow: inset 0 0 12px rgba(var(--ltf-accent),.12);
}

/* Corporate Billie surface: calmer structure, neutral hierarchy. */
.ltf-chat {
  border-color: rgba(255,255,255,.40);
  background:
    linear-gradient(165deg, rgba(250,251,253,.19), rgba(226,230,237,.105) 56%, rgba(246,247,250,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 13px 30px -22px rgba(13,17,25,.50);
}
.ltf-chat::before {
  background: linear-gradient(110deg, rgba(255,255,255,.10), transparent 42%);
}
.ltf-chat-head {
  gap: 9px;
  border-bottom-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(20,25,35,.08), rgba(20,25,35,.025));
}
.ltf-chat-dot {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--ambient-text-primary, #b8c0d2), transparent 36%);
}
.ltf-chat-title {
  font-size: .59rem;
  font-weight: 780;
  letter-spacing: .085em;
}
.ltf-model-chip {
  border-color: rgba(255,255,255,.31);
  background: rgba(28,34,46,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.ltf-chat-log {
  gap: 6px;
}
.ltf-msg {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .70rem;
  line-height: 1.48;
  box-shadow: none;
}
.ltf-msg--ai {
  background: rgba(25,31,43,.32);
  border-color: rgba(255,255,255,.20);
  border-bottom-left-radius: 3px;
}
.ltf-msg--user {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--ambient-text-primary, #c7cbd5), transparent 58%),
      rgba(35,41,54,.24));
  border-color: rgba(255,255,255,.26);
  border-bottom-right-radius: 3px;
}
.ltf-msg.ai-thoughts-msg {
  width: min(96%, 540px);
  max-width: min(96%, 540px);
  padding: 7px 9px;
  opacity: 1;
  font-style: normal;
  white-space: normal;
}
.ltf-msg.ai-thoughts-msg .ai-thoughts-panel.is-open {
  max-height: 116px;
}
.ltf-msg.ai-thoughts-msg .ai-thoughts-metrics {
  white-space: normal;
}
.ltf-chat-inrow {
  border-top-color: rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(20,25,35,.065));
}
.ltf-chat-input {
  border-color: rgba(255,255,255,.42);
  background: linear-gradient(180deg, rgba(252,253,255,.90), rgba(235,238,244,.84));
  box-shadow:
    inset 0 1px 2px rgba(20,25,36,.09),
    0 1px 0 rgba(255,255,255,.25);
}
.ltf-chat-send,
.ltf-chat-photo {
  border-color: rgba(255,255,255,.38);
  background: rgba(28,34,46,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

/* ════════════════════════════════════════════════════════════════════════
   LTF CONVERSATION CONTROLS + RESIZABLE WORKSPACE
   Shares the main Billie settings; all motion is transform/opacity based.
   ════════════════════════════════════════════════════════════════════════ */

.timing__panel:has(.ltf-studio) {
  --ltf-chat-extra: 0px;
  --ltf-graph-shift: 0px;
  --ltf-require-progress: 0;
}
.timing__panel:has(.ltf-studio) .graph-panel {
  top: calc(207px + var(--ltf-graph-shift));
  transition: top 380ms cubic-bezier(.22,.72,.18,1);
}
.timing__panel:has(.ltf-studio) .graph-panel-requirebar {
  opacity: calc(1 - var(--ltf-require-progress));
  transform: translateY(calc(var(--ltf-require-progress) * -9px)) scale(calc(1 - var(--ltf-require-progress) * .015));
  transform-origin: center top;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.22,.72,.18,1);
}
.timing__panel.ltf-require-consumed .graph-panel-requirebar {
  pointer-events: none;
}
.timing__panel:has(.ltf-studio) .ltf-chat {
  height: calc(207px + var(--ltf-chat-extra));
  z-index: 12;
  transition:
    height 380ms cubic-bezier(.22,.72,.18,1),
    box-shadow 260ms ease;
}
.timing__panel.is-resizing-ltf .graph-panel,
.timing__panel.is-resizing-ltf .graph-panel-requirebar,
.timing__panel.is-resizing-ltf .ltf-chat {
  transition: none;
}
.timing__panel.is-resizing-ltf .ltf-chat {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 20px 38px -20px rgba(13,17,25,.62);
}

.ltf-chat-resize-handle {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 0;
  width: min(210px, 38%);
  height: 17px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.ltf-chat-resize-handle span {
  position: absolute;
  bottom: 3px;
  width: 50px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.54);
  box-shadow:
    0 1px 0 rgba(16,21,31,.17),
    0 0 0 1px rgba(255,255,255,.08);
  transition: width 240ms ease, background 240ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}
.ltf-chat-resize-handle small {
  position: absolute;
  left: 50%;
  bottom: 9px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(28,34,46,.54);
  color: rgba(255,255,255,.72);
  font-size: .44rem;
  font-weight: 720;
  letter-spacing: .07em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 3px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.ltf-chat-resize-handle:hover span,
.ltf-chat-resize-handle:focus-visible span,
.timing__panel.is-resizing-ltf .ltf-chat-resize-handle span {
  width: 76px;
  background: color-mix(in srgb, var(--ambient-text-primary, #d8dde8), white 28%);
  transform: scaleY(1.12);
}
.ltf-chat-resize-handle:hover small,
.ltf-chat-resize-handle:focus-visible small,
.timing__panel.is-resizing-ltf .ltf-chat-resize-handle small {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ltf-center {
  position: relative;
}
.ltf-settings-toggle {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 31;
  transform: translateX(-50%);
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border: 1px solid rgba(255,255,255,.37);
  border-radius: 999px;
  background:
    radial-gradient(90% 130% at 20% 0, rgba(255,255,255,.30), transparent 56%),
    linear-gradient(155deg, rgba(250,251,254,.20), rgba(28,34,46,.17));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 7px 17px -12px rgba(13,17,25,.64);
  color: rgba(255,255,255,.84);
  font: 720 .53rem/1 inherit;
  letter-spacing: .055em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 330ms cubic-bezier(.2,.82,.2,1),
    border-color 220ms ease,
    background 220ms ease,
    opacity 180ms ease;
}
.ltf-settings-toggle:hover,
.ltf-settings-toggle:focus-visible,
.ltf-settings-toggle.is-open {
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(255,255,255,.62);
  background:
    radial-gradient(90% 130% at 20% 0, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(155deg, rgba(250,251,254,.26), rgba(28,34,46,.20));
  outline: none;
}
.ltf-settings-toggle-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ambient-text-primary, #d7dce8), transparent 74%);
  color: rgba(255,255,255,.94);
  font-size: .58rem;
  transition: transform 440ms cubic-bezier(.2,.85,.25,1);
}
.ltf-settings-toggle.is-open .ltf-settings-toggle-icon {
  transform: rotate(90deg);
}
.ltf-settings-toggle-cost {
  min-width: 25px;
  padding: 3px 5px;
  border-radius: 99px;
  background: rgba(20,25,35,.19);
  color: rgba(255,255,255,.68);
  font-size: .47rem;
  font-variant-numeric: tabular-nums;
}
.ltf-center:has(.ltf-months.is-on) .ltf-settings-toggle {
  opacity: 0;
  pointer-events: none;
}

.ltf-settings-drawer {
  position: absolute;
  z-index: 42;
  left: 166px;
  right: 166px;
  top: -265px;
  max-height: min(340px, calc(100svh - 220px));
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.43);
  border-radius: 19px;
     background: radial-gradient(100% 80% at 8% -8%, rgb(233 233 233 / 23%), transparent 54%), linear-gradient(155deg, rgb(161 161 161 / 25%), rgb(57 63 77 / 33%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 24px 48px -25px rgba(11,15,24,.72);
  color: rgba(255,255,255,.94);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(.975);
  transform-origin: center bottom;
  transition:
    opacity 200ms ease,
    transform 420ms cubic-bezier(.18,.84,.22,1);
}
.ltf-settings-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.ltf-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 1px 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.ltf-settings-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.68);
  font-size: .45rem;
  font-weight: 790;
  letter-spacing: .15em;
}
.ltf-settings-head h3 {
  margin: 0;
  color: rgba(255,255,255,.96);
  font-size: .82rem;
  font-weight: 780;
  letter-spacing: -.015em;
}
.ltf-settings-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ltf-settings-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.ltf-settings-cost small {
  color: rgba(255,255,255,.64);
  font-size: .43rem;
  letter-spacing: .07em;
}
.ltf-settings-cost b {
  color: rgba(255,255,255,.93);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
}
.ltf-settings-close {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50%;
  background: rgba(24,29,40,.15);
  color: rgba(255,255,255,.86);
  font: 500 1rem/1 inherit;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease;
}
.ltf-settings-close:hover {
  transform: rotate(8deg) scale(1.06);
  background: rgba(24,29,40,.25);
}
.ltf-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 9px;
}
.ltf-settings-row {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 12px;
  background: rgba(26,31,43,.10);
  transition: opacity 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
.ltf-settings-row:hover {
  border-color: rgba(255,255,255,.29);
  transform: translateY(-1px);
}
.ltf-settings-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ltf-settings-copy b {
  color: rgba(255,255,255,.92);
  font-size: .58rem;
  font-weight: 770;
}
.ltf-settings-copy small {
  min-width: 0;
  color: rgba(255,255,255,.66);
  font-size: .42rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ltf-settings-options {
  display: flex;
  gap: 3px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 10px;
  background: rgba(19,24,34,.14);
}
.ltf-settings-options::-webkit-scrollbar { display: none; }
.ltf-settings-options button {
  flex: 1 0 auto;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font: 690 .48rem/1 inherit;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 240ms cubic-bezier(.2,.8,.2,1);
}
.ltf-settings-options button:hover:not(:disabled) {
  color: rgba(255,255,255,.90);
}
.ltf-settings-options button.is-active {
  border-color: rgba(255,255,255,.28);
  background:
    radial-gradient(100% 100% at 28% 0, rgba(255,255,255,.25), transparent 65%),
    color-mix(in srgb, var(--ambient-text-primary, #d5dbe7), transparent 73%);
  color: rgba(255,255,255,.97);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.ltf-settings-row.is-locked {
  opacity: .47;
}
.ltf-settings-row.is-locked .ltf-settings-copy b::after {
  content: " · PRO";
  color: rgba(255,255,255,.58);
  font-size: .39rem;
  letter-spacing: .1em;
}
.ltf-settings-options button:disabled {
  cursor: not-allowed;
}
.ltf-settings-tier-note {
  margin: 8px 2px 0;
  color: rgba(255,255,255,.64);
  font-size: .44rem;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .timing__panel:has(.ltf-studio) .graph-panel {
    top: calc(200px + var(--ltf-graph-shift));
  }
  .timing__panel:has(.ltf-studio) .ltf-chat {
    height: calc(194px + var(--ltf-chat-extra));
  }
  .ltf-chat-resize-handle {
    width: 42%;
    height: 22px;
  }
  .ltf-chat-resize-handle span {
    bottom: 4px;
    width: 58px;
    height: 4px;
  }
  .ltf-settings-toggle {
    left: auto;
    right: 25%;
    top: -19px;
    bottom: auto;
    transform: none;
    min-height: 25px;
  }
  .ltf-settings-toggle:hover,
  .ltf-settings-toggle:focus-visible,
  .ltf-settings-toggle.is-open {
    transform: translateY(-2px);
  }
  .ltf-settings-drawer {
    left: 5px;
    right: 5px;
    bottom: 200px;
    max-height: min(390px, calc(100svh - 150px));
    padding: 10px;
    border-radius: 17px;
    background: rgba(103, 103, 103, 0.64);
  }
  .ltf-settings-grid {
    grid-template-columns: 1fr;
  }
  .ltf-settings-copy small {
    max-width: 58%;
  }
  .ltf-settings-options button {
    min-height: 30px;
    font-size: .52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timing__panel:has(.ltf-studio) .graph-panel,
  .timing__panel:has(.ltf-studio) .graph-panel-requirebar,
  .timing__panel:has(.ltf-studio) .ltf-chat,
  .ltf-settings-drawer,
  .ltf-settings-toggle,
  .ltf-settings-toggle-icon {
    transition-duration: .01ms !important;
  }
}

/* Final geometry authority: later than every instrument/material pass. */
.ltf-dial-dip {
  left: 50%;
  right: auto;
  width: 78px;
  height: 42px;
  border-radius: 15px;
  transform: translate(-50%, -50%);
}
.ltf-edit-well.is-denied {
  animation: ltf-edit-well-denied 280ms ease;
}
@keyframes ltf-edit-well-denied {
  0%, 100% { transform: translate(-50%, 0); }
  30% { transform: translate(calc(-50% - 5px), 0); }
  65% { transform: translate(calc(-50% + 5px), 0); }
}
@media (max-width: 768px) {
  .ltf-dial-dip {
    width: 64px;
    height: 37px;
    border-radius: 13px;
  }
}

/* Final interaction/layout authority: the dial itself owns every lock
   gesture; controls stay in the composer band and never cover the graph. */
.ltf-dial-action {
  display: none !important;
}
.ltf-settings-toggle {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 12px;
  min-height: 21px;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  font-size: .44rem;
  letter-spacing: .045em;
  transform: translateX(-50%);
}
.ltf-settings-toggle:hover,
.ltf-settings-toggle:focus-visible,
.ltf-settings-toggle.is-open {
  transform: translateX(-50%) translateY(-2px);
}
.ltf-settings-toggle-icon {
  width: 14px;
  height: 14px;
  font-size: .46rem;
}
.ltf-settings-toggle-cost {
  display: none;
}
.ltf-studio:has(.ltf-months.is-on) > .ltf-settings-toggle {
  opacity: 0;
  pointer-events: none;
}
.ltf-bracket,
.ltf-bracket-label {
  cursor: pointer;
}

/* Bracket editing uses a lightweight SVG route so the source tick can stay
   accurate while the floating dial is clamped safely inside the viewport. */
.ltf-edit-route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 100%;
  height: calc(50% - 12px);
  z-index: 18;
  overflow: visible;
  pointer-events: none;
}
.ltf-edit-route path {
  fill: none;
  stroke: rgba(var(--bk, 255,255,255), .86);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(var(--bk, 255,255,255), .28));
  animation: ltf-edit-route-in 560ms cubic-bezier(.22,.72,.18,1) forwards;
}
@keyframes ltf-edit-route-in {
  to { stroke-dashoffset: 0; }
}

/* Remove the dark timeline shelf entirely. The graph, line geometry, markers
   and interaction layers keep their existing dimensions and positions. */
.timing__panel .ltf-age-layer::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 768px) {
  .ltf-edit-route {
    bottom: 13px;
    height: calc(50% - 5px);
  }
  .ltf-edit-route path {
    filter: none;
  }
  .timing__panel .age-markers-placeholder {
    z-index: 12;
    overflow: visible;
  }
  .timing__panel .rtr-age-marker-label {
    bottom: 18px;
    z-index: 2;
    color: rgba(255,255,255,.94);
    text-shadow:
      0 1px 2px rgba(0,0,0,.72),
      0 0 7px rgba(0,0,0,.42);
  }
  .timing__panel .ltf-bracket {
    bottom: calc(2px + (var(--lane, 0) * 8px));
  }
  .ltf-settings-toggle {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 27px;
    min-height: 20px;
    padding: 3px 5px 3px 3px;
    transform: translateX(-50%);
  }
  .ltf-settings-toggle:hover,
  .ltf-settings-toggle:focus-visible,
  .ltf-settings-toggle.is-open {
    transform: translateX(-50%) translateY(-2px);
  }
}

.perf-lite .ltf-edit-route path {
  filter: none;
  animation: none;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ltf-edit-route path {
    animation: none;
    stroke-dashoffset: 0;
  }
}