/* ===========================================================================
   SolutionsCoding -- HERO shell (.cd-hero-*). Port of the SolutionsChatops
   hero (solutions-chatops-hero.css) with this page's names and colours:
   2-column grid, copy column, the stage + window chrome of the 4-scene
   film, step bar, caption, size variants.
     coding-hero-scenes.css  what each scene shows (final frames)
     coding-hero-motion.css  first paint, cross-fade, per-scene motion
     coding-hero.js          driver: steps, pause, autoplay clock
   State lives on .cd-hero-film: [data-at="0..3"] = shown scene, [data-prev]
   = outgoing scene. .is-live = autoplay, .is-held = frozen. Every rule
   outside .is-live is a final frame: no JS, reduced motion and paused all
   show still frames, scene 2 (ルール) by default.
   Fixed body height (--body-h): switching scenes never moves the page.
   Type floor (owner rule 2026-10-04): Japanese >= 13px, Latin / digits /
   symbols >= 12px, also inside the film; titles 14px, labels 13px.
   Never use .dc-ui-*, [data-io], [data-count] or .dc-term inside the film:
   home-motion.js and coding-terms.js look those up document-wide.
   =========================================================================== */

.cd-hero-film {
  --acc: #B8531A; --acc-ink: #9A4413; --tint: #FBEFE7; --edge: #E8C2A8;
  /* chrome = site navy, same as the 画面イメージ .dc-ui-bar (decisions.md D7) */
  --cd-chrome: #102A43; --cd-chrome-hi: rgba(255,255,255,0.13); --cd-chrome-txt: rgba(255,255,255,0.8);
  --cd-mark: #E07A3E;                       /* orange that reads on navy: 4.9:1 */
  --cd-line: #E3E6EA; --cd-ok: #2A7240; --cd-ok-tint: #EAF5EC;   /* ok on tint 5.2:1 */
  --bubble: #F1F3F5; --bubble-self: #FBEFE7;
  --stage: linear-gradient(145deg, #F6E7DC 0%, #EEF0F3 58%, #E8ECF0 100%);
  --body-h: 348px;
  --step-bd: #6F8296; --step-edge: #C6D3E0;   /* step border 3.37:1 on the stage */
}

/* ---- hero grid + copy column ---------------------------------------------- */
.cd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: center; padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: clamp(32px, 3.4vw, 48px); }
@media (min-width: 1024px) { .cd-hero-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); column-gap: clamp(40px, 4.4vw, 68px); } }
.cd-hero-copy { min-width: 0; }
.cd-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cd-hero-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none; transition: color var(--dur-3) var(--ease-soft), transform var(--dur-3) var(--ease-out); }
.cd-hero-link > span { padding-bottom: 3px; border-bottom: 2px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .cd-hero-link:hover { color: var(--blue); } }
.cd-hero-link:active { transform: translateY(1px); }
.cd-hero-grid :is(a, button):focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* Safari / Firefox lack word-break:auto-phrase and break Japanese between any
   two characters; there each phrase is one unbreakable box. Chromium: unchanged. */
@supports not (word-break: auto-phrase) { .cd-hero-ph { display: inline-block; } }

