/* M02K04 · Phase and phase velocity */
.phase-chapter { scroll-margin-top:calc(var(--header-h) + 24px); padding-top:92px; padding-bottom:58px; }
.k04-header { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr); gap:clamp(30px,5vw,70px); align-items:end; padding-top:20px; border-top:1px solid var(--line-strong); }
.k04-header h2 { margin:10px 0 16px; font-size:clamp(2.8rem,6.2vw,5.8rem); line-height:.92; letter-spacing:-.058em; }
.k04-header .lead { max-width:860px; margin:0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.14rem); }
.k04-index { padding:23px; border:1px solid var(--line); border-radius:var(--radius-sm); background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 8%,var(--panel)),var(--panel)); }
.k04-index > span { color:var(--accent-2); font-size:.7rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.k04-index strong { display:block; margin:14px 0 8px; font-size:1.14rem; }
.k04-index p { margin:0; color:var(--muted); font-size:.86rem; }

.phase-concepts { padding:58px 0 72px; }
.phase-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.phase-card { padding:24px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
.phase-card.key-card { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); }
.phase-card .phase-code { color:var(--accent); font-family:"Cambria Math","STIX Two Math",Georgia,serif; font-size:2rem; font-weight:650; }
.phase-card h3 { margin:14px 0 8px; font-size:1.04rem; }
.phase-card p { margin:0; color:var(--muted); font-size:.87rem; }
.phase-card .equation { margin-top:18px; min-height:68px; font-size:1.03rem; }

.phase-derivation { padding:58px 0 78px; }
.phase-derivation-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:12px; }
.phase-derivation-card { padding:26px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
.phase-derivation-card h3 { margin:10px 0 10px; font-size:1.18rem; }
.phase-derivation-card p { margin:0; color:var(--muted); font-size:.89rem; }
.phase-step-list { display:grid; gap:10px; margin-top:22px; }
.phase-step { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; padding:15px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg-elevated) 58%,transparent); }
.phase-step > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-size:.72rem; font-weight:850; }
.phase-step strong { display:block; font-family:"Cambria Math","STIX Two Math",Georgia,serif; font-size:1.08rem; }
.phase-step small { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; line-height:1.5; }
.phase-speed-card { display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,color-mix(in srgb,var(--accent-3) 6%,var(--panel)),var(--panel)); }
.phase-speed-card .equation { margin:18px 0 0; font-size:1.25rem; }
.phase-speed-card small { display:block; margin-top:14px; color:var(--muted); font-size:.76rem; line-height:1.55; }

