/*
 * story.css (Agent D): workflows (.lp-story-*), department tours (.lp-tour-*),
 * volatility surface demo (.lp-surface-*). Tokens and shared classes come from
 * landing.css; nothing shared is redefined here.
 */

/* ============================================================
   Shared by the three sections: screenshot frame, placeholder, caption
   ============================================================ */

/* Fixed-ratio box so a screenshot never shifts the layout while it loads or swaps. */
.lp-shot.lp-story-frame,
.lp-shot.lp-tour-frame {
  position: relative;
  aspect-ratio: 1024 / 600;
}
.lp-shot.lp-story-frame img,
.lp-shot.lp-tour-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.lp-story-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--lp-sp-5);
  background: var(--lp-surface-2);
  color: var(--lp-muted);
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-md);
  font-weight: 600;
  text-align: center;
}

.lp-story-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lp-sp-1) var(--lp-sp-3);
  margin-top: var(--lp-sp-3);
  color: var(--lp-text);
  font-size: var(--lp-fs-sm);
  font-weight: 500;
}
.lp-story-caption-kind {
  color: var(--lp-muted);
  font-size: var(--lp-fs-xs);
  font-weight: 400;
}

/* ============================================================
   1. Workflows
   ============================================================ */

.lp-story .lp-section-head { margin-bottom: var(--lp-sp-4); }

.lp-story-note {
  max-width: 62ch;
  margin: 0 auto var(--lp-sp-6);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
  text-align: center;
}

.lp-story-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-sp-2);
}
.lp-story-tab {
  /* Same look as .lp-chip (landing.css); the focus ring is the page-wide one. */
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-2);
  min-height: 38px;
  padding: var(--lp-sp-2) var(--lp-sp-4);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-pill);
  background: var(--lp-surface-2);
  color: var(--lp-muted);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease),
              border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-story-tab:hover { color: var(--lp-text); border-color: var(--lp-accent); }
.lp-body .lp-story-tab[aria-selected="true"],
.lp-story-tab[aria-selected="true"] {
  color: var(--lp-text);
  background: color-mix(in srgb, var(--lp-primary) 26%, transparent);
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary) 16%, transparent);
}

.lp-story-panel { margin-top: var(--lp-sp-6); }

/* Without JS the tabs cannot switch, so every walkthrough is shown in sequence. */
html:not(.js) .lp-story-tabs { display: none; }
html:not(.js) .lp-story-panel[hidden] { display: block !important; }
html:not(.js) .lp-story-panel + .lp-story-panel { margin-top: var(--lp-sp-8); }

.lp-story-intro {
  max-width: 70ch;
  margin: 0 auto var(--lp-sp-6);
  text-align: center;
}
.lp-story-panel-title {
  font-size: var(--lp-fs-lg);
  font-weight: 700;
  color: var(--lp-text);
}
.lp-story-intro p {
  margin-top: var(--lp-sp-2);
  color: var(--lp-muted);
}

.lp-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lp-sp-6);
  max-width: 760px;
  margin-inline: auto;
}

.lp-story-steps {
  display: grid;
  gap: var(--lp-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-story-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lp-sp-4);
  padding: var(--lp-sp-5) var(--lp-sp-4);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r);
  background: transparent;
  transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}
.lp-story-step-n {
  display: grid;
  place-items: center;
  width: var(--lp-sp-6);
  height: var(--lp-sp-6);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-pill);
  color: var(--lp-accent);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease),
              color var(--lp-dur) var(--lp-ease);
}
.lp-story-step-body { min-width: 0; }
.lp-story-step-title {
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-text);
}
.lp-story-step-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-2);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
}
.lp-story-step-tool a { text-decoration: underline; text-underline-offset: 3px; }
.lp-story-step-text {
  margin-top: var(--lp-sp-3);
  color: var(--lp-muted);
}
.lp-story-step-look {
  margin-top: var(--lp-sp-3);
  padding-left: var(--lp-sp-3);
  border-left: 2px solid var(--lp-border-strong);
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
}
.lp-story-step-look strong { color: var(--lp-text); font-weight: 600; }
.lp-story-step-fig { margin-top: var(--lp-sp-4); }

/* Sticky visual: off by default (phones, no JS). */
.lp-story-visual { display: none; }

.lp-story-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.lp-story-layer.is-front { opacity: 1; }

