/* dp-phases.css — DP block 7 rebuild (issue #13). Owned entirely by ProcessVideo.astro; no
   selector here reaches outside .dpp-* / [data-dpp-*]. Loaded via <link> emitted by the
   component itself (guarded against double-include in dp-phases.js, not here — repeated
   identical CSS rules are harmless).
   Reference: docs/research/2026-09-16-kora-motion-second-opinion/REPORT.md Part 1 §5, Part 3
   "Block 7". Charcoal (#1E1F1C) is used ONLY inside this file, on the active phase card — the
   owner's rule is it appears nowhere else on the page. */

.dpp-section { padding: clamp(64px, 10vw, 120px) 0; background: var(--paper); color: var(--ink); }
.dpp-section > .wrap > [data-block]:first-child { max-width: 900px; }
.dpp-section .lead { margin-top: 18px; }

/* ---- Tray -------------------------------------------------------------------------------- */
.dpp-tray {
  /* R8 #50: the one place the auto-advance interval is written. The status bar's CSS animation
     reads it, and dp-phases.js advances on that animation's end — so changing this number changes
     the loop speed, with nothing else to keep in step. */
  --dpp-step: 6s;
  display: flex; gap: 10px; height: 400px; margin: 36px 0 0; padding: 12px;
  list-style: none; border-radius: 40px; background: #F7F8F2; border: 1px solid #E7E8DE;
}
.dpp-phase {
  position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden; cursor: pointer;
  padding: 22px; border-radius: 28px; background: #FFFFFF; color: var(--ink); border: 0;
  transition:
    flex .46s cubic-bezier(.22,1,.36,1),
    background-color .3s ease,
    color .3s ease,
    opacity .46s var(--ease46, cubic-bezier(.22,1,.36,1)) var(--dpp-delay, 0s),
    transform .46s var(--ease46, cubic-bezier(.22,1,.36,1)) var(--dpp-delay, 0s);
}
.dpp-phase[aria-expanded="true"] { flex: 2.8 1 0%; background: #1E1F1C; color: #F7F8F2; cursor: default; }
.dpp-phase:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ---- Closed face (issue #37): number, icon, name and a circular "+" cue so a closed card never
   reads as a blank slab. Always in the DOM, hidden (not removed) once its own phase opens. ---- */
.dpp-phase-closed {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 14px; height: 100%; text-align: center;
}
.dpp-phase[aria-expanded="true"] .dpp-phase-closed { display: none; }

.dpp-phase-num { line-height: 1; font-family: var(--serif); font-size: 34px; color: var(--green); }
.dpp-icon-closed { width: 26px; height: 26px; color: var(--green); }
.dpp-icon-closed path { fill: currentColor; }
.dpp-phase-closed-title { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.dpp-more {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--green);
  display: grid; place-items: center; color: var(--green);
  transition: background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.dpp-more svg { width: 16px; height: 16px; }
.dpp-more path { fill: currentColor; }
.dpp-phase:hover .dpp-more, .dpp-phase:focus-visible .dpp-more {
  background: var(--green); color: var(--paper); border-color: var(--green); transform: scale(1.08);
}

.dpp-phase-active { display: none; flex-direction: column; height: 100%; }
.dpp-phase[aria-expanded="true"] .dpp-phase-active { display: flex; }

/* ROUND 9 #58(a): the owner's screenshot shows 「了解」 sitting ON the segmented bar. The top row
   now reserves its own clear space below itself at both widths. */
.dpp-phase-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex: 0 0 auto; margin-bottom: 18px; }
.dpp-tag { font-size: 11px; letter-spacing: .08em; color: var(--mute-d); }
.dpp-tag b { margin-left: 4px; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--amber); }
/* ---- Status bar (R8 issue #50, and the HOW of the perf issue #45) --------------------------
   Replaces the four `.dpp-dots` whose fill was a per-frame `--dpp-fill` number written by a
   requestAnimationFrame loop in dp-phases.js (that loop, and this file's old `.dpp-dots` rules,
   are deleted in the same change). Four segments: everything before the open phase is full,
   the open phase's own segment animates 0 -> 1 over `--dpp-step`, the rest are empty. That
   animation's duration IS the auto-advance interval — dp-phases.js advances on its `animationend`
   and owns no clock of its own, so bar and advance can never drift apart. Pausing is
   `animation-play-state: paused` via one class on the tray; a paused animation never ends, so
   pausing the bar pauses the advance for free. */
/* SPEC §D: "the bar must be plainly visible on the open card at both widths" — 4px tall amber on
   the charcoal card (measured 8.1:1 against #1E1F1C), 120px wide desktop, full row on phone. */
.dpp-bar { display: flex; align-items: center; gap: 5px; width: 120px; flex: 0 0 auto; padding-top: 6px; }
.dpp-bar i { position: relative; flex: 1 1 0%; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(242,243,238,.28); }
.dpp-bar b {
  position: absolute; inset: 0; border-radius: inherit; background: var(--amber);
  transform: scaleX(0); transform-origin: left center;
}
.dpp-bar i.is-done b { transform: scaleX(1); }
.dpp-bar i.is-current b { animation: dpp-fill var(--dpp-step, 6s) linear forwards; }
.dpp-tray.is-paused .dpp-bar i.is-current b { animation-play-state: paused; }
@keyframes dpp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Per-step line drawing (R8 issue #53) --------------------------------------------------
   Single-weight stroke, round caps/joins, no fill — the language of the existing step art under
   public/assets/line — in `currentColor` (paper on the open card's charcoal ground) over one soft
   amber blob, the only colour, exactly as the reference art uses exactly one amber shape. Each
   path is drawn on with stroke-dashoffset 1 -> 0 (pathLength="1" in the markup makes this exact
   without measuring anything). No JS starts these: a closed card's `.dpp-phase-active` is
   `display:none`, so the animations begin the moment its own phase opens and restart every time
   the loop comes back round. */
/* ROUND 9 #58(a): >=20px of air above and below the drawing (was 16/14). */
.dpp-art { display: block; width: min(100%, 210px); height: auto; margin: 22px 0 22px; flex: 0 0 auto; }
.dpp-art-line {
  /* Stroke weight measured against the reference art, not guessed: assets/line/step-1-poster.webp
     is a 720px square drawn with a ~2.5px stroke = 0.35% of its width. These render ~210px wide, so
     matching that ratio literally would be a sub-pixel hairline; 1.0 on a 120-unit viewBox is
     ~1.75px at the shipped size — the same visual weight the reference has at ITS size. */
  fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dpp-draw .62s cubic-bezier(.22,1,.36,1) forwards;
}
/* In the reference art the amber shape is a small accent sitting BEHIND the object, never a disc
   the size of it — scaled about its own centre rather than re-authoring four path sets. */
.dpp-art-blob {
  fill: var(--amber); stroke: none; opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(.62);
  animation: dpp-blob .5s ease forwards;
}
.dpp-art-line:nth-of-type(2) { animation-delay: .06s; }
.dpp-art-line:nth-of-type(3) { animation-delay: .14s; }
.dpp-art-line:nth-of-type(4) { animation-delay: .22s; }
.dpp-art-line:nth-of-type(5) { animation-delay: .30s; }
.dpp-art-line:nth-of-type(6) { animation-delay: .38s; }
.dpp-art-line:nth-of-type(7) { animation-delay: .46s; }
.dpp-art-line:nth-of-type(8) { animation-delay: .54s; }
.dpp-art-line:nth-of-type(9) { animation-delay: .62s; } /* 02 選定 now has 8 lines (blob is path 1) */
@keyframes dpp-draw { to { stroke-dashoffset: 0; } }
@keyframes dpp-blob { to { opacity: .9; } }

/* R8 #53: was `flex: 1 1 auto` (the title row absorbed all the card's slack). The drawing now sits
   between the title and the description, so the slack belongs below the description instead —
   `.dpp-next`'s own `margin-top: auto` already parks the arrow on the floor. */
.dpp-phase-mid { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.dpp-icon { width: 32px; height: 32px; flex: 0 0 auto; color: var(--amber); }
.dpp-icon path { fill: currentColor; }
.dpp-phase-mid h3 { margin: 0; font-size: 22px; color: var(--paper); }
.dpp-phase-active > p { flex: 0 0 auto; margin: 0; max-width: 46ch; color: var(--mute-d); font-size: 14px; line-height: 1.65; }

/* Open card's own "next phase" arrow (issue #37: "01 needs an arrow"). */
.dpp-next {
  align-self: flex-end; margin-top: auto; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; background: var(--amber); color: #1E1F1C; display: grid; place-items: center;
  transition: transform .25s ease, background-color .25s ease;
}
.dpp-next svg { width: 20px; height: 20px; }
.dpp-next path { fill: currentColor; }
.dpp-next:hover, .dpp-next:focus-visible { transform: scale(1.08); background: #F2C468; }
.dpp-next:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---- Video (own full-width row) ----------------------------------------------------------- */
.dpp-video { margin: 56px 0 0; }
.dpp-video-frame { position: relative; overflow: clip; border-radius: 40px; background: var(--green); }
.dpp-video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dpp-play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; padding: 0; border: 0;
  border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--green); cursor: pointer;
}
.dpp-play-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--green); }
.dpp-play[aria-pressed="true"] .dpp-play-icon { width: 7px; height: 24px; margin: 0 5px; border: 0; background: var(--green); box-shadow: 11px 0 0 var(--green); }
.dpp-duration {
  position: absolute; left: 16px; bottom: 16px; padding: 5px 12px; border-radius: var(--r-pill, 32px);
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper); font-size: 12px; font-variant-numeric: tabular-nums;
}
.dpp-video figcaption { padding: 14px 4px 0; color: var(--mute); font-size: 13px; }
.dpp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Three explanatory points ------------------------------------------------------------- */
.dpp-points { margin: 56px 0 0; }
.dpp-points > h3 { margin: 0 0 22px; max-width: 60ch; font-size: var(--h3); }
.dpp-points-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.dpp-points-grid > p {
  margin: 0; color: var(--mute); line-height: 1.7;
  transition: opacity .46s var(--ease46, cubic-bezier(.22,1,.36,1)) var(--dpp-delay, 0s),
              transform .46s var(--ease46, cubic-bezier(.22,1,.36,1)) var(--dpp-delay, 0s);
}
.dpp-points-grid > p strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); }

