/* Riri - one stylesheet. "Bold light": follows the phone's light/dark
   setting; compact iOS-sized type, few borders, one thing at a time. Mobile first;
   widens at 820px. */

:root {
  color-scheme: light dark;
  --bg: #f4f3ef;
  --surface: #ffffff;
  --field: #f0efea;
  --field-2: #e6e5df;
  --ink: #0b0b0b;
  --ink-2: #57564f;
  --muted: #8f8d86;
  --grid: #e7e5de;
  --axis: #c3c2b7;
  --hairline: rgba(11, 11, 11, 0.08);
  --danger: #b42828;
  /* Identity colours: person 1, person 2 (validated categorical slots 1-2). */
  --p1: #2a78d6;
  --p2: #eb6834;
  --good: #0ca30c;
  --good-ink: #006300;
  --gold: #eda100;
  --aqua: #1baf7a;   /* interest on Cash flow: the third series colour after p1, p2 */
  --soon: #f8e3a3;
  --soon-ink: #5c4300;
  --bm-body: #ebe9e3;
  --bm-idle: #d6d3ca;
  --hover: rgba(11, 11, 11, 0.045);   /* a row under the mouse, computers only */
  --side: #ebeae4;                    /* the computer's sidebar */
  --radius: 18px;
  --tabbar: 58px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dark colours: when the phone is dark (unless Light was chosen on the
   account page), or when Dark was chosen. Keep the two blocks identical. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --field: #2a2a2c;
  --field-2: #38383a;
  --ink: #f5f5f4;
  --ink-2: #c2c1ba;
  --muted: #8e8e93;
  --grid: #2c2c2e;
  --axis: #48484a;
  --hairline: rgba(255, 255, 255, 0.10);
  --danger: #ff6961;
  --p1: #3987e5;
  --p2: #d95926;
  --good-ink: #30d158;
  --gold: #c98500;
  --aqua: #199e70;
  --soon: #4d3d0c;
  --soon-ink: #ffd76a;
  --bm-body: #262628;
  --bm-idle: #3c3c3f;
  --hover: rgba(255, 255, 255, 0.06);
  --side: #111112;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --field: #2a2a2c;
    --field-2: #38383a;
    --ink: #f5f5f4;
    --ink-2: #c2c1ba;
    --muted: #8e8e93;
    --grid: #2c2c2e;
    --axis: #48484a;
    --hairline: rgba(255, 255, 255, 0.10);
    --danger: #ff6961;
    --p1: #3987e5;
    --p2: #d95926;
    --good-ink: #30d158;
    --gold: #c98500;
    --aqua: #199e70;
  --soon: #4d3d0c;
  --soon-ink: #ffd76a;
    --bm-body: #262628;
    --bm-idle: #3c3c3f;
    --hover: rgba(255, 255, 255, 0.06);
    --side: #111112;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 32px);
}
a { color: inherit; }
h1, h2, h3 { margin: 0; }
h1 { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: 19px; font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 15px; font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }
[hidden] { display: none !important; }
.icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9;
        stroke-linecap: round; stroke-linejoin: round; }

/* Identity marks: colour lives on dots and avatars, never on text. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
       background: var(--c, var(--muted)); margin-right: 7px; vertical-align: 1px; flex: none; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
          font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; color: #fff;
          background: var(--c); opacity: 0.35; flex: none; box-sizing: border-box; }
.avatar.on { opacity: 1; }
.avatar img { box-shadow: inset 0 0 0 1px var(--hairline); }
/* A thin ring so a light photo keeps a crisp edge on a dark page. */
.avatar:has(img) { box-shadow: 0 0 0 1.5px var(--hairline), 0 0 0 0.5px var(--hairline); }
.account-top { display: flex; justify-content: flex-end; max-width: 420px; width: 100%; margin: 8px auto -12px; }
.theme-pick { display: flex; flex-direction: column; gap: 6px; }
.photo-frame-box summary { cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink-2); text-align: center; }
.photo-frame { margin-top: 12px; align-items: center; }
.photo-frame .field { width: 100%; }
.photo-frame input[type=range] { width: 100%; accent-color: var(--ink); }
.frame-preview { width: 120px; height: 120px; background-color: var(--field); background-repeat: no-repeat; }
.theme-pick .seg { display: flex; }
.theme-pick .seg-item { flex: 1; justify-content: center; border: 0; cursor: pointer; background: transparent; font-family: inherit; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-big { width: 88px; height: 88px; font-size: 34px; }
.account-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.photo-pick { position: relative; overflow: hidden; cursor: pointer; }
.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; font-size: 13px;
            text-decoration: underline; cursor: pointer; }

/* ---------- frame ---------- */

.top { padding: env(safe-area-inset-top) 16px 0; }
.top-in { max-width: 1040px; margin: 0 auto; height: 48px; display: flex; align-items: center; gap: 16px; }
.brand { font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: -0.02em; display: none; }
.nav-wide { display: none; gap: 4px; margin-right: auto; }
.nav-wide a { text-decoration: none; padding: 7px 14px; border-radius: 999px; color: var(--ink-2);
              font-weight: 600; font-size: 15px; }
.nav-wide a[aria-current] { background: var(--surface); color: var(--ink); }
.dev-as { margin-left: auto; display: flex; gap: 6px; }
/* Health's person switch (2026-10-21): the other person's photo beside your own.
   The one on screen has a ring; the other is a little faded. */
.whose { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.whose .avatar { opacity: 0.5; transition: opacity 0.15s; }
.whose .avatar.on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.whose .avatar:active { transform: scale(0.94); }
/* Only a margin here: the avatar's own grid keeps its letter centred. */
.top-in > .avatar { margin-left: auto; }
/* Phone: the iPhone blurs the top ~25pt of the app, which blurred the avatar
   (Rikhil, 2026-10-19). The top row stays as empty room and the avatar drops
   onto the page's first row, level with the title (48px row - 8px + 4px head
   padding). The account page has its own big photo and a Done button there. */
@media (max-width: 819px) {
  .top { position: relative; z-index: 5; }
  .top-in > .avatar, .dev-as, .whose { position: relative; top: 44px; }
  body[data-section="signin"] .top-in > .avatar { display: none; }
}

.page { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
          justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
          background: color-mix(in srgb, var(--bg) 85%, transparent);
          -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
          border-top: 0.5px solid var(--hairline); }
.tabbar a { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center;
            gap: 2px; padding: 4px 0; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 650; }
.tabbar a[aria-current] { color: var(--ink); }

@media (min-width: 820px) {
  body { padding-bottom: 56px; }
  .tabbar { display: none; }
  .brand, .nav-wide { display: flex; }
  .top-in { height: 64px; }
  .page { gap: 20px; }
}

/* ---------- headings ---------- */

.hero { padding: 4px 0 0; }
.eyebrow, .kicker { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 4px 0 0; }
.back { display: inline-flex; align-items: center; margin-bottom: 8px; color: var(--ink-2);
        text-decoration: none; font-size: 15px; font-weight: 600; }
.sub { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.person-h { display: flex; align-items: center; font-size: 19px; padding: 6px 0 0; }
.person-h .dot { width: 11px; height: 11px; }

/* ---------- surfaces ---------- */

.card { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-title { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 10px; }
.empty { margin: 0; color: var(--ink-2); }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.hint a { color: var(--ink-2); font-weight: 600; }
.grid-2, .stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } }
.person-col { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.more > summary, .how > summary, .how-card > summary {
  cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 650; list-style: none; width: max-content; }
.more > summary::-webkit-details-marker, .how > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " ›"; }
.more[open] > summary { margin-bottom: 8px; }

/* ---------- big numbers ---------- */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--surface); border-radius: 16px; padding: 12px 14px; display: flex;
        flex-direction: column; min-width: 0; }
.tile-label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tile-value { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 2px; }
.tile-value small, .kpi-value small { font-size: 14px; font-weight: 650; color: var(--ink-2);
                                      margin-left: 3px; letter-spacing: 0; }
.tile-delta { color: var(--ink-2); font-size: 13px; }
.section-label { margin: 4px 2px 8px; color: var(--ink-2); font-size: 13px; font-weight: 650; }
.tile-delta .note { display: block; color: var(--muted); white-space: nowrap; }
/* Health: weight gets the whole first row, the averages share the second. */
.tiles-lead { grid-template-columns: 1fr 1fr; }
.tiles-lead .tile:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto;
                                column-gap: 12px; align-items: end; }
.tiles-lead .tile:first-child .tile-delta { grid-column: 2; grid-row: 1 / span 2; text-align: right;
                                            font-weight: 600; color: var(--ink); }

/* ---------- home ---------- */

.person-card { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 6px; }
.person-card > :first-child { border-top: 0; }
.person-card .card-head { margin-bottom: 8px; }
.person-card .card-head h2 { font-size: 21px; }
.plan-line, .kpi, .week { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                          text-decoration: none; padding: 12px 0; border-top: 0.5px solid var(--hairline); }
.plan-line > div, .kpi > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.plan-line strong { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.spark { width: 44%; max-width: 220px; }
.week { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 14px; border-top: 0; }
.week-head { display: flex; align-items: center; gap: 6px; }
.week-head .week-total { margin-left: auto; }
.week-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
              text-decoration: none; color: var(--ink-2); font-size: 18px; line-height: 1; background: var(--field); }
.week-total { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.strip-head { margin-bottom: 6px; }
.week-today { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--ink-2); text-decoration: none;
              padding: 4px 10px; border-radius: 999px; background: var(--surface); }
/* Swiping a week strip: it slides away, then the next week loads. */
[data-swipe-prev], [data-swipe-next] { touch-action: pan-y; }
.swiping { transition: transform .18s ease-out, opacity .18s ease-out; }
.swipe-out-left { transform: translateX(-40px); opacity: 0; }
.swipe-out-right { transform: translateX(40px); opacity: 0; }
.days { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.day { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
       font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--field); }
.day.today { color: var(--ink); }
.day.done { background: var(--c); color: #fff; }
.day.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.day.future { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--field-2); }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
            padding: 12px 0 2px; border-top: 0.5px solid var(--hairline); }
.day-head h2 { font-size: 19px; }
.day-head + .plan-line { border-top: 0; }
.body-line { display: flex; gap: 22px; padding: 12px 0; border-top: 0.5px solid var(--hairline);
             text-decoration: none; }
.body-line > span { display: flex; flex-direction: column; }
.body-line strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.body-line small { color: var(--ink-2); font-weight: 600; font-size: 12px; }

/* Home "Progress" card: the plan's own success checks. Status colours come with
   a word and an arrow, never on their own. */
.progress-card .eyebrow { margin-bottom: 2px; }
.track-head { padding-bottom: 6px; }
.track-head h2 { font-size: 21px; }
.track-head .sub { margin-top: 2px; font-size: 14px; }
.track-rows { list-style: none; margin: 0; padding: 0; }
.track-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             padding: 11px 0; border-top: 0.5px solid var(--hairline); text-decoration: none; }
.track-main { display: flex; flex-direction: column; min-width: 0; }
.track-label { font-weight: 650; }
.track-note { color: var(--ink-2); font-size: 13px; }
.track-row.s-none .track-label { color: var(--ink-2); }
.track-row.s-none .track-note { color: var(--muted); }
.track-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.track-value { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px;
               font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--field); color: var(--ink); }
.status-chip.s-good { background: color-mix(in srgb, var(--good) 16%, var(--surface)); }
.status-chip.s-good > span { color: var(--good-ink); }
.status-chip.s-watch { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
.status-chip.s-watch > span { color: var(--gold); }
.status-chip.s-none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--field-2); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- lists ---------- */

.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 0.5px solid var(--hairline); }
.list-row { display: flex; align-items: center; gap: 4px 12px; padding: 12px 0; text-decoration: none;
            min-height: 52px; }
.list-row .dot { margin-right: 0; }
.list-main { font-weight: 650; flex: 1 1 auto; min-width: 0; }
.list-sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.list-meta { color: var(--muted); font-size: 14px; white-space: nowrap; flex: none; max-width: 45%;
             overflow: hidden; text-overflow: ellipsis; }
a.list-row::after { content: "›"; color: var(--muted); font-size: 19px; line-height: 1; margin-left: 2px; }

/* ---------- controls ---------- */

.btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center;
       gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 13px; background: var(--ink);
       color: var(--bg); font: 700 15px var(--font); text-decoration: none; cursor: pointer; }