.phase-lab-section { padding:78px 0 84px; border-block:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 3%,transparent),transparent 22%,transparent 78%,color-mix(in srgb,var(--accent) 3%,transparent)); }
.phase-lab-shell { display:grid; grid-template-columns:286px minmax(0,1fr); gap:12px; align-items:start; }
.phase-controls { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:18px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-solid); }
.phase-main { display:grid; gap:12px; min-width:0; }
.phase-field-svg { width:100%; min-height:330px; background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elevated) 42%,transparent),transparent); }
.phase-wave { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.phase-equal-dot { fill:var(--accent-2); stroke:var(--bg); stroke-width:2; vector-effect:non-scaling-stroke; }
.phase-equal-guide { stroke:var(--accent-2); stroke-width:1; stroke-dasharray:4 5; opacity:.56; vector-effect:non-scaling-stroke; }
.phase-reference { stroke:var(--warm); stroke-width:1.35; stroke-dasharray:5 5; opacity:.82; vector-effect:non-scaling-stroke; }
.phase-svg-label { fill:var(--accent-2); font:800 13px system-ui,sans-serif; }
.phase-svg-label.warm { fill:var(--warm); }
.phase-legend { display:flex; flex-wrap:wrap; gap:17px; padding:0 20px 16px; color:var(--muted); font-size:.69rem; }
.phase-legend span { display:flex; align-items:center; gap:7px; }
.phase-legend i { width:17px; height:2px; display:inline-block; }
.phase-legend i.wave { background:var(--accent); }
.phase-legend i.equal { background:var(--accent-2); }
.phase-legend i.reference { background:var(--warm); }
.phase-telemetry { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); }
.phase-telemetry > div { display:grid; gap:5px; padding:14px 13px; border-right:1px solid var(--line); }
.phase-telemetry > div:last-child { border-right:0; }
.phase-telemetry span { color:var(--muted); font-size:.66rem; font-weight:760; }
.phase-telemetry strong { font-size:.94rem; font-variant-numeric:tabular-nums; }
.phase-detail-grid { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(270px,.84fr); gap:12px; }
.phase-spacetime-svg { width:100%; min-height:290px; }
.phase-track { fill:none; stroke:var(--accent-2); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.phase-track-secondary { fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:5 5; opacity:.48; vector-effect:non-scaling-stroke; }
.phase-now-line { stroke:var(--warm); stroke-width:1.2; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.phase-now-dot { fill:var(--warm); stroke:var(--bg); stroke-width:2; }
.phase-circle-panel { padding:22px; display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:center; }
.phase-circle-svg { width:100%; max-width:180px; justify-self:center; }
.phase-circle { fill:none; stroke:var(--line-strong); stroke-width:2; }
.phase-circle-axis { stroke:var(--line); stroke-width:1; }
.phase-circle-radius { stroke:var(--accent-2); stroke-width:2.5; }
.phase-circle-dot { fill:var(--accent-2); stroke:var(--bg); stroke-width:2; }
.phase-circle-copy strong { display:block; margin:8px 0 9px; font-size:1.02rem; }
.phase-circle-copy p { margin:0; color:var(--muted); font-size:.84rem; }
.phase-circle-copy .equation { margin-top:14px; font-size:1.02rem; }

.k04-synthesis { padding:72px 0 54px; }
.k04-synthesis-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.k04-synthesis-card { padding:22px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
.k04-synthesis-card > span { color:var(--accent-2); font-size:.69rem; font-weight:820; letter-spacing:.07em; text-transform:uppercase; }
.k04-synthesis-card strong { display:block; margin:12px 0 8px; font-size:1.02rem; }
.k04-synthesis-card p { margin:0; color:var(--muted); font-size:.85rem; }
.k04-takeaway { padding-top:42px; }
.k04-next { margin-top:30px; }

@media (max-width:980px) {
  .k04-header,.phase-derivation-grid { grid-template-columns:1fr; }
  .phase-card-grid { grid-template-columns:1fr 1fr; }
  .phase-lab-shell { grid-template-columns:1fr; }
  .phase-controls { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phase-controls .lab-actions { grid-column:1/-1; }
  .phase-detail-grid { grid-template-columns:1fr; }
  .phase-telemetry { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .phase-telemetry > div:nth-child(3) { border-right:0; }
  .phase-telemetry > div:nth-child(-n+3) { border-bottom:1px solid var(--line); }
}
@media (max-width:680px) {
  .phase-chapter { padding-top:64px; }
  .k04-header h2 { font-size:clamp(2.45rem,13vw,4.3rem); overflow-wrap:anywhere; }
  .phase-card-grid,.k04-synthesis-grid,.phase-controls { grid-template-columns:1fr; }
  .phase-controls .lab-actions { grid-column:auto; }
  .phase-telemetry { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phase-telemetry > div { border-bottom:1px solid var(--line); }
  .phase-telemetry > div:nth-child(2n) { border-right:0; }
  .phase-telemetry > div:nth-last-child(-n+2) { border-bottom:0; }
  .phase-field-svg { min-height:280px; }
  .phase-field-svg .phase-svg-label.warm { display:none; }
  .phase-field-svg .axis-label { font-size:28px; }
  .phase-circle-panel { grid-template-columns:1fr; }
  .phase-circle-copy { text-align:center; }
}
@media (max-width:360px) {
  .k04-header h2 { font-size:2.35rem; }
  .phase-derivation-card,.phase-card,.phase-controls { padding:18px; }
  .phase-telemetry strong { font-size:.85rem; }
}
@media (max-width:1120px) and (min-width:981px) {
  .phase-circle-panel { grid-template-columns:1fr; }
  .phase-circle-copy { text-align:center; }
}