/* Chronotype. Everything scoped under .chr-*. */

.chr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chr-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 310px; }
.chr-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }

/* the three sleepers */
.chr-nights { width: 100%; max-width: 340px; }
.chr-nsvg { display: block; width: 100%; height: auto; overflow: visible; }
.chr-dark { fill: rgba(123, 92, 253, .13); }
.chr-tl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chr-tk { font: 600 12px var(--sans); fill: var(--dim); }
.chr-rl { font: 700 13px var(--sans); fill: var(--text); }
.chr-st { font: 600 13px var(--sans); fill: var(--dim); }
.chr-st.short { fill: var(--streak); }
.chr-bar { fill: var(--violet); }
.chr-cut { fill: var(--streak); opacity: .55; }
.chr-alarm { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.chr-at { font: 700 13px var(--sans); fill: var(--gold); }

/* inherited */
.chr-her { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.chr-hb { position: relative; height: 34px; border-radius: 17px; background: var(--raised); border: 1.5px solid var(--line); overflow: hidden; }
.chr-hb i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.chr-her.on .chr-hb i { width: 50%; }
.chr-hk { display: flex; justify-content: space-between; font: 600 13px var(--sans); color: var(--dim); }

/* age */
.chr-age { width: 100%; max-width: 340px; }
.chr-age svg { display: block; width: 100%; height: auto; overflow: visible; }
.chr-ax { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.chr-ttl { font: 600 12px var(--sans); fill: var(--dim); }
.chr-yl { font: 700 12px var(--sans); fill: var(--violet-bright); }
.chr-curve { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; stroke-linecap: round; }
.chr-dot { fill: var(--gold); stroke: #fff; stroke-width: 2.5; }
.chr-peak { opacity: 0; transition: opacity .4s; }
.chr-age.past .chr-peak { opacity: 1; }
.chr-peak circle { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.chr-peak text { font: 700 13px var(--sans); fill: var(--gold); }

/* Seattle */
.chr-sea { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 18px; padding: 10px 0; }
.chr-sr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.chr-sr span { grid-column: 1 / -1; font: 700 14px var(--sans); color: var(--text); }
.chr-sr i { display: block; height: 26px; border-radius: 13px; background: var(--raised); border: 1.5px solid var(--line); overflow: hidden; }
.chr-sr u { display: block; height: 100%; width: 0; background: var(--violet); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.chr-sr u.g { background: var(--gold); }
.chr-sr b { font: 700 14px var(--sans); color: var(--text); min-width: 56px; text-align: right; }
.chr-sr b.g { color: var(--gold); }

@media (max-height: 700px) {
  .chr-sea { gap: 12px; }
}