@media (min-width: 900px) {
  /* story.js adds .is-enhanced once the sticky pane is wired up. */
  .lp-story.is-enhanced .lp-story-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--lp-sp-7);
    max-width: none;
  }
  .lp-story.is-enhanced .lp-story-step-fig { display: none; }
  .lp-story.is-enhanced .lp-story-visual {
    display: block;
    position: sticky;
    top: calc(var(--lp-nav-h, 68px) + var(--lp-sp-5));
  }
  .lp-story.is-enhanced .lp-story-steps { gap: var(--lp-sp-5); }
  .lp-story.is-enhanced .lp-story-step {
    padding: var(--lp-sp-6) var(--lp-sp-5);
    cursor: pointer;
  }
  .lp-story.is-enhanced .lp-story-step:hover { border-color: var(--lp-border-strong); }
  .lp-story.is-enhanced .lp-story-step.is-active {
    border-color: var(--lp-primary);
    background: var(--lp-surface-2);
  }
  .lp-story.is-enhanced .lp-story-step.is-active .lp-story-step-n {
    border-color: var(--lp-primary);
    background: var(--lp-surface-3);
    color: var(--lp-text);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-story-layer { transition: opacity var(--lp-dur) var(--lp-ease); }
}

/* ============================================================
   2. Department tours
   ============================================================ */

.lp-tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lp-sp-5);
}

.lp-tour-card {
  --lp-tour-accent: var(--lp-primary);
  display: flex;
  flex-direction: column;
  gap: var(--lp-sp-4);
  min-width: 0;
  padding: var(--lp-sp-5) var(--lp-sp-4);
}
.lp-tour-card[data-group="flow"] { --lp-tour-accent: var(--lp-g-flow); }
.lp-tour-card[data-group="analytics"] { --lp-tour-accent: var(--lp-g-analytics); }
.lp-tour-card[data-group="strategies"] { --lp-tour-accent: var(--lp-g-strategies); }
.lp-tour-card[data-group="stocks"] { --lp-tour-accent: var(--lp-g-stocks); }
.lp-tour-card[data-group="darkpool"] { --lp-tour-accent: var(--lp-g-darkpool); }
.lp-tour-card[data-group="shorts"] { --lp-tour-accent: var(--lp-g-shorts); }
.lp-tour-card[data-group="investing"] { --lp-tour-accent: var(--lp-g-investing); }
.lp-tour-card[data-group="ai"] { --lp-tour-accent: var(--lp-g-ai); }

.lp-tour-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lp-sp-1) var(--lp-sp-3);
}
.lp-tour-dot {
  width: var(--lp-sp-3);
  height: var(--lp-sp-3);
  border-radius: var(--lp-r-pill);
  background: var(--lp-tour-accent);
  box-shadow: 0 0 0 var(--lp-sp-1) color-mix(in srgb, var(--lp-tour-accent) 18%, transparent);
}
.lp-tour-name {
  font-size: var(--lp-fs-lg);
  font-weight: 700;
  color: var(--lp-text);
}
.lp-tour-count {
  padding: 0 var(--lp-sp-2);
  border: 1px solid color-mix(in srgb, var(--lp-tour-accent) 45%, transparent);
  border-radius: var(--lp-r-pill);
  color: var(--lp-text);
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  line-height: 1.8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lp-tour-blurb {
  grid-column: 1 / -1;
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
}

.lp-tour-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lp-sp-4);
}
.lp-tour-fig { min-width: 0; }
.lp-tour-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-sp-3);
  margin-top: var(--lp-sp-3);
  color: var(--lp-text);
  font-size: var(--lp-fs-sm);
  font-weight: 500;
}
/* Colour, weight, hover underline and arrow: the shared text-link rule in landing.css. */
.lp-tour-open {
  flex: none;
  font-size: var(--lp-fs-sm);
}

.lp-tour-tools {
  display: grid;
  align-content: start;
  gap: var(--lp-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-tour-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--lp-sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--lp-sp-2) var(--lp-sp-3);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--lp-r-sm);
  background: transparent;
  color: var(--lp-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}
.lp-tour-tool:hover { background: var(--lp-surface-2); }
.lp-tour-tool[aria-current="true"] {
  background: var(--lp-surface-2);
  border-color: var(--lp-border);
  border-left-color: var(--lp-tour-accent);
}
.lp-tour-tool-title {
  min-width: 0;
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  line-height: 1.4;
}
.lp-tour-tool-tag {
  grid-column: 1 / -1;
  color: var(--lp-muted);
  font-size: var(--lp-fs-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.lp-tour-all {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--lp-fs-sm);
}

.lp-tour-frame img.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-tour-frame img { transition: opacity var(--lp-dur) var(--lp-ease); }
}

/* One wide card per row: screenshot beside the list. */
@media (min-width: 640px) and (max-width: 899.98px) {
  .lp-tour-card { padding: var(--lp-sp-5); }
  .lp-tour-body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--lp-sp-5);
  }
}
/* Two cards per row: screenshot on top, list under it. */
@media (min-width: 900px) {
  .lp-tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-tour-card { padding: var(--lp-sp-5); }
}

/* ============================================================
   3. Volatility surface demo
   ============================================================ */

