/* Day Dial. Ported verbatim from docs/proposals/calendar-reference/day-dial (from `.dd{` down). Tokens only. */
.dd{
  --dd-school:color-mix(in srgb,var(--pastel-blue) 80%,#fff);
  --dd-yours:var(--pastel-peach);
  --dd-quiet:color-mix(in srgb,var(--navy) 5%,transparent);
  --dd-track:color-mix(in srgb,var(--navy) 6%,transparent);
  --dd-rule:color-mix(in srgb,var(--navy) 10%,transparent);
  --dd-ghost-fill:color-mix(in srgb,var(--wave) 6%,transparent);
  --dd-ghost-line:color-mix(in srgb,var(--navy) 55%,transparent);
  --dd-health:color-mix(in srgb,var(--sand) 34%,#fff);
  --dd-health-line:color-mix(in srgb,var(--sand),var(--ink) 38%);
  --dd-lilac-line:color-mix(in srgb,var(--pastel-lilac-ink) 72%,#fff);
  position:relative;font-family:var(--font-ui);color:var(--ink);min-width:0;contain:inline-size
}
/* nav */
.dd__nav{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}
.dd__round{width:2.25rem;height:2.25rem;border-radius:var(--radius-full);border:1px solid var(--line);background:var(--glass);display:inline-grid;place-items:center;color:var(--navy);cursor:pointer}
.dd__round svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dd__period{display:grid;line-height:1.2;padding:0 var(--space-1);min-width:0}
.dd__period b{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--navy);letter-spacing:var(--tracking-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd__period span{font-size:var(--text-xs);color:var(--muted)}
.dd__spacer{flex:1}
/* card */
.dd__card{background:var(--hub-glass-fill);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--hub-elev-card);backdrop-filter:blur(var(--hub-glass-blur));-webkit-backdrop-filter:blur(var(--hub-glass-blur));overflow:hidden}
.dd__body{display:grid;grid-template-columns:minmax(0,1fr) 272px}
.dd__dialcell{display:grid;place-items:start center;padding:var(--space-5) 0;min-width:0}
.dd__side{border-left:1px solid var(--line);padding:var(--space-5) var(--space-4);display:grid;gap:var(--space-5);align-content:start;min-width:0}
.dd-dial{display:block;font-family:var(--font-ui)} /* width/height set in px at mount: laid out, never scaled */
/* dial parts */
.dd-disc{fill:color-mix(in srgb,#fff 55%,transparent);stroke:var(--dd-rule)}
.dd-ctx--sleep{fill:url(#dd-hatch)}
.dd-ctx--morning,.dd-ctx--after,.dd-ctx--day{fill:var(--dd-quiet)}
.dd-ctx--school{fill:var(--dd-school)}
.dd-ctx--yours{fill:var(--dd-yours)}
.dd-track{fill:none;stroke:var(--dd-track)}
.dd-arc{stroke:#fff;stroke-width:1.5;cursor:pointer}
.dd-arc.k-teaching,.dd-arc.k-fitness{fill:var(--pastel-blue)}
.dd-arc.k-professional{fill:var(--pastel-lilac);stroke:var(--dd-lilac-line);stroke-width:1.2}
.dd-arc.k-health{fill:var(--dd-health);stroke:var(--dd-health-line);stroke-width:1.2}
.dd-arc.k-corey{fill:var(--pastel-peach);stroke:var(--pastel-peach-ink);stroke-width:1.4}
.dd-arc.is-class{fill:color-mix(in srgb,var(--pastel-blue) 70%,#fff)}
.dd-arc.is-proposal{stroke:var(--dd-ghost-line);stroke-width:1.5;stroke-dasharray:4 3}
.dd-arc.is-ghost{fill:var(--dd-ghost-fill);stroke:var(--dd-ghost-line);stroke-width:1.4;stroke-dasharray:3 3}
.dd-arc.is-skipped{opacity:.35}
.dd-arc:focus-visible{outline:none;stroke:var(--wave);stroke-width:2.5;stroke-dasharray:none}
.dd-left{fill:var(--high-sea);opacity:.85}
.dd-log{stroke-width:1.6}
.dd-log.is-meal{fill:var(--pastel-gold);stroke:var(--pastel-gold-ink)}
.dd-log.is-symptom{fill:#fff;stroke:var(--high-sea-ink)}
.dd-log.is-missing{fill:#fff;stroke:var(--pastel-gold-ink);stroke-dasharray:2 2}
.dd-log.is-skin{fill:var(--pastel-sage);stroke:var(--pastel-sage-ink)}
.dd-logring{fill:none;stroke:color-mix(in srgb,var(--navy) 8%,transparent);stroke-dasharray:1 5;stroke-linecap:round}
.dd-tick{stroke:color-mix(in srgb,var(--navy) 30%,transparent)}
.dd-tick.is-major{stroke-width:1.5}
.dd-t-hour{font-size:11.5px;font-weight:600;fill:var(--navy);text-anchor:middle}
.dd-t-ring{font-size:10.5px;font-weight:500;text-anchor:middle}
.dd-t-ring.is-sleep{fill:var(--navy)}.dd-t-ring.is-school{fill:var(--pastel-blue-ink)}.dd-t-ring.is-yours{fill:var(--pastel-peach-ink)}
.dd-lead{stroke:color-mix(in srgb,var(--navy) 22%,transparent);fill:none}
.dd-t-call{font-size:12px;font-weight:600;fill:var(--ink)}
.dd-t-call.is-corey{fill:var(--pastel-peach-ink)}
.dd-t-call.is-symptom{fill:var(--high-sea-ink)}
.dd-t-call.is-meal{fill:var(--pastel-gold-ink)}
.dd-t-sub{font-size:11px;fill:var(--muted)}
.dd-gauge-track{fill:none;stroke:color-mix(in srgb,var(--navy) 8%,transparent)}
.dd-gauge{fill:none;stroke-linecap:round}
.dd-t-caps{font-size:11px;font-weight:600;letter-spacing:.08em;fill:var(--muted);text-anchor:middle}
.dd-t-pct{font-weight:700;letter-spacing:-1.5px;text-anchor:middle;font-variant-numeric:tabular-nums}
.dd-t-note{font-size:12px;fill:var(--muted);text-anchor:middle}
.dd-hand{stroke:var(--danger);stroke-width:2.5;stroke-linecap:round}
.dd-hand-dot{fill:var(--danger)}
.dd-t-now{font-size:11.5px;font-weight:700;fill:var(--danger)}
/* side panels */
.dd-h{margin:0;font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);font-weight:var(--weight-semibold)}
.dd-big{font-size:1.375rem;font-weight:var(--weight-bold);color:var(--navy);letter-spacing:var(--tracking-tight);line-height:1.15;margin-top:var(--space-1)}
.dd-big small{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--muted);letter-spacing:0;margin-top:4px}
.dd-tag{display:inline-block;margin-left:6px;font-size:var(--text-2xs);font-weight:var(--weight-semibold);padding:1px 7px;border-radius:6px;background:var(--pastel-gold);color:var(--pastel-gold-ink);vertical-align:2px}
.dd-rows{display:grid}
.dd-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.dd-row__t{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.dd-row__w b{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.3}
.dd-row__w > span{font-size:var(--text-xs);color:var(--muted)}
.dd-row.is-struck .dd-row__w b{text-decoration:line-through;color:var(--muted)}
.dd-row.k-corey .dd-row__w b{color:var(--pastel-peach-ink)}
.dd-suggest{display:flex;gap:var(--space-2);align-items:flex-start;margin-top:6px;padding:6px 8px;border-radius:10px;background:var(--dd-ghost-fill);border:1.5px dashed var(--dd-ghost-line);font-size:var(--text-xs)}
.dd-acts{display:flex;gap:6px;margin-top:6px}
.dd-acts .btn{min-height:1.75rem;padding:2px var(--space-3);font-size:var(--text-xs)}
.dd-av{width:1.125rem;height:1.125rem;border-radius:var(--radius-full);background:var(--navy);color:#fff;font-size:0.625rem;font-weight:var(--weight-semibold);display:inline-grid;place-items:center;flex:none}
.dd-av--sara{background:var(--pastel-sage-ink)}
.dd-mark{display:inline-block;width:14px;height:9px;position:relative;margin-right:3px}
.dd-mark::before,.dd-mark::after{content:"";position:absolute;top:0;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.dd-mark::before{left:0}.dd-mark::after{left:5px}
/* week of mini dials */
.dd-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);background:color-mix(in srgb,#fff 40%,transparent)}
.dd-wd{display:grid;justify-items:center;gap:2px;padding:var(--space-3) 2px var(--space-3);border:0;border-left:1px solid var(--line);background:none;font:inherit;font-size:var(--text-xs);color:var(--muted);cursor:pointer;min-width:0}
.dd-wd:first-child{border-left:0}
.dd-wd b{color:var(--ink);font-weight:var(--weight-semibold);font-size:var(--text-xs)}
.dd-wd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dd-wd[aria-pressed="true"]{background:color-mix(in srgb,var(--danger) 5%,transparent)}
.dd-wd[aria-pressed="true"] b{color:var(--danger)}
.dd-wd:focus-visible{outline:2px solid var(--wave);outline-offset:-2px}
/* popover, toast */
.dd-pop{position:absolute;z-index:30;width:300px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--elev-2);padding:var(--space-3) var(--space-4) var(--space-4);font-size:var(--text-sm)}
.dd-pop[hidden]{display:none}
.dd-pop b{font-weight:var(--weight-semibold)}
.dd-pop__meta{margin:4px 0 0;font-size:var(--text-xs);color:var(--muted)}
.dd-pop__label{margin:var(--space-3) 0 4px;font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--muted)}
.dd-pop__writes{margin:0;padding:var(--space-2) var(--space-3);border-radius:10px;background:var(--dd-ghost-fill);border:1.5px dashed var(--dd-ghost-line);font-size:var(--text-xs);line-height:1.45}
.dd-pop__acts{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.dd-pop__acts .btn{min-height:2rem;padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}
.dd-toast{position:absolute;right:var(--space-6);bottom:var(--space-6);max-width:30rem;background:var(--navy);color:#fff;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4) var(--space-3) 2.5rem;font-size:var(--text-sm);line-height:1.45;box-shadow:0 12px 32px color-mix(in srgb,var(--depth) 28%,transparent);opacity:0;pointer-events:none;z-index:20}
.dd-toast::before{content:"✓";position:absolute;left:14px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--pastel-sage);color:var(--pastel-sage-ink);font-weight:var(--weight-bold);font-size:0.6875rem;display:grid;place-items:center}
.dd-toast b{font-weight:var(--weight-semibold)}
.dd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* narrow card: panels move under the dial */
@container (max-width:780px){ .dd__body{grid-template-columns:minmax(0,1fr)} .dd__side{border-left:0;border-top:1px solid var(--line)} }
.dd__card{container-type:inline-size}
@media (max-width:719px){
  .dd-toast{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}
  .dd-pop{left:var(--space-3)!important;right:var(--space-3);width:auto}
  .dd-wd span{display:none}
}

/* live dial: every part answers a click (29/09/26) */
.dd-log{cursor:pointer}
.dd-log:hover,.dd-log:focus-visible{outline:none;stroke-width:2.6}
.dd-t-call[data-part="callout"]{cursor:pointer}
.dd-t-call[data-part="callout"]:hover{text-decoration:underline;text-underline-offset:2px}
.dd-ctx.is-zoomable{cursor:zoom-in;transition:filter .15s}
.dd-ctx.is-zoomable:hover,.dd-ctx.is-zoomable:focus-visible{outline:none;filter:brightness(.94) saturate(1.25)}
.dd-row.is-live{cursor:pointer;border-radius:8px;margin:0 calc(-1 * var(--space-2));padding-left:var(--space-2);padding-right:var(--space-2)}
.dd-row.is-live:hover{background:color-mix(in srgb,var(--navy) 4%,transparent)}
.dd-row.is-live:focus-visible{outline:2px solid var(--wave);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.dd-ctx.is-zoomable{transition:none}}

/* Dexy (29/09/26): a thin band between the day's bands and the events, drawn only from a logged dose. */
.dd-med{fill:color-mix(in srgb,var(--pastel-sage-ink) 42%,transparent);stroke:none}
.dd-med.is-late{fill:color-mix(in srgb,var(--pastel-gold-ink) 45%,transparent)}
.dd-med.is-gap{fill:none;stroke:var(--high-sea);stroke-width:1.4;stroke-dasharray:3 3}
.dd-med.is-gap.is-skipped{stroke-dasharray:none;fill:color-mix(in srgb,var(--high-sea) 14%,transparent)}
.dd-med-dot{fill:var(--pastel-sage-ink);stroke:#fff;stroke-width:1.2}
.dd-log.is-planned{fill:#fff;stroke:var(--pastel-sage-ink);stroke-dasharray:2 2}
.dd-med-panel{display:grid;gap:var(--space-2);padding:var(--space-3);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0;border-radius:var(--radius-sm)}
.dd-med-panel.is-prompt{background:color-mix(in srgb,var(--high-sea) 7%,transparent);border:1px solid color-mix(in srgb,var(--high-sea) 30%,transparent)}
.dd-med-panel__line,.dd-med-panel__ask,.dd-med-panel__plan{margin:0;font-size:var(--text-sm);line-height:1.4}
.dd-med-panel__ask{font-weight:var(--weight-semibold);color:var(--ink)}
.dd-med-panel__plan{font-size:var(--text-xs);color:var(--muted)}
.dd-med-panel__acts{flex-wrap:wrap;margin-top:0}
.dd-med-panel__earlier{display:flex;align-items:flex-end;gap:var(--space-2)}
.dd-med-panel__earlier[hidden]{display:none}
.dd-med-panel__earlier label{display:grid;gap:3px;font-size:var(--text-2xs);color:var(--muted)}
.dd-med-panel__earlier input{font:inherit;font-size:var(--text-sm);border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--paper);color:var(--ink)}
@media (max-width:719px){.dd-med-panel__earlier input{font-size:16px}}

/* Day Sense (29/09/26): what actually happened, and what no longer fits tonight. */
.dd-actual{fill:color-mix(in srgb,var(--navy) 55%,transparent)}
.dd-actual.is-workout{fill:color-mix(in srgb,var(--wave) 70%,transparent)}
.dd-actual.is-open{fill:color-mix(in srgb,var(--navy) 35%,transparent)}
.dd-overflow{fill:color-mix(in srgb,var(--high-sea) 22%,transparent);stroke:var(--high-sea);stroke-width:1.4;stroke-dasharray:4 3}
.dd-t-call.is-overflow{fill:var(--high-sea-ink)}
.dd-tracked{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--muted)}
.dd-overflow-note{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:10px;font-size:var(--text-xs);line-height:1.45;background:color-mix(in srgb,var(--high-sea) 8%,transparent);border:1px solid color-mix(in srgb,var(--high-sea) 30%,transparent);color:var(--ink)}
.dd-overflow-note b{color:var(--high-sea-ink)}
.dd-link{all:unset;cursor:pointer;color:var(--navy);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:2px}
.dd-link:focus-visible{outline:2px solid var(--wave);outline-offset:2px;border-radius:3px}
/* Every chip kind has a fill: tasks/work blocks and study used to fall back to SVG black. */
.dd-arc.k-task{fill:color-mix(in srgb,var(--pastel-sage) 85%,#fff);stroke:color-mix(in srgb,var(--pastel-sage-ink) 55%,#fff);stroke-width:1.2}
.dd-arc.k-study{fill:var(--pastel-gold);stroke:var(--pastel-gold-ink);stroke-width:1.2}
.dd-arc.k-comm{fill:var(--pastel-blue);stroke:var(--wave);stroke-width:1.2}
.dd-arc{fill:color-mix(in srgb,var(--navy) 12%,#fff)}

/* Train-home pass entry + phone notifications (29/09/26) */
.dd-review-entry{display:grid;gap:4px;padding:var(--space-3);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--pastel-blue) 40%,#fff);border:1px solid color-mix(in srgb,var(--wave) 30%,transparent)}
.dd-review-entry .btn{justify-self:start}
.dd-review-entry__sub{font-size:var(--text-xs);color:var(--muted)}
.dd-push{display:flex;flex-wrap:wrap;gap:4px var(--space-2);align-items:baseline;font-size:var(--text-xs);color:var(--muted);padding-top:var(--space-3);border-top:1px solid var(--line)}
.dd-push:empty{display:none}
/* Way back in (docs/proposals/calendar-day-sense.md §3.3): asked only at the end or interruption of a task block. */
.dd-bookmark{display:grid;gap:6px;padding:var(--space-3);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--pastel-gold) 45%,#fff);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.dd-bookmark__lead{margin:0;font-size:var(--text-sm);line-height:1.35}
.dd-bookmark__field input{width:100%;box-sizing:border-box;min-height:2rem;padding:4px var(--space-2);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);background:#fff}
.dd-bookmark .dd-acts{flex-wrap:wrap}
/* Availability textures (step 8), matching the Week. */
.dd-tex{pointer-events:none}
.dd-tex.tx-interruptible{fill:url(#dd-speckle)}
.dd-tex.tx-regained{fill:color-mix(in srgb,var(--pastel-sage) 55%,transparent);stroke:var(--pastel-sage-ink);stroke-width:1;stroke-dasharray:3 3}
.dd-arc.tx-travel{stroke-dasharray:3 2}
.dd-arc.tx-recovery{opacity:.75}
.dd-arc.tx-callback_wait{stroke:var(--navy);stroke-dasharray:1 2}
.dd-arc.is-regained{stroke:var(--pastel-sage-ink);stroke-width:2}
/* Leave-by (step 9): get ready → leave → board, outside the event ring; narrows as leaving nears. */
[data-part="leave-wedge"]{cursor:pointer}
.dd-leave.is-ready{fill:color-mix(in srgb,var(--wave) 30%,transparent)}
.dd-leave.is-go{fill:var(--navy)}
.dd-leave.is-ride{fill:color-mix(in srgb,var(--wave) 55%,transparent)}
[data-part="leave-wedge"]:focus-visible{outline:2px solid var(--wave);outline-offset:2px}
.dd-go{display:grid;gap:4px}
.dd-go__legs{margin:0;font-size:var(--text-sm);color:var(--ink)}
.dd-go__sub{margin:0;font-size:var(--text-xs);color:var(--muted)}
.dd-go__sub.is-late{color:var(--high-sea-ink);font-weight:var(--weight-semibold)}
.dd-go__err{margin:0;font-size:var(--text-xs);color:var(--high-sea-ink)}
.dd-go__places{display:grid;gap:6px}
.dd-go__field{display:grid;gap:2px;font-size:var(--text-2xs);color:var(--muted)}
.dd-go__field input{min-height:2rem;padding:4px var(--space-2);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);background:#fff}
@media (max-width:719px){.dd-go__field input{font-size:16px}}
/* Mio opportunities (step 11): an offer in a real gap, one tap to plan, one to let it go. */
.dd-mio{fill:color-mix(in srgb,var(--pastel-sage) 50%,transparent);stroke:var(--pastel-sage-ink);stroke-width:1.2;stroke-dasharray:2 3;pointer-events:visiblePainted}
.dd-mio-panel{display:grid;gap:var(--space-2)}
.dd-mio-offer{display:grid;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--pastel-sage) 45%,#fff);border:1px solid color-mix(in srgb,var(--pastel-sage-ink) 18%,transparent)}
.dd-mio-offer b{font-size:var(--text-sm)}
.dd-mio-offer__why{margin:0;font-size:var(--text-xs);color:var(--ink);font-style:italic}
.dd-mio-offer .dd-acts{flex-wrap:wrap}
/* Rescue morph on the dial. */
.dd-arc.is-moving-out{opacity:.35;stroke-dasharray:3 3}