/* ---- stage, window, top bar ------------------------------------------------ */
.cd-hero-film { margin: 0; min-width: 0; }
.cd-hero-stage { position: relative; padding: 20px 20px 12px; border-radius: 16px; background: var(--stage); }
.cd-hero-win { border-radius: 10px; overflow: hidden; background: #FFF; box-shadow: 0 1px 2px rgba(16,42,67,0.08), 0 24px 48px -24px rgba(16,42,67,0.45); font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--ink); word-break: auto-phrase; overflow-wrap: break-word; }
:where(.cd-hero-win) :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }   /* zero specificity */
:where(.cd-hero-win) svg { display: block; flex: none; }
.cd-hero-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.cd-hero-top { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; background: var(--cd-chrome); color: #FFF; }
.cd-hero-brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cd-hero-brand svg { width: 20px; height: 20px; }
.cd-hero-brand b { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.cd-hero-path { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,0.1); font-size: 12px; color: var(--cd-chrome-txt); white-space: nowrap; overflow: hidden; }
.cd-hero-path .cd-hero-ic { width: 12px; height: 12px; }
.cd-hero-status { display: grid; margin-left: auto; }
.cd-hero-status > .cd-hero-chip { grid-area: 1 / 1; justify-self: end; opacity: 0; }
.cd-hero-film[data-at="0"] [data-s="0"], .cd-hero-film[data-at="1"] [data-s="1"],
.cd-hero-film[data-at="2"] [data-s="2"], .cd-hero-film[data-at="3"] [data-s="3"] { opacity: 1; }
.cd-hero-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 13px; font-weight: 700; color: #FFF; white-space: nowrap; }
.cd-hero-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cd-mark); }
.cd-hero-chip[data-s="3"]::before { background: #7BD197; }

.cd-hero-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #3E6A8F; font-size: 13px; font-weight: 700; font-style: normal; line-height: 1; color: #FFF; }
.cd-hero-av[data-c="ai"] { background: #FFF url("assets/coding-ai-face.webp") center / cover no-repeat; color: transparent; box-shadow: 0 0 0 1px rgba(16, 42, 67, 0.14); }   /* NAL's AI character "Avatar" wherever the assistant speaks; the "AI" text stays for screen readers */
.cd-hero-av--me { width: 24px; height: 24px; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.cd-hero-av--xs { width: 18px; height: 18px; font-size: 8.5px; }

/* ---- body: rail + view ----------------------------------------------------- */
.cd-hero-body { display: grid; grid-template-columns: 136px minmax(0, 1fr); height: var(--body-h); }
.cd-hero-rail { display: flex; flex-direction: column; gap: 1px; padding: 8px 6px; background: var(--cd-chrome); color: var(--cd-chrome-txt); }
.cd-hero-rail li { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.cd-hero-rail li .cd-hero-ic { width: 13px; height: 13px; }
.cd-hero-rail li.cd-hero-rail-h { margin-top: 10px; padding-bottom: 1px; font-weight: 700; letter-spacing: 0.04em; }   /* same 13px as the rows: bold marks the group */
.cd-hero-rail li.cd-hero-rail-h:first-child { margin-top: 0; }
/* the rail follows the scene: ① assistant, ② skills, ③ the file, ④ the review agent.
   ゲートキーパー keeps the page-wide meaning (usage control, 特長 05) and never lights up here. */
.cd-hero-film[data-at="0"] .cd-hero-rail [data-r="ai"], .cd-hero-film[data-at="1"] .cd-hero-rail [data-r="skill"],
.cd-hero-film[data-at="2"] .cd-hero-rail [data-r="file"], .cd-hero-film[data-at="3"] .cd-hero-rail [data-r="agent"] { background: var(--cd-chrome-hi); font-weight: 700; color: #FFF; box-shadow: inset 2px 0 0 var(--cd-mark); }
.cd-hero-view { position: relative; min-width: 0; overflow: hidden; contain: layout paint; }
.cd-hero-scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.cd-hero-film[data-at="0"] .cd-hero-scene--0, .cd-hero-film[data-at="1"] .cd-hero-scene--1,
.cd-hero-film[data-at="2"] .cd-hero-scene--2, .cd-hero-film[data-at="3"] .cd-hero-scene--3 { opacity: 1; visibility: visible; }
.cd-hero-scene > * { flex-shrink: 0; }

/* ---- step bar + play button (same look as the ChatOps / Sales films) ------ */
.cd-hero-bar { display: flex; align-items: stretch; gap: 16px; margin-top: 12px; }
.cd-hero-steps { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-hero-steps li { display: flex; min-width: 0; }
.cd-hero-go { position: relative; flex: 1 1 auto; box-sizing: border-box; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 6px 12px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: 500 13px/1.35 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--navy); white-space: nowrap; }
button.cd-hero-go { background: rgba(255,255,255,0.55); border-color: var(--step-bd); box-shadow: 0 2px 0 var(--step-edge); font-weight: 700; cursor: pointer; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
li[aria-current] > span.cd-hero-go { border-color: var(--acc); background: #FFF; font-weight: 700; color: var(--acc); }
button.cd-hero-go[aria-current="true"] { background: #FFF; border-color: var(--acc); color: var(--acc); }
@media (hover: hover) and (pointer: fine) {
  button.cd-hero-go:not([aria-current="true"]):hover, .cd-hero-play:hover { transform: translateY(-1px); background: #FFF; box-shadow: 0 3px 0 var(--step-edge), 0 6px 14px rgba(16,42,67,0.12); }
}
button.cd-hero-go:not([aria-current="true"]):active, .cd-hero-play:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--step-edge); }
.cd-hero-prog { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left center; }
button.cd-hero-go[aria-current="true"] .cd-hero-prog, li[aria-current] .cd-hero-prog { transform: none; }
/* 一時停止 / 再生 is a player control, not a 5th step: navy border, set apart by the gap */
.cd-hero-play { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--navy); border-radius: 8px; background: #FFF; box-shadow: 0 2px 0 var(--step-edge); font: 700 13px/1 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.cd-hero-play[hidden] { display: none; }
html.cd-hero-motion .cd-hero-play[hidden] { display: inline-flex; visibility: hidden; }   /* slot reserved from first paint */
.cd-hero-ico { box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.cd-hero-play[data-state="paused"] .cd-hero-ico { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cd-hero-play-tx { display: grid; }
.cd-hero-play-tx > span { grid-area: 1 / 1; }
.cd-hero-play[data-state="playing"] [data-l="play"], .cd-hero-play[data-state="paused"] [data-l="pause"] { visibility: hidden; }
.cd-hero-play:focus-visible, button.cd-hero-go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* ---- what the scene shows: one plain line above the film (non-tech
   visitors). The 4 lines share one grid cell (the tallest sets the height,
   so the film never moves); data-at picks the line. ------------------------ */
.cd-hero-say { display: grid; margin: 0 0 12px; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--navy); }
.cd-hero-say > span { grid-area: 1 / 1; align-self: start; display: flex; gap: 6px; padding: 1px 0 1px 14px; border-left: 3px solid var(--acc); visibility: hidden; opacity: 0; }
.cd-hero-say b { flex: none; font-weight: 700; color: var(--acc-ink); }
.cd-hero-film[data-at="0"] [data-say="0"], .cd-hero-film[data-at="1"] [data-say="1"],
.cd-hero-film[data-at="2"] [data-say="2"], .cd-hero-film[data-at="3"] [data-say="3"] { visibility: visible; opacity: 1; }
.cd-hero-cap { margin: 12px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cd-hero-cap > span { display: inline-block; }

/* ---- size variants: N 1024-1199 / T 600-1023 / P < 600 --------------------- */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .cd-hero-stage { padding: 16px 16px 10px; }
  .cd-hero-body { grid-template-columns: 40px minmax(0, 1fr); }
  .cd-hero-rail { align-items: center; gap: 4px; padding: 10px 0; }
  .cd-hero-rail li { justify-content: center; width: 28px; height: 26px; padding: 0; }
  .cd-hero-rail li > span { display: none; }   /* icon-only rail: the label is dropped, not shrunk to 0px */
  .cd-hero-rail li .cd-hero-ic { width: 14px; height: 14px; }
  .cd-hero-rail li.cd-hero-rail-h, .cd-hero-path { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199.98px), (max-width: 599.98px) {
  .cd-hero-play { width: 48px; padding: 0; }
  .cd-hero-play-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 1023.98px) { .cd-hero-film { max-width: 720px; } }
@media (max-width: 599.98px) {
  .cd-hero-grid { row-gap: 32px; }
  .cd-hero-stage { padding: 8px 8px 6px; border-radius: 12px; }
  .cd-hero-film { --body-h: 424px; }   /* ② (request + 4 stacked rules) at 13-14px on a 304px window */
  .cd-hero-body { grid-template-columns: minmax(0, 1fr); }
  .cd-hero-rail, .cd-hero-path { display: none; }
  .cd-hero-top { gap: 8px; padding: 0 8px; }   /* brand + 13px status chip + avatar on a 304px window */
  .cd-hero-brand b { letter-spacing: 0.02em; }
  .cd-hero-chip { gap: 4px; padding: 0 7px; }
  .cd-hero-bar { gap: 8px; margin-top: 6px; }
  .cd-hero-steps { gap: 3px; }
  .cd-hero-go { min-height: 44px; padding: 6px 3px 9px; }   /* 13px: 4 steps + play fit 304px (360 screens) */
  .cd-hero-prog { left: 6px; right: 6px; }
  .cd-hero-play { width: 44px; min-width: 44px; min-height: 44px; }
}