.lp-surface-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lp-sp-6);
}
.lp-surface-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lp-sp-4);
  min-width: 0;
  color: var(--lp-muted);
}
.lp-surface-title {
  font-size: var(--lp-fs-2xl);
  font-weight: 700;
  background: var(--lp-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-surface-lede {
  color: var(--lp-text);
  font-size: var(--lp-fs-md);
}

.lp-surface-legend {
  display: grid;
  gap: var(--lp-sp-2);
  width: 100%;
  margin: 0;
  padding: var(--lp-sp-4);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r);
  background: var(--lp-surface-2);
  list-style: none;
  font-size: var(--lp-fs-sm);
}
.lp-surface-legend strong {
  margin-right: var(--lp-sp-1);
  color: var(--lp-text);
  font-weight: 600;
}

.lp-surface-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
}
.lp-surface-guide a { text-decoration: underline; text-underline-offset: 3px; }

.lp-surface-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
}
.lp-surface-modes {
  display: inline-flex;
  gap: var(--lp-sp-2);
  margin-right: var(--lp-sp-2);
}
.lp-surface-hint {
  flex-basis: 100%;
  font-size: var(--lp-fs-sm);
}

.lp-surface-visual { min-width: 0; }

.lp-surface-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-lg);
  background:
    radial-gradient(120% 90% at 30% 20%, var(--lp-surface-3), transparent 60%),
    var(--lp-bg-2);
  box-shadow: var(--lp-shadow);
  touch-action: pan-y;
}

.lp-surface-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.lp-surface-poster path {
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lp-surface-p-axis path { stroke: var(--lp-accent); stroke-opacity: .5; }
.lp-surface-p-cols path { stroke: url(#lp-surface-grad); stroke-opacity: .4; }
.lp-surface-p-rows path { stroke: url(#lp-surface-grad); }
.lp-surface-stop-hi { stop-color: var(--lp-text); }
.lp-surface-stop-mid { stop-color: var(--lp-primary); }
.lp-surface-stop-lo { stop-color: var(--lp-g-investing); }

.lp-surface-sample {
  position: absolute;
  left: var(--lp-sp-3);
  top: var(--lp-sp-3);
  z-index: 3;
  background: var(--lp-bg-2);
}

/* The canvas is created by surface.js (also for stages outside this section). */
.lp-surface-canvas {
  z-index: 1;
  opacity: 0;
  cursor: grab;
}
[data-scene-state="ready"] > .lp-surface-canvas { opacity: 1; }
.is-dragging > .lp-surface-canvas { cursor: grabbing; }
.lp-surface-stage[data-scene-state="ready"] .lp-surface-poster { opacity: 0; visibility: hidden; }

.lp-surface-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* Axis labels. Default positions match the poster; once the scene is ready
   surface.js positions them every frame with a transform from the top left. */
.lp-surface-axis {
  position: absolute;
  color: var(--lp-muted);
  font-size: var(--lp-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.lp-surface-axis[data-lp-axis="strike"] { left: 28.4%; top: 80.3%; }
.lp-surface-axis[data-lp-axis="days"] { right: var(--lp-sp-3); top: 78.1%; transform: translate(0, -50%); }
.lp-surface-axis[data-lp-axis="iv"] { left: 39.1%; top: 12%; }
[data-scene-state="ready"] > .lp-surface-overlay .lp-surface-axis,
[data-scene-state="ready"] > .lp-surface-axis {
  left: 0;
  right: auto;
  top: 0;
  will-change: transform;
}

.lp-surface-tip {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.lp-surface-tip::before {
  content: "";
  position: absolute;
  left: calc(var(--lp-sp-1) * -1);
  top: calc(var(--lp-sp-1) * -1);
  width: var(--lp-sp-2);
  height: var(--lp-sp-2);
  border: 1px solid var(--lp-text);
  border-radius: var(--lp-r-pill);
  background: var(--lp-primary);
}
.lp-surface-tip-box {
  position: absolute;
  left: 0;
  bottom: var(--lp-sp-3);
  transform: translateX(-50%);
  padding: var(--lp-sp-1) var(--lp-sp-2);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-sm);
  background: var(--lp-surface);
  color: var(--lp-text);
  font-size: var(--lp-fs-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lp-surface-tip-kind {
  margin-left: var(--lp-sp-1);
  color: var(--lp-amber);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The member tool's own screenshot: only where the 3D scene does not run. */
.lp-surface-real {
  display: none;
  margin-top: var(--lp-sp-5);
}
.lp-surface.is-static .lp-surface-real,
html:not(.js) .lp-surface-real { display: block; }
@media (max-width: 767.98px), (prefers-reduced-motion: reduce), (pointer: coarse) {
  .lp-surface-real { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-surface-canvas,
  .lp-surface-poster { transition: opacity .5s var(--lp-ease), visibility .5s; }
}

@media (min-width: 900px) {
  .lp-surface-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--lp-sp-7);
  }
}

/* Wide screens: all eight departments in two rows of four instead of four rows of
   two. Cards are narrower here, so taglines give way to tool names (the screenshot
   and the map carry the detail). */
@media (min-width: 1360px) {
  .lp-tour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lp-sp-4); }
  .lp-tour-card { padding: var(--lp-sp-4); }
  .lp-tour-tool-tag { display: none; }
}