/* Cortisol lesson. All rules scoped under .cor-* */
.cor-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cor-note { color: var(--faint); font-size: 12px; text-align: center; max-width: 300px; }

/* ---------- the day ---------- */
.cor-day { display: block; width: 100%; max-width: 360px; height: auto; max-height: 320px; touch-action: none; overflow: visible; }
@media (max-height: 700px) { .cor-day { max-height: 268px; } }
.cor-day.nobed .cor-sky, .cor-day.nobed .cor-stars, .cor-day.nobed .cor-bed, .cor-day.nobed .cor-track, .cor-day.nobed .cor-orb, .cor-day.nobed .cor-clock { display: none; }
.cor-sky { fill: #0E1228; transition: fill .2s; }
.cor-stars circle { fill: #fff; opacity: .8; transition: opacity .4s; }
.cor-day:not(.night) .cor-stars circle { opacity: 0; }
.cor-track { stroke: rgba(255, 255, 255, .22); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.cor-bed { transition: opacity .4s; }
.cor-bed.up { opacity: 0; }
.cor-day.awake .cor-bed.up { opacity: 1; }
.cor-day.awake .cor-bed.sl { opacity: 0; }
.cor-clock { fill: #fff; font: 800 16px var(--sans); text-anchor: end; }
.cor-band { fill: rgba(123, 92, 253, .14); }
.cor-bl { fill: var(--violet-bright); font: 700 13px var(--sans); text-anchor: middle; }
.cor-ax { stroke: var(--line-strong); stroke-width: 2; }
.cor-tk { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }
.cor-tk.a0 { text-anchor: start; } .cor-tk.a1 { text-anchor: end; }
.cor-lg { fill: var(--gold); font: 700 13px var(--sans); text-anchor: end; }
.cor-line { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(252, 192, 80, .6)); }
.cor-now { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-dasharray: 3 4; }
.cor-day.nobed .cor-now { display: none; }
.cor-day.mark8 .cor-now { display: inline; stroke: var(--violet-bright); stroke-width: 2.5; }
.cor-disc { fill: #FFE07A; stroke: #FFF4C8; stroke-width: 2; filter: drop-shadow(0 0 8px #FCC050); }
.cor-day.night .cor-disc { fill: #DAD6F0; stroke: #fff; filter: drop-shadow(0 0 6px #A99BFF); }
.cor-hit { fill: transparent; }
.cor-much { fill: none; stroke: transparent; stroke-width: 3; stroke-dasharray: 7 5; }
.cor-mt { display: none; font: 700 13px var(--sans); text-anchor: middle; }
.cor-day.show-much .cor-much { stroke: var(--violet-bright); }
.cor-day.show-much .cor-mt { display: inline; fill: var(--violet-bright); }
.cor-day.show-much .cor-lg, .cor-day.show-bump .cor-lg { display: none; }
.cor-bump { fill: none; stroke: #FF9A3C; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.cor-day.show-bump .cor-bump { opacity: 1; }
.cor-bt { display: none; fill: #FF9A3C; font: 700 13px var(--sans); text-anchor: middle; }
.cor-day.show-bump .cor-bt { display: inline; }

/* ---------- two beds ---------- */
.cor-pair { display: flex; gap: 10px; width: 100%; max-width: 360px; justify-content: center; }
.cor-mini { flex: 1; max-width: 170px; height: auto; overflow: visible; }
.cor-ml { fill: var(--text); font: 800 14px var(--sans); text-anchor: middle; }
.cor-six { stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 3 4; }
.cor-mline { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }