/* Day Dial */
.dial { width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.dial .dial-track { fill: none; stroke: var(--dial-track, rgba(19,50,43,.08)); stroke-width: 34; }
.dial .tick { stroke: var(--dial-ink-50, rgba(19,50,43,.3)); stroke-width: 1; }
.dial .tick.major { stroke: var(--dial-ink, #13322b); stroke-width: 1.6; }
.dial .dial-label { font: 500 12.5px var(--f-text); letter-spacing: .06em; text-transform: uppercase; fill: var(--dial-ink-70, rgba(19,50,43,.7)); }
.dial .blk { fill: none; stroke-width: 34; stroke-linecap: butt; stroke: var(--dial-ink, #13322b); }
.dial .blk.k-sleep { stroke: var(--dial-sleep, rgba(19,50,43,.28)); }
.dial .blk.k-rest, .dial .blk.k-family { stroke: var(--dial-soft, rgba(19,50,43,.55)); }
.dial .learn { fill: none; stroke: var(--dawn); stroke-width: 34; stroke-linecap: butt; }
.dial .seam { stroke: var(--dial-seam, #f6f1e7); stroke-width: 2; }
.dial .handle { fill: var(--paper); stroke: var(--dial-ink, #13322b); stroke-width: 2; cursor: grab; transition: r .2s; }
.dial .handle:hover { r: 11; }
.dial .handle-hit { fill: transparent; stroke: none; cursor: grab; }
@media (pointer: coarse) { .dial .handle, .dial .handle:hover { r: 13; stroke-width: 2.6; } }
.dial.dragging, .dial.dragging .handle { cursor: grabbing; }
.dial .now-dot { fill: var(--dawn); stroke: var(--paper); stroke-width: 2; }
.dial .dial-now { transition: transform .6s var(--ease); }
.dial .blk, .dial .learn { transition: d .5s var(--ease); }

/* dark variant */
.chapter-dark .dial, .dial.on-dark {
  --dial-track: rgba(246,241,231,.08); --dial-ink: #f6f1e7; --dial-ink-70: rgba(246,241,231,.7);
  --dial-ink-50: rgba(246,241,231,.3); --dial-sleep: rgba(246,241,231,.22); --dial-soft: rgba(246,241,231,.5);
  --dial-window: rgba(242,165,65,.12); --dial-seam: #13322b;
}
.chapter-dark .dial .handle { fill: var(--forest); }

/* home teaser */
.hs-mini { margin: 0; justify-self: center; width: min(440px, 100%); text-align: center; }
.hs-mini figcaption { margin-top: 18px; font-size: 14.5px; color: var(--paper-70); }
.hs-mini figcaption span:first-child { color: var(--paper); }

/* home teaser key: says what each colour on the ring means */
.mini-key { list-style: none; padding: 0; margin: 16px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13.5px; color: var(--paper-70); max-width: 440px; }
.mini-key li { display: inline-flex; align-items: center; gap: 8px; }
.mk { width: 18px; height: 8px; border-radius: 2px; display: inline-block; }
.mk.learn { background: var(--dawn); }
.mk.fixed { background: #f6f1e7; }
.mk.soft { background: rgba(246,241,231,.54); }
.mk.free { background: rgba(246,241,231,.08); box-shadow: inset 0 0 0 1px rgba(246,241,231,.18); }
.mk.sleep { background: rgba(246,241,231,.28); }
.mk.now { width: 10px; height: 10px; border-radius: 50%; background: var(--dawn); box-shadow: 0 0 0 2px var(--forest); }

@media (max-width: 560px) {
  .hs-mini { width: min(300px, 100%); }
  .mini-key { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; text-align: left; gap: 8px 22px; }
}
@media (max-width: 560px) { .dial .dial-label { font-size: 18px; } }