.btn-ghost { background: var(--field); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); min-height: 44px; }
.btn-wide { width: 100%; }
.btn-small { min-height: 34px; font-size: 13px; padding: 0 14px; border-radius: 10px; }
.btn-go { min-height: 50px; font-size: 15px; border-radius: 15px; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.5; }
.danger-zone { display: flex; justify-content: center; padding: 4px 0; }
.btn.confirming { background: var(--danger); color: #fff; }
.btn-go.confirming:not(.btn-danger) { background: var(--ink); color: var(--bg); outline: 3px solid var(--danger); outline-offset: 2px; }
.link-quiet { background: none; border: 0; padding: 8px 0; font: 650 14px var(--font); color: var(--ink-2);
              text-decoration: none; cursor: pointer; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--field-2);
       max-width: 100%; overflow-x: auto; }
.seg-item { display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 12px;
            border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.seg-item.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.filters, .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.filters::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 6px 13px; border-radius: 999px; text-decoration: none; font-size: 13px;
        font-weight: 650; color: var(--ink-2); background: var(--surface); }
.chip.on { background: var(--ink); color: var(--bg); }
.chip-more { display: contents; }
/* Narrow phones: tighter chips so Health's row (4 chips + More) fits without scrolling. */
@media (max-width: 420px) {
  .chips { gap: 6px; }
  .chips .chip { padding: 6px 10px; font-size: 12.5px; }
}
/* A chip that is really a <select>: the native picker opens on tap. */
.chip-select { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.chip-caret { font-size: 10px; opacity: 0.7; }
.chip-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                      font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--ink);
         color: var(--bg); font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.badge-quiet { background: var(--field); color: var(--ink-2); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 10px; border-radius: 999px; background: var(--field); color: var(--ink-2);
           font-size: 12px; font-weight: 650; }
.tags .tag-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--field-2); }

/* ---------- forms ---------- */

/* The round + (`add_button` in _macros.html), the one way to add on every tab: the right end
   of the title row, or of the sub-tab row (Health, Workouts, Cards). Drawn, not typed: a typed
   "+" sits above centre on the iPhone. */
.head-add { align-self: center; flex: none; margin-left: auto; display: grid; place-items: center;
            width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg);
            text-decoration: none; }
.head-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.head-add:active { transform: scale(0.94); }

