/* ============================================================
   TOGLO · The Living Demo (experience.html)
   Shell = Captain chrome. Crew palette ONLY inside .ldemo__screen.
   ============================================================ */

/* ---- page hero tightening (defines the Task-1 hook) ----
   the demo IS the hero: keep the intro short so the phone lands above the fold */
.page-hero--demo { padding-top: 110px; padding-bottom: var(--space-2); }

/* ---- layout ---- */
.ldemo { padding: var(--space-6) 0 var(--space-16); }
.ldemo__shell {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-8);
  align-items: start; justify-items: center; margin-top: var(--space-8);
}
.ldemo__rail { justify-self: end; max-width: 260px; display: flex; flex-direction: column; gap: var(--space-4); }
.ldemo__side { justify-self: start; max-width: 220px; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* ---- outro form (moves Task-1 inline styles here) ---- */
.ldemo__outro .waitlist__form { max-width: 420px; margin: var(--space-6) auto 0; }

/* ---- timeline (stepped nodes) ---- */
.ldemo__timeline { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; }
.ldnode {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  min-width: var(--target-min); min-height: var(--target-min);
  padding: var(--space-2); color: var(--text-muted);
  font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-ui);
}
.ldnode__dot {
  width: 14px; height: 14px; border-radius: var(--radius-pill);
  border: 2px solid var(--muted); background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-overshoot), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ldnode:hover .ldnode__dot { border-color: var(--gold-deep); }
.ldnode.is-current { color: var(--text-strong); }
.ldnode.is-current .ldnode__dot { background: var(--gold); border-color: var(--gold-deep); transform: scale(1.25); }
.ldnode.is-done .ldnode__dot { background: var(--gold-lite); border-color: var(--gold); }
.ldconn { width: clamp(10px, 3vw, 34px); height: 2px; background: var(--line); flex: none; }
.ldconn.is-done { background: var(--gold); }

/* ---- Parent/Kid toggle ---- */
.ldemo__toggle { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-card); }
.ldtog {
  appearance: none; border: 0; cursor: pointer; background: none;
  min-height: var(--target-min); padding: 0 var(--space-5);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font-ui); color: var(--text-body);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.ldtog[aria-pressed="true"] { background: var(--indigo); color: var(--gold-lite); }
.ldemo__toggle.is-locked .ldtog { cursor: not-allowed; opacity: .72; }

/* ---- caption + hint ---- */
.ldemo__caption { font: var(--fw-medium) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--text-body); }
.ldemo__hint { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- phone frame (DS ui_kit convention, tokenized) ---- */
.ldemo__phone {
  width: 320px; height: 660px; flex: none;
  background: var(--indigo-deep); border-radius: 44px; padding: 10px;
  box-shadow: var(--shadow-3);
}
.ldemo__screen {
  width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: var(--bg-app); display: flex; flex-direction: column; position: relative;
  font-family: var(--font-ui); color: var(--text-strong); text-align: left;
}
/* short desktop viewports: shrink the frame (same 320:660 ratio) so most of the phone is visible on landing */
@media (min-width: 981px) and (max-height: 800px) {
  .ldemo { padding-top: var(--space-2); }
  .ldemo__shell { margin-top: var(--space-4); }
  .ldemo__phone { width: 280px; height: 578px; }
}

/* ---- in-phone primitives (shared, both registers) ---- */
.lds-status { flex: none; display: flex; justify-content: space-between; padding: var(--space-3) var(--space-5) var(--space-1); font: var(--fw-bold) 11px/1 var(--font-num); color: var(--text-strong); }
.lds-status.on-dark { color: var(--cream); }
.lds-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding: var(--space-4) var(--space-4) var(--space-6); }
.lds-scroll::-webkit-scrollbar { width: 0; }
.lds-head { padding: var(--space-2) var(--space-4); }
.lds-eyebrow { font: var(--fw-bold) 10px/1 var(--font-ui); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow); }
.lds-title { font: var(--fw-black) 22px/var(--lh-tight) var(--font-display); margin: var(--space-1) 0 0; }
.lds-card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-1); margin-bottom: var(--space-3); }
.lds-btn {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  min-height: var(--target-min); border-radius: var(--radius-control);
  font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.lds-btn:active { transform: scale(var(--press-scale)); }
.lds-btn--primary { background: var(--grad-foil); color: var(--on-gold); }
.lds-btn--ritual { background: var(--indigo); color: var(--gold-lite); }
.lds-btn--dest { background: var(--dest-accent); color: var(--dest-accent-ink); }
.lds-xp { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--fw-bold) var(--fs-xs)/1 var(--font-num); color: var(--gold-deep); background: var(--tint-gold); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }

/* ---- CREW register: scoped ONLY to the screen ---- */
.ldemo__screen[data-register="crew"] { font-size: 17px; }
.ldemo__screen[data-register="crew"] .lds-btn { min-height: var(--target-crew); font-size: var(--fs-body); border-radius: var(--radius-card); }
.ldemo__screen[data-register="crew"] .lds-title { font-size: 26px; }
.ldemo__screen[data-register="crew"] .lds-eyebrow { color: var(--coral); }
.ldemo__screen[data-register="crew"] .lds-card { border-radius: var(--radius-feature); border-color: transparent; box-shadow: var(--shadow-2); }
.ldemo__screen[data-register="crew"] .lds-hero { background: linear-gradient(rgba(21,16,58,.45), rgba(21,16,58,.45)), var(--grad-crew); color: var(--white); }

/* ---- option buttons (mission answers) ---- */
.lds-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: var(--target-crew); padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-hairline); border-radius: var(--radius-control);
  background: var(--surface-card); cursor: pointer; margin-bottom: var(--space-2);
  font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-ui); color: var(--text-strong); text-align: left;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.lds-opt:hover { border-color: var(--gold); }
.lds-opt.is-correct { border-color: var(--success); background: var(--tint-teal); }
.lds-opt.is-kind { border-color: var(--gold); background: var(--tint-warn); animation: ldKind var(--dur-base) var(--ease-standard); }
@keyframes ldKind { 50% { transform: translateX(3px); } }

/* ---- stage transition ---- */
.ldemo__screen > .lds-view { animation: ldIn var(--dur-slow) var(--ease-emphasized); display: flex; flex-direction: column; min-height: 100%; }
@keyframes ldIn { from { opacity: 0; transform: translateY(10px); } }

/* ---- night ritual (stage 7/9 in-phone) ---- */
.lds-view--night { background: var(--grad-night); color: var(--cream); }
.lds-view--night .lds-title, .lds-view--night .lds-status { color: var(--cream); }

/* ---- outro ---- */
.ldemo__outro-links { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .ldemo__shell { grid-template-columns: 1fr; justify-items: center; gap: var(--space-5); }
  .ldemo__rail { justify-self: center; max-width: 420px; text-align: center; align-items: center; order: 2; }
  .ldemo__side { justify-self: center; order: 3; flex-direction: row; align-items: center; max-width: none; }
  .ldemo__mascot { width: 72px; height: 72px; }
  .ldemo__phone { width: min(320px, 88vw); height: auto; aspect-ratio: 320 / 660; order: 1; }
  .ldnode span:not(.ldnode__dot) { display: none; }
  .ldnode.is-current span { display: block; }
  .ldemo__timeline { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; max-width: 100%; }
  .ldemo__timeline::-webkit-scrollbar { display: none; }
  .ldnode { scroll-snap-align: center; }
  .ldnode:first-child { margin-left: auto; }
  .ldnode:last-child { margin-right: auto; }
}

/* ---- stage 1: create ---- */
/* selected ≠ correct: gold selection affordance; .is-correct is reserved for answer validation */
.lds-opt.is-selected { border-color: var(--gold); background: var(--tint-gold); }
.ldc-bands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ldc-band { appearance: none; cursor: pointer; min-height: var(--target-min); padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--border-hairline); background: var(--surface-card); font: var(--fw-medium) var(--fs-xs)/1 var(--font-ui); color: var(--text-body); }
.ldc-band.is-on { border-color: var(--gold); background: var(--tint-gold); color: var(--text-strong); }
.ldc-full { display: flex; align-items: center; justify-content: center; min-height: var(--target-min); text-align: center; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-link); }

