/* ===========================================================================
   SolutionsDataHub -- HERO FILM v2, part 1/3: window, source rail, chat rows,
   result card, step bar (5 steps). Charts: datahub-film-2.css. Motion:
   datahub-film-3.css. Driver: datahub-hero.js (unchanged; it only needs
   [data-dh-hero], .dh-hero-stage, [data-dh-step], .dh-hero-go, .dh-hero-prog).
   Story: data exists to answer a business question, so every scene ENDS in a
   picture a non-engineer can read. Five people ask five questions; each gets
   a different shape of answer (KPI + trend · ranking · days-left · split ·
   dashboard). The rail on the left = the inputs; the lit ones are read in
   place. SQL stays one click away (SQLを見る), never in the way.
   State lives on .dh-hero-film: [data-at="0..4"]. Every rule here is a FINAL
   frame: no JS / reduced motion = scene ⑤ (the dashboard) as one still.
   Shape language: window 14px, card 12px, icon tile 7px, chips 6px.
   =========================================================================== */

.dh-f .dh-hero-stage { border-radius: 20px; }
.dh-f-win { border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 42, 67, 0.08), 0 28px 56px -28px rgba(16, 42, 67, 0.5); }
.dh-f-win .dh-top { height: 40px; padding: 0 12px 0 16px; }
.dh-f-sharebtn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 10px; border: 1px solid rgba(198, 211, 224, 0.45); border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--white); }
.dh-f-sharebtn svg { width: 12px; height: 12px; stroke-width: 1.6; }

/* fixed body height = fixed film height: switching scenes never moves the page.
   Rail 166px: the longest source type, 「スプレッドシート」, fits at 13px. */
.dh-f-body { display: grid; grid-template-columns: 166px minmax(0, 1fr); height: 412px; }

/* ---- source rail = the inputs. Lit = read for this answer (tint + dot). ---- */
.dh-f-rail { padding: 14px 8px; background: var(--dh-rail); border-right: 1px solid var(--dh-hair); }
.dh-f-rail-h { margin: 0 0 8px; padding: 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.dh-f-rail ul { display: flex; flex-direction: column; gap: 3px; }
.dh-f-rail li { position: relative; z-index: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px; border-radius: 9px; }
.dh-f-rail li::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px; background: var(--white); box-shadow: 0 0 0 1px var(--dh-hair), 0 2px 6px -2px rgba(16, 42, 67, 0.16); opacity: 0; }
.dh-f-rail li::after { content: ""; position: absolute; top: 50%; right: 8px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--green); opacity: 0; }
.dh-f-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ic-bg); color: var(--ic-fg); }
.dh-f-ic svg { width: 14px; height: 14px; }
.dh-f-ic--db { --ic-bg: #E3EFFA; --ic-fg: var(--blue); }
.dh-f-ic--sheet { --ic-bg: #E2F3EA; --ic-fg: #237A4C; }   /* --green darkened: 4.9:1 on its tile */
.dh-f-ic--file { --ic-bg: var(--dh-flat); --ic-fg: var(--muted); }
.dh-f-rn { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--navy); white-space: nowrap; }
.dh-f-re { font-weight: 400; color: var(--muted); }
.dh-hero-film[data-at="0"] .dh-f-rail [data-src~="0"], .dh-hero-film[data-at="1"] .dh-f-rail [data-src~="1"],
.dh-hero-film[data-at="2"] .dh-f-rail [data-src~="2"], .dh-hero-film[data-at="3"] .dh-f-rail [data-src~="3"],
.dh-hero-film[data-at="4"] .dh-f-rail [data-src] { --lit: 1; }
.dh-f-rail li::before, .dh-f-rail li::after { opacity: var(--lit, 0); }

/* ---- main: 5 scene layers stacked; only [data-at] shows ------------------- */
.dh-f-main { position: relative; min-width: 0; overflow: hidden; }
.dh-f-scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; opacity: 0; visibility: hidden; }
.dh-hero-film[data-at="0"] [data-scene="0"], .dh-hero-film[data-at="1"] [data-scene="1"], .dh-hero-film[data-at="2"] [data-scene="2"],
.dh-hero-film[data-at="3"] [data-scene="3"], .dh-hero-film[data-at="4"] [data-scene="4"] { opacity: 1; visibility: visible; }

/* question = a person (right, like any chat app) */
.dh-f-ask { flex: none; display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.dh-f-q { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; max-width: 86%; }
.dh-f-who { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.dh-f-bub { padding: 7px 13px; border-radius: 14px 14px 4px 14px; background: var(--dh-acc); font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--white); }
.dh-f-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--av); font-size: 13px; font-weight: 700; color: var(--white); }

/* answer = the AI (left): one plain sentence, the numbers in bold */
.dh-f-ans { flex: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 9px; align-items: center; }
.dh-f-aim { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--dh-tint); color: var(--dh-acc-ink); }
.dh-f-aim::before { content: ""; width: 13px; height: 13px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.dh-f-say, .dh-f-dots { grid-area: 1 / 2; }
.dh-f-say { font-size: 13px; line-height: 1.6; color: var(--ink); }
.dh-f-say b { font-size: 14px; color: var(--navy); }
.dh-f-dots { display: flex; gap: 4px; opacity: 0; }
.dh-f-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-pale); }
.dh-f-sql { padding: 2px 8px; border: 1px solid var(--dh-hair); border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 20px; color: var(--dh-acc-ink); white-space: nowrap; }

/* result card */
.dh-f-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--dh-hair); border-radius: 12px; background: var(--white); box-shadow: 0 2px 8px -4px rgba(16, 42, 67, 0.14); }
.dh-f-ct { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
.dh-f-ct span { font-weight: 400; color: var(--muted); }
.dh-f-badge { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--amber); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--navy); white-space: nowrap; }

/* ---- step bar: 5 steps ------------------------------------------------------ */
.dh-f .dh-hero-steps { grid-template-columns: repeat(5, minmax(max-content, 1fr)); }

/* 2-column layout below 1200px: slimmer rail */
@media (min-width: 1024px) and (max-width: 1199px) {
  .dh-f-body { grid-template-columns: 118px minmax(0, 1fr); }
  .dh-f-re { display: none; }
  .dh-f-scene { padding: 14px 14px 16px; }
}
/* phone: the rail turns into one row of source icons above the chat */
@media (max-width: 759px) {
  .dh-f .dh-hero-stage { border-radius: 14px; }
  .dh-f-win { border-radius: 12px; }
  .dh-f-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 470px; }
  .dh-f-rail { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--dh-hair); }
  .dh-f-rail-h { margin: 0; padding: 0; }
  .dh-f-rail ul { flex-direction: row; gap: 4px; }
  .dh-f-rail li { display: block; padding: 2px; }
  .dh-f-ic { width: 22px; height: 22px; border-radius: 6px; }   /* 6 tiles + 「データソース」 at 13px fit one row at 360px */
  .dh-f-ic svg { width: 12px; height: 12px; }
  .dh-f-rail li::after { top: 1px; right: 1px; margin: 0; }
  .dh-f-rn { display: none; }
  .dh-f-scene { padding: 12px 10px 12px; gap: 8px; }
  .dh-f-q { max-width: 90%; }
  .dh-f-bub { padding: 6px 11px; }
  .dh-f-ans { grid-template-columns: 28px minmax(0, 1fr); }
  .dh-f-aim { width: 28px; height: 28px; }
  .dh-f-sql { display: none; }
  .dh-f-card { padding: 12px; }
}