/* ---- Entrance: gated behind the root attribute dp-phases.js sets, never CSS-only ---------- */
.dpp-section[data-dpp-armed] .dpp-phase,
.dpp-section[data-dpp-armed] .dpp-points-grid > p {
  opacity: 0; transform: scale(.9) translateY(10px);
}
.dpp-section[data-dpp-armed] .dpp-phase.dpp-in,
.dpp-section[data-dpp-armed] .dpp-points-grid > p.dpp-in {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .dpp-phase, .dpp-points-grid > p { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* R8 #50: no autoplay at all — the bar is static (the open phase's segment simply reads full,
     so the indicator still says "you are on this step"), and with no animation there is no
     `animationend`, so dp-phases.js can never advance either. #53: the drawings are shown already
     drawn rather than drawing themselves. */
  .dpp-bar i.is-current b { animation: none !important; transform: scaleX(1); }
  .dpp-art-line { animation: none !important; stroke-dashoffset: 0; }
  .dpp-art-blob { animation: none !important; opacity: .9; }
}

/* ---- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dpp-tray { height: 360px; }
}
@media (max-width: 760px) {
  .dpp-tray { flex-direction: column; height: auto; gap: 8px; }
  .dpp-phase { flex: none !important; width: 100%; min-height: 60px; padding: 16px 18px; }
  /* R8 #53: the open card now also carries the step's line drawing, so its accordion row needs
     room for it — measured at 390 with the tallest body copy (phase 04). */
  .dpp-phase[aria-expanded="true"] { min-height: 420px; }
  .dpp-art { width: min(100%, 170px); margin: 24px 0 24px; }
  /* SPEC §D: on the phone accordion the open card is full-width, so the bar gets the whole row
     under the tag rather than a 120px corner — plainly visible at 390. */
  .dpp-phase-top { flex-wrap: wrap; }
  .dpp-bar { width: 100%; padding-top: 10px; }
  .dpp-phase-top { margin-bottom: 20px; }
  /* Accordion row: number, icon, name left-aligned, "+" cue pinned right - same cues as desktop. */
  .dpp-phase-closed { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; }
  .dpp-phase-num { font-size: 26px; }
  .dpp-phase-closed-title { flex: 1 1 auto; font-size: 16px; }
  .dpp-more { margin-left: auto; }
  .dpp-points-grid { grid-template-columns: 1fr; gap: 22px; }
}