/* RTS Protocol — Apple Health/Fitness-inspired design system.
   System type only. Teal is brand; green/amber/red mean status, never decoration. */

:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-2: #F7F7FA;
  --label: #1C1C1E;
  --label-2: #6C6C70;
  --label-3: #AEAEB2;
  --separator: rgba(60,60,67,0.12);
  --tint: #0E7C7B;
  --tint-soft: rgba(14,124,123,0.12);
  --on-tint: #FFFFFF;               /* text on a solid tint fill */
  --good: #34C759;
  --warn: #FF9500;
  --bad:  #FF3B30;
  --good-soft: rgba(52,199,89,0.14);
  --warn-soft: rgba(255,149,0,0.14);
  --bad-soft:  rgba(255,59,48,0.14);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --radius: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --card-2: #2C2C2E;
    --label: #FFFFFF;
    --label-2: #98989E;
    --label-3: #636366;
    --separator: rgba(84,84,88,0.5);
    --tint: #35C4BE;
    --tint-soft: rgba(53,196,190,0.16);
    --on-tint: #0A0A0B;             /* the dark-mode tint is bright — ink, not white */
    --good: #30D158;
    --warn: #FF9F0A;
    --bad:  #FF453A;
    --good-soft: rgba(48,209,88,0.18);
    --warn-soft: rgba(255,159,10,0.18);
    --bad-soft:  rgba(255,69,58,0.18);
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--label);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--tint); text-decoration: none; }

/* ── Shell ─────────────────────────────────────────────── */
#app { min-height: 100dvh; }
.shell { display: flex; min-height: 100dvh; }
.sidebar {
  width: 250px; flex-shrink: 0;
  padding: calc(20px + var(--sat)) 14px 20px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--separator);
  position: sticky; top: 0; height: 100dvh;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.sidebar .brand img { width: 34px; height: 34px; border-radius: 8px; }
.sidebar .brand b { font-size: 17px; letter-spacing: -0.02em; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; border: 0; background: none;
  color: var(--label); font-size: 15px; font-weight: 500; cursor: pointer;
  width: 100%; text-align: left;
}
.nav-item svg { width: 21px; height: 21px; flex-shrink: 0; }
.nav-item.active { background: var(--tint-soft); color: var(--tint); }
.nav-item:not(.active):hover { background: var(--card-2); }
.sidebar .spacer { flex: 1; }
.sidebar .whoami { padding: 10px; font-size: 13px; color: var(--label-2); border-top: 1px solid var(--separator); }
.sidebar .whoami b { display: block; color: var(--label); font-size: 14px; }

.content { flex: 1; min-width: 0; padding: calc(24px + var(--sat)) 28px calc(90px + var(--sab)); }
.content-inner { max-width: 1060px; margin: 0 auto; }

.tabbar { display: none; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .content { padding: calc(16px + var(--sat)) 16px calc(88px + var(--sab)); }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: color-mix(in srgb, var(--card) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    border-top: 0.5px solid var(--separator);
    padding: 6px 6px calc(6px + var(--sab));
  }
  .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 0; background: none; color: var(--label-3); font-size: 10px; font-weight: 500;
    padding: 4px 0; cursor: pointer;
  }
  .tabbar button svg { width: 24px; height: 24px; }
  .tabbar button.active { color: var(--tint); }
}

/* ── Typography ────────────────────────────────────────── */
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.page-sub { color: var(--label-2); font-size: 15px; margin-bottom: 22px; }
.section-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 12px; }
.metric-num { font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ── Cards & grids ─────────────────────────────────────── */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.tile .t-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label-2); }
.tile .t-value { font-size: 30px; margin-top: 4px; }
.tile .t-unit { font-size: 15px; color: var(--label-2); font-weight: 600; }

.list-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 0.5px solid var(--separator); cursor: pointer; width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--card-2); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 600; font-size: 16px; }
.row .sub { color: var(--label-2); font-size: 13px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { color: var(--label-3); flex-shrink: 0; }

/* ── Status colors (meaning only) ──────────────────────── */
.band-good { color: var(--good); } .band-warn { color: var(--warn); } .band-bad { color: var(--bad); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad  { background: var(--bad-soft);  color: var(--bad); }
.pill.neutral { background: var(--tint-soft); color: var(--tint); }
.pill.muted { background: var(--card-2); color: var(--label-2); }

/* ── Buttons & forms ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--tint); color: #fff; border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 600; padding: 12px 20px; cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; }
.btn.secondary { background: var(--tint-soft); color: var(--tint); }
.btn.quiet { background: var(--card-2); color: var(--label); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.small { font-size: 14px; padding: 8px 14px; border-radius: 10px; }
.btn.block { width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--card-2); border: 1px solid transparent; border-radius: 12px;
  padding: 12px 14px; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tint); background: var(--card); }
.field textarea { resize: vertical; min-height: 74px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* ── Exercise search (2026-09-14, Calvin directive) ────── */
/* Sits above the exercise <select>, which is unchanged. */
.ex-search { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.ex-search-icon {
  position: absolute; left: 13px; display: flex; pointer-events: none;
  color: var(--label-2); opacity: .75;
}
.ex-search .ex-search-input {
  width: 100%; background: var(--card-2); border: 1px solid transparent; border-radius: 12px;
  padding: 12px 40px 12px 39px; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none; color: var(--label);
  font-family: inherit;
}
.ex-search .ex-search-input:focus { border-color: var(--tint); background: var(--card); }
.ex-search .ex-search-input::-webkit-search-decoration,
.ex-search .ex-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ex-search-clear {
  position: absolute; right: 6px; width: 30px; height: 30px; border: 0; background: none;
  color: var(--label-2); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.ex-search-clear:hover { background: var(--card); }
.ex-search-count { display: block; font-size: 12.5px; margin-top: 6px; }
.lib-search { margin: 14px 0 4px; }

/* ── Segmented control ─────────────────────────────────── */
.seg {
  display: flex; background: var(--card-2); border-radius: 11px; padding: 2px;
  margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.seg button {
  flex: 1; border: 0; background: none; padding: 7px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--label-2); cursor: pointer; white-space: nowrap;
}
.seg button.active { background: var(--card); color: var(--label); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

/* ── Day-of-week picker ────────────────────────────────── */
/* Selected days were indistinguishable from unselected ones — every chip was a
   muted pill whatever its checkbox said (Calvin directive 2026-08-27). The native
   checkbox is now hidden and the chip itself carries the state: solid tint when
   on, muted when off. Teal is the brand accent, so this stays clear of the
   green/amber/red status law. */
.day-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.day-pick label { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day-pick input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.day-pick span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 40px; padding: 0 12px;
  border-radius: 99px; border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--card-2); color: var(--label-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.day-pick label:hover span { border-color: var(--separator); }
.day-pick input:checked + span {
  background: var(--tint); color: var(--on-tint); border-color: var(--tint);
}
.day-pick input:focus-visible + span { outline: 2px solid var(--tint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .day-pick span { transition: none; } }

/* ── Phase rail (signature) ────────────────────────────── */
.phase-rail { display: flex; gap: 5px; align-items: flex-end; }
.phase-rail .seg-p { flex: 1; min-width: 0; }
.phase-rail .bar { height: 7px; border-radius: 4px; background: var(--card-2); }
.phase-rail .seg-p.done .bar { background: var(--tint); opacity: 0.45; }
.phase-rail .seg-p.current .bar { background: var(--tint); height: 9px; }
.phase-rail .p-name { font-size: 9.5px; font-weight: 600; color: var(--label-3); margin-top: 5px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-rail .seg-p.current .p-name { color: var(--tint); }
.phase-rail.mini .p-name { display: none; }
.phase-rail.mini .bar { height: 4px; } .phase-rail.mini .seg-p.current .bar { height: 6px; }
/* Phone: a sixth of the screen is ~55px, and the longer phase names do not fit
   that on one line. Give them a second line rather than an ellipsis. All six
   names stay on screen; nothing is dropped. (2026-09-14, Chip directive.)

   Two things this has to survive, because both were what actually went wrong:

   1. The label may render BIGGER than it is written. Chrome's "minimum font
      size" setting (12px on the machine this was found on) and iOS large-text
      both override a 9px rule, so any height in px or em computed from 9px is
      too short and clips the second line. Hence no fixed height at all — the
      name is as tall as it needs to be.
   2. Names of different heights must not move the bars. The rail aligns on
      flex-end, so a two-line name beside a one-line one would drag its bar
      down. Here the segments align at the top and the 2px that makes the
      current bar taller is taken from its margin instead, which puts every bar
      bottom on the same line exactly as flex-end did. The rail looks identical;
      only the names below it are free to wrap. */
@media (max-width: 640px) {
  .phase-rail:not(.mini) { align-items: flex-start; }
  .phase-rail:not(.mini) .bar { margin-top: 2px; }
  .phase-rail:not(.mini) .seg-p.current .bar { margin-top: 0; }
  .phase-rail:not(.mini) .p-name {
    font-size: 9px; line-height: 1.2; white-space: normal;
    overflow-wrap: break-word; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}

/* ── Rings & charts ────────────────────────────────────── */
.ring-wrap { position: relative; display: inline-grid; place-items: center; }
.ring-wrap .ring-center { position: absolute; text-align: center; }
.ring-wrap .ring-val { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring-wrap .ring-cap { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label-2); }
.ring-anim circle.fg { transition: stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1); }
.chart-card svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--label-2); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ── Calendar ──────────────────────────────────────────── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--label-3); padding: 4px 0; text-transform: uppercase; }
.cal-day {
  aspect-ratio: 1 / 1.05; border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
  border: 0; cursor: pointer; padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.cal-day.blank { background: none; box-shadow: none; cursor: default; }
.cal-day .dnum { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day.today .dnum { background: var(--tint); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.cal-day .dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cal-day .dot { width: 5px; height: 5px; border-radius: 50%; }

/* ── Check-in sliders ──────────────────────────────────── */
.slider-block { padding: 14px 0; border-bottom: 0.5px solid var(--separator); }
.slider-block:last-of-type { border-bottom: 0; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slider-top .s-name { font-weight: 600; font-size: 15px; }
.slider-top .s-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tint); }
.slider-top .s-hint { font-size: 12px; color: var(--label-3); }
input[type="range"] { width: 100%; accent-color: var(--tint); height: 30px; }

/* ── Exercise checklist (patient) ──────────────────────── */
.ex-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden; }
.ex-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.ex-check {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--label-3);
  flex-shrink: 0; display: grid; place-items: center; color: transparent;
}
.ex-card.done .ex-check { background: var(--good); border-color: var(--good); color: #fff; }
.ex-card.done .ex-title { color: var(--label-2); text-decoration: line-through; }
.ex-title { font-weight: 600; font-size: 16px; }
.ex-meta { font-size: 13px; color: var(--label-2); }
.ex-body { padding: 0 16px 16px; border-top: 0.5px solid var(--separator); }

/* ── Login ─────────────────────────────────────────────── */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card img.logo { width: 76px; height: 76px; border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.login-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.login-card .tag { color: var(--label-2); font-size: 15px; margin: 6px 0 26px; }

/* ── Modal & toast ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 60;
  display: grid; place-items: end center; animation: fadeIn 0.2s ease;
}
@media (min-width: 640px) { .modal-backdrop { place-items: center; } }
.modal {
  background: var(--bg); width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  border-radius: 22px 22px 0 0; padding: 20px 20px calc(24px + var(--sab));
  animation: sheetUp 0.32s cubic-bezier(0.22,1,0.36,1);
}
@media (min-width: 640px) { .modal { border-radius: 22px; padding-bottom: 24px; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.modal-close { border: 0; background: var(--card-2); color: var(--label-2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#toast-root { position: fixed; top: calc(12px + var(--sat)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 90; pointer-events: none; }
.toast {
  background: var(--card); color: var(--label); box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  border-radius: 99px; padding: 10px 20px; font-size: 14px; font-weight: 600;
  animation: toastIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
.toast.error { color: var(--bad); }
@keyframes toastIn { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Video markup viewer ───────────────────────────────── */
.modal.wide { max-width: 920px; }
.vid-wrap { position: relative; background: #000; border-radius: 14px; overflow: hidden; }
.vid-wrap video { display: block; width: 100%; max-height: 62vh; }
.vid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.vid-canvas.drawing { pointer-events: auto; cursor: crosshair; }
.vid-tools { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.tool-btn {
  border: 0; background: var(--card-2); color: var(--label); border-radius: 10px;
  padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tool-btn.active { background: var(--tint-soft); color: var(--tint); }
.color-dot { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; }
.color-dot.active { border-color: var(--label); }
.anno-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.anno-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--card-2); color: var(--label); border-radius: 99px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.anno-chip.active { background: var(--tint-soft); color: var(--tint); }
.anno-chip .x { color: var(--label-3); font-weight: 700; }

/* ── Misc ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 20px; color: var(--label-2); }
.empty .e-icon { font-size: 40px; margin-bottom: 10px; }
.empty b { color: var(--label); display: block; margin-bottom: 4px; font-size: 17px; }
.skeleton { border-radius: var(--radius); background: linear-gradient(100deg, var(--card) 40%, var(--card-2) 50%, var(--card) 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; min-height: 90px; margin-bottom: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.flex { display: flex; align-items: center; gap: 10px; }
.flex .grow { flex: 1; min-width: 0; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.muted { color: var(--label-2); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
table.simple { width: 100%; border-collapse: collapse; font-size: 14px; }
table.simple th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label-2); padding: 8px 10px; border-bottom: 1px solid var(--separator); }
table.simple td { padding: 9px 10px; border-bottom: 0.5px solid var(--separator); font-variant-numeric: tabular-nums; }
table.simple tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Exercise diagram thumbnail in the library list (2026-09-02). Fixed box so
   rows stay the same height whether or not an exercise has a diagram yet. */
.row .ex-thumb { width: 64px; height: 48px; border-radius: 9px; object-fit: cover;
  flex-shrink: 0; margin-right: 12px; background: var(--card-2); }

/* Clamped cue text on a program row + its "Read more" (2026-09-03, Calvin).
   The whole name/description block is already the tap target for the exercise
   sheet, so Read more needs to read as a link, not be one. */
.cue-line { font-style: italic; }
.readmore { color: var(--tint); font-weight: 600; font-style: normal; white-space: nowrap; }

/* Program tab — tappable day dots (2026-09-10, Calvin directive).
   The dot keeps its exact 10px look, color and spacing; this only grows the
   invisible touch target around it so a tap lands on a phone. Sized to stay
   inside the 4px gap so neighbouring dots never steal each other's taps. */
[data-dot] { position: relative; }
[data-dot]::after { content: ''; position: absolute; inset: -8px -2px; border-radius: 8px; }
[data-dot]:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }

/* Calendar cells stop growing with the column on iPad/desktop (2026-09-11,
   Calvin directive: "or condense the calendar so you can see it without
   scrolling"). .cal-day is aspect-ratio 1/1.05 on a 7-column 1fr grid, so the
   wider the content column the taller every cell — which is exactly why the
   month overflowed on an iPad but not an iPhone. Capping the height above the
   860px breakpoint keeps the whole month, the legend AND the three action
   buttons on one screen in landscape. Below 861px nothing changes: Calvin said
   the iPhone "looks fine the way it is". */
@media (min-width: 861px) {
  .cal-day { aspect-ratio: auto; min-height: 84px; }
}