/* ===========================================================================
   SolutionsCoding -- HERO scenes: what each of the 4 scenes shows, as final
   frames (coding-hero.css has the shell, coding-hero-motion.css the motion).
     ① 依頼      chat: 佐藤 asks the AI assistant, the AI acknowledges
     ② ルール    the AI lists the 4 organisation rules it will follow
     ③ 実装      editor diff (texture) + a Japanese note on which rules it met
     ④ レビュー  review-agent checklist, verdict, saved-to-knowledge toast
   The message is carried by Japanese text, never by the code (decisions.md
   D2): a reader who cannot read code still follows all 4 scenes.
   Type scale (floor: Japanese 13px, Latin 12px): titles / bubbles / rule names
   14px, labels / notes 13px, times / badge / code 12px.
   =========================================================================== */

/* ---- scene header (opaque, above the lists) ------------------------------- */
.cd-hero-hd { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--cd-line); background: #FFF; white-space: nowrap; }
.cd-hero-ch { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--navy); }
.cd-hero-hd > .cd-hero-ic { color: var(--acc); }
.cd-hero-desc { min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.cd-hero-badge { display: inline-block; padding: 0 5px; border-radius: 3px; background: var(--tint); font-size: 12px; font-weight: 700; line-height: 17px; color: var(--acc-ink); }

/* ---- chat (① ②) ----------------------------------------------------------- */
.cd-hero-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 8px; overflow: hidden; }
.cd-hero-msg { display: flex; align-items: flex-start; gap: 8px; }
.cd-hero-mb { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: calc(100% - 36px); }
.cd-hero-msg--self { flex-direction: row-reverse; }
.cd-hero-msg--self .cd-hero-mb { align-items: flex-end; }
.cd-hero-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.cd-hero-meta b { color: var(--navy); }
.cd-hero-meta time { font-size: 12px; }
.cd-hero-bub { padding: 6px 11px; border-radius: 14px 14px 14px 4px; background: var(--bubble); font: 400 14px/1.7 'Noto Sans JP', sans-serif; color: var(--ink); }
.cd-hero-msg--self .cd-hero-bub { border-radius: 14px 14px 4px 14px; background: var(--bubble-self); color: var(--navy); }
.cd-hero-typing { display: flex; align-items: center; gap: 3px; height: 18px; margin: 0 12px 4px; font-size: 13px; color: var(--muted); opacity: 0; }
.cd-hero-typing span { margin-right: 3px; }
.cd-hero-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.cd-hero-typing i:nth-of-type(2) { --k: 1; }
.cd-hero-typing i:nth-of-type(3) { --k: 2; }
.cd-hero-compose { display: flex; align-items: center; gap: 6px; height: 32px; margin: 0 12px 10px; padding: 0 10px; border: 1px solid var(--cd-line); border-radius: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ② the rules the AI loads before it writes anything */
.cd-hero-m-ctx .cd-hero-mb { flex: 1 1 auto; }
.cd-hero-ctx { width: 100%; max-width: 380px; border: 1px solid var(--cd-line); border-radius: 10px; background: #FFF; box-shadow: 0 1px 2px rgba(16,42,67,0.06); overflow: hidden; }
.cd-hero-ctx-h { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--cd-line); background: #FAFBFC; font-size: 13px; font-weight: 700; color: var(--navy); }
/* 「確認中」 while the AI reads, 「4件」 when done: stacked, final frame = 4件 */
.cd-hero-ctx-n { display: inline-grid; margin-left: auto; font-size: 13px; color: var(--acc-ink); }
.cd-hero-ctx-n > * { grid-area: 1 / 1; justify-self: end; }
.cd-hero-ctx-wait { font-weight: 500; color: var(--muted); opacity: 0; }
.cd-hero-ctx li { position: relative; isolation: isolate; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid #EEF1F4; }
.cd-hero-ctx li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tint); opacity: 0; }   /* the "being read" sweep */
.cd-hero-ctx li:first-child { border-top: 0; }
.cd-hero-tag { justify-self: start; padding: 0 5px; border-radius: 3px; background: var(--tint); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--acc-ink); white-space: nowrap; }
.cd-hero-tag[data-k="know"] { background: #E8F0F8; color: #1D5E94; }   /* 5.9:1 */
/* name and scope on one line where the window is wide (4 rows must fit the
   348px body under the request); stacked on phones (taller 396px body) */
.cd-hero-ctx-t { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.cd-hero-ctx-t b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--navy); white-space: nowrap; }
.cd-hero-ctx-t small { display: block; flex: none; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* the shared green check (②, ③, ④) */
.cd-hero-ck { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cd-ok); }
.cd-hero-ck::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid #FFF; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }

/* ---- ③ editor diff + note ------------------------------------------------- */
.cd-hero-hd--file { gap: 8px; }
.cd-hero-file { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--navy); }
.cd-hero-file .cd-hero-ic { width: 13px; height: 13px; color: var(--acc); }
.cd-hero-diffn { padding: 0 6px; border-radius: 999px; background: var(--cd-ok-tint); font-size: 12px; font-weight: 700; line-height: 19px; color: var(--cd-ok); }
.cd-hero-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 180px; }
.cd-hero-code { min-width: 0; padding: 10px 0; overflow: hidden; background: #FCFCFD; font: 400 12px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #33475B; }
.cd-hero-ln { display: grid; grid-template-columns: 26px 12px minmax(0, 1fr); }
.cd-hero-ln > :first-child { padding-right: 8px; text-align: right; color: var(--muted); }
.cd-hero-ln > :nth-child(2) { font-weight: 700; color: var(--cd-ok); }
.cd-hero-ln > :last-child { overflow: hidden; white-space: pre; text-overflow: clip; }
/* long lines run under the note like in a real editor: fade their last 24px so the cut
   reads as overflow, not as a rendering fault (the green band on ::before still runs to the
   edge). The caret line and the Japanese comment (the one line a non-coder reads) fit the
   column from 1024px (rail 136px + note 180px at 1200px leave the comment 6px) and are
   never faded. */
.cd-hero-ln > :last-child:not(:has(> .cd-hero-caret, > .cd-hero-cm)) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
/* the divider belongs to the code column, so it is there from frame 0, before the note
   slides in; drawn on ::after above the lines, so the green add-bands never cover it */
@media (min-width: 600px) {
  .cd-hero-code { position: relative; }
  .cd-hero-code::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 1px; background: var(--cd-line); }
}
/* the green band sits on ::before so it can run out from the left before the text is written */
.cd-hero-ln--add { position: relative; isolation: isolate; }
.cd-hero-ln--add::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cd-ok-tint); transform-origin: left center; }
.cd-hero-caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: var(--navy); opacity: 0; }
.cd-hero-kw { font-weight: 600; color: var(--navy); }
.cd-hero-cm { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; color: #5E6E7E; }   /* the one line a non-coder can read */
.cd-hero-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; background: #FFF; }   /* its left edge = the code column's divider */
.cd-hero-pane-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.cd-hero-pane-p { font: 400 13px/1.75 'Noto Sans JP', sans-serif; color: var(--ink); }
.cd-hero-why { display: flex; flex-direction: column; gap: 5px; }
.cd-hero-why li { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 6px; background: var(--tint); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--acc-ink); }
.cd-hero-why .cd-hero-ck { width: 14px; height: 14px; }

/* ---- ④ review agent (classes keep the old cd-hero-gate / -checks names) --- */
.cd-hero-gate { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.cd-hero-checks { border: 1px solid var(--cd-line); border-radius: 10px; overflow: hidden; }
.cd-hero-checks li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid #EEF1F4; font-size: 14px; line-height: 1.5; color: var(--navy); }
.cd-hero-checks li:first-child { border-top: 0; }
.cd-hero-checks li > span { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--cd-ok); }
.cd-hero-ring { display: grid; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C6D3E0; }   /* pending slot under each check */
.cd-hero-verdict { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--cd-ok-tint); font-size: 14px; font-weight: 700; color: var(--cd-ok); }
.cd-hero-toast { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--navy); color: #FFF; box-shadow: 0 12px 24px -12px rgba(16,42,67,0.6); }
.cd-hero-toast .cd-hero-ic { width: 18px; height: 18px; color: var(--cd-mark); }
.cd-hero-toast b { display: block; font-size: 14px; line-height: 1.5; }
.cd-hero-toast span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); }

/* ---- phones: one column; ③ note becomes a bottom sheet -------------------- */
@media (max-width: 599.98px) {
  .cd-hero-ch { font-size: 13px; }   /* 「レビューエージェント」 + 「レビュー観点 4項目」 fit 304px */
  .cd-hero-bub { font-size: 13px; line-height: 1.65; }
  .cd-hero-ctx { max-width: none; }
  .cd-hero-ctx-t { display: block; }
  .cd-hero-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cd-hero-pane { border-left: 0; border-top: 1px solid var(--cd-line); border-radius: 12px 12px 0 0; box-shadow: 0 -8px 20px -12px rgba(16,42,67,0.35); }
  .cd-hero-why { flex-direction: row; flex-wrap: wrap; }
  .cd-hero-toast { left: 8px; right: 8px; bottom: 8px; }
}