/* Circadian rhythm. Everything scoped under .crc-*. */

.crc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crc-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }

/* the mimosa in its cupboard */
.crc-cup { width: 100%; max-width: 300px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--raised); padding: 10px; }
.crc-sky { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(252, 192, 80, .14); transition: background .4s; }
.crc-sky.night { background: rgba(123, 92, 253, .18); }
.crc-sun { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(252, 192, 80, .8); transition: background .4s, box-shadow .4s; }
.crc-sky.night .crc-sun { background: transparent; box-shadow: inset -5px -2px 0 0 var(--violet-bright); }
.crc-when { font: 700 13px var(--sans); color: var(--text); flex: 1; }
.crc-day { font: 700 12px var(--mono); color: var(--dim); }
.crc-pane { position: relative; margin-top: 8px; border-radius: 12px; overflow: hidden; background: rgba(252, 192, 80, .06); }
.crc-pane svg { display: block; width: 100%; height: auto; max-height: 190px; }
.crc-stem { fill: none; stroke: #5FA36A; stroke-width: 4; stroke-linecap: round; }
.crc-rach { stroke: #5FA36A; stroke-width: 2.5; stroke-linecap: round; }
.crc-lf ellipse { fill: #7CCB7E; }
.crc-pot { fill: #B7654A; }
.crc-door { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, #5A3A26, #3E2718); transform: scaleX(0); transition: transform .5s cubic-bezier(.3, .8, .3, 1), opacity .7s; }
.crc-door.l { left: 0; transform-origin: left; border-right: 2px solid #2A1A10; }
.crc-door.r { right: 0; transform-origin: right; border-left: 2px solid #2A1A10; }
.crc-cup.shut .crc-door { transform: scaleX(1); }
.crc-in { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 12px var(--sans); color: var(--violet-bright); opacity: 0; transition: opacity .6s; }
/* With the doors shut, the reader sees in as a dim cutaway: the cupboard stays dark, the plant shows. */
.crc-cup.peek .crc-door { opacity: 0; }
.crc-cup.peek .crc-pane { background: #05060C; box-shadow: inset 0 0 0 2px #3E2718; }
.crc-cup.peek .crc-pane svg { filter: brightness(.62) saturate(.8); }
.crc-cup.peek .crc-in { opacity: 1; }

/* the bunker chart */
.crc-cw { width: 100%; max-width: 340px; }
.crc-chart { display: block; width: 100%; height: auto; overflow: visible; cursor: ns-resize; }
.crc-dayl { fill: rgba(252, 192, 80, .34); }
.crc-tk { font: 600 12px var(--sans); fill: var(--dim); }
.crc-rl { font: 700 12px var(--sans); fill: var(--dim); }
.crc-track { fill: none; stroke: var(--line); stroke-width: 1; }
.crc-bar { fill: var(--violet-bright); }
.crc-msun { fill: var(--gold); filter: drop-shadow(0 0 3px rgba(252, 192, 80, .9)); }

/* daylight, eye, clock */
.crc-path { width: 100%; max-width: 340px; }
.crc-path svg { display: block; width: 100%; height: auto; }
.crc-ps circle { fill: var(--gold); }
.crc-ps path { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.crc-ray { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 8; opacity: .45; }
.crc-x { stroke: var(--dim); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.crc-path.cut .crc-x { opacity: 1; }
.crc-path.cut .crc-ray { opacity: .2; }
.crc-eyel { fill: #EAE3D7; stroke: var(--line-strong); stroke-width: 2; }
.crc-iris { fill: #5B6B8F; }
.crc-nrv { stroke: var(--violet-bright); stroke-width: 3; stroke-dasharray: 5 5; }
.crc-clk circle { fill: var(--raised); stroke: var(--violet-bright); stroke-width: 3; }
.crc-clk path { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.crc-pl { font: 700 13px var(--sans); fill: var(--dim); }

/* jet lag: two clocks */
.crc-jet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 330px; }
.crc-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); }
.crc-face svg { width: 92px; height: 92px; }
.crc-face b { font: 700 15px var(--sans); color: var(--text); text-align: center; }
.crc-face span { font: 600 13px var(--sans); color: var(--dim); }
.crc-fc { fill: #10162A; stroke: var(--line-strong); stroke-width: 2; }
.crc-tick { stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.crc-hh { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.crc-mh { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
/* before landing, Paris is still dark */
.crc-jet .crc-face.paris { transition: opacity .4s; }
.crc-jet.crc-pre .crc-face.paris { opacity: .2; }
.crc-face.paris { border-color: rgba(252, 192, 80, .6); background: rgba(252, 192, 80, .08); }
.crc-face.paris .crc-fc { fill: #2A2312; }
.crc-face.body .crc-fc { fill: #171436; }
.crc-jet.lit .crc-face.body { border-color: rgba(252, 192, 80, .6); }

@media (max-height: 700px) {
  .crc-pane svg { max-height: 140px; }
  .crc-face svg { width: 74px; height: 74px; }
  .crc-path { max-width: 300px; }
}