/* Personal app: same look as the team dashboard / weekly overview.
   Colour tokens copied unchanged from src/reports/theme.py (BASE_CSS); keep them in step by hand.
   System fonts only: no web fonts, no external requests. */
:root {
  color-scheme: light;
  --bg: #e9edf1; --card: #f8fafc; --ink: #0f172a; --ink-2: #64748b; --ink-3: #94a3b8;
  --line: #e2e8f0; --axis: #cbd5e1; --ref: #cbd5e1; --neg: #94a3b8;
  --mark: #1e293b; --tile: #334155; --tile-ink: #f1f5f9;
  --z1: #cbd5e1; --z2: #94a3b8; --z3: #7c8ea5; --z4: #64748b; --z5: #475569; --z6: #334155; --z7: #1e293b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141b; --card: #18202a; --ink: #e2e8f0; --ink-2: #94a3b8; --ink-3: #64748b;
  --line: #243040; --axis: #334155; --ref: #334155; --neg: #64748b;
  --mark: #cbd5e1; --tile: #cbd5e1; --tile-ink: #0f172a;
  --z1: #334155; --z2: #475569; --z3: #5b6b82; --z4: #64748b; --z5: #94a3b8; --z6: #b8c4d4; --z7: #e2e8f0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 -apple-system, system-ui, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative;
  padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 96px); }

/* header */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.h1 { font-size: 40px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; }
/* no box: the lettering follows light/dark mode (var(--ink)), full width */
.slogan-box { margin-top: 14px; }
.slogan { width: 100%; aspect-ratio: 985 / 215; background-color: var(--ink);
  -webkit-mask: url(slogan.png) center / 100% 100% no-repeat; mask: url(slogan.png) center / 100% 100% no-repeat; }
.sub { color: var(--ink-2); margin-top: 8px; letter-spacing: 0.02em; font-size: 14px; }
.toggle { background: none; border: 1px solid var(--axis); color: var(--ink-2); border-radius: 99px;
  padding: 8px 14px; font: inherit; font-size: 12px; cursor: pointer; min-height: 36px; }

/* cards and tiles */
.card { background: var(--card); border-radius: 18px; padding: 18px 18px 16px; margin-top: 12px; }
.tile { background: var(--tile); color: var(--tile-ink); border-radius: 18px; padding: 20px 18px; margin-top: 20px; }
.tile .k { color: var(--tile-ink); opacity: .65; }
.tile .big { font-size: 34px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.1; margin-top: 8px; }
.tile .meta { margin-top: 10px; font-size: 14px; opacity: .8; }
.k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.pill { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 99px;
  padding: 3px 9px; border: 1px solid currentColor; opacity: .85; margin-right: 6px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.empty { color: var(--ink-2); padding: 8px 0; }
.row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }

/* collapsible note sections */
details.card { padding: 0; }
details.card > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; justify-content: space-between;
  align-items: center; min-height: 52px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "+"; color: var(--ink-3); font-size: 20px; font-weight: 300; }
