/* v5/stage-rotate-v1.css — one colour per step of the Prepare / Teach / Follow through tabs (S346, 2026-09-30), from
   the brand's two kinds of light: teal = your material, blue = the AI teaching, amber = people following through.
   The line along the selected tab's top edge fills over the 6 s the tab stays up (stage-rotate-v1.js). */
.platform-tabs #tab-prepare{--stage:#3DDCFF}
.platform-tabs #tab-teach{--stage:#4D6BF0}
.platform-tabs #tab-evidence{--stage:#FFB547}
.platform-tabs button[role="tab"][aria-selected=true]{border-top-color:color-mix(in srgb,var(--stage) 35%,transparent)}
.platform-tabs button[role="tab"][aria-selected=true]>span:first-child,.platform-tabs button[role="tab"]:hover>span:first-child{color:var(--stage)}
.platform-tabs button[role="tab"]::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--stage);transform-origin:left;transform:scaleX(0)}
.platform-tabs button[role="tab"][aria-selected=true]::after{transform:scaleX(1)}
.platform-tabs.is-rotating button[role="tab"][aria-selected=true]::after{animation:stage-fill 6s linear both}
@keyframes stage-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.platform-tabs.is-rotating button[role="tab"][aria-selected=true]::after{animation:none}}
/* Steady height (operator 2026-09-30: "the whole section should not change height and jump"): the three panels share
   one grid cell, so the box is always as tall as the tallest; a hidden panel keeps its space but stays invisible,
   out of the tab order and out of the accessibility tree (visibility:hidden). */
.stage-panels{display:grid}
.stage-panels>.stage-panel{grid-area:1/1}
/* style-v3.css has [hidden]{display:none!important}; this more specific !important keeps the space for these panels only. */
.stage-panels>.stage-panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
/* Follow through: a photograph instead of the evidence mock-up (operator 2026-09-30: "remove this part, and add an
   image instead, the text is NOT correct"). Licensed photo, see assets/photos/ATTRIBUTION.md; same cool treatment
   as the hero photo (photo-treatment-v3.css). It fills its half of the panel, so the steady height holds. */
.evidence-photo{position:relative;min-height:100%;overflow:hidden;display:flex;flex-direction:column}
.evidence-photo>img{flex:1;width:100%;height:100%;min-height:320px;object-fit:cover;display:block;filter:saturate(.78) brightness(.82) contrast(1.03)}
.evidence-photo:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#0e112055,#b3c5ff12);mix-blend-mode:color}
/* Portrait photo (colleague-check-in, 2026-09-30): keep both faces in frame when the panel crops it. */
.evidence-photo>img{object-position:50% 52%}
/* Fit (operator 2026-09-30: "ALWAYS keep each section fit within the height of the viewport … crop the image from
   the top, as the humans in the images are at the bottom"): the photo no longer sets the panel's height — it is laid
   over the space the story column already takes, cropped from the top. Phones: a fixed, viewport-relative height. */
.evidence-photo{min-height:0}
.evidence-photo>img{position:absolute;inset:0;flex:none;min-height:0;height:100%;object-position:50% 88%}
@media (max-width:760px){.evidence-photo>img{position:relative;inset:auto;height:clamp(180px,32svh,300px)}}