/* ---- stages 2-3: pre-flight + board ---- */
.ldp-secret { position: relative; overflow: hidden; border-color: var(--border-lux); background: var(--surface-lux); }
.ldemo__screen[data-register="crew"] .ldp-secret { border-color: var(--border-lux); } /* outranks the crew card border reset */
.ldp-secret::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(242,208,138,.35) 50%, transparent 70%); transform: translateX(-100%); animation: ldShimmer 1.6s var(--ease-standard) .3s 2; }
@keyframes ldShimmer { to { transform: translateX(100%); } }
.ldp-pack { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-body); }
.ldp-pack .is-on { color: var(--success); font-weight: var(--fw-semibold); }
.ldb-card.is-up { border: 1.5px solid var(--gold); animation: ldPulse 1.8s var(--ease-standard) infinite; }
@keyframes ldPulse { 50% { box-shadow: var(--shadow-2); transform: translateY(-2px); } }

/* ---- stage 4: field mission ---- */
.ldm-scene { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); text-align: center; }
.ldm-coach { font-size: var(--fs-xs); color: var(--gold-deep); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.ldm-artifact { margin-top: var(--space-4); text-align: center; border-color: var(--border-lux); background: var(--surface-lux); display: grid; gap: var(--space-1); animation: ldIn var(--dur-celebrate) var(--ease-overshoot); }
.ldemo__screen[data-register="crew"] .ldm-artifact { border-color: var(--border-lux); } /* outranks the crew card border reset */

/* ---- stage 5: re-plan ---- */
.ldr-alert { display: flex; gap: var(--space-3); align-items: center; border-color: var(--gold); background: var(--tint-warn); }
.ldr-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--fs-sm); }
.ldr-row:last-child { border-bottom: 0; }
.ldr-time { font: var(--fw-bold) var(--fs-xs)/1 var(--font-num); color: var(--text-muted); min-width: 44px; }
.ldr-row.is-new { animation: ldIn var(--dur-slow) var(--ease-emphasized); }
.ldr-chip { margin-left: auto; font: var(--fw-semibold) 10px/1 var(--font-ui); color: var(--success); background: var(--tint-teal); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); }
.is-spinning svg { animation: ldSpin .9s linear infinite; }
@keyframes ldSpin { to { transform: rotate(360deg); } }

/* ---- stage 6: together ---- */
.ldt-chat { display: grid; gap: var(--space-2); }
.ldt-msg { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.ldt-msg--me { justify-self: end; background: var(--tint-coral); border-bottom-right-radius: var(--radius-sm); }
.ldt-msg--them { justify-self: start; background: var(--surface-card); border: 1px solid var(--border-hairline); border-bottom-left-radius: var(--radius-sm); animation: ldIn var(--dur-slow) var(--ease-emphasized) .5s backwards; }
.ldt-toast { justify-self: center; margin-top: var(--space-2); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-ui); color: var(--success); background: var(--tint-teal); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }

/* ---- stage 7: chronicle ritual ---- */
.ldk-page { background: rgba(251,246,236,.08); border: 1px solid rgba(242,208,138,.28); border-radius: var(--radius-card); padding: var(--space-5); display: grid; gap: var(--space-3); }
.ldk-line { color: var(--cream); font: var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-display); animation: ldIn var(--dur-celebrate) var(--ease-emphasized) backwards; }
.ldk-seal { color: var(--gold-lite); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-ui); text-align: center; margin-top: var(--space-2); }

/* ---- stages 8-9: weekend + memory ---- */
.ldw-flame { font-size: 40px; display: inline-block; animation: ldPulse 1.8s var(--ease-standard) infinite; }

/* ---- reduced motion: static states ---- */
@media (prefers-reduced-motion: reduce) {
  .ldemo__screen > .lds-view, .lds-opt.is-kind { animation: none; }
  .ldnode__dot, .lds-btn { transition: none; }
  .ldp-secret::after, .ldb-card.is-up { animation: none; }
  .ldm-artifact { animation: none; }
  .ldr-row.is-new, .is-spinning svg { animation: none; }
  .ldt-msg--them { animation: none; }
  .ldk-line { animation: none; }
  .ldw-flame { animation: none; }
}

.ldemo__outro-sub { color: rgba(251,246,236,.75); font-size: 14.5px; margin: 6px auto 0; max-width: 46ch; }