/* 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: 300px; }
.crc-hero img { display: block; width: 260px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.crc-hero.wide img { width: 330px; }

/* the sleep chart */
.crc-cw { width: 100%; max-width: 340px; }
.crc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.crc-night { fill: rgba(123, 92, 253, .22); }
.crc-tk { font: 600 12px var(--sans); fill: var(--dim); }
.crc-rl { font: 700 12px var(--sans); fill: var(--dim); }
.crc-track { fill: rgba(255, 255, 255, .04); stroke: var(--line); stroke-width: 1; }
.crc-bar { fill: var(--violet-bright); }
.crc-lamp circle { fill: rgba(252, 192, 80, .18); stroke: var(--gold); stroke-width: 1.5; }
.crc-lamp path { stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; opacity: .35; }
.crc-lamp.on circle { fill: var(--gold); }
.crc-lamp.on path { opacity: 1; }
.crc-lamp.off { opacity: .3; }
.crc-arr { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 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 10px 0; transition: background .6s; }
.crc-cup.dark { background: #07080F; border-color: #2A2440; }
.crc-cup svg { display: block; width: 100%; height: auto; max-height: 190px; }
.crc-sky { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(252, 192, 80, .12); transition: background .4s; }
.crc-sky.night { background: rgba(123, 92, 253, .16); }
.crc-sun { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); 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-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; }

/* circa diem */
.crc-latin { display: flex; gap: 14px; }
.crc-latin div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 22px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); }
.crc-latin b { font: 700 28px var(--serif); color: var(--gold); }
.crc-latin span { font: 600 15px var(--sans); color: var(--text); }

/* the loop */
.crc-loop { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.crc-loop svg { display: block; width: 100%; height: auto; }
.crc-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.crc-yl { font: 700 12px var(--sans); fill: var(--violet-bright); }
.crc-curve { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; }
.crc-dot { fill: var(--gold); }
.crc-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.crc-steps span { font: 700 13px var(--sans); color: var(--dim); padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--line); transition: color .2s, background .2s, border-color .2s; }
.crc-steps span.on { color: #1B1A22; background: var(--gold); border-color: var(--gold); }
.crc-steps i { font-style: normal; color: var(--dim); }

/* the head */
.crc-head { position: relative; width: 100%; max-width: 300px; aspect-ratio: 300 / 250; }
.crc-head img { position: absolute; left: 16.67%; top: 0; width: 83.33%; height: 100%; object-fit: contain; }
.crc-head svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crc-eye { fill: #fff; stroke: var(--line-strong); stroke-width: 2; }
.crc-pupil { fill: #1B1A22; }
.crc-nerve { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 5; }
.crc-clock { fill: var(--gold); stroke: #1B1A22; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(252, 192, 80, .9)); }
.crc-lbl { font: 700 15px var(--sans); fill: var(--text); paint-order: stroke; stroke: #0A0E1A; stroke-width: 4px; }
.crc-lbl.gold { fill: var(--gold); }

/* two kinds of light cell */
.crc-two { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.crc-path { display: grid; grid-template-columns: 22px 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); font: 700 14px var(--sans); color: var(--text); }
.crc-path b { color: var(--dim); }
.crc-path.gold { border-color: var(--gold); }
.crc-path.gold span:last-child { color: var(--gold); }
.crc-cell { width: 18px; height: 18px; border-radius: 50%; background: var(--dim); }
.crc-cell.clk { background: var(--gold); }

/* the bunker, solved */
.crc-cmp { width: 100%; max-width: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crc-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--gold); }
.crc-card.dim { border-color: var(--line); }
.crc-card span { font: 700 15px var(--sans); color: var(--text); }
.crc-card small { font: 600 13px var(--sans); color: var(--dim); }
.crc-card b { font: 700 19px var(--sans); color: var(--gold); margin-top: 6px; }
.crc-card.dim b { color: var(--violet-bright); }

/* jet lag */
.crc-jet { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.crc-cities { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 6px; font: 700 14px var(--sans); color: var(--text); }
.crc-cities svg { width: 100%; height: 30px; }
.crc-cities path { fill: none; stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 4 4; }
.crc-dir { display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.crc-dir b { font: 700 15px var(--sans); color: var(--gold); }
.crc-dir span { font: 600 14px var(--sans); color: var(--text); line-height: 1.3; }
.crc-dir em { font-style: normal; color: var(--gold); }
.crc-rate, .crc-dir small { grid-column: 2; }
.crc-rate { display: none; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.crc-rate u { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 999px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.crc-jet.on .crc-rate { display: block; }
.crc-jet.on .crc-rate u { width: var(--w); }
.crc-dir small { font: 700 13px var(--sans); color: var(--mint); }
.crc-dir small:empty { display: none; }

@media (max-height: 700px) {
  .crc-hero img { max-height: 28vh; }
  .crc-cup svg { max-height: 150px; }
  .crc-head { max-width: 250px; }
}