.form { display: flex; flex-direction: column; gap: 16px; }
.row-2, .row-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 560px) { .row-3 { grid-template-columns: repeat(3, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 14px; font-weight: 650; color: var(--ink-2); padding: 0; }
.optional { font-weight: 400; color: var(--muted); }
.field-box { position: relative; display: flex; align-items: center; }
input, textarea, select {
  width: 100%; min-width: 0; font: 16px var(--font); color: var(--ink); background: var(--field);
  border: 1.5px solid transparent; border-radius: 12px; padding: 11px 13px; outline: none;
  -webkit-appearance: none; appearance: none; }
input[type="date"] { min-height: 52px; }
.field-box input { padding-right: 52px; }
.field-box input[readonly] { color: var(--muted); }
.field-unit { position: absolute; right: 14px; color: var(--muted); font-size: 14px; pointer-events: none; }
input:focus, textarea:focus { border-color: var(--ink); background: var(--surface); }
.has-error input, .has-error textarea { border-color: var(--danger); }
.field-error, .form-error { color: var(--danger); font-size: 13px; margin: 0; }
.form-error { font-size: 15px; font-weight: 650; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset legend { margin-bottom: 8px; }
.pills { display: flex; gap: 8px; }
.pills-wrap { flex-wrap: wrap; }
.pill input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.pill span { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px;
             background: var(--field); font-weight: 650; font-size: 15px; cursor: pointer; }
.pill input:checked + span { background: var(--ink); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--ink-2); outline-offset: 2px; }

.exercises { display: flex; flex-direction: column; gap: 6px; }
.ex-head, .ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px 64px; gap: 6px; }
.ex-head span { font-size: 11px; color: var(--muted); padding-left: 4px; }
.ex-rows { display: flex; flex-direction: column; gap: 6px; }
.ex-row input { padding: 11px 8px; }
.exercises .btn-small { align-self: flex-start; }

/* ---------- charts ---------- */

.chart { margin: 0; }
.chart-title { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.chart-plot { position: relative; outline: none; border-radius: 8px; }
.chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--ink-2); }
.chart-plot svg { display: block; width: 100%; overflow: visible; }
.chart-plot text { font: 11px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-plot .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-plot .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-plot .series-line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .series-area { fill: var(--c); opacity: 0.10; }
.chart-plot .series-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.chart-plot .bar { fill: var(--c); transition: opacity 0.12s; }
.chart-plot.hovering .bar { opacity: 0.4; }
.chart-plot.hovering .bar.on { opacity: 1; }
.chart-plot .target { stroke: var(--ink-2); stroke-width: 1; opacity: 0.55; shape-rendering: crispEdges; }
.chart-plot .target-label { fill: var(--ink-2); font-weight: 650; paint-order: stroke;
                            stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart-plot .crosshair { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-plot .band { fill: var(--good); opacity: 0.11; }
.spark .chart-plot .series-line { stroke-width: 2; }
.tip { position: absolute; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; background: var(--surface);
       color: var(--ink); border-radius: 12px; padding: 7px 11px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
       font-size: 12px; line-height: 1.3; transform: translateX(-50%); }
.tip strong { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.tip strong::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: var(--c); }
.tip span { color: var(--ink-2); }
.chart-table { margin-top: 10px; }
.chart-table summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; width: max-content; }
.chart-table table, .data-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.chart-table th, .data-table thead th { text-align: left; font-weight: 650; color: var(--ink-2); padding: 7px 0;
                                        border-bottom: 0.5px solid var(--hairline); }
.chart-table td, .data-table td, .data-table th { padding: 7px 0; border-bottom: 0.5px solid var(--hairline); text-align: left; }
.chart-table .n, .data-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.range-seg { display: flex; margin-top: 14px; }
.block-chips { margin: 0 -16px; padding: 2px 16px; }
.prompt.missed form { flex: none; }
.backup-alert strong { color: var(--danger); }
.prompt .backup-error { display: block; margin-top: 6px; font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.prompt.missed a { color: inherit; }
.plan-about { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }
.results { margin-top: 12px; }
.results-when { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.results-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.results-grid > div { background: var(--field); border-radius: 12px; padding: 8px 10px; }
.results-grid dt { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.results-grid dd { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.results-grid dd strong { color: var(--ink); font-size: 15px; }
.results-grid small { color: var(--muted); }
.chips-in { margin: -4px -4px 14px; }
.chips-in .chip { background: var(--field); }
.chips-in .chip.on { background: var(--ink); }
.range-seg .seg-item { flex: 1; justify-content: center; padding: 7px 4px; }

/* ---------- nutrition ---------- */
.nutri-day { display: flex; flex-direction: column; gap: 10px; }
.nutri-day .eyebrow { margin: 0; }
.nutri-kcal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nutri-day > .meter { display: block; height: 9px; }
/* This week: one sentence and today's protein, carbs and fat big, the averages folded under. */
.week-card .card-title { margin-bottom: 12px; }
.week-macros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
               grid-template-columns: repeat(3, minmax(0, 1fr)); }
.week-macros li { background: var(--field); border-radius: 14px; padding: 10px 12px;
                  display: flex; flex-direction: column; min-width: 0; }
.week-macros strong { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
                      font-variant-numeric: tabular-nums; }
.week-macros strong small { font-size: 15px; font-weight: 650; color: var(--ink-2); margin-left: 2px;
                            letter-spacing: 0; }
.week-macro { font-size: 14px; font-weight: 650; }
.week-also { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.week-fold { margin-top: 12px; }
.week-lines { list-style: none; margin: 0 0 10px; padding: 0; }
.week-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                 padding: 8px 0; border-top: 0.5px solid var(--hairline); }
.week-lines li:first-child { border-top: 0; }
.week-avg, .week-left { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.more-card > summary { cursor: pointer; font-weight: 700; list-style: none; }
.more-card > summary::-webkit-details-marker { display: none; }
.more-card > summary::after { content: " ›"; color: var(--muted); }
.more-card[open] > summary { margin-bottom: 16px; }
.withings-card form { margin-top: 12px; }
.withings-card .sub { margin-top: 0; }
.sync-box { margin-top: 22px; padding-top: 18px; border-top: 0.5px solid var(--hairline);
            display: flex; flex-direction: column; gap: 12px; }
.sync-box .card-title { margin: 0; }
.key-card { display: flex; flex-direction: column; gap: 12px; }
.key-card .card-title { margin: 0; }
.key { display: block; padding: 14px; border-radius: 14px; background: var(--field); font: 600 14px ui-monospace, Menlo, monospace;
       word-break: break-all; user-select: all; }

/* ---------- toast ---------- */

.toast { position: fixed; left: 50%; z-index: 40; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 18px);
         transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--ink);
         color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
         transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-top { top: calc(env(safe-area-inset-top) + 14px); bottom: auto; white-space: normal;
                   max-width: calc(100% - 32px); text-align: center; }
@media (min-width: 820px) { .toast { bottom: 28px; } }

/* ---------- pull down to refresh (app.js pullToRefresh) ---------- */
.pull { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 10px); z-index: 30;
        width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center;
        background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
        transform: translateY(-80px); opacity: 0; pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.15s, color 0.15s; }
.pull.pulling { transition: background-color 0.15s, color 0.15s; }
.pull.ready, .pull.loading { background: var(--ink); color: var(--bg); }
.pull svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
            stroke-linecap: round; stroke-linejoin: round; }
.pull.loading svg { animation: pull-spin 0.8s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
.error-card { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.error-card p { margin: 0; color: var(--ink-2); }
.signin-card { margin: 24px auto 0; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.signin-card h1 { margin: 0; }
.signin-card form { margin: 0; }
.signin-error { margin: 0; color: var(--danger); }

/* ================= Workouts ================= */

.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { flex: none; padding: 8px 15px; border-radius: 999px; font-weight: 650; font-size: 14px;
          color: var(--ink-2); text-decoration: none; }
.subtab.on { background: var(--ink); color: var(--bg); }

.plan-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.plan-head > div:first-child { display: flex; flex-direction: column; }
.plan-head .eyebrow { margin: 0; }
.plan-week { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.plan-week .of, .of { color: var(--muted); font-weight: 650; }

.weekstrip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0 10px;
        border-radius: 16px; text-decoration: none; }
.wday-letter { font-size: 12px; font-weight: 700; color: var(--muted); }
.wday-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
            font-size: 15px; font-weight: 650; background: var(--surface); }
.wday-num svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6;
                stroke-linecap: round; stroke-linejoin: round; }
.wday.done .wday-num { background: var(--c); color: #fff; }
.wday.rest .wday-num { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--field-2); }
.wday.today .wday-num { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.wday.in-progress .wday-num { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--good); }
.wday.selected { background: var(--surface); }
/* The week's days by state (Rikhil, 2026-10-19): done green, still to come
   yellow, rest grey, missed red. The selected day keeps its colour; its
   column is highlighted instead. */
.weekstrip .wday.s-done .wday-num { background: var(--good); color: #fff; }
.weekstrip .wday.s-upcoming .wday-num { background: var(--soon); color: var(--soon-ink); }
.weekstrip .wday.s-rest .wday-num { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--field-2); }
.weekstrip .wday.s-missed .wday-num { background: var(--danger); color: #fff; }
.weekstrip .wday.s-rest.today .wday-num { box-shadow: inset 0 0 0 1.5px var(--field-2), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.wday.selected .wday-letter { color: var(--ink); }

.session-card { display: flex; flex-direction: column; gap: 14px; }
.session-card .eyebrow { margin: 0; }
.session-title { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.session-card .sub { margin: -8px 0 0; }
.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 0.5px solid var(--hairline); }
.ex-label { flex: none; width: 28px; font-size: 12px; font-weight: 650; color: var(--muted); }
.ex-name { flex: 1; font-weight: 600; min-width: 0; }
.ex-sets { flex: none; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.done-line { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; flex-wrap: wrap; }
.session-card .actions form { display: contents; }
.session-card .actions .btn-go { flex: 1; }
.warmups { margin-top: 4px; }
.warmups .btn { flex-direction: column; gap: 1px; min-height: 58px; padding: 8px 12px; line-height: 1.2; }
.warmups .btn small { font-size: 13px; font-weight: 550; opacity: 0.75; }
.extras { display: grid; gap: 4px; border-top: 0.5px solid var(--hairline); padding-top: 12px; }
.train-anyway { border-top: 0.5px solid var(--hairline); padding-top: 12px; }
.train-anyway > summary { width: auto; }
.start-row { margin: 0; }
.prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
.prompt strong { display: block; font-size: 15px; }
.prompt span { color: var(--ink-2); font-size: 14px; }
.prompt .btn { flex: none; white-space: nowrap; }
/* Mobility tests on the check-in page: figure, steps, then the boxes. */
.mtest { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--field); }
.mtest-fig { height: 120px; background: var(--field); border-radius: 16px; padding: 8px; justify-content: center; }
.mtest-text strong { font-size: 15px; }
.mtest-text ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mtest-text ol b { color: var(--ink); }
.mtest-text .hint { margin-top: 6px; }

.resume { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.resume-text { flex: 1; display: flex; flex-direction: column; }
.resume-text strong { font-size: 16px; }
.resume-text span { color: var(--ink-2); font-size: 14px; }
.live { width: 12px; height: 12px; border-radius: 50%; background: var(--good); flex: none;
        box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5); animation: pulse 1.6s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(12, 163, 12, 0); } }

/* muscle map */
.bodymap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bodymap svg { width: 100%; max-width: 360px; height: auto; display: block; }
.bm-body { fill: var(--bm-body); }
.bm-m { fill: var(--bm-idle); stroke: var(--surface); stroke-width: 0.9; }
.bm-m.lx { opacity: 0.55; }
.bm-m.l1, .sw.l1 { fill: color-mix(in srgb, var(--c) 35%, var(--bm-idle)); background: color-mix(in srgb, var(--c) 35%, var(--bm-idle)); }
.bm-m.l2, .sw.l2 { fill: color-mix(in srgb, var(--c) 68%, var(--bm-idle)); background: color-mix(in srgb, var(--c) 68%, var(--bm-idle)); }
.bm-m.l3, .sw.l3 { fill: var(--c); background: var(--c); }
.bm-side { font: 600 7px var(--font); fill: var(--muted); }
.bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.bm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 4px; background: var(--bm-idle); display: inline-block; }
.meters { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.meters li { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: baseline; }
.meter-label { font-weight: 600; }
.meter-num { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.meter-num strong { color: var(--ink); }
.meter { grid-column: 1 / -1; height: 7px; border-radius: 4px; overflow: hidden;
         background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.meter i { display: block; height: 100%; background: var(--c); border-radius: 4px; }

/* plan */
.plan-intro { display: flex; flex-direction: column; gap: 4px; }
.plan-intro .eyebrow { margin: 0; }
.rules { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 8px; }
.weekchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.weekchips::-webkit-scrollbar { display: none; }
.weekchips .chip { min-width: 42px; height: 42px; padding: 0; display: grid; place-items: center;
                   position: relative; font-variant-numeric: tabular-nums; }
.weekchips .chip.deload::after, .weekchips .chip.test::before { content: ""; position: absolute; bottom: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.weekchips .chip.test::before { bottom: auto; top: 5px; }
.weekchips .chip.now:not(.on) { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.plan-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-day { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; padding: 16px 18px; }
.plan-day.rest { opacity: 0.55; pointer-events: none; }
.plan-day-when { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center; }
.plan-day-letter { font-size: 12px; font-weight: 650; color: var(--muted); }
.plan-day-date { font-size: 19px; font-weight: 700; }
.plan-day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-day-body strong { font-size: 17px; font-weight: 650; }
.plan-day-ex { color: var(--ink-2); font-size: 14px; }
.plan-day-status { flex: none; display: flex; gap: 4px; padding-top: 6px; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.status-dot.done { background: var(--c); }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lift-plan p { margin: 12px 0; color: var(--ink-2); }
.superset-head { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.superset-head span { font-weight: 650; color: var(--ink); margin-right: 6px; }

/* ---------- the guided workout (player) ---------- */

.player-mode .top, .player-mode .tabbar { display: none; }
.player-mode { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
.player-mode .page { padding-top: env(safe-area-inset-top); max-width: 560px; }
.player { display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 40px); }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
            background: var(--surface); color: var(--ink); text-decoration: none; flex: none; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
.player-meta { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.player-tools { display: flex; gap: 8px; flex: none; }
/* Done pressed without an RIR: the row says so. */
.rir-pick.need legend { color: var(--danger); font-weight: 700; }
.rir-pick.need .rir-row { animation: rir-nudge 0.35s ease-in-out; border-radius: 12px;
                          box-shadow: 0 0 0 2px var(--danger); }
@keyframes rir-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.step-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step-nav .player-progress { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step-nav-btn { display: grid; place-items: center; width: 40px; height: 32px; border: 0; border-radius: 11px;
                background: var(--surface); color: var(--ink); cursor: pointer; flex: none; }
.step-nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4;
                    stroke-linecap: round; stroke-linejoin: round; }
.step-nav-btn:disabled { opacity: 0.3; cursor: default; }
.step-nav-pos { flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 650; color: var(--ink-2);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.icon-btn { border: 0; cursor: pointer; padding: 0; }
/* Paused: one big Resume over the whole player. */
.pause-cover { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 10px; padding: 24px;
               padding-bottom: calc(24px + env(safe-area-inset-bottom)); text-align: center;
               background: color-mix(in srgb, var(--bg) 94%, transparent);
               -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pause-cover[hidden] { display: none; }
.pause-clock { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pause-cover .step-sub { max-width: 300px; margin: 0 0 18px; }
.pause-resume { max-width: 320px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pause-resume svg { width: 20px; height: 20px; fill: currentColor; }
.player-meta span { font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.player-meta strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.player-progress { display: flex; gap: 3px; }
.player-progress i { flex: 1; height: 5px; border-radius: 3px; background: var(--field-2); }
.player-progress i.on { background: var(--c); }
.player-progress i.now { background: var(--ink); }

.step { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.step .kicker { margin: 0; font-size: 15px; }
.stage { background: var(--surface); border-radius: 24px; height: 136px; display: flex; align-items: center;
         justify-content: center; padding: 8px; }
.fig { color: var(--ink); flex: none; display: flex; justify-content: center; }
.fig svg { height: 100%; width: auto; display: block; overflow: visible; }
.fig-lg { height: 118px; min-width: 118px; }
.fig-sm { height: 76px; min-width: 70px; }
.fig-xs { height: 56px; min-width: 52px; margin-left: auto; }
.lift-head-text { flex: 1; min-width: 0; }
.step-title { font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; outline: none; }
.step-sub { margin: -6px 0 0; color: var(--ink-2); font-size: 15px; }
.step-sub strong { color: var(--ink); }
.set-form { display: flex; flex-direction: column; gap: 16px; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.steppers.single { grid-template-columns: 1fr; }
.stepper { background: var(--surface); border-radius: 24px; padding: 16px 12px 12px; display: grid;
           grid-template-columns: 1fr 1fr; grid-template-areas: "value value" "less more";
           align-items: center; gap: 10px 8px; }
.stepper .step-value { grid-area: value; }
.stepper .step-btn[data-delta="-1"] { grid-area: less; justify-self: start; }
.stepper .step-btn[data-delta="1"] { grid-area: more; justify-self: end; }
.step-btn { appearance: none; border: 0; width: 100%; max-width: 64px; height: 44px; border-radius: 14px; background: var(--field);
            color: var(--ink); font: 600 22px/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.step-btn:active { background: var(--field-2); }
.step-value { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.step-value input { background: transparent; border: 0; padding: 0; text-align: center; font-size: 40px;
                    font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; height: 52px; }
.step-value input:focus { background: transparent; border: 0; box-shadow: inset 0 -3px 0 var(--ink); }
.step-value span { font-size: 13px; font-weight: 650; color: var(--ink-2); text-align: center; }
.rir-pick legend { font-size: 14px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
/* Assistance bands (Ridhi's pull-ups): one chip per band, in the band's own colour when on. */
.band-pick legend { font-size: 14px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.band-pick legend span { color: var(--muted); font-weight: 600; }
.band-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.band-chip { appearance: none; border: 0; height: 64px; border-radius: 16px; cursor: pointer; display: grid;
             place-content: center; gap: 2px; background: var(--surface); color: var(--ink); font: inherit;
             box-shadow: inset 0 0 0 1.5px var(--field-2), inset 0 -6px 0 var(--band); }
.band-chip span { font-size: 16px; font-weight: 700; }
.band-chip small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.band-chip[aria-pressed="true"] { background: var(--band); color: #1c1c1e; box-shadow: none; }
.band-chip[aria-pressed="true"] small { color: rgba(28, 28, 30, 0.75); }
.band-chip:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.rir-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rir-row label { position: relative; }
.rir-row input { position: absolute; opacity: 0; width: 1px; pointer-events: none; }
.rir-row span { display: grid; place-items: center; height: 46px; border-radius: 14px; background: var(--surface);
                font-weight: 650; font-size: 15px; cursor: pointer; }
.rir-row .target span { box-shadow: inset 0 0 0 1.5px var(--field-2); }
.rir-row input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.rir-row input:focus-visible + span { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.step-advice { margin: 0; color: var(--ink-2); font-size: 15px; }
.set-target { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
              font-size: 15px; color: var(--ink-2); }
.set-target strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.step-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.step-actions .btn { order: -1; }
.step-actions .how { flex: 1; text-align: center; padding-top: 8px; }
.step-actions .how[open] { flex-basis: 100%; order: 3; text-align: left; }
.how p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.hold { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hold-clock { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.hold.running .hold-clock { color: var(--c); }
.checks.big .check { font-size: 16px; padding: 15px 0; }
.step[data-type="checklist"] .step-actions {
  position: sticky; bottom: 0; padding: 14px 0 calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.checks.big .check .box { width: 28px; height: 28px; border-radius: 9px; }

.step-rest { align-items: center; text-align: center; }
.ring { position: relative; width: min(72vw, 280px); aspect-ratio: 1; margin: 8px auto 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--field-2); stroke-width: 9; }
.ring-fill { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
/* Rest turns the whole screen green; the last 5 seconds flash yellow. */
html.phase-rest { --bg: #2c7654; --ink: #f4f5f0; --ink-2: rgba(244, 245, 240, 0.84); --muted: rgba(244, 245, 240, 0.7);
                  --surface: rgba(255, 255, 255, 0.14); --field: rgba(255, 255, 255, 0.16); --field-2: rgba(255, 255, 255, 0.24); }
html.phase-rest.phase-ready { --bg: #f2be22; --ink: #1c1d20; --ink-2: rgba(28, 29, 32, 0.82); --muted: rgba(28, 29, 32, 0.65);
                              --surface: rgba(255, 255, 255, 0.4); --field: rgba(0, 0, 0, 0.08); --field-2: rgba(0, 0, 0, 0.14); }
html.phase-rest body { background: var(--bg); color: var(--ink); transition: background-color 0.3s ease; }
html.phase-rest .ring-fill { stroke: var(--ink); }
html.phase-rest .player-progress i.on { background: var(--ink); opacity: 0.85; }
.ring-time { position: absolute; inset: 0; display: grid; place-items: center; font-size: 60px; font-weight: 700;
             letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.rest-buttons { display: flex; gap: 10px; justify-content: center; }
.rest-buttons button { appearance: none; border: 0; min-width: 76px; height: 46px; border-radius: 14px;
                       background: var(--surface); color: var(--ink); font: 650 15px var(--font); cursor: pointer; }
.upnext { appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer;
          width: 100%; background: var(--surface); border-radius: 22px; padding: 16px 18px; text-align: left;
          display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.upnext > span:first-child { display: flex; flex-direction: column; }
.upnext .kicker { font-size: 13px; }
.upnext-name { margin: 2px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.upnext-detail { margin: 2px 0 0; color: var(--ink-2); }
.move-timer { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.move-phase { font-size: 16px; font-weight: 650; color: var(--ink-2); }
.move-clock { font-size: 74px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
              font-variant-numeric: tabular-nums; }
.move-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--field-2); overflow: hidden; margin-top: 6px; }
.move-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.move-controls { display: flex; flex-direction: column; gap: 10px; }
.step-move[data-done="1"] .kicker::after { content: " · done"; color: var(--good-ink); font-weight: 700; }
.moves { list-style: none; margin: 0; padding: 0; }
.moves li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--hairline); }
.moves li:first-child { border-top: 0; }
.moves .fig-xs { margin-left: 0; order: 2; }
.moves li > div:last-child { flex: 1; }
.bigtimer { display: flex; flex-direction: column; align-items: center; padding: 18px 0; border-radius: 24px;
            background: var(--surface); transition: background 0.3s; }
.bigtimer-phase { font-weight: 700; color: var(--ink-2); }
.bigtimer-clock { font-size: 66px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.step.hard .bigtimer { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
/* Intervals: one screen per round (Rikhil, 2026-10-21) - the round's timer, its bar
   (hard part, a notch, then the walk) and three boxes: speed, peak, lowest in the walk. */
.step-round { gap: 14px; }
.step-round .bigtimer { padding: 14px 18px 16px; gap: 2px; }
.round-bar { position: relative; width: 100%; height: 6px; border-radius: 3px; background: var(--field-2);
             overflow: hidden; margin-top: 10px; }
.round-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.round-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hard); width: 3px;
                    background: var(--surface); }
.round-form { display: flex; flex-direction: column; gap: 12px; }
.round-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* "Next up": what to set the treadmill to, big, right under the timer (Rikhil, 2026-10-21:
   "make the suggested speed more obvious... the suggestion is mixing up with the explanation").
   A set's "Target" card is the same (2026-10-22: "the suggested rep and weight needs to be
   more obvious"). */
.next-up { display: flex; flex-direction: column; gap: 4px; background: var(--surface);
           border-radius: 22px; padding: 14px 18px 16px; }
.next-up-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--ink-2); }
.next-up-head .verdict { text-transform: none; letter-spacing: 0; font-size: 13px; }
.next-up-value { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
                 font-variant-numeric: tabular-nums; }
.next-up-value small { font-size: 17px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.next-up-why { font-size: 14px; color: var(--ink-2); }
.round-field { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
               background: var(--surface); border-radius: 20px; padding: 12px 6px 10px; }
.round-label { font-size: 13px; font-weight: 650; color: var(--ink-2); text-align: center; line-height: 1.2; }
.round-field input { background: transparent; border: 0; padding: 0; text-align: center; font-size: 30px;
                     font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; height: 42px; }
.round-field input:focus { background: transparent; border: 0; box-shadow: inset 0 -3px 0 var(--ink); }
.round-unit { font-size: 12px; color: var(--muted); }
.round-drop { margin: 0; text-align: center; color: var(--ink-2); }
.round-drop strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.step-round[data-done="1"] .kicker::after { content: " · done"; color: var(--good-ink); font-weight: 700; }
html.phase-rest .step-round[data-done="1"] .kicker::after { color: var(--ink); }
.step-finish .step-title { font-size: 38px; }

/* A set fills one phone screen, Done included (Rikhil, 2026-10-19): the player
   is as tall as the screen, the set screen stretches to fill it, and the
   figure takes whatever room is left - as big as the phone allows, with Done
   near the bottom and no scrolling. Done also sticks to the bottom as a safety
   net for small phones. Each stepper is one row (- value +). */
.player:has(> .step-set:not([hidden])) {
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
}
.step-set:not([hidden]) { flex: 1 1 auto; }
.step-set { gap: 12px; padding-top: 6px; }
.step-set .step-title { font-size: 25px; line-height: 1.1; }
.step-set .step-label { color: var(--muted); font-weight: 650; margin-right: 2px; }
.step-set .step-sub { margin-top: -6px; font-size: 14px; }
.step-set .stage { flex: 1 1 0; min-height: 120px; max-height: 360px; height: auto; border-radius: 22px; }
.step-set .stage { position: relative; overflow: hidden; }
/* The figure is pinned inside the box (absolute + inset) rather than sized as a
   % of the box's height: older iOS Safari ignores % heights inside a stretched
   flex box and drew the figure full size, spilling out of the box. */
.step-set .fig-lg { position: absolute; inset: 7% 8%; height: auto; min-width: 0; }
.step-set .fig-lg svg { width: 100%; height: 100%; }
/* How to do it: a small button in the figure's corner; open, it covers the figure. */
.stage-how > summary { position: absolute; top: 8px; right: 8px; z-index: 2; list-style: none; cursor: pointer;
                       padding: 4px 10px; border-radius: 999px; background: var(--field); font-size: 12px;
                       font-weight: 650; color: var(--ink-2); }
.stage-how > summary::-webkit-details-marker { display: none; }
.stage-how[open] > summary { background: var(--ink); color: var(--bg); }
.stage-how > p { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 40px 16px 14px; overflow-y: auto;
                 background: var(--surface); border-radius: 22px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.step-set .set-form { gap: 12px; }
.step-set .stepper { grid-template-columns: auto 1fr auto; grid-template-areas: "less value more";
                     padding: 12px 10px; gap: 6px; border-radius: 22px; }
.step-set .step-btn { width: 46px; height: 46px; border-radius: 14px; }
.step-set .step-value input { font-size: 36px; height: 44px; }
.step-set .step-value span { font-size: 12px; margin-top: -2px; }
.step-set .rir-pick legend { margin-bottom: 6px; font-size: 13px; }
.step-set .rir-row span { height: 44px; border-radius: 13px; }
.step-set .set-target { font-size: 14px; }
.step-set .set-aim { padding: 12px 16px 14px; gap: 2px; }
.step-set .set-aim .next-up-value { font-size: 36px; }
.step-set .set-aim .next-up-why { font-size: 13.5px; line-height: 1.4; }
.step-set .set-form > button[type="submit"] {
  position: sticky; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.celebrate { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 72px); z-index: 50;
             transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 20px;
             border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 15px; white-space: nowrap; }
.celebrate.pop { animation: pop 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } }
.celebrate-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6;
                      stroke-linejoin: round; stroke-linecap: round; display: block; }

/* ---------- workout overview (every set on one page) ---------- */

.session { display: flex; flex-direction: column; gap: 14px; }
.session-top { position: sticky; top: 0; z-index: 6; margin: 0 -20px; padding: 10px 20px 12px;
               background: color-mix(in srgb, var(--bg) 88%, transparent);
               -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.session-top h1 { font-size: 26px; }
.session-top .sub { margin: 4px 0 10px; display: flex; align-items: center; }
.session-stats { display: flex; gap: 28px; align-items: flex-end; }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; font-weight: 650; color: var(--muted); }
.stat strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.session-stats .btn { margin-left: auto; }
.progressbar { margin-top: 12px; height: 5px; border-radius: 3px; background: var(--field-2); overflow: hidden; }
.progressbar i { display: block; height: 100%; background: var(--c); transition: width 0.3s; }

.checklist > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.checklist > summary::-webkit-details-marker { display: none; }
.checklist-title { font-weight: 650; font-size: 17px; }
.checklist-meta { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.checklist[open] > summary { margin-bottom: 8px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li + li { border-top: 0.5px solid var(--hairline); }
.check { appearance: none; border: 0; background: none; width: 100%; display: flex; gap: 14px; align-items: flex-start;
         text-align: left; padding: 12px 0; font: 15px/1.4 var(--font); color: var(--ink); cursor: pointer; }
.check .box { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
              box-shadow: inset 0 0 0 1.75px var(--axis); }
.check .box svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6;
                  stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.check.on .box { background: var(--good); box-shadow: none; }
.check.on .box svg { opacity: 1; }
.check.on .check-text { color: var(--ink-2); }

.superset { display: flex; flex-direction: column; gap: 10px; }
.lift { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 150px; }
.lift-head { display: flex; gap: 12px; align-items: flex-start; }
.lift-label { flex: none; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px;
              border-radius: 11px; background: var(--field); font-size: 13px; font-weight: 700; }
.lift-name { font-size: 17px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.lift-meta { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; }
.advice { margin: 0; color: var(--ink-2); font-size: 14px; }
.advice .verdict { margin-right: 4px; vertical-align: 1px; }

/* Progression verdicts: the label says it, the arrow only repeats it. */
.verdict { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
           background: var(--field); color: var(--ink); font-size: 12px; font-weight: 650; white-space: nowrap; }
.verdict::before { font-weight: 700; color: var(--ink-2); }
.verdict.v-up::before, .verdict.v-harder::before { content: "↑"; color: var(--good-ink); }
.verdict.v-hold::before, .verdict.v-reps::before { content: "→"; }
.verdict.v-down::before, .verdict.v-deload::before { content: "↓"; }
.verdict.v-adjusted::before { content: "↻"; }
.target-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.target-value { font-size: 15px; font-variant-numeric: tabular-nums; }
.target-why { margin: -2px 0 10px; color: var(--ink-2); font-size: 13px; }
.next-row { padding: 10px 0; border-top: 0.5px solid var(--hairline); display: flex; flex-direction: column; gap: 4px; }
.next-row:first-child { border-top: 0; padding-top: 2px; }
.next-name { font-weight: 650; }
.next-row .target-line { margin: 0; }
.gain, .gain-chip { margin: 0; color: var(--good-ink); font-size: 14px; font-weight: 700; }
.gain::before, .gain-chip::before { content: "↗ "; }
.gain-chip { flex: none; font-size: 13px; }
.sets { display: flex; flex-direction: column; gap: 6px; }
.set-head, .set-row { display: grid; align-items: center; gap: 5px;
                      grid-template-columns: 24px minmax(0, 1fr) 58px 48px 44px 42px; }
.m-reps .set-head, .m-reps .set-row { grid-template-columns: 24px minmax(0, 1fr) 62px 44px 42px; }
.m-time .set-head, .m-time .set-row { grid-template-columns: 24px minmax(0, 1fr) 78px 42px; }
.set-head span { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.set-head span:nth-child(2) { text-align: left; }
.set-row { position: relative; border-radius: 14px; transition: background 0.15s, opacity 0.15s; }
.set-num { text-align: center; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.set-prev { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.set-row input, .set-row select { height: 46px; padding: 0 4px; text-align: center; text-align-last: center;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 12px; }
.set-row input::placeholder { color: var(--muted); font-weight: 600; opacity: 1; }
.set-row .tick { appearance: none; border: 0; width: 42px; height: 42px; border-radius: 50%; display: grid;
                 place-items: center; cursor: pointer; background: var(--field); }
.set-row .tick svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2.6;
                     stroke-linecap: round; stroke-linejoin: round; }
.set-row.done { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.set-row.done input, .set-row.done select { background: transparent; }
.set-row.done .tick { background: var(--good); }
.set-row.done .tick svg { stroke: #fff; }
.set-row.saving { opacity: 0.6; }
.set-row .pr { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; display: grid; place-items: center; }
.set-row .pr svg, .record-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6;
                                     stroke-linejoin: round; stroke-linecap: round; }
.set-row:has(.pr:not([hidden])) .set-num { opacity: 0; }
.lift-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lift-foot .how { margin-left: auto; }
.lift-foot .how[open] { flex-basis: 100%; }
.how-card p { margin: 10px 0 0; color: var(--ink-2); }
.intervals { display: flex; flex-direction: column; gap: 12px; }
.intervals .hint { margin: 0; }
.itimer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; }
.itimer-phase { font-weight: 700; color: var(--ink-2); }
.itimer-clock { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.intervals.hard { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.metrics { display: grid; gap: 12px; }
@media (min-width: 560px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.interval-log { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.interval-log > .metrics, .round-table { width: 100%; }
.round-table { display: grid; grid-template-columns: 22px repeat(var(--cols), minmax(0, 1fr)); gap: 6px 8px;
               align-items: center; }
.round-th { font-size: 13px; font-weight: 650; color: var(--ink-2); line-height: 1.2; }
.round-th small { font-weight: 500; color: var(--muted); font-size: 12px; }
.round-n { font-weight: 700; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.round-table input { text-align: center; padding: 10px 6px; font-variant-numeric: tabular-nums; }
.finish { margin-top: 6px; }
.restbar { position: fixed; left: 0; right: 0; z-index: 25; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); padding: 0 12px; }
.restbar-in { max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
              padding: 12px 12px 12px 18px; border-radius: 20px; background: var(--ink); color: var(--bg);
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.restbar.go .restbar-in { background: var(--good); color: #fff; }
.rest-text { display: contents; }
.rest-label { font-size: 13px; font-weight: 650; opacity: 0.85; }
.rest-clock { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; order: -1; }
.rest-next { order: 5; flex-basis: 100%; font-size: 13px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-actions { display: flex; gap: 6px; margin-left: auto; }
.rest-actions button { appearance: none; border: 0; min-width: 46px; height: 40px; padding: 0 10px; border-radius: 12px;
                       background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; font: 700 14px var(--font); cursor: pointer; }
body.resting .toast { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 96px); }
body:has(.restbar:not([hidden])) .page { padding-bottom: 84px; }
@media (min-width: 820px) { .restbar { bottom: 20px; } }

/* summary */
.records { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.record { flex: none; min-width: 176px; display: flex; flex-direction: column; gap: 2px; padding: 16px;
          border-radius: 20px; background: var(--surface); }
.record-icon svg { width: 24px; height: 24px; }
.record-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.record-name { font-weight: 650; }
.record-gain { color: var(--good-ink); font-size: 13px; font-weight: 650; }
.summary { display: flex; flex-direction: column; gap: 16px; }
.summary .tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .summary .tiles { grid-template-columns: repeat(4, 1fr); } }
.summary .tiles.tiles-3 { grid-template-columns: repeat(3, 1fr); }
/* This 4 x 4 against the last one: KPI row, heart-rate lines over the zone band (this time in
   the person's colour, last time grey), each interval's speed underneath. */
.ivc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ivc-kpi { display: flex; flex-direction: column; min-width: 0; }
.ivc-kpi-label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ivc-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.ivc-kpi-value small { margin-left: 3px; font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.ivc-change { font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.ivc-change.c-up { color: var(--good-ink); }
.ivc-change.c-up::before { content: "↑ "; }
.ivc-change.c-down::before { content: "↓ "; }
.ivc-change.c-same, .ivc-change.c-note { color: var(--muted); }
.ivc-chart { margin: 18px 0 0; }
.ivc-chart-title { margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 650; }
.ivc-plot { position: relative; height: 150px; margin-top: 26px; }
.ivc-plot svg, .ivc-now { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ivc-band { fill: var(--good); opacity: 0.12; }
.ivc-grid { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.ivc-plot path { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round;
                 vector-effect: non-scaling-stroke; }
.ivc-plot .ivc-then { stroke: var(--muted); stroke-width: 1.5; }
.ivc-line { stroke: var(--c); }
.ivc-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
           background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.ivc-dot-then { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--surface);
                box-shadow: inset 0 0 0 1.5px var(--muted); }
.ivc-peak { position: absolute; transform: translate(-50%, calc(-100% - 7px)); font-size: 12px; font-weight: 700;
            line-height: 1; font-variant-numeric: tabular-nums; }
/* This time's line draws itself in, left to right, once. */
.ivc-now { animation: ivc-draw 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.15s backwards; }
@keyframes ivc-draw { from { clip-path: inset(-30px 100% -10px 0); } to { clip-path: inset(-30px 0 -10px 0); } }
@media (prefers-reduced-motion: reduce) { .ivc-now { animation: none; } }
.ivc-cols { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); margin: 10px 0 0; padding: 0;
            list-style: none; text-align: center; }
.ivc-cols li { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.ivc-n { color: var(--muted); font-size: 12px; font-weight: 600; }
.ivc-speed { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ivc-speed small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ivc-cols .ivc-change { font-size: 12px; }
.ivc-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; color: var(--ink-2); font-size: 13px; }
.ivc-key span { display: inline-flex; align-items: center; gap: 6px; }
.ivc-swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.ivc-swatch-then { height: 2px; background: var(--muted); }
.ivc-swatch-zone { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--good) 20%, var(--surface)); }

/* progress */
.lift-trends { list-style: none; margin: 0; padding: 0; }
.lift-trends li + li { border-top: 0.5px solid var(--hairline); }
.lift-trend { display: grid; grid-template-columns: minmax(0, 1fr) 40%;
              grid-template-areas: "name spark" "value spark" "sub spark"; column-gap: 12px; padding: 14px 0;
              text-decoration: none; align-items: center; }
.lt-name { grid-area: name; font-weight: 650; }
.lt-value { grid-area: value; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lt-sub { grid-area: sub; color: var(--ink-2); font-size: 13px; }
.lt-spark { grid-area: spark; }
.lt-spark .spark { width: 100%; max-width: none; }

/* check-in */
.facts { margin: 14px 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts dt { font-size: 13px; color: var(--ink-2); font-weight: 650; }
.facts dd { margin: 2px 0 0; font-weight: 700; }
.week-sessions { list-style: none; margin: 0; padding: 0; }
.week-sessions li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 10px 0;
                    border-top: 0.5px solid var(--hairline); align-items: center; }
.week-sessions li.rest { color: var(--muted); }
.ws-day { font-size: 13px; font-weight: 650; color: var(--muted); }
.ws-name { font-weight: 600; }
.week-sessions li.done .ws-name::after { content: " ✓"; color: var(--good-ink); font-weight: 700; }
.ws-meta { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.score-grid { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 12px; align-items: end; }
.score-when { font-weight: 650; display: flex; flex-direction: column; padding-bottom: 12px; }
.score-when .muted { font-size: 13px; font-weight: 500; }

@media (prefers-color-scheme: dark) {
  html.phase-rest:not([data-theme="light"]) { --bg: #246447; }
  html.phase-rest.phase-ready:not([data-theme="light"]) { --bg: #e5b31d; }
}
html.phase-rest[data-theme="dark"] { --bg: #246447; }
html.phase-rest.phase-ready[data-theme="dark"] { --bg: #e5b31d; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- notification settings ---------- */
.notify-form { gap: 0; }
.notify-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--field); }
.notify-row:last-of-type { border-bottom: 0; }
.notify-row:first-child { padding-top: 0; }
.notify-toggle { flex: 1; display: flex; align-items: flex-start; gap: 12px; min-width: 0; cursor: pointer; }
.notify-toggle input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.notify-text { display: flex; flex-direction: column; gap: 2px; }
.notify-text strong { font-size: 15px; }
.notify-text span { color: var(--ink-2); font-size: 13px; }
.notify-time { flex: none; width: 104px; font-size: 16px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink); }
.notify-form .btn { margin-top: 16px; }
.notify-use { margin: 12px 4px 0; }

/* ---------- health: medical reports and markers ---------- */
.card.list-card { padding-top: 4px; padding-bottom: 4px; }
.list-card-title { margin: 12px 0 2px; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
       padding: 11px 0; text-decoration: none; min-height: 52px; }
.res-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.res-name { font-weight: 650; }
.res-meta { color: var(--muted); font-size: 13px; }
.res-note { color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.res-text { color: var(--ink); font-size: 14px; }
.res-text.out { font-weight: 650; }
.res-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.res-value { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-value small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* Where a value sits: the green part is the lab's normal range. The status
   chip beside it says High / Low in words, so the colour is never alone. */
.gauge { grid-column: 1 / -1; position: relative; height: 6px; margin: 7px 0 2px; border-radius: 3px;
         background: var(--field-2); }
.gauge-zone { position: absolute; top: 0; bottom: 0; border-radius: 3px;
              background: color-mix(in srgb, var(--good) 42%, var(--field-2)); }
.gauge-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
             background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.gauge.out .gauge-dot { background: var(--gold); }
.gauge-big { height: 8px; margin: 12px 0 10px; border-radius: 4px; }
.gauge-big .gauge-zone { border-radius: 4px; }
.gauge-big .gauge-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.res-card { padding-top: 0; padding-bottom: 0; }
.res-card > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
                      padding: 15px 0; }
.res-card > summary::-webkit-details-marker { display: none; }
.res-card > summary::after { content: "›"; margin-left: 2px; color: var(--muted); font-size: 19px; line-height: 1;
                             transition: transform .15s; }
.res-card[open] > summary::after { transform: rotate(90deg); }
.res-card[open] > summary { padding-bottom: 4px; }
.res-card[open] > .list { padding-bottom: 4px; }
.res-card-name { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.res-card-count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }
.report-summary { margin: 0; line-height: 1.45; }
.report-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.report-counts strong { color: var(--ink); font-size: 15px; }
.report-summary + .report-counts { padding-top: 12px; border-top: 0.5px solid var(--hairline); }
.doc-icon { flex: none; display: grid; place-items: center; width: 38px; height: 44px; border-radius: 8px;
            background: var(--field); color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.notes-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.report-foot { margin: 2px 4px 0; }
.marker-now { display: flex; flex-direction: column; }
.marker-value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.marker-now .hint + .hint { margin-top: 4px; }
.chart-key { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.band-key { width: 14px; height: 10px; border-radius: 2px; background: var(--good); opacity: 0.25; flex: none; }
.tile-link { text-decoration: none; }
.tile-flag { color: var(--ink); font-weight: 650; }
.res-table-wrap { overflow-x: auto; margin: 4px 0 12px; }
.res-table { font-size: 13px; }
.res-table caption { text-align: left; font-weight: 650; font-size: 14px; color: var(--ink-2); padding: 8px 0 2px; }
.res-table th small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.res-table thead th { vertical-align: bottom; padding-left: 8px; }
.res-table tbody th { font-weight: 600; white-space: nowrap; padding-right: 8px; }
.res-table td { padding-left: 8px; white-space: nowrap; }
.marker-change { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.marker-now .hint strong { color: var(--ink-2); font-weight: 650; }
.doc-pages { display: flex; flex-direction: column; gap: 12px; }
.doc-page { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* ================= Finance ================= */
/* The household's money (app/finance.py). Same cards as everywhere else;
   gains get a word or arrow with their colour, never colour alone. */

.head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.head-tools .head-add { margin-left: 0; }
.head-eye { appearance: none; border: 0; padding: 0; display: grid; place-items: center; width: 32px; height: 32px;
            border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.head-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
.head-eye .eye-shut, .hide-money .head-eye .eye-open { display: none; }
.hide-money .head-eye .eye-shut { display: block; }
/* Hide amounts: every S$ figure (and the chart's numbers) blurred. */
.hide-money .money, .hide-money .money-chart .chart-plot text, .hide-money .money-chart .tip,
.hide-money .money-chart .chart-table td.n { filter: blur(7px); }

.hero-value { font-size: 38px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.hero-delta { margin: 6px 0 12px; font-size: 14px; color: var(--ink-2); }
.up { color: var(--good-ink); font-weight: 650; white-space: nowrap; }
.down { color: var(--danger); font-weight: 650; white-space: nowrap; }
.flat { color: var(--ink-2); font-weight: 650; white-space: nowrap; }
.stale { color: var(--gold); }
.empty-card { display: flex; flex-direction: column; gap: 10px; }
.empty-card .sub { margin: 0; }

.big-gain { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.big-gain small { font-size: 15px; font-weight: 650; margin-left: 6px; letter-spacing: 0; }
.pv { display: grid; gap: 8px; margin-top: 12px; }
.pv-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.pv-row > span:first-child { color: var(--ink-2); font-weight: 600; }
.pv-row b { font-variant-numeric: tabular-nums; font-weight: 650; }
.pv-bar { display: block; height: 12px; border-radius: 4px; }
.pv-bar.paid { background: var(--field-2); }
.pv-bar.worth { background: var(--ink); }
.pv + .hint { margin-top: 10px; }

.alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0;
             border-top: 0.5px solid var(--hairline); text-decoration: none; }
.card-title + .alloc-row { border-top: 0; padding-top: 2px; }
.alloc-name { font-weight: 650; min-width: 0; }
.alloc-name small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; }
.alloc-num { text-align: right; font-variant-numeric: tabular-nums; }
.alloc-num b { font-weight: 650; }
.alloc-num small { display: block; color: var(--muted); font-size: 13px; }
.track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }

.chev { color: var(--muted); font-size: 22px; line-height: 1; }

.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.card-top .card-title { margin: 0; }
.card-top .total { font-weight: 650; font-variant-numeric: tabular-nums; }
.card-hint { margin: 0 0 2px; }
.fin-row .list-main { display: block; }
.fin-side { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right;
            font-variant-numeric: tabular-nums; }
.fin-side b { font-weight: 650; }
.fin-side small { font-size: 13px; }
li.list-row { list-style: none; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0;
      border-top: 0.5px solid var(--hairline); font-variant-numeric: tabular-nums; }
.card-title + .kv { border-top: 0; padding-top: 0; }
.kv > span:first-child { color: var(--ink-2); }
.kv > span:last-child { text-align: right; }
.notes-text { margin: 0; white-space: pre-wrap; color: var(--ink-2); }
.center-actions { justify-content: center; }
.price-note { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0; }
.price-note .hint { margin: 0; }
.price-error { color: var(--danger); }
.form-part { display: flex; flex-direction: column; gap: 16px; }
.legend { display: flex; gap: 14px; margin: -2px 0 8px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 0; border-top: 2.25px solid var(--ink); }
.legend i.dash { border-top: 2.25px dashed var(--muted); }
.chart-plot .series-line2 { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
@media (max-width: 420px) {
  .hero-value { font-size: 34px; }
  .subtabs .subtab { padding: 8px 12px; }
}
body[data-section="finance"] .card > .btn-wide { margin-top: 12px; }

/* ================= Sections ================= */
/* Two sections, one app (Rikhil, 2026-10-19): the body side and Money. The
   switch sits on the first row of each tab's first page (level with the
   avatar on phones) and opens a sheet with both sections. */
.section-row { display: flex; align-items: center; min-height: 32px; margin-bottom: -4px; }
.section-switch { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 1px;
                  padding: 6px 7px 6px 12px; border-radius: 999px; background: var(--surface); color: var(--ink);
                  font: 650 14px var(--font); cursor: pointer; }
.section-switch .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.section-switch:active { transform: scale(0.97); }
.sheet-cover { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
               background: rgba(0, 0, 0, 0.3); }
.sheet-cover[hidden] { display: none; }
.sheet { width: 100%; max-width: 520px; background: var(--bg); border-radius: 22px 22px 0 0;
         padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
         box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2); animation: sheet-up 0.2s ease-out; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } }
.sheet-title { margin: 0 0 4px 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface);
             color: var(--ink); text-decoration: none; }
.sheet-row > span { flex: 1; min-width: 0; }
.sheet-row b { display: block; font-weight: 650; }
.sheet-row small { display: block; color: var(--ink-2); font-size: 13px; }
.sheet-row i { font-style: normal; font-weight: 700; }
.sheet-row.quiet { justify-content: center; background: transparent; color: var(--ink-2); font-weight: 650; }
@media (min-width: 820px) { .sheet-cover { align-items: center; } .sheet { border-radius: 22px; } }

/* ================= Money: cash flow, cards, expenses ================= */
.month-pick { display: flex; align-items: center; gap: 10px; }
.month-pick strong { font-size: 15px; font-weight: 650; }
.month-pick .week-arrow.off { opacity: 0.35; pointer-events: none; }
.kv small.kv-sub { display: block; font-size: 12px; color: var(--muted); }
.kv.quiet > span { color: var(--muted); }
.kv a { color: inherit; text-decoration: none; }
.more-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 650; color: var(--ink-2); text-decoration: none; }
/* Cards as a wallet (Rikhil, 2026-10-21): each person's cards in use stacked, each showing its
   top strip and the last one all of it; a card's height is 63.05% of its width (1.586:1). */
.wallet { margin: 18px 0 0; }
.wallet-title { margin: 0 4px 10px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.wallet-stack { display: flex; flex-direction: column; padding-bottom: 4px; }
.wallet-item { position: relative; display: block; border-radius: 14px; text-decoration: none; color: inherit;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.10), 0 10px 22px rgba(0, 0, 0, 0.16); transition: transform .2s ease; }
.wallet-item + .wallet-item { margin-top: calc(58px - 63.05%); }
@media (hover: hover) { .wallet-item:not(:last-child):hover { transform: translateY(-10px); } }
.wallet-item:active { transform: scale(0.99); }
.wallet-due { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 650; color: #fff; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wallet-due.bad { background: color-mix(in srgb, var(--danger) 85%, #000); }
.wallet .unused-cards { margin-top: 12px; border-top: 0; padding-top: 16px; }
.card-art { display: block; width: 100%; aspect-ratio: 1.586; object-fit: cover; border-radius: 14px; }
.card-plain { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.586; padding: 16px 18px;
  border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.cp-bank { font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }
.cp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cp-num { font-size: 17px; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.cp-name { font-size: 12.5px; opacity: 0.8; text-align: right; }
/* A card's own page: the card first, as in the wallet. */
.card-hero { max-width: 420px; margin: 4px auto 14px; border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.card-hero .card-art, .card-hero .card-plain { border-radius: 16px; }
/* Small, in a list: the card's picture, or its colours and last 4 digits. */
.card-thumb { flex: none; width: 46px; aspect-ratio: 1.586; border-radius: 5px; overflow: hidden; }
.card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-thumb-plain { display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.status-chip.s-bad { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.status-chip.s-bad > span { color: var(--danger); }
.fin-side .status-chip { margin-top: 3px; }
.avg-track { position: relative; overflow: visible; }
.avg-track em { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--ink-2); }
.cat-link { text-decoration: none; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-plot .bar.neg { fill: var(--danger); }
.doc-pages { display: flex; flex-direction: column; gap: 10px; }
.card-top + .kv { border-top: 0; }
.card form + .money-chart { margin-top: 14px; }
.doc-row { gap: 12px; }
.doc-kind { flex: none; display: grid; place-items: center; width: 44px; height: 30px; border-radius: 6px;
            background: var(--field-2); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.doc-add { margin: 12px 0 0; }
.doc-pick { position: relative; overflow: hidden; cursor: pointer; margin-top: 0; }
.doc-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.unused-cards { border-top: 0.5px solid var(--hairline); padding-top: 12px; margin-top: 2px; }
.list + .unused-cards { margin-top: 0; }
.unused-cards[open] > summary { margin-bottom: 2px; }
.unused-cards .list-main { color: var(--ink-2); }
.holder-label { margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; }
/* Assets groups fold like Health's marker cards: name and count, the total, a chevron. */
.fin-group > summary { align-items: center; }
.fin-group .res-card-name small { margin-left: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.fin-group > summary .total { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.fin-group[open] > summary + .card-hint { margin-top: -2px; }
.fin-group > summary + .holder-label { margin-top: 0; }
.card-top + .holder-label, .card-hint + .holder-label { margin-top: 4px; }
/* A watch's notes: small, folded away. */
.notes-fold > summary { font-size: 14px; }
.notes-small { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.notes-small b { color: var(--ink); font-weight: 650; }
/* A watch's own page and a watch flip's page: its cut-out picture straight on the page
   (Rikhil, 2026-10-21: "make the pictures to no background"). */
.watch-hero { display: flex; justify-content: center; margin: 2px 0 6px; }
.watch-hero img { display: block; max-width: 100%; max-height: 380px; object-fit: contain; }
.flip-title { font-size: 24px; }
.flip-notes { margin: 10px 0 0; font-size: 14px; }
.earners { margin-top: 10px; }
/* Cash flow (Rikhil, 2026-10-19: "more graphics and less numbers"): each card keeps one
   number and a sentence; the figures fold away under "The numbers". */
.card-say { margin: 2px 0 12px; color: var(--ink-2); font-size: 14px; }
.card-say b { color: var(--ink); font-weight: 650; }
.chart-plot .ghost-bar { fill: none; stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-plot text.tick-on, .chart-plot .flag-label { fill: var(--ink); font-weight: 650; }
.not-counted { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px;
               padding-top: 10px; border-top: 0.5px solid var(--hairline); color: var(--muted); font-size: 13px;
               font-variant-numeric: tabular-nums; }
.not-counted small { display: block; font-size: 12px; }
.cpf-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; padding: 6px 0; }
.cpf-who { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.cpf-stack { display: flex; gap: 2px; height: 22px; }
.cpf-stack i { display: grid; place-items: center; min-width: 0; overflow: hidden; border-radius: 4px;
               font: 650 11px var(--font); font-style: normal; color: var(--surface); }
.cpf-oa { background: var(--ink); }
.cpf-sa { background: var(--ink-2); }
.cpf-ma { background: var(--axis); }
.cpf-stack i.cpf-ma { color: var(--ink); }
.cpf-legend { margin: 10px 0 0; }
.cpf-legend i { width: 10px; height: 10px; border: 0; border-radius: 3px; }
.fold-body { padding-bottom: 14px; }
.fold-body > .holder-label:first-child { margin-top: 0; }
.fin-group > summary .res-card-name { flex: 1; }
.fold-body .hint { margin-top: 12px; }
/* Investments: "Where it is" rows open to their assets (one page, no Assets tab). */
.alloc-fold + .alloc-fold { border-top: 0.5px solid var(--hairline); }
.alloc-fold > summary.alloc-row { grid-template-columns: minmax(0, 1fr) auto 12px; list-style: none; cursor: pointer;
                                  border-top: 0; }
.alloc-fold > summary.alloc-row::-webkit-details-marker { display: none; }
.alloc-fold > summary.alloc-row::after { content: "›"; grid-column: 3; grid-row: 1; align-self: center;
                                         color: var(--muted); font-size: 19px; line-height: 1; transition: transform .15s; }
.alloc-fold[open] > summary.alloc-row::after { transform: rotate(90deg); }
.card-title + .alloc-fold > summary.alloc-row { padding-top: 2px; }
/* Cash flow's year: net income, income and expenses as two bars, then each month. */
.year-bars { display: grid; gap: 10px; margin: 14px 0 18px; }
.year-bar span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px;
  color: var(--ink-2); font-size: 13px; font-weight: 600; }
.year-bar b { color: var(--ink); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.year-bar i { display: block; height: 14px; border-radius: 4px; background: var(--ink); }
.year-bar.out i { background: var(--muted); }
.months-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px;
  color: var(--ink-2); font-size: 13px; font-weight: 600; }
.months-head small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
/* The year's statement: a line a group, opening to its months. */
.st-head { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0 6px; font-weight: 650; }
.st-head b { font-weight: 650; font-variant-numeric: tabular-nums; }
.st-head:not(:first-of-type) { margin-top: 12px; }
.st-row { border-top: 0.5px solid var(--hairline); }
.st-head + .st-row, .card-title + .st-row { border-top: 0; }
.st-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 8px; align-items: center; padding: 9px 0 9px 16px; }
.st-row > summary::-webkit-details-marker { display: none; }
.st-row > summary::after { content: "›"; color: var(--muted); font-size: 17px; line-height: 1; transition: transform .15s; }
.st-row[open] > summary::after { transform: rotate(90deg); }
.st-row > summary b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* A line that opens a page of its own (Miles' cards, 2026-10-26). */
.st-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 8px; align-items: center;
  padding: 9px 0 9px 16px; color: inherit; text-decoration: none; }
a.st-line::after { content: "›"; color: var(--muted); font-size: 17px; line-height: 1; }
.st-line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.st-months { display: grid; gap: 2px; padding: 0 20px 8px 16px; }
.st-months a { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: 13.5px;
  font-variant-numeric: tabular-nums; text-decoration: none; }
.st-pays { padding: 0 20px 10px 16px; }   /* a category's month, opened: its payments */
.duo-bars + .flips-net { margin-top: 12px; }   /* Miles' Watch flips: the net under the two bars */
.flips-net b { font-weight: 650; font-variant-numeric: tabular-nums; }
/* A month's page: the month between its arrows, then its every flow, grouped, then Net income. */
.month-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.month-head h1 { margin: 0; }
.month-head .week-arrow { width: 36px; height: 36px; background: var(--surface); font-size: 20px; }
.month-head .week-arrow.off { opacity: 0.35; pointer-events: none; }
.neg-value { color: var(--danger); }
.duo-bars { display: grid; gap: 6px; margin-top: 12px; }
.duo-bars > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.duo-bars span { color: var(--ink-2); font-weight: 600; }
.duo-bars i { display: block; height: 10px; border-radius: 4px; background: var(--ink); }
.duo-bars .out i { background: var(--muted); }
.duo-bars b { font-weight: 650; font-variant-numeric: tabular-nums; }
.flow-sec { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.flow-group + .flow-sec, .empty + .flow-sec { margin-top: 18px; }
.flow-group { padding: 8px 0 0; }
.flow-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 650; }
.flow-head b { font-weight: 650; font-variant-numeric: tabular-nums; }
.flow-line { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; margin-top: 3px;
  color: var(--ink-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.flow-line > span:first-child { color: var(--muted); }
.flow-line > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-line > span:last-child { color: var(--ink); }
a.flow-more { display: block; margin-top: 3px; padding-left: 54px; color: var(--muted); font-size: 13px; text-decoration: none; }
/* Expenses' month page: every payment, each a link, with its trip or card under its name. */
a.flow-line { text-decoration: none; }
.pay-line { margin-top: 0; padding: 7px 0; border-top: 0.5px solid var(--hairline); align-items: baseline; }
.flow-head + .pay-line, .flow-group > .pay-line:first-child { border-top: 0; }
.pay-line > span:nth-child(2) { color: var(--ink); }
.pay-line small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.flow-card .card-top + .flow-group { padding-top: 4px; }
.flow-net { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1.5px solid var(--ink); font-weight: 700; font-size: 17px; }
.flow-net b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Liquid / Illiquid above their rows on Investments. */
.alloc-side { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 2px;
  color: var(--muted); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.card-title + .alloc-side { margin-top: 2px; }
.alloc-side + .alloc-fold > summary.alloc-row { padding-top: 6px; }
/* Net worth: today's liquid (aqua) / illiquid (grey) as one bar over the line,
   its two figures under it; the Assets card's two headings use the same swatches. */
.split-bar { display: flex; gap: 2px; height: 10px; margin: 2px 0 8px; }
.split-bar i { display: block; height: 100%; border-radius: 4px; }
.split-key { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 24px;
  color: var(--ink-2); font-size: 13px; }
.split-key > span:last-child { text-align: right; }
.split-key b { display: block; color: var(--ink); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.alloc-side i { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border-radius: 3px; vertical-align: -1px; }
.split-bar .split-lo, .split-lo > i { background: var(--aqua); }
.split-bar .split-hi, .split-hi > i { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
/* A group's share beside its name on Investments. */
.alloc-pct { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.alloc-items { margin: 0 0 10px; padding: 2px 12px; border-radius: 14px; background: var(--bg); }
.alloc-items .holder-label:first-child { margin-top: 8px; }

/* Expenses' Income tax card is one link to the tax page. */
.tax-card { display: block; color: inherit; text-decoration: none; }
.head-stack { flex: 1; min-width: 0; }
/* Notifications: this phone's Turn on / Send a test / Turn off (Web Push). */
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.push-actions [hidden] { display: none; }


/* ================= Travel ================= */
/* The third section (Rikhil, 2026-10-20; app/travel.py, wallet.py): trips as
   day-by-day plans with flights drawn as boarding passes, a map, and travel
   documents as cards stacked like Apple Wallet (one colour per kind). */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; }
.quiet-total { color: var(--ink-2); font-size: 13px; font-weight: 600 !important; }
.chips-row { display: flex; align-items: center; gap: 10px; }
.chips-row .chips { flex: 1; min-width: 0; }
.chips-row .head-add { margin-left: auto; flex: none; }
.ticon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
         stroke-linecap: round; stroke-linejoin: round; }

/* Trips */
.trip-hero-card { display: block; color: inherit; text-decoration: none; }
.trip-hero { display: flex; align-items: center; gap: 12px; }
.trip-hero-card .trip-hero { margin-top: 6px; }
.trip-hero .sub { margin: 2px 0 0; font-size: 14px; display: block; }
.trip-hero .dot { margin-right: 2px; }
.flag-big { font-size: 40px; line-height: 1; flex: none; width: 46px; text-align: center; }
.flag-small { font-size: 24px; line-height: 1; flex: none; width: 30px; text-align: center; }
.trip-hero-name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.trip-title { font-size: 26px; }
.trip-tiles { margin-top: 14px; gap: 8px; }
.trip-tiles .tile { background: var(--field); border-radius: 13px; padding: 9px 11px; }
.trip-tiles .tile-value { font-size: 19px; }
.trip-row { gap: 10px; }
.nudge-card { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.nudge-mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
              background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); font-weight: 800; }
.nudge-text { flex: 1; min-width: 0; }
.nudge-text b { display: block; font-weight: 650; }
.nudge-text span { display: block; color: var(--ink-2); font-size: 13.5px; }

.trip-note { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--field);
              color: var(--ink-2); font-size: 12px; font-weight: 650; }
.trip-hero .trip-note { display: table; }
.year-total { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.year-sub { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* Before you go */
.ready-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 0.5px solid var(--hairline);
             color: inherit; text-decoration: none; }
.card-title + .ready-row { border-top: 0; padding-top: 2px; }
.ready-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
              font-size: 13px; font-weight: 800; margin-top: 1px; background: var(--field); color: var(--ink-2); }
.ready-mark.ok { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--good-ink); }
.ready-mark.no { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.ready-text b { display: block; font-weight: 650; }
.ready-text span { display: block; color: var(--ink-2); font-size: 13.5px; }

/* A trip's plan: day by day */
.tl-day { display: flex; flex-direction: column; gap: 8px; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px 0; }
.tl-head b { font-size: 15px; font-weight: 700; }
.tl-head small { color: var(--muted); font-size: 13px; font-weight: 600; }
.tl-item { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 16px;
           padding: 12px 14px; color: inherit; text-decoration: none; }
.tl-item.quiet { background: transparent; border: 1.5px dashed var(--field-2); color: var(--muted); }
.tl-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--field); display: grid; place-items: center;
           flex: none; color: var(--ink); }
.tl-text { flex: 1; min-width: 0; }
.tl-text b { display: block; font-weight: 650; }
.tl-text span { display: block; color: var(--ink-2); font-size: 13px; }
.tl-item.quiet .tl-text b { color: var(--ink-2); }
.tl-time { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; font-size: 14px; }
.kind-row { gap: 12px; }
.kind-swatch { width: 34px; height: 22px; border-radius: 5px; background: var(--wc); flex: none; }

/* A flight as a boarding pass */
.bpass { display: block; background: var(--surface); border-radius: 18px; color: inherit; text-decoration: none; overflow: hidden; }
.bpass > span { display: block; }
.bpass-top { display: flex !important; justify-content: space-between; align-items: center; gap: 10px;
             padding: 12px 16px 0; font-size: 13px; color: var(--ink-2); font-weight: 650; }
.bpass-air { color: var(--ink); font-weight: 700; }
.bpass-mid { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; padding: 8px 16px 12px; }
.bpass-mid > span > span { display: block; }
.bpass-code { font-size: 34px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; }
.bpass-time { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 4px;
              font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.bpass-time sup { font-size: 10px; margin-left: 1px; }
.bpass-place { color: var(--ink-2); font-size: 12.5px; }
.bpass-end { text-align: right; }
.bpass-dur { display: flex !important; flex-direction: column; align-items: center; gap: 2px; color: var(--muted);
             font-size: 12px; padding-bottom: 20px; }
.bpass-cut { position: relative; height: 0; border-top: 1.5px dashed var(--field-2); margin: 0 14px; }
.bpass-cut::before, .bpass-cut::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px;
                                        border-radius: 50%; background: var(--bg); }
.bpass-cut::before { left: -24px; }
.bpass-cut::after { right: -24px; }
.bpass-foot { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 16px 13px; }
.bpass-foot small { display: block; color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.bpass-foot b { font-weight: 650; font-size: 14px; }
.bpass.big .bpass-code { font-size: 44px; }

/* Booking and document details */
.kv-copy { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.copy-btn { appearance: none; border: 0; font: 700 12px var(--font); color: var(--ink-2); background: var(--field);
            padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.kv-link { color: inherit; text-decoration: none; }
.kv-link > span:last-child { display: flex; flex-direction: column; align-items: flex-end; }
.item-notes { margin-top: 10px; font-size: 14px; }
.secret .secret-real, .secret.revealed .secret-mask { display: none; }
.secret.revealed .secret-real { display: inline; }
.lvl-good { color: var(--good-ink); font-weight: 650; }
.lvl-watch { color: var(--gold); font-weight: 650; }
.lvl-bad { color: var(--danger); font-weight: 650; }
.check-line { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.check-line input { width: 20px; height: 20px; -webkit-appearance: checkbox; appearance: auto; }
.track i.miles { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, var(--ink-2) 3px 6px); }
.bars .alloc-row:first-child { border-top: 0; }

/* Wallet: one stack per person; each card shows its top strip, the last one in full */
.wgroup { display: flex; flex-direction: column; gap: 8px; }
.wgroup-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: baseline;
               margin: 0; padding: 8px 2px 2px; background: var(--bg); font-size: 17px; font-weight: 700; }
.wgroup-head small { color: var(--muted); font-size: 13px; font-weight: 600; }
.wgroup-head .dot { width: 10px; height: 10px; }
.wstack { display: flex; flex-direction: column; max-width: 440px; width: 100%; }
.wcard { position: relative; display: block; width: 100%; aspect-ratio: 1.586; border-radius: 16px; padding: 14px 16px;
         color: var(--wink, #fff); background: var(--wc); text-decoration: none; overflow: hidden; flex: none;
         box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.10) inset, 0 -6px 16px rgba(0, 0, 0, 0.10); }
.wcard::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                 background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%); }
.wstack .wcard + .wcard { margin-top: calc(56px - 63.05%); }
.wcard.ended { filter: saturate(0.25); }
@media (hover: hover) { .wstack a.wcard { transition: transform .15s; } .wstack a.wcard:hover { transform: translateY(-4px); } }
.wcard > span { display: block; position: relative; }
.wtop { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; height: 28px; }
.wkind { font-size: 13px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.wwho { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.wtag { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 12px; }
.wtag.bad { background: #fff; color: #b42828; }
.wtag.watch { background: #fff; color: #8a5300; }
.wcrest { position: absolute !important; right: 14px; top: 64px; width: 54px; height: 54px; border-radius: 50%;
          border: 1.5px solid currentColor; opacity: 0.4; display: grid !important; place-items: center;
          font-size: 13px; font-weight: 800; letter-spacing: 0.05em; }
.wissuer { margin-top: 10px; font-size: 12.5px; opacity: 0.8; font-weight: 600; padding-right: 64px; }
.wname { margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: 0.01em; padding-right: 64px; }
.wgrid { position: absolute !important; left: 16px; right: 16px; bottom: 14px; display: grid !important;
         grid-template-columns: 1.15fr 1.1fr 1fr; gap: 10px; }
.wgrid > span { min-width: 0; }
.wgrid small { display: block; font-size: 10.5px; font-weight: 700; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.wgrid b { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.wmissing { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px;
            border: 1.5px dashed var(--axis); color: inherit; text-decoration: none; max-width: 440px; }
.wmissing-plus { width: 30px; height: 30px; border-radius: 50%; background: var(--field); display: grid; place-items: center;
                 flex: none; color: var(--ink-2); font-size: 18px; font-weight: 600; }
.old-docs { max-width: 440px; }
@media (max-width: 380px) { .wgrid b { font-size: 13px; } .wname { font-size: 15px; } }

/* A trip's payments, folded by part (Food, Transport, ...) */
.pay-group { border-top: 0.5px solid var(--hairline); }
.card-top + .pay-group { border-top: 0; }
.pay-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.pay-group > summary::-webkit-details-marker { display: none; }
.pay-group > summary::after { content: "›"; color: var(--muted); font-size: 19px; line-height: 1; transition: transform .15s; }
.pay-group[open] > summary::after { transform: rotate(90deg); }
.pay-group-name { flex: 1; font-weight: 650; }
.pay-group-name small { margin-left: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.pay-group > summary b { font-weight: 650; font-variant-numeric: tabular-nums; }
.pay-group .list { padding: 0 0 6px 12px; }
.pay-group + .hint { margin-top: 10px; }

/* Map: Natural Earth's countries drawn on the server (app/places.py), moved and
   zoomed by app.js (worldMap) through the SVG's viewBox. Tall on phones (Rikhil,
   2026-10-21: "make this map bigger and more interactive"); wide screens show
   the whole world at its own shape. */
.mapstage { position: relative; height: clamp(300px, 50svh, 480px); border-radius: var(--radius);
            background: var(--surface); overflow: hidden; touch-action: none;
            -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (min-width: 700px) { .mapstage { height: auto; aspect-ratio: var(--map-ratio); max-height: 72vh; } }
.mapstage svg.world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.mapstage.moving svg.world { cursor: grabbing; }
.mapstage .land { fill: var(--field-2); stroke: var(--surface); stroke-width: 0.6px; vector-effect: non-scaling-stroke;
                  transition: fill .15s; }
.mapstage .seen { fill: var(--ink); }
.mapstage.layer-places .seen, .mapstage.layer-flights .seen { fill: color-mix(in srgb, var(--ink) 22%, var(--field-2)); }
.mapstage .land.picked { fill: color-mix(in srgb, var(--ink) 40%, var(--field-2)); stroke: var(--ink); stroke-width: 1.2px; }
.mapstage .seen.picked { fill: color-mix(in srgb, var(--ink) 62%, var(--field-2)); }
.mapstage .arc { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linecap: round; opacity: 0.55;
                 vector-effect: non-scaling-stroke; }
.mapstage .arc.picked { stroke-width: 3px; opacity: 1; }
.mapstage .city { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.mapstage .city.picked { fill: var(--ink); stroke: var(--surface); stroke-width: 2px; }
.mapstage .home { fill: var(--ink); stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.mapstage .map-label { font-family: var(--font); font-weight: 600; fill: var(--ink); paint-order: stroke;
                       stroke: var(--surface); stroke-linejoin: round; pointer-events: none; }
.mapstage .map-label.crowded, .mapstage .city.crowded { display: none; }
/* One layer at a time (the chips) */
.layer-countries .g-arcs, .layer-countries .g-spots, .layer-countries .g-labels,
.layer-places .g-arcs, .layer-places .g-tiny, .layer-flights .g-tiny, .layer-flights .g-labels { display: none; }
.map-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; }
.map-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
           background: var(--surface); color: var(--ink); cursor: pointer;
           box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 0 0 0.5px var(--hairline); }
.map-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.map-btn:active { transform: scale(0.94); }
.map-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 6px 12px;
            border-radius: 999px; background: color-mix(in srgb, var(--ink) 80%, transparent); color: var(--bg);
            font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.map-hint.gone { opacity: 0; }
/* What a tap found: a card over the bottom of the map */
.map-pick { position: absolute; left: 10px; right: 10px; bottom: 10px; max-height: calc(100% - 20px); overflow: auto;
            background: var(--surface); border-radius: 16px; padding: 12px 14px 2px; touch-action: pan-y;
            overscroll-behavior: contain; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 0 0 0.5px var(--hairline);
            animation: map-pick-in .18s ease-out; }
@keyframes map-pick-in { from { transform: translateY(12px); opacity: 0; } }
.map-pick-head { display: flex; align-items: center; gap: 10px; padding: 0 34px 8px 0; }
.map-pick-flag { font-size: 26px; line-height: 1; flex: none; }
.map-pick-flag .ticon { width: 24px; height: 24px; }
.map-pick-title { display: block; font-weight: 700; font-size: 17px; }
.map-pick-sub { display: block; color: var(--ink-2); font-size: 14px; }
.map-pick-x { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%; border: 0;
              padding: 0; background: var(--field); color: var(--ink-2); font: inherit; font-size: 17px; cursor: pointer; }
.map-pick .list { border-top: 0.5px solid var(--hairline); }
.map-pick .list-row { padding: 9px 0; min-height: 0; }
.map-pick-foot { margin: 0; padding: 9px 0 11px; color: var(--ink-2); font-size: 14px;
                 border-top: 0.5px solid var(--hairline); }
button.map-go { width: 100%; background: none; border: 0; border-top: 0.5px solid var(--hairline); font: inherit;
                color: inherit; text-align: left; cursor: pointer; }

/* ================= Computers ================= */
/* Riri made for a computer (Rikhil, 2026-10-23: "the phone view is perfect now but i want the
   desktop app to feel like its made for a computer"; research and mockup in Overview/). Phones
   never see any of this: the sidebar, ⌘K and the inline photo switch are hidden under 820px,
   and the layout wrappers below (.desk, .desk-a, .desk-b, .desk-cols, .page-head) are
   `display: contents` there, so the page lays out exactly as if they weren't in it.
   820-1179px: the sidebar is a column of icons. 980px and up: pages get two columns
   (.desk: a main column and a side one, .desk-b, which spans its whole height). */
.sidebar, .jump-cover, .whose-in { display: none; }
.desk, .desk-a, .desk-b, .desk-cols, .page-head { display: contents; }
.desk-only, .desk-only.desk-a, .desk-only.desk-b { display: none; }
kbd { font: 650 11px var(--font); background: var(--field); color: var(--ink-2); border-radius: 4px; padding: 1px 5px; }

@media (min-width: 820px) {
  :root { --side-w: 236px; --page-w: 1240px; --gutter: 32px; }
  body.has-side { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; }
  body.has-side > .page { grid-column: 2; grid-row: 1; width: 100%; max-width: var(--page-w);
                          padding: 26px var(--gutter) 0; }
  /* Pages with one column (forms, an asset, a report) stay a readable width. */
  body.has-side > .page:not(:has(.desk, .desk-on, .desk-cols, .wide)) { max-width: 820px; }
  body.has-side .section-row { display: none; }

  /* The sidebar */
  .sidebar { display: flex; flex-direction: column; gap: 1px; grid-column: 1; grid-row: 1; align-self: start;
             position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none;
             padding: 18px 12px 14px; background: var(--side); border-right: 0.5px solid var(--hairline);
             view-transition-name: sidebar; }
  /* The gym player stays phone-shaped (no sidebar: base.html leaves out has-side there). */
  .player-mode .sidebar { display: none; }
  .side-brand { font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif; font-size: 30px; font-weight: 700;
                line-height: 1; letter-spacing: -0.01em; padding: 0 10px 14px; text-decoration: none; }
  .side-jump { appearance: none; border: 0; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px;
               padding: 7px 10px; border-radius: 10px; background: var(--field); color: var(--muted);
               font: 500 14px var(--font); text-align: left; cursor: pointer; }
  .side-jump .icon { width: 17px; height: 17px; stroke-width: 2.2; }
  .side-jump kbd { margin-left: auto; background: var(--surface); color: var(--muted); font-weight: 600; }
  .side-group { display: flex; flex-direction: column; gap: 1px; }
  .side-label { margin: 14px 10px 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
  .side-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; text-decoration: none;
               color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
  .side-link .icon { width: 20px; height: 20px; }
  .side-link:hover, .side-jump:hover { color: var(--ink); }
  .side-link:hover { background: var(--hover); }
  .side-link[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.08); }
  .side-foot { margin-top: auto; padding-top: 10px; border-top: 0.5px solid var(--hairline); display: flex;
               flex-direction: column; gap: 8px; }
  .side-as { display: flex; gap: 6px; padding: 0 8px; }
  .side-as .avatar { width: 26px; height: 26px; font-size: 12px; }
  .side-me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-decoration: none; }
  .side-me:hover, .side-me[aria-current] { background: var(--hover); }
  .side-me-text b { display: block; font-size: 14px; font-weight: 650; }
  .side-me-text small { display: block; color: var(--muted); font-size: 12px; }

  /* The old top row: the sidebar has the brand, the tabs and the account, so only Health's
     photo switch is left, at the top right (or beside the + where a page has tabs). */
  body.has-side .top { position: absolute; top: 0; left: var(--side-w); right: 0; z-index: 12; padding: 0 var(--gutter);
                       pointer-events: none; }
  body.has-side .top-in { max-width: calc(var(--page-w) - 2 * var(--gutter)); height: 72px; justify-content: flex-end; }
  body.has-side .top .brand, body.has-side .top .nav-wide, body.has-side .top-in > .avatar,
  body.has-side .top .dev-as { display: none; }
  body.has-side .top .whose { pointer-events: auto; }
  body.has-side .top:not(:has(.whose)), body.has-side:has(.whose-in) .top { display: none; }
  body.has-side:has(> .page:not(:has(.desk, .desk-on, .desk-cols, .wide))) .top-in { max-width: calc(820px - 2 * var(--gutter)); }
  .whose-in { display: flex; margin-left: auto; padding-left: 12px; }
  .whose-in + .head-add { margin-left: 12px; }

  /* A page's title and its tabs on one row, which stays at the top while the page scrolls. */
  .page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
  .page-head > .head { flex: none; padding: 0; }
  .page-head > .subtabs { flex: 1; min-width: 0; align-items: center; }
  .page-head, body[data-root] .page > .head { position: sticky; top: 0; z-index: 10; margin: -10px -12px 0;
    padding: 10px 12px 8px; background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
  .page-head > .head { position: static; margin: 0; padding: 0; background: none;
                       -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Page changes fade instead of flashing white; the sidebar stays still. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }

  /* Things that grew with the screen stay their own size. */
  .range-seg { display: inline-flex; }
  .range-seg .seg-item { flex: none; padding: 6px 14px; }
  .wallet-stack, .wallet .unused-cards { max-width: 360px; }
  .tiles-lead { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .tiles-lead .tile:first-child { grid-column: auto; display: flex; align-items: stretch; }
  .tiles-lead .tile:first-child .tile-delta { text-align: left; font-weight: 400; color: var(--ink-2); }
  .person-card .days { justify-content: flex-start; gap: 22px; }
  .plan-days { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .jump-foot { display: flex; }

  /* ⌘K */
  .jump-cover:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 70; justify-content: center;
                              align-items: flex-start; padding-top: 12vh; background: rgba(0, 0, 0, 0.22); }
  .jump { width: min(620px, calc(100% - 48px)); background: var(--surface); border-radius: 16px; overflow: hidden;
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--hairline); animation: jump-in 0.14s ease-out; }
  @keyframes jump-in { from { transform: translateY(-8px); opacity: 0; } }
  .jump-q, .jump-q:focus { border: 0; border-bottom: 0.5px solid var(--hairline); border-radius: 0; background: transparent;
                           font-size: 18px; padding: 17px 20px; }
  .jump-q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .jump-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 58vh); overflow-y: auto; }
  .jump-h { padding: 10px 12px 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
  .jump-item a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
                 text-decoration: none; font-weight: 600; }
  .jump-item small { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 12.5px; font-weight: 500;
                     white-space: nowrap; }
  .jump-item.on a { background: var(--field); }
  .jump-empty { padding: 14px 12px; color: var(--muted); }
  .jump-foot { flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 9px 16px; border-top: 0.5px solid var(--hairline);
               color: var(--muted); font-size: 12px; font-weight: 600; }
  .jump-foot kbd + kbd { margin-left: 2px; }
}

/* 820-1179px: the sidebar folds to a column of icons. */
@media (min-width: 820px) and (max-width: 1179px) {
  :root { --side-w: 68px; --gutter: 24px; }
  .sidebar { align-items: center; padding: 14px 8px; }
  .side-brand { font-size: 24px; padding: 0 0 12px; }
  .side-brand span, .side-jump span, .side-jump kbd, .side-link span, .side-me-text, .side-as { display: none; }
  .side-jump { width: 44px; justify-content: center; padding: 9px 0; }
  .side-label { font-size: 0; width: 28px; margin: 8px 0 6px; border-top: 0.5px solid var(--hairline); }
  .side-link { width: 44px; height: 40px; justify-content: center; padding: 0; }
  .side-link .icon { width: 22px; height: 22px; }
  .side-foot { align-items: center; }
  .side-me { padding: 4px; }
}

/* 980px and up: two columns. Direct children go in the main column, in order; .desk-b is the
   side column and spans its whole height (the last row, 1fr, takes whatever it needs, so the
   main column's cards stay together). .side-left puts the side column first (lists). */
@media (min-width: 980px) {
  .desk, .desk-on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
                    grid-template-rows: repeat(12, auto) 1fr; column-gap: 24px; row-gap: 0; align-items: start; }
  .desk > *, .desk-on > * { grid-column: 1; min-width: 0; margin-bottom: 20px; }
  .desk > .desk-b, .desk-on > .desk-b { grid-column: 2; grid-row: 1 / -1; }
  .desk > .desk-full, .desk-on > .desk-full { grid-column: 1 / -1; grid-row: 1; }
  .desk:has(> .desk-full) > .desk-b, .desk-on:has(> .desk-full) > .desk-b { grid-row: 2 / -1; }
  .desk.wide-side { grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); }
  .desk.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .desk.side-left { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .desk.side-left > * { grid-column: 2; }
  .desk.side-left > .desk-b { grid-column: 1; }
  .desk-a, .desk-b, .desk-only.desk-a, .desk-only.desk-b { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .desk-only { display: block; }
  .desk-hide { display: none !important; }
  .desk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px 24px; align-items: start; }
  .desk-cols > * { min-width: 0; }
  /* A list beside its page: the one open is marked. */
  .side-list .list-row[aria-current] { font-weight: 650; }
  .side-list .list-row[aria-current]::before { content: ""; position: absolute; inset: 0 -10px; border-radius: 10px;
                                               background: var(--field); z-index: -1; opacity: 1; }
  .desk-a > .card-hero { width: 100%; }
  .side-list .list-row { position: relative; isolation: isolate; }
  /* Cards: the wallets in the side column, the card that's open outlined. */
  .desk-b > .wallet:first-child { margin-top: 0; }
  .desk-b .wallet + .wallet { margin-top: 8px; }
  .wallet-item[aria-current] { outline: 2.5px solid var(--ink); outline-offset: 3px; }
  /* Map: the map takes the window's height, its numbers beside it. */
  .map-desk .mapstage { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; max-height: none;
                        aspect-ratio: auto; }
  .map-desk .desk-b .tiles { grid-template-columns: 1fr 1fr; }
}

/* A mouse: rows light up under it (never on a phone, where hover sticks). */
@media (min-width: 820px) and (hover: hover) and (pointer: fine) {
  :is(a.list-row, a.track-row, a.alloc-row, summary.alloc-row, .st-row > summary, a.st-line, a.kv-link, a.res,
      .res-card > summary, .pay-group > summary, a.flow-line, a.plan-line, a.kpi, a.body-line, button.map-go,
      .st-months a) { position: relative; isolation: isolate; }
  :is(a.list-row, a.track-row, a.alloc-row, summary.alloc-row, .st-row > summary, a.st-line, a.kv-link, a.res,
      .res-card > summary, .pay-group > summary, a.flow-line, a.plan-line, a.kpi, a.body-line, button.map-go,
      .st-months a)::before {
    content: ""; position: absolute; inset: 0 -10px; border-radius: 10px; background: var(--hover);
    opacity: 0; transition: opacity 0.12s; z-index: -1; pointer-events: none; }
  :is(a.list-row, a.track-row, a.alloc-row, summary.alloc-row, .st-row > summary, a.st-line, a.kv-link, a.res,
      .res-card > summary, .pay-group > summary, a.flow-line, a.plan-line, a.kpi, a.body-line, button.map-go,
      .st-months a):hover::before { opacity: 1; }
  .st-months a::before { inset: -1px -8px; border-radius: 7px; }
  a.card, a.tl-item, a.bpass, .wcard, a.nudge-card { transition: box-shadow 0.15s; }
  a.card:hover, a.tl-item:hover, a.bpass:hover, a.nudge-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.07); }
  .subtab:not(.on):hover, .chip:not(.on):hover, .seg-item:not(.on):hover { color: var(--ink); }
  .head-add:hover, .btn:hover { filter: brightness(1.12); }
  summary { cursor: pointer; }
}
@media (min-width: 820px) {
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 8px; }
}