/* Month Review interaction build 20260903-08. Content is static and immediately visible. */

.story-grid{margin-top:50px}.key-section{margin-top:58px}.outcome-grid{margin-top:52px}.coaching-card{margin-top:58px}
.story-panel,.outcome-panel{background:transparent}
.selectors select{transition:border-color var(--rc-motion-fast) var(--rc-ease),background-color var(--rc-motion-fast) var(--rc-ease)}.selectors select:hover{border-color:color-mix(in srgb,var(--green) 48%,var(--line))}
.fitness-range i{position:relative}.fitness-range i:after{content:"→";position:absolute;right:-2px;top:-.72em;padding-left:5px;background:var(--rc-bg);color:var(--green);font-style:normal}

.composition-insight{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px 13px;margin:28px 0 4px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--line) 62%,transparent)}
.composition-insight strong{grid-row:1/3;color:var(--green);font-size:clamp(2rem,4vw,3rem);line-height:.85;letter-spacing:-.055em}
.composition-insight span{align-self:end;color:var(--ink);font-size:.68rem;font-weight:900;letter-spacing:.085em;text-transform:uppercase}
.composition-insight small{align-self:start;color:var(--muted);font-size:.72rem}

.key-session{border-color:transparent;transition:background-color var(--rc-motion-fast) var(--rc-ease),border-color var(--rc-motion-fast) var(--rc-ease)}
.key-session:hover,.key-session:focus-within{border-color:color-mix(in srgb,var(--green) 42%,var(--line));background:color-mix(in srgb,var(--card) 91%,var(--green-soft))}
.key-session a{display:inline-flex;transition:gap var(--rc-motion-fast) var(--rc-ease),transform var(--rc-motion-fast) var(--rc-ease)}
.key-session a:hover,.key-session a:focus-visible{transform:translateX(3px)}

.detail-drawer>summary{transition:color var(--rc-motion-fast) var(--rc-ease),background-color var(--rc-motion-fast) var(--rc-ease)}
.detail-drawer>summary:hover{color:color-mix(in srgb,var(--green) 78%,var(--ink))}
.detail-drawer[open]>div{animation:detail-arrive var(--rc-motion-standard) var(--rc-ease)}
@keyframes detail-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .detail-drawer[open]>div{animation:none}.content-switching:before{animation:none;left:32%}
}