details.card[open] > summary::after { content: "\2212"; }
details.card .body { padding: 0 18px 16px; }
.lines { margin: 0; padding: 0; list-style: none; }
.lines li { padding: 6px 0; border-top: 1px solid var(--line); }
.lines li:first-child { border-top: 0; }
.lines b { font-weight: 500; color: var(--ink-2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }

/* recovery flag */
.flag { display: flex; gap: 12px; align-items: flex-start; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; margin-top: 4px; border: 2px solid var(--ink-2); }
.dot.green { background: transparent; border-color: var(--ink-2); }             /* hollow = green */
.dot.amber { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border-color: var(--ink); } /* half = amber */
.dot.red { background: var(--ink); border-color: var(--ink); }                    /* full = red */

/* week list */
.day { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.day:first-child { border-top: 0; }
.day .dn { width: 46px; flex: 0 0 46px; }
.day .dn .w { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.day .dn .n { font-size: 24px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.1; }
.day.today .dn .n { font-weight: 500; }
.day .items { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sess { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: none; color: inherit; font: inherit;
  border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 48px; }
.sess.ride { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
.sess.strength { border: 1px dashed var(--ink-2); }
.sess.unplaced { opacity: .65; }
.sess .t { font-size: 16px; font-weight: 400; }
.sess .m { font-size: 12px; opacity: .75; margin-top: 2px; }
.rest { color: var(--ink-3); padding-top: 6px; }
.weeknav { display: flex; gap: 8px; margin-top: 16px; }
.weeknav button, .btn { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--axis); background: none; color: var(--ink);
  font: inherit; cursor: pointer; }
.btn.primary { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); font-weight: 500; min-height: 52px; width: 100%; font-size: 16px; }
.btn:disabled { opacity: .5; }
.back { background: none; border: 0; color: var(--ink-2); font: inherit; padding: 8px 0; cursor: pointer; min-height: 44px; }

/* check-in form */
.field { margin-top: 18px; }
.field label, .field .label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.ckrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ckbox { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px 8px; margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); font: inherit; position: relative; min-height: 96px; }
.ckbox .k { font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; }
.ckbox input { width: 100%; min-width: 0; margin-top: 8px; text-align: center; font: inherit; font-size: 30px; font-weight: 250;
  height: 52px; border: 0; background: transparent; color: var(--ink); padding: 0; border-radius: 8px; }
.ckbox input::placeholder { color: var(--ink-3); }
.ckbox .hint { font-size: 10px; color: var(--ink-3); margin-top: -4px; }
.ckbox .val { font-size: 30px; font-weight: 250; margin-top: 8px; line-height: 52px; }
button.ckbox { cursor: pointer; }
button.ckbox[aria-pressed="true"] { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
button.ckbox[aria-pressed="true"] .k { color: var(--tile-ink); opacity: .65; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { flex: none; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--axis); background: none; color: var(--ink);
  font-size: 24px; font-weight: 300; cursor: pointer; }
.stepper input { flex: 1; min-width: 0; text-align: center; font: inherit; font-size: 28px; font-weight: 250; height: 52px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
input[type=date] { font: inherit; width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); padding: 0 12px; }
.slider-val { font-size: 34px; font-weight: 250; letter-spacing: -0.02em; }
input[type=range] { width: 100%; height: 36px; accent-color: var(--mark); }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.seg { display: flex; border: 1px solid var(--axis); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; min-height: 48px; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--tile); color: var(--tile-ink); }
.msg { margin-top: 12px; font-size: 14px; }
.msg.err { color: var(--ink); font-weight: 500; }
.ck { padding: 10px 0; border-top: 1px solid var(--line); }
.ck:first-child { border-top: 0; }
.src { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; border: 1px solid var(--axis); color: var(--ink-2); }
.src.app { border-style: dashed; }

/* bottom tab bar */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
.tabs nav { max-width: 430px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px;
  color: var(--ink-3); text-decoration: none; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.tabs a svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tabs a.on { color: var(--ink); }
.coffee { font-size: 17px; font-weight: 600; }

.tile.tap { cursor: pointer; }
.big2 { font-size: 20px; font-weight: 400; margin-top: 8px; line-height: 1.2; }

/* profile */
.sechead { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 26px 2px 0; }
.card, .lines li { overflow-wrap: anywhere; }
.lines li.lv1 { padding-left: 16px; }
.lines li.lv2, .lines li.lv3 { padding-left: 32px; }
.lines li .pill { margin-bottom: 2px; }
.card > .k + .lines, .card > .k + .empty, .card > .k + .small, .card > .k + table { margin-top: 8px; }
table.zt { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; table-layout: fixed; }
table.zt th, table.zt td { text-align: left; padding: 5px 4px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
table.zt th { font-weight: 500; color: var(--ink-2); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-top: 0; }
details.more { margin-top: 4px; }
details.more > summary { cursor: pointer; color: var(--ink-2); font-size: 12px; min-height: 32px; display: flex; align-items: center; }
details.more > div { padding-bottom: 6px; }
.nums .num { display: inline-block; margin-right: 10px; }
.chips { margin-top: 4px; }
.pill.st-due { border-width: 2px; font-weight: 600; opacity: 1; }
.pill.st-soon { border-style: dashed; opacity: 1; }

/* My rides: light tiles (same layout as the hero tile), filters, ride detail */
.tile.light { background: var(--card); color: var(--ink); margin-top: 12px; }
.tile.light .k { color: var(--ink-2); opacity: 1; }
.tile .meta .pill { margin-bottom: 6px; }
.tile .big { overflow-wrap: anywhere; }
.seg.sm { margin-top: 10px; }
.seg.sm button { min-height: 40px; font-size: 13px; padding: 0 2px; min-width: 0; }
.seg { margin-top: 16px; }
.seg button { min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.nt { background: var(--card); border-radius: 14px; padding: 12px 10px; min-width: 0; }
.nt .k { font-size: 10px; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.nt .v { font-size: 22px; font-weight: 250; letter-spacing: -0.02em; margin-top: 4px; overflow-wrap: anywhere; line-height: 1.15; }
.nt .v small { font-size: 11px; color: var(--ink-2); margin-left: 2px; letter-spacing: 0; }
.nt .d { font-size: 10px; color: var(--ink-2); }
.zbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 10px; background: var(--line); }
.zbar span { min-width: 0; }
.zleg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.zleg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.chart { position: relative; margin-top: 8px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke: var(--mark); stroke-width: 1.5; stroke-linejoin: round; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.mini { margin: 0; overflow-wrap: anywhere; }

/* check-in saved: animated check mark, then the status */
.tickbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.tick { width: 84px; height: 84px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tick circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: tickdraw .5s ease-out forwards; }
.tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tickdraw .4s .35s ease-out forwards; }
@keyframes tickdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tick circle, .tick path { animation: none; stroke-dashoffset: 0; }
}
.linkbtn { background: none; border: 0; padding: 8px 0 0; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; min-height: 32px; }

/* goal card: number tiles */
.gtiles { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; align-items: flex-start; }
.gtile { flex: 1 1 0; min-width: 0; }
.gtile .k { font-size: 10px; letter-spacing: 0.08em; }
.gnum { font-size: 30px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; white-space: nowrap; }
.gsub { font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.gnote { flex-basis: 100%; margin-top: 0; }

/* empty states (My rides) */
.card.es { text-align: center; padding: 28px 18px 24px; }
.es-art { width: 70%; max-width: 220px; height: auto; display: block; margin: 0 auto 8px; }
.es-head { font-size: 30px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.15; margin-top: 8px; overflow-wrap: anywhere; }
.tile.light.es-tile { margin: 20px auto 0; text-align: left; background: var(--bg); }
.es-title { font-size: 22px; font-weight: 250; margin-top: 6px; overflow-wrap: anywhere; }
.es-hint { margin-top: 16px; }

/* profile: editable tiles in the check-in box style (tap to edit in place) */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ptile { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; color: var(--ink); }
.ptile.wide { grid-column: 1 / -1; }
.ptile .k { font-size: 10px; letter-spacing: 0.08em; overflow-wrap: anywhere; padding: 0 12px; }
.ptile > .pv { font-size: 28px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.15; margin-top: 6px; overflow-wrap: anywhere; max-width: 100%; }
.ptile > .pv small { font-size: 12px; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.ptile.date > .pv { font-size: 20px; font-weight: 300; }
.ptile.txt { align-items: stretch; text-align: left; }
.ptile.txt .k { padding: 0 14px 0 0; }
.ptile.txt > .pv { font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.4; margin-top: 4px; }
.ptile.note > .pv, .ptile.note textarea.pin { font-size: 17px; font-weight: 300; line-height: 1.4; color: var(--ink); } /* a typed note: same type as "not set", in the ink colour */
.ptile.unset > .pv { color: var(--ink-3); font-size: 17px; font-weight: 300; }
/* number boxes: the check-in .ckbox look; the value is an always-visible input */
.pnums { margin-top: 10px; }
.pnums.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid.one { grid-template-columns: minmax(0, 1fr); }
.pgrid.one > .ptile > .pv { font-size: 26px; } /* same size as the sex tile and the number boxes */
.pnum { padding-bottom: 6px; }
.pnum .k { white-space: normal; overflow-wrap: anywhere; text-align: center; min-height: 24px; }
.pnum .nrow { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 100%; min-width: 0; margin-top: 4px; }
.pnum .nrow input { flex: 1 1 0; width: 0; min-width: 0; margin-top: 0; font-size: 26px; text-align: center; }
.pnum .nunit { font-size: 11px; color: var(--ink-2); flex: none; }
.pnum:focus-within { border-color: var(--mark); }
.pnum .perr { text-align: center; margin-top: 2px; }
/* sex tile: same box metrics as the age number box next to it, no pencil */
.ptile.zone > .pv { font-size: 26px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; }
.ptile.snum { padding: 10px 8px 6px; min-height: 96px; }
.ptile.snum::after, .ptile.ed.snum::after { content: none; } /* no pencil (the later .ptile.ed::after rule must not win) */
.ptile.snum .k { padding: 0; min-height: 24px; }
.ptile.snum > .pv { font-size: 26px; line-height: 52px; height: 52px; margin-top: 4px; }
.ptile.ed { cursor: pointer; }
.ptile.ed::after { content: "\270E"; position: absolute; top: 7px; right: 9px; font-size: 11px; color: var(--ink-3); }
.ptile.ed:focus-visible, .pnote.ed:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }
.ptile.editing { border-color: var(--mark); }
.ptile.editing::after { content: none; }
.pnote { font-size: 11px; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; max-width: 100%; }
.pnote.ed { cursor: pointer; text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; min-height: 22px; }
.pnote .pv { font-size: 11px; font-weight: 400; margin: 0; letter-spacing: 0; line-height: 1.4; }
.ptile.txt .pnote { text-align: left; }
.k2 { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ptile.ro { background: transparent; border-style: dashed; }
.ptile.ro .pnote { color: var(--ink-3); }
.pedit { width: 100%; min-width: 0; margin-top: 6px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.pedit .k2 { text-align: left; margin-top: 4px; }
.pin { width: 100%; min-width: 0; font: inherit; font-size: 22px; font-weight: 300; text-align: center; color: var(--ink);
  background: var(--card); border: 1px solid var(--axis); border-radius: 10px; padding: 8px 10px; min-height: 46px; }
input.pin[type=date] { height: 46px; font-size: 17px; }
.pin.num { font-size: 28px; font-weight: 250; letter-spacing: -0.02em; height: 52px; border: 0; background: transparent; padding: 0; border-radius: 8px; }
.pin.num::placeholder { color: var(--ink-3); }
textarea.pin, .pin.txt { font-size: 15px; font-weight: 400; text-align: left; resize: none; min-height: 64px; line-height: 1.4; }
select.pin { -webkit-appearance: none; appearance: none; padding-right: 30px; text-align-last: center; cursor: pointer;
  background-color: var(--card); background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; }
.pspin { display: flex; align-items: center; gap: 6px; padding: 0 0 0 10px; height: auto; cursor: ns-resize; user-select: none;
  -webkit-user-select: none; touch-action: none; border: 0; background: transparent; }
.pspin:focus { outline: none; }
.pspin:focus-visible { outline: none; } /* the tile being edited already has the highlighted border */
.pspin-reel { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.pspin-i { position: absolute; left: 0; right: 0; top: 50%; height: 30px; margin-top: -15px; line-height: 30px; text-align: center;
  font-size: 22px; font-weight: 300; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  will-change: transform, opacity; pointer-events: none; }
.pspin-i.cur { color: var(--ink); font-weight: 400; }
/* sideways reel (sex tile): same box as the tile's value, current option in the middle, the neighbours light on both sides */
.pspin.h { padding: 0; cursor: ew-resize; }
.pspin.h .pspin-reel { -webkit-mask-image: none; mask-image: none; }
.pspin.h .pspin-i { left: 50%; right: auto; width: auto; font-size: 26px; font-weight: 250; letter-spacing: -0.02em; height: 52px; line-height: 52px; margin-top: -26px; padding: 0;
  overflow: visible; text-overflow: clip; } /* the middle option looks exactly like the tile's value; whole words, never cut */
.ptile.snum.editing { padding-bottom: 6px; }
.ptile.snum .pedit { margin-top: 4px; gap: 0; }
.ptile.snum .pedit .pspin { height: 52px; }
.pspin-a { flex: none; display: flex; flex-direction: column; gap: 4px; }
.pspin-a button { width: 30px; height: 30px; border: 1px solid var(--axis); border-radius: 8px; background: none; color: var(--ink-2);
  font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }
.pspin-a button:active { background: var(--line); }
.pedit .unit { font-size: 11px; color: var(--ink-2); text-align: center; }
.pedit .hint { font-size: 11px; color: var(--ink-3); text-align: left; }
.perr { font-size: 12px; font-weight: 500; color: var(--ink); margin-top: 6px; text-align: left; overflow-wrap: anywhere; }
.perr:empty { display: none; }
.saved { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--ink-2); animation: savedfade 1.6s ease-out forwards; }
@keyframes savedfade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saved { animation: none; } }
details.gitem { border-top: 1px solid var(--line); padding: 4px 0 10px; }
details.gitem:first-child { border-top: 0; }
details.gitem > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; list-style: none; overflow-wrap: anywhere; }
details.gitem > summary::-webkit-details-marker { display: none; }
details.gitem > summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-size: 18px; font-weight: 300; padding-left: 8px; }
details.gitem[open] > summary::after { content: "\2212"; }
.addbtn { width: 100%; min-height: 44px; margin-top: 10px; border-radius: 12px; border: 1px dashed var(--axis); background: none;
  color: var(--ink-2); font: inherit; cursor: pointer; }
.computed-note { font-size: 11px; color: var(--ink-3); margin: 6px 4px 0; letter-spacing: 0.02em; }

/* Time available: the training timeframe rows */
.av { margin-bottom: 4px; }
.av .k2 { margin: 2px 0 8px; }
.k2.avhead { display: block; margin: 14px 0 8px; }
.avwin { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.avslot { min-width: 0; }
.avwin .pspin { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; }
.avwin .pspin-i { font-size: 20px; }
.avwin .perr { grid-column: 1 / -1; }
.avl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.avdash { color: var(--ink-3); }

/* sensors: one line each, name 4/5 and a yes / no toggle 1/5 of the card width */
.srows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.srow { display: grid; grid-template-columns: 4fr 1fr; gap: 8px; align-items: stretch; }
.srow .perr { grid-column: 1 / -1; margin-top: 0; }
.ptile.sname { align-items: flex-start; justify-content: center; text-align: left; padding: 12px 14px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } /* the type of the card title, in black */
.ptile.sw { cursor: pointer; justify-content: center; padding: 0; font: inherit; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sw:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }
.swt { position: relative; width: 46px; height: 28px; border-radius: 14px; background: var(--axis); transition: background .2s; }
.swk { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.3, .7, .4, 1); }
.sw[aria-checked="true"] .swt { background: var(--tile); }
.sw[aria-checked="true"] .swk { transform: translateX(18px); }
.sw.drag .swk { transition: none; }
.srows[hidden] { display: none; }
/* option blocks under Caffeine / Food restrictions: two per row, name only, dark when picked */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips[hidden] { display: none; }
.chips .perr { grid-column: 1 / -1; margin: 0; }
.ptile.chip { cursor: pointer; justify-content: center; min-height: 46px; padding: 12px 10px; font: inherit; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); user-select: none; -webkit-user-select: none;
  transition: background .2s, color .2s, border-color .2s; }
.ptile.chip[aria-pressed="true"] { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
.ptile.chip:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }
.latest { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.latest .avslot { min-width: 0; }
.latest .pspin { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; }
.latest .pspin-i { font-size: 20px; }
/* tyre pressure: round scroll wheels, rear on the left like the drawing, front on the right */
.wrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: center; }
.wcell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wheel { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); overflow: hidden; position: relative; }
.wheel .pspin { width: 100%; height: 100%; padding: 0; gap: 0; cursor: ns-resize; }
.wheel .pspin-reel { height: 144px !important; }
.wheel .pspin-i { font-size: 22px; }
.wcell .k { margin-top: 6px; color: var(--ink); }
.wcell .perr { text-align: center; margin-top: 2px; }
/* maintenance: progress towards the limit, 0 left and the limit right; dark fill, red once the limit is reached */
.pbar { margin: 8px 0 4px; }
.pbar-track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 5px; background: var(--tile); transition: width .3s; }
.pbar.over .pbar-fill { background: #c62828; }
.pbar-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.pbar.over .pbar-used { color: #c62828; font-weight: 600; }
.mtask { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
/* clothing: a line per kind (name 4/5, a small scroll counter 1/5), its pieces below */
.wtype { display: grid; grid-template-columns: 4fr 1fr; gap: 8px; align-items: stretch; margin-top: 10px; }
.ptile.wcount { padding: 0; justify-content: center; }
.wcount .pspin { width: 100%; height: 66px; padding: 0; gap: 0; }
.wcount .pspin-i { font-size: 18px; height: 22px; line-height: 22px; margin-top: -11px; }
.wpiece { margin: 8px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.wpiece .pgrid { margin-top: 0; }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qbtn { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--axis); background: none; color: var(--ink-2);
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.qbtn:active { background: var(--line); }
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100; }
.modal { width: 100%; max-width: 360px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding-top: 6px; }
.modal-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.modal-x:active { background: var(--line); }
.modal-text { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }
.ptile.ed.wname::after { content: none; }
.ptile.pickbtn { cursor: pointer; width: 100%; margin-top: 12px; padding: 12px; font: inherit; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); border-style: dashed; justify-content: center; }
.ptile.pickbtn:active { background: var(--line); }
.modal { max-height: 80vh; overflow-y: auto; }
.modal .chips { margin-top: 12px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.mbtn { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--axis); background: none; color: var(--ink); font: inherit;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.mbtn.danger { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
/* clothing pieces: quiet text, the kind of line you glance at */
.wpiece .ptile.wname > .pv { text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink-2); margin-top: 3px; }
.wpiece .ptile.wname { padding: 8px 10px 8px; }
.wpiece .ptile.snum { min-height: 62px; padding: 8px 8px 6px; }
.wpiece .ptile.snum > .pv { font-size: 15px; font-weight: 300; line-height: 26px; height: 26px; margin-top: 2px; letter-spacing: 0; }
.wpiece .ptile.snum .k { min-height: 16px; }
.wpiece .pspin.h .pspin-reel { height: 26px !important; }
.wpiece .pspin.h .pspin-i { font-size: 15px; height: 26px; line-height: 26px; margin-top: -13px; }
.wpiece .ptile.snum .pedit .pspin { height: 26px; }
.modal-sub { margin: 14px 0 -4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.modal .chips { margin-top: 8px; }
/* Profile pages: Rider | Training | Bike | Gear */
.ptabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; }
.ptab { position: relative; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.ptab[aria-selected="true"] { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
.pdot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #c62828; }
.ppage[hidden] { display: none; }
/* the bike's name and condition score at the top of the Bike page */
.bikehero { padding-bottom: 16px; }
.bh-name { font-size: 24px; font-weight: 300; margin-top: 6px; overflow-wrap: anywhere; }
.bh-score { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.bh-num { font-size: 44px; font-weight: 250; letter-spacing: -0.02em; line-height: 1; }
.bh-of { font-size: 13px; color: var(--ink-2); }
.bh-label { margin-left: auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bh-score.low .bh-num, .bh-score.low .bh-label { color: #c62828; }
.bh-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bh-fill { height: 100%; border-radius: 4px; background: var(--tile); }
.bh-meter.low .bh-fill { background: #c62828; }
.bh-next { margin-top: 8px; }
/* the gear page's two numbers */
.gearhero { padding-bottom: 16px; }
.gh-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gh-num { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px 8px; text-align: center; }
.gh-big { font-size: 38px; font-weight: 250; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
/* dates: label and three scrolling reels (day, month, year), like the training times */
.dwin { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.dwin .avl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.dwin .avslot { min-width: 0; }
.dwin .pspin { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; }
.dwin .pspin-i { font-size: 20px; }
.dwin .perr { grid-column: 1 / -1; margin-top: 0; }
/* the location map pop-up */
.modal.map { max-width: 560px; }
.map-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.map-crumb { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer; }
.map-crumb:disabled { color: var(--ink); cursor: default; }
.map-sep { color: var(--ink-3); }
.worldmap { display: block; width: 100%; height: auto; max-height: 52vh; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.worldmap .land { fill: var(--line); stroke: var(--card); stroke-width: 0.25; vector-effect: non-scaling-stroke; stroke-width: 1px; outline: none; }
.worldmap .land.c0 { fill: color-mix(in srgb, var(--tile) 12%, var(--bg)); } .worldmap .land.c1 { fill: color-mix(in srgb, var(--tile) 26%, var(--bg)); }
.worldmap .land.c2 { fill: color-mix(in srgb, var(--tile) 40%, var(--bg)); } .worldmap .land.c3 { fill: color-mix(in srgb, var(--tile) 19%, var(--bg)); }
.worldmap .land.c4 { fill: color-mix(in srgb, var(--tile) 33%, var(--bg)); } .worldmap .land.c5 { fill: color-mix(in srgb, var(--tile) 47%, var(--bg)); }
.worldmap .land.faint { fill: var(--line); opacity: 0.5; }
.worldmap .land:not(.faint) { cursor: pointer; }
.worldmap .land.pick { fill: color-mix(in srgb, var(--tile) 18%, var(--bg)); }
.worldmap .land:not(.faint):hover, .worldmap .land:focus-visible { fill: var(--tile); }
.worldmap .land.chosen { fill: var(--tile); }
.map-extra .modal-text { margin-top: 10px; }
.map-extra .linkbtn { margin-top: 8px; }
.worldmap .land.hot { fill: var(--tile); }

/* session page: Before / During / After headings */
.phase { margin: 28px 2px 0; }
.phase h2 { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.phase-hint { margin: 10px 2px 0; }
.panel[hidden] { display: none; }
/* session page: gray number tiles sit inside the block's white card, like the Profile */
.card .tiles { margin-top: 0; }
.card .nt { background: var(--bg); }
.card .tiles + .lines { margin-top: 10px; }
.card .tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.card .nt { flex: 1 1 calc((100% - 16px) / 3); text-align: center; }
/* check-in wheels: the reel fills the box, arrows hidden (drag, scroll or arrow keys) */
.ckbox .ckspin { width: 100%; margin-top: 4px; }
.ckbox .pspin { padding: 0; }
.ckbox .pspin-a { display: none; }

/* morning check: a bar of all statuses, today's is solid, the others faded */
:root {  }
.qbtn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--axis); background: none; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; line-height: 1; padding: 0; }
.qbtn[aria-expanded="true"] { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); }
.mbar { display: flex; gap: 4px; margin-top: 12px; }
.mseg { flex: 1; min-width: 0; text-align: center; padding: 14px 2px; border-radius: 10px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  overflow-wrap: anywhere; line-height: 1.2; background: var(--bg); color: var(--ink-2); }
.mseg.on { background: var(--tile); color: var(--tile-ink); font-weight: 600; } /* the result: the dark of the "next session" block */
.mhelp { margin-top: 12px; padding: 12px; background: var(--bg); border-radius: 12px; font-size: 13px; }
.mhelp[hidden] { display: none; }
.mhelp ul { list-style: none; margin: 0 0 8px; padding: 0; }
.mhelp li { display: flex; gap: 10px; padding: 5px 0; align-items: flex-start; }

.ftprow { align-items: stretch; }
.pnum .nval { flex: 1 1 0; min-width: 0; font-size: 26px; font-weight: 250; letter-spacing: -0.02em; text-align: center; line-height: 1.15; }
.fcell .fslot { flex: 1 1 0; min-width: 0; }
.fcell .pspin { background: transparent; border: 0; padding: 0; gap: 0; }
.fcell .pspin-i { font-size: 20px; }
.fcell .pspin-i.cur { font-size: 26px; font-weight: 250; letter-spacing: -0.02em; }
.ftprow .pnum .nrow { align-items: center; flex: 1; }
.ftprow .pnum .nrow { position: relative; }
.ftprow .pnum .nunit { position: absolute; right: 2px; bottom: 6px; } /* the unit sits at the right edge, so the number is centred in the block */
.owin { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.owin .pspin { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; }
.owin .pspin-i { font-size: 20px; }
.owin .perr { grid-column: 1 / -1; }

/* Tyre pressure calculator */
.tchead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tcalc .seg { display: inline-flex; margin-top: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); }
.tcalc .seg.wide { display: flex; margin-top: 12px; }
.tcalc .seg button { flex: 1 1 0; min-height: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.tcalc .seg button[aria-pressed="true"] { background: var(--tile); color: var(--tile-ink); }
.tcalc .pnums { margin-top: 12px; }
.tcright { display: flex; align-items: center; gap: 10px; flex: none; }
.tcs { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px; text-align: center; }
.tcs-box { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; font-weight: 300; }
.tcs-box.big { font-size: 20px; }
.tcs-arrow { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.tcs-arrow::before { content: "\2193  "; }
.tcctl { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tcctl .seg[data-seg="wet"] { flex: 1 1 0; min-width: 0; }
.tcctl .seg[data-seg="unit"] { flex: none; }
.tcalc .tcctl .seg button { padding: 6px 10px; }
.kchip { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kchip .chip { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
.kchip .qbtn { flex: none; width: 22px; height: 22px; font-size: 12px; }
.gsave { margin-top: 14px; }
.gsave .btn { width: 100%; }
.chips .span2 { grid-column: 1 / -1; margin: 6px 0 0; }
.slogcard .chips { margin-top: 10px; }
.slogcard .slograte .avslot { max-width: 160px; margin: 0 auto; }
.slogcard .slograte .pspin { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; }
.slogcard .slogsave { width: 100%; margin-top: 12px; }
.slogcard .slogstate { margin-top: 8px; }

/* accounts and Strava (account.js) */
.txt { font: inherit; width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 12px; box-sizing: border-box; }
label.chk { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
label.chk input { margin-top: 3px; }
.btn.strava { display: block; text-align: center; background: #fc4c02; border-color: #fc4c02; color: #fff; font-weight: 600; text-decoration: none; line-height: 48px; }
a.btn { display: block; text-align: center; text-decoration: none; line-height: 44px; color: inherit; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* admin, forms in the account card, session changes */
.btn.danger { background: var(--tile); color: var(--tile-ink); border-color: var(--tile); font-weight: 500; }
.btn.danger:disabled { opacity: .4; }
.bigcode { display: block; font: 600 20px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; word-break: break-all;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; user-select: all; }
.secret { border: 2px solid var(--axis); }
.apanel, .spanel { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.apanel[hidden], .spanel[hidden] { display: none; }
a.back { text-decoration: none; }
select.txt { appearance: auto; }
input[type=time].txt { width: 100%; }
.card .pill { margin: 0 6px 6px 0; }