/* own·athlete — the tokens, 6 September 2026 (docs/design/2026-09-05-redesign-brief.md) */
:root{--vh-probe:100vh;--sab-probe:env(safe-area-inset-bottom);--green:#365040;--deep:#243A2E;--tint:#ECF0EC;--lemon:#E3F04A;--red:#FF4438;--honey:#FFC53D;--rest:#2E7D52;--olive:#8A9A20;
--act:#2F6B4C;--deep-bg:#243A2E;--green-bg:#365040;--page:#EEF3EF;--on-lemon:#243A2E;--dot:#C9D2CC;--mark:var(--deep);--shade:5%;--shade-on:12%;--quiet:var(--dim);--ground:#F7FAF8;--card:#FFFFFF;--ink:#1F2A24;--muted:#6B6B68;--dim:#9C9B96;--rule:#DFE6E1;--rule-strong:#CFD8D2;--paper:#F7FAF8;
--accent:var(--green);--accent-2:var(--deep);--surface:var(--tint);--brick:var(--red);--ochre:var(--muted);--race:var(--deep);--blue:var(--lemon);
--font-app:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;--font-coach:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;--font-brand:'Archivo',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;   /* 0141: San Francisco on an Apple device, Inter on any other; the logo Archivo */
}
*{box-sizing:border-box;font-variant-numeric:tabular-nums}
html,body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 var(--font-app);min-height:100%;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
/* 0056: the sky is gone; the panel below carries the dark green, and the ground is the ground */
body.sky{background:var(--ground)}
a{color:var(--green)}
.serif{font-family:var(--font-coach);font-size:15px;line-height:1.5;white-space:pre-line;font-weight:400}
.serif.prose{white-space:normal}
.prose p{margin:0}
.prose p+p,.prose ul+p,.prose p+ul,.prose ol+p,.prose p+ol,.prose ul+ol,.prose ol+ul{margin-top:15px}   /* 11 September, Kostas: the coach's answer read as one block. A paragraph break should look like a blank line, which at 15px on a 1.5 line is 15, not 8 */
.prose ul{margin:0;padding-left:18px}
.prose ol{margin:0;padding-left:22px}   /* 18 September, Kostas: "auto numbering" — the coach's 1. 2. 3. lines, numbered by the list */
.prose li{margin-top:3px}
.small{font-size:12px;line-height:1.4;color:var(--muted)}
.micro{font-size:15px;line-height:20px;font-weight:600;color:var(--muted)}   /* 0142: plain words, not spaced capitals */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
/* 0056: the dark green panel. Absolute, so on Home it scrolls with the page and on
   Week — where body.weekfixed stops the body scrolling — it simply stays. */
#toppanel{position:absolute;left:0;right:0;top:0;height:0;background:var(--deep-bg);border-radius:0 0 28px 28px;z-index:0;pointer-events:none}
#toppanel .m{position:absolute;left:18px;right:18px;bottom:11px;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--lemon)}
#toppanel .m i{flex:1;border-top:1px solid color-mix(in srgb,var(--lemon) 35%,transparent);font-style:normal}
/* on Week the calendar scrolls UNDER the panel, so the panel goes above the scroller (which sets
   z-index 1) but below the bar (6). On Home it stays at 0, behind the cards it sits behind. */
body.weekfixed #toppanel{z-index:2}
body.weekfixed .weekscroll{padding-top:4px}   /* 0171: the month's name is on its card; the green row with it is gone */
body.weekfixed #toppanel{display:none}

/* the top: sits on the panel */
.top{position:sticky;top:0;z-index:6;background:var(--deep-bg);color:#fff;isolation:isolate;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;display:grid;grid-template-columns:1fr auto 1fr;column-gap:8px;align-items:center}
@media (max-width:359px){.top .lockup{font-size:16px}}   /* 26 September 2026: the crown's count grows with the days and ran into the name; 8 px between, and a smaller name on the narrowest phones */
.top > :first-child{justify-self:start}.top > :last-child{justify-self:end}.topgroup{display:flex;gap:8px}
body.sky .top{background:transparent}
body.sky .top::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-28px;z-index:-1;background:linear-gradient(to bottom,rgba(36,58,46,.42),rgba(36,58,46,.2) 55%,rgba(36,58,46,0));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 70%,transparent 100%);opacity:0;transition:opacity .2s;pointer-events:none}
body.sky.scrolled .top::before{opacity:1}
body.firstscreen .top::before{background:linear-gradient(to bottom,var(--page),color-mix(in srgb,var(--page) 85%,transparent) 55%,transparent)}   /* 2 October 2026, the first tester's screenshot: scrolled, the deep panel slid under the bar's deep-green frost and the logo, in ink here, sat on its words; the frost is the page's own ground here, as the bar is */
.top .circ{transition:background .25s,color .25s,border-color .25s}
body.scrolled .top .lockup{opacity:0;transition:opacity .2s}
.top .lockup{transition:opacity .2s}
.top .circ{width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;position:relative;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 4px 12px rgba(36,58,46,.24);color:var(--deep);cursor:pointer}   /* 0056: one coat, on the panel and on the ground alike */   /* 0056 point 5 amended, 11 September: a little see-through again, so the coat reads as glass over what it sits on */
.top .circ .mark{position:absolute;top:4px;right:5px;width:8px;height:8px;border-radius:999px;background:var(--deep-bg)}
.lockup{display:inline-block;font-family:var(--font-brand);font-weight:500;font-size:19px;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:currentColor}
.lockup-mark{display:inline-block;width:1.575em;height:.99em;margin:0 .22em;vertical-align:-.16em;color:var(--lockup-ring,var(--lemon))}   /* 0116: G */
.titlerow{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px 2px}
.titlerow h1{font-size:18px;font-weight:600;margin:0}
body.sky .titlerow{color:#fff}
.morehead{position:relative;z-index:2;color:#fff}
.morehead .small{color:rgba(255,255,255,.75)}
body.sky .titlerow{position:relative;z-index:2}
body.sky .titlerow .small{color:rgba(255,255,255,.75)}
.card{margin:0 12px;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:14px 16px 14px;display:flex;flex-direction:column;gap:8px}
.glass{background:rgba(255,255,255,.62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 36px rgba(42,42,44,.08)}
/* bands: the workout is the band; the band is the sport; the state is how strong */
.b{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 12px 0 0;margin-left:20px;border-radius:0 999px 999px 0;background:var(--sc,var(--tint));color:var(--sf,#fff);min-width:0}
.b .sp{display:inline-flex;align-items:center;justify-content:center;height:100%;margin-left:-20px;position:relative;z-index:2;box-shadow:0 2px 6px rgba(36,58,46,.28);padding:0 12px;border-radius:999px;font-size:11px;font-weight:600;background-color:var(--sc,var(--green));color:var(--sf,#fff);background-image:linear-gradient(rgba(255,255,255,.34) 0%,rgba(255,255,255,.17) 38%,rgba(255,255,255,.05) 62%,rgba(255,255,255,0) 88%);border:1px solid rgba(255,255,255,.45);color:inherit;flex:none}
.b .sp.w1{width:44px}
.b .sp.w2{width:60px}
.b .sp.w3{width:76px}
.b .sp.icon{width:44px}      /* 0066: a glyph needs one width, whatever the sport is called */   /* 0061: one edge down the column, and the badge's geometry stops depending on a word */
.b .sp.dark{background-color:rgba(0,0,0,.08)}
.b .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.b .l{display:flex;align-items:center;gap:8px;min-width:0;align-self:stretch}   /* the row spans the band, so the pill's full height is the band's */
.b .r{display:flex;align-items:center;gap:8px;flex:none;font-size:12px;font-weight:600}
.b.past{background:var(--tint);color:var(--ink)}   /* the week's hierarchy (7 September, V5): the past quiet, today solid, the days ahead alive but light */
.b.past .sp{background-color:var(--sc);background-image:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.13) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,0) 88%);color:var(--sf,#fff)}   /* the sport's colour on every pill, the band around it quiet */
.b.past .tick{background:var(--green-bg);color:#fff}
.b .tick.off{background:var(--honey);color:var(--deep)}      /* 0065: off plan — the wave, honey, as everywhere else off plan is honey */
.b .tick.miss{background:var(--red);color:#fff}              /* 0065: missed — crossed out */
.b.past .cost{color:var(--muted);opacity:1}
.b.ahead{background:color-mix(in srgb,var(--sc) 14%,var(--card));color:var(--deep)}
.b.ahead .sp{background-color:var(--sc);background-image:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.13) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,0) 88%);color:var(--sf,#fff)}
.b.race{background:var(--lemon);color:var(--on-lemon)}
.b.race .sp{background-color:var(--sc);background-image:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.13) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,0) 88%);color:var(--sf,#fff)}
/* 0059: a day with no session carries a pill like any other, and the band around it is quiet */
.b.rest{background:var(--tint);color:var(--ink);padding-left:0}
.b.rest .nm{font-weight:600}
.b .sp.rest,.b .sp.away{background-color:color-mix(in srgb,var(--rest) 26%,var(--card));color:var(--deep)}      /* rest is the coach's instruction, so it wears the coach's colour */
.b .sp.none{background-color:var(--card);background-image:none;border-color:var(--rule);color:var(--muted)}   /* 0059 amended: a day holding nothing recedes — the quiet pill of variant A, with its own word */
.b .sp.miss{background-color:var(--card);background-image:none;border-color:var(--rule);color:var(--muted)}   /* 0059 amended: no pill is red. The band says missed, not the pill */

/* 0059 point 5: the state washes the band; the sport's pill is left alone, because the state
   belongs to the day and the pill to the session, and the session was still a bike */
.b .cost{font-size:11px;font-weight:600;opacity:.75;margin-right:2px}
.tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.1)}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.1em;background:rgba(0,0,0,.1);color:var(--ink)}
.bands{display:flex;flex-direction:column;gap:6px;min-width:0}
/* 0102: Home's tile of the days: the last three as the calendar draws them, oldest first, then today */
.drow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.drow .dn{width:38px;flex:none;text-align:center}
.drow .dn .n{font-size:17px;font-weight:600;line-height:1}
.drow .dn .w{font-size:11px;color:var(--muted)}
.drow .db{flex:1;min-width:0}
#h-days .row.lbl[data-go]{cursor:pointer}
.dtoday{display:flex;flex-direction:column;gap:8px;cursor:pointer;padding-top:2px}
/* calendar */
.rule{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 18px 6px;color:var(--muted);font-size:15px;font-weight:600}
.rule span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rule span:last-child{flex:none}
.rule .hair{flex:1;height:1px;background:var(--mark);opacity:.22;min-width:20px}
.lbl .micro{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.lbl .micro::after{content:"";flex:1;height:1px;background:var(--mark);opacity:.22;min-width:16px}   /* small labels: both ends of a deep-green hairline (accents board, C) */
.lbl .micro:only-child::after{display:none}
.rule{color:var(--deep)}
.rule span:last-child{letter-spacing:0;text-transform:none;font-weight:400;font-size:11px}
.monthband{margin:14px 18px 6px;display:flex;align-items:center;gap:12px;padding:6px 0}
.monthband .m{font-size:15px;font-weight:600;color:var(--muted)}
.monthband .l{flex:1;border-top:1px solid var(--rule)}
.daywrap{position:relative;margin:0 0 6px}
.t{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:8px 8px 8px 6px;margin:0 12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;overflow:hidden}
.daywrap.today .t{border:1.5px solid var(--deep)}
.daywrap.today .t::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--mark)}
.t .num{width:44px;flex:none;text-align:center;padding:6px 0}
.t .num .n{font-size:20px;font-weight:500;line-height:1}
.daywrap.today .t .num .n{font-weight:700;color:var(--deep)}
.t .num .w{font-size:11px;font-weight:600;text-transform:none;color:var(--muted);margin-top:3px}
.daywrap.today .t .num .w{color:var(--deep)}
.t .body{flex:1;min-width:0}
.daydot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--lemon);margin-left:4px;vertical-align:top}
/* home */
.hero{padding:6px 20px 16px;color:#fff;display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.hero .greet{font-size:14px;opacity:.85}
.hero .dayline{color:var(--lemon);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .with{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.hero .when{font-size:12px;opacity:.8;margin-top:2px}
body.firstscreen .top{color:var(--ink)}.hero.ink{color:var(--ink)}.hero.ink .greet{opacity:.7}
/* 21 September (Kostas: "dark text reads wrong here"): the first screen's hero on the deep panel, white, the lime mark, as the desktop's */
.first-panel{background:var(--deep-bg);color:#fff;border-radius:22px;padding:18px 18px 20px;display:flex;gap:16px;align-items:flex-start;margin-top:4px}
.first-panel .sphere{flex:none}.first-panel .with{font-size:14px;opacity:.75}.first-panel .greet{font-size:22px;font-weight:600;line-height:1.2}
.first-panel .first-intro{font-size:15px;line-height:1.5;color:rgba(255,255,255,.84);margin-top:10px}
.obhead .small:empty{display:none}   /* 15 September: the first screen's hero stands on the ground, not on the panel; it was white on white since 0056 */
.sphere{position:relative;flex:none;border-radius:50%;border-style:solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 -6px 16px rgba(0,0,0,.12),inset 0 6px 14px rgba(255,255,255,.35)}
.sphere.lime{background:transparent;border:1.5px solid var(--lemon);color:var(--lemon);box-shadow:none}   /* 0116: Ga — the ring's width set inline, the mark inside in the same colour */
.sphere.deep{background:transparent;border:1.5px solid var(--green);color:var(--green);box-shadow:none}   /* 0116: on a light ground, green */
.words{padding:14px 20px 4px}
.words .serif{font-size:15px;line-height:1.5}
.dots{display:flex;flex-wrap:wrap;gap:4px}
.big{font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.racecard{margin:12px 12px 0;padding:16px 18px;border-radius:18px;background:var(--lemon);color:var(--on-lemon);display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 36px rgba(54,80,64,.16);cursor:pointer}
.racecard .n{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.racecard .n small{font-size:11px;font-weight:600;letter-spacing:.12em;opacity:.7;margin-left:4px}
/* the bar at the bottom */
.bar{position:fixed;left:16px;right:16px;bottom:calc(2px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:stretch;height:60px;z-index:7}
.pill{flex:1;display:flex;justify-content:space-around;align-items:center;border-radius:999px;position:relative;background:rgba(255,255,255,.34);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 28px rgba(42,42,44,.14),inset 0 1px 0 rgba(255,255,255,.7)}
.pill a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:48px;padding:0 14px;border-radius:999px;font-size:11px;font-weight:500;color:var(--green);min-width:72px;text-decoration:none;position:relative;z-index:1;transition:color .3s}   /* 13 September (Kostas): the white glass kept, more see-through, a little lower; the deep-green glass of the morning did not last the day */
.pill a.on{color:var(--lemon)}
.pill .ind{position:absolute;left:0;top:6px;height:48px;border-radius:999px;background:transparent;transition:transform .48s cubic-bezier(.5,0,.15,1),width .48s cubic-bezier(.5,0,.15,1),opacity .3s;z-index:0;will-change:transform}
.pill .ind::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green-bg)}
.pill .ind.stretch::after{animation:stretchx .48s cubic-bezier(.5,0,.15,1)}
@keyframes stretchx{0%{transform:scaleX(1)}45%{transform:scaleX(1.32) scaleY(.88)}100%{transform:scaleX(1)}}
@keyframes squish{0%{transform:scale(1)}40%{transform:scale(1.14,.88)}70%{transform:scale(.96,1.06)}100%{transform:scale(1)}}
.pill a .mark{position:absolute;top:-2px;right:6px;width:8px;height:8px;border-radius:999px;background:var(--lemon);border:1px solid #fff}
/* 0070: what the athlete could do now. A row says what the record does not hold and goes where it
   is fixed; the × puts it away, and twice retires it. Nothing here is coloured by importance. */
.tiles{display:flex;flex-direction:column;gap:8px;margin:12px 12px 0}
.arrow{width:32px;height:32px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--deep);display:flex;align-items:center;justify-content:center;flex:none;padding:0;cursor:pointer}   /* 0090: the carousel tiles' arrows */
.arrow:active{background:var(--tint)}
.cdots{display:flex;gap:5px;justify-content:center}
.cdots i{width:5px;height:5px;border-radius:50%;display:block;background:var(--rule-strong)}
.cdots i.on{background:var(--mark)}   /* 11 September, Kostas: a tile stands where every other card stands */
.tile{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:11px 8px 11px 16px;min-height:52px;cursor:pointer}
.tile .tx:active{background:var(--tint)}   /* 0104: a tile's area does nothing; its parts light */
.tile .tl{flex:1;min-width:0}
.tile .tt{font-size:14px;font-weight:600;color:var(--ink)}
.tile .tn{font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
.tile .tx{flex:none;width:28px;height:28px;border:0;border-radius:999px;background:transparent;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tile .tx:active{background:var(--tint);color:var(--ink)}

/* the coach page */
.thread{display:flex;flex-direction:column;gap:16px;padding:14px 20px 20px}
.thread .said{padding:0 2px;border-radius:12px}
.thread .said.lit{animation:lit 2.4s ease-out both}   /* 0053 amended, 14 September: the message a note opened, lit for a moment. 28 September 2026 (Kostas: "a shading that doesnt change the formatting"): the tint is drawn around the message, outside it, and fades; nothing inside moves (it gained padding, and the words re-wrapped) */
@keyframes lit{0%,45%{background:var(--tint);box-shadow:0 0 0 10px var(--tint)}100%{background:transparent;box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.thread .said.lit{animation-duration:1ms}}
.bubble{background:var(--tint);color:var(--ink);border:0;border-radius:18px 18px 4px 18px;padding:10px 14px;max-width:86%;align-self:flex-end;white-space:pre-line}   /* 26 September 2026: the athlete's own lines kept, a list written with Shift+Enter included */
body.sky:not(.w-land-page) #main .bubble{background:var(--card);border:1px solid var(--rule);box-shadow:0 1px 2px rgba(36,58,46,.06)}   /* 20 September: on the sky ground the tint bubble vanished; white with a hairline, as bright against its ground as the desktop's */
.newrule{display:flex;align-items:center;gap:10px;color:var(--deep);font-size:11px;font-weight:600}
.newrule span{background:var(--lemon);color:var(--on-lemon);padding:2px 8px;border-radius:999px}   /* 6 October 2026 (Kostas: "Fix new in dark more"): the word in the lime's own ink, dark in both themes */
.newrule::before,.newrule::after{content:"";flex:1;border-top:1px solid var(--lemon)}
/* 0068: what woke the coach, between two of its own messages. A hairline in the rule's colour, not the unread marker's lemon */
.woke{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;margin:2px 0}
.woke span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.woke::before,.woke::after{content:"";flex:1;border-top:1px solid var(--rule)}
#reading-line{color:var(--muted);font-style:italic;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes swell{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes circle{to{transform:rotate(360deg)}}
.sphere.thinking{animation:swell 2.6s ease-in-out infinite}
.sphere.thinking::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent;border-top-color:var(--lemon);border-right-color:color-mix(in srgb,var(--lemon) 35%,transparent);animation:circle 1.8s linear infinite}
.sphere.deep.thinking::after{border-top-color:var(--deep);border-right-color:color-mix(in srgb,var(--deep) 35%,transparent)}
/* the first screen: nothing is being reviewed before Start, so the mark is at rest, no arc, no swell (Kostas, 20 September: the logo in the picture was wrong) */
body.firstscreen .sphere.thinking,.w-first .sphere.thinking{animation:none}
body.firstscreen .sphere.thinking::after,.w-first .sphere.thinking::after{display:none}
.composer{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));padding:14px 12px 0;display:flex;flex-direction:column;gap:6px;background:linear-gradient(to bottom,rgba(247,250,248,0),rgba(247,250,248,.9) 18px,rgba(247,250,248,.97) 40px);z-index:5}
.composer .box{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(42,42,44,.08)}
.chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips[hidden]{display:none}   /* .chips sets display:flex, which beat the browser's [hidden]: the empty attachments row was holding 12px above the box */
.tobottom{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom) + var(--composer-h,136px) + 6px);width:44px;height:44px;border-radius:999px;background:var(--card);color:var(--deep);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(42,42,44,.12);display:none;align-items:center;justify-content:center;z-index:6;cursor:pointer}
body.chat-up .tobottom{display:flex}
/* 0062: the same coat as the chat's, above the bottom bar, and only while today is off screen */
.totoday{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));height:44px;padding:0 18px;border-radius:999px;background:var(--card);color:var(--deep);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(42,42,44,.12);display:none;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.06em;z-index:6;cursor:pointer}
body.awayfromtoday .totoday{display:flex}
.conn{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.connbtn{height:44px;border-radius:12px;border:1px solid var(--rule);background:var(--card);color:var(--muted);font:inherit;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.connbtn:disabled{cursor:default;color:var(--dim)}
.connbtn.on{color:var(--green);font-weight:600;border-color:color-mix(in srgb,var(--green) 35%,var(--rule))}
.chips .chip{flex:none}
.chip{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:0 14px;height:36px;font-size:13px;color:var(--deep);background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;font-family:inherit;font-weight:500}
.box{display:flex;align-items:flex-end;gap:8px;background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:6px 6px 6px 8px;min-height:46px}
.box .plus{width:34px;height:34px;border-radius:999px;border:0;background:var(--tint);color:var(--deep);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.box textarea{flex:1;border:0;background:transparent;font:inherit;font-size:15px;resize:none;outline:none;max-height:120px;color:var(--ink);box-sizing:border-box;min-height:34px;padding:6px 2px;line-height:22px}   /* 18 September: one line as tall as + and send (34 px: a 22 px line, 6 px above and below), so the words sit level with both, empty or written — Kostas, of the desktop's box; the phone's sat 3.75 px low too */
.round{width:34px;height:34px;border-radius:999px;background:var(--lemon);color:var(--on-lemon);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;flex:none}
.quote{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--green);background:var(--tint);border-left:3px solid var(--green);padding:6px 10px;border-radius:0 6px 6px 0}
.quote .x{border:0;background:transparent;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:999px;background:var(--lemon);color:var(--on-lemon);font-weight:600;border:0;font:inherit;font-size:13px;cursor:pointer}
/* sheets */
.sheet{position:fixed;left:0;right:0;top:0;height:100vh;background:rgba(36,58,46,.35);z-index:10;display:flex;align-items:flex-end}
@supports not (-webkit-touch-callout:none){.sheet{height:auto;bottom:0}}   /* Android's Chrome: 100vh counts the room under the address bar, so a sheet's foot sat off the screen and, its content fitting, never scrolled (the first tester, 2 October 2026); pinned to the bottom, a fixed box is the screen you can see (Chrome's own account). Never on an iPhone, where the layout viewport can be short of the screen and 100vh is what covers it (0056): -webkit-touch-callout is iOS's alone */
.sheet.layer{z-index:11;background:rgba(36,58,46,.25)}
.sheet[hidden]{display:none}
.sheet .panel.pulling > *{pointer-events:none}   /* 0073 amended: while the card moves, nothing on it answers */
.sheet .panel{will-change:transform;touch-action:pan-y;overscroll-behavior:contain;background:var(--card);width:100%;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:0 20px calc(24px + env(safe-area-inset-bottom));position:relative}   /* the top 16px are the veil's, so the cross sits at 10px whether scrolled or not */
.sheet .panel .veil{position:sticky;top:0;height:16px;z-index:3;pointer-events:none}   /* the cross lives inside it and stays put */
.sheet .panel .veil::before{content:"";position:absolute;left:-20px;right:-20px;top:0;height:56px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent);opacity:0;transition:opacity .25s}
.sheet .panel.scrolled .veil::before{opacity:1}
.sheet .x{position:absolute;top:10px;right:-8px;pointer-events:auto;width:32px;height:32px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--muted);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
body.locked .composer,body.locked .bar{display:none}
.field{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.field input,.field textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--card);resize:none;width:100%;min-width:0;box-sizing:border-box}
.field select{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--card);width:100%;min-width:0;box-sizing:border-box;min-height:44px;color:var(--ink)}   /* 0125: gender, a choice of three */
body.locked{position:fixed;left:0;right:0;overflow:hidden}
html.sheet-open{background:var(--card)}   /* whatever iOS shows beyond the page while a sheet is up is the sheet's own white */
/* 0164 (Kostas: "your rule"): a list opens as a page from the right, an arrow back named after its tab; one thing as an iPhone card, the
   page behind stepped back (stepBack in app.js) and darkened, black above it */
.sheet.sh-page{background:var(--card);align-items:stretch}
.sheet.sh-page .panel{max-height:none;height:100%;border-radius:0;padding-top:env(safe-area-inset-top);animation:page-in .32s cubic-bezier(.2,.8,.2,1)}
.sheet.sh-page .pbar{position:sticky;top:0;z-index:4;height:48px;display:flex;align-items:center;margin:0 -20px;padding:0 22px;background:var(--card)}
.sheet.sh-page .back{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--green);font:inherit;font-size:17px;font-weight:500;padding:8px 0;cursor:pointer}
.sheet.sh-page .back svg{flex:none;width:12px;height:20px}
.sheet.sh-page .panel .sh-title{padding-right:0}
.sheet.sh-page .panel .sh-title .j-crown{transform:none}   /* the nudge put the crown on the cross's line; a page has its arrow above instead */
.sheet.sh-page .sh-title h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
.sheet.sh-card{background:rgba(0,0,0,.34)}
.sheet.sh-card .panel{max-height:none;height:calc(100% - env(safe-area-inset-top) - 16px);border-radius:14px 14px 0 0;animation:card-up .34s cubic-bezier(.2,.8,.2,1)}
html.card-open,html.card-open:has(> body.sky:not(.land-page)),html.card-open body,html.card-open body.sky:not(.land-page){background:#000}   /* over the page's own ground rules */
html.card-open #toppanel{border-top-left-radius:12px;border-top-right-radius:12px}
.sheet.sh-page .panel.scrolled .pbar{box-shadow:0 1px 0 var(--rule)}   /* a rule under the arrow once the list runs under it */
@keyframes page-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes card-up{from{transform:translateY(100%)}to{transform:none}}
/* 13 September: on iOS 26.0 a home-screen app whose document cannot scroll is laid out as if Safari's bottom bar were there: the page
   gets 812 of 874 pt on an iPhone 16 Pro, fixed content below that line is cut, and the OS fills the strip pale (measured by the Build
   probe on Kostas's phone, Chrome and Safari being the same engine there). A card is up over a body fixed in place, so the document had
   nothing to scroll. Given something, a block the height of the screen after the body, invisible, the strip went. */
html.sheet-open::after{content:"";display:block;height:100lvh;pointer-events:none}
input,textarea{scroll-margin-bottom:14px}   /* 13 September (Kostas): a focused box scrolls to sit just above the keyboard, with this much air */
.morerow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--rule);cursor:pointer}   /* 0163: a row's two halves never touch */
#m-conn > span:first-child,#w-conn > span:first-child{flex:none}
#m-conn-state,#w-conn > .small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}   /* 0163 (Kostas: "connections listed look terrible"): one line, cut with an ellipsis, as Settings does */
/* the splash is fixed and dark, but iOS paints the home-indicator inset from the page's
   CANVAS — html's background — which is the light ground. So the canvas is dark until
   the splash goes (Kostas, 10 September: a light bar across the bottom while loading). */
html.booting,html.booting body{background:var(--deep-bg)}
.splash{position:fixed;inset:0;z-index:20;background:var(--deep-bg);display:flex;align-items:center;justify-content:center;color:var(--lemon)}
.splash svg{animation:breathe 1.6s ease-in-out infinite}
.first{padding:24px 20px 40px;display:flex;flex-direction:column;gap:14px}
.drop{border:1px dashed var(--rule-strong);border-radius:10px;padding:18px;text-align:center;background:var(--tint)}
.drop .chip,.sheet .drop .chip{background:var(--card);border-color:transparent}
.ridebox{margin:0 -12px}
.ridebox .titlerow{padding-top:0}
body.sky .sheet .titlerow,.sheet .titlerow{color:var(--ink)}
body.sky .sheet .titlerow .small,.sheet .titlerow .small{color:var(--muted)}
@media (min-width:700px){body{max-width:480px;margin:0 auto}.bar{left:calc(50% - 224px);right:calc(50% - 224px)}.composer{left:calc(50% - 240px);right:calc(50% - 240px)}}
.thinking{display:flex;align-items:center;gap:12px;margin-top:10px}
.waitmark{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--deep);animation:swell 2.6s ease-in-out infinite}   /* 0091: the mark alone, no circle */
.waitline{height:2px;border-radius:999px;background:var(--rule);overflow:hidden;max-width:220px;margin-top:8px;position:relative}
.waitline i{display:block;height:100%;background:var(--green-bg);border-radius:999px;transition:width .5s linear}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.waitline.sweep i{transition:none;animation:sweep 1.8s ease-in-out infinite}
.thinkmark{width:34px;height:34px;border-radius:999px;background:var(--tint);color:var(--deep);display:flex;align-items:center;justify-content:center;flex:none;animation:thinkbreath 2.6s ease-in-out infinite}
@keyframes thinkbreath{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.thinkmark{animation:none}}
.reading{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--rule);cursor:pointer}
.reading:first-child{border-top:0}
.reading .chev{color:var(--dim);font-size:20px;line-height:1}
.gauge{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;border:0;border-radius:6px;background:transparent;padding:10px 6px 8px;font:inherit;color:inherit;position:relative;min-width:0}
.laps{border-collapse:collapse;width:100%;font-size:12px}
.laps th{text-align:right;font-weight:600;color:var(--deep);font-size:11px;padding:6px 6px;border-bottom:1px solid var(--rule);cursor:pointer;user-select:none}
.laps th.on{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.laps tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--lemon) 12%,var(--card))}
.laps td{text-align:right;padding:5px 6px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.laps th:first-child,.laps td:first-child{text-align:left}
.titlerow .x{position:static;width:32px;height:32px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--muted);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.swp{display:inline-block;width:14px;height:8px;border-radius:4px;background:var(--lemon);margin-right:6px;vertical-align:middle}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--rule)}
.line:first-child{border-top:0}
.qmark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:600;padding:0;margin-left:4px;vertical-align:1px;cursor:pointer;letter-spacing:0;text-transform:none}
.clamp4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.t:not(:has(.b[data-ws],.b[data-ride],.b[data-said])):active,.morerow:active,.reading:active,.gauge:active,.numpart:active,.drow:active,[data-go]:active,[data-face]:active,[data-offer]:active,[data-race-open]:active,[data-numbers-sport]:active{background:color-mix(in srgb,var(--green) 8%,var(--card))}}
.racecard{cursor:default}.racecard .racedoor{cursor:pointer;margin:-8px -10px;padding:8px 10px;border-radius:12px}@media (hover:hover){.racecard .racedoor:active{background:rgba(36,58,46,.1)}}
.numpart{border-radius:10px;margin:-4px -6px;padding:4px 6px;cursor:pointer}.card[data-numbers]{cursor:default}.dtoday{cursor:default}
/* 0104: with a pointer, the same parts light under it and nothing else on a tile does */
/* 0104 amended, 19 September (Kostas): "On phone now make hoverable buttons everywhere, not tiles. Tiles remain inactive area for buttons."
   Every button-like part lights under the pointer, with the shade its press already had; a tile's area never does. */
@media (hover:hover){.obhead:active,.line[data-far]:active,.dash:active{background:color-mix(in srgb,var(--green) 8%,var(--card))}}
.dash{border-radius:10px;padding:4px 0;background:none;border:0;font:inherit;color:inherit}   /* the ride page's expanders: the dashed row with the chevron is the button (Kostas, 19 September: "the button for expanding the metrics and laps?" — yes, those) */
@media (hover:hover){.tile[data-tile]:active{background:color-mix(in srgb,var(--green) 8%,var(--card)) !important}}   /* the face carries an inline transparent background inside its card */
.tile[data-tile]{border-radius:12px}.obhead{border-radius:10px}
@media (hover:hover){
@media (hover:hover){.reading:hover,.gauge:hover,.numpart:hover,.drow:hover,[data-go]:hover,[data-face]:hover,[data-offer]:hover,[data-numbers-sport]:hover,.tile .tx:hover,.arrow:hover,.morerow:hover,.line[data-far]:hover,.obhead:hover,.t:not(:has(.b[data-ws],.b[data-ride],.b[data-said])):hover,.dash:hover{background:color-mix(in srgb,var(--green) 8%,var(--card))}}
@media (hover:hover){.tile[data-tile]:hover{background:color-mix(in srgb,var(--green) 8%,var(--card)) !important}}
@media (hover:hover){.racecard .racedoor:hover{background:rgba(36,58,46,.1)}}
.reading:hover,.gauge:hover,.drow:hover,[data-go]:hover{border-radius:10px}
.chip:hover,.connbtn:hover,.top .circ:hover,.back:hover,.tobottom:hover,.totoday:hover,.sheet .x:hover,.titlerow .x:hover,.quote .x:hover,.qmark:hover{background:color-mix(in srgb,var(--green) 14%,var(--card))}
.btn:hover,.round:hover,.box .plus:hover{filter:brightness(.96)}
.iconbtn:hover{background:color-mix(in srgb,var(--red) 10%,var(--card));color:var(--red)}
}
.chip:active,.btn.quiet:active,.top .circ:active{background:color-mix(in srgb,var(--green) 14%,var(--card))}
.sheet .chip{background:var(--tint);border-color:var(--tint)}   /* on the white sheet a glass chip vanishes; the pill shows on the tint */
.btn:active,.round:active{filter:brightness(.92)}
.crown{padding:16px 8px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:end}
.crown .gauge{border:0;background:transparent;padding:0 2px;gap:9px}   /* 13 September (Kostas): the labels sat too close to the dials */
.crown .gauge .micro{font-size:11px;letter-spacing:.1em;color:var(--ink)}   /* 11 September, Kostas: the labels were barely visible */
.flag{display:inline-block;width:9px;height:9px;box-sizing:content-box;margin-right:7px;vertical-align:-1px;background:repeating-conic-gradient(var(--lemon) 0 25%,var(--on-lemon) 0 50%) 0 0/6px 6px;border:1.5px solid var(--flagline,#fff)}   /* three by three, whole squares, lined in the colour opposite its ground */
.b.race .flag{--flagline:var(--deep)}
.dash{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer}
.dash span{flex:1;border-top:1px dashed color-mix(in srgb,var(--deep) 40%,transparent)}
.dash em{font-style:normal;font-size:11px;color:var(--deep);font-weight:600}
.cursor{position:absolute;top:8px;background:var(--deep-bg);color:#fff;border-radius:10px;padding:6px 9px;font-size:11px;line-height:1.4;white-space:nowrap;pointer-events:none}
.cursor b{color:var(--lemon)}
.cursor i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.first .serif{white-space:normal}
.obrow{border-top:1px solid var(--rule);padding:12px 0}
.obev{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:14px}
.obev a{color:var(--muted);flex:none}
.datechip{position:relative;overflow:hidden;cursor:pointer;background:var(--card);border-color:var(--rule-strong)}
.datechip.set{background:var(--tint);border-color:var(--green);font-weight:600}
.datechip[aria-disabled]{opacity:.45;pointer-events:none}
.obadd{background:var(--green-bg);border-color:var(--green);color:#fff;font-weight:600;padding:0 18px}
.obadd:disabled{opacity:.35}
.datechip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;font-size:16px}   /* the picker opens from the chip; the box itself is never seen */
#ob-birthday.bad{border-color:var(--red)}   /* 2 October 2026: typed, a date of birth that is not a date is marked once the box is left (31.02, a year to come) */
.obhead{display:flex;align-items:center;gap:12px;cursor:pointer}
.obhead .tick{width:22px;height:22px;border-radius:999px;border:1px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--lemon);flex:none;background:transparent}
.obrow.done .tick{background:var(--green-bg);border-color:var(--green)}
.obhead .oblabel{flex:1;font-size:15px}
.obrow.done .oblabel{color:var(--muted)}
.obrow.open .oblabel{font-weight:600;color:var(--ink)}
.obans{display:block;margin-top:2px;font-weight:400;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}   /* the open row's title in bold: the athlete sees which one is chosen (Kostas, 10 September) */
.obbody{padding:6px 0 4px 34px}
.iconbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.iconbtn:active{background:color-mix(in srgb,var(--red) 14%,var(--card));color:var(--red)}

/* the week: the head stays, the calendar scrolls on its own */
body.weekfixed{overflow:hidden;padding-bottom:0;height:100vh;display:flex;flex-direction:column}
@supports not (-webkit-touch-callout:none){body.weekfixed{height:100dvh}}   /* Android's Chrome: 100vh counts the room under the address bar, so the week's foot sat under the screen's edge (the first tester, 2 October 2026); dvh is the screen you can see. Never on an iPhone, where dvh can come out short (0059's white bar): -webkit-touch-callout is iOS's alone */
body.weekfixed > .top{flex:none}
body.weekfixed > #main{flex:1;min-height:0;display:flex;flex-direction:column}
.weekscroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;position:relative;z-index:1;flex:1;min-height:0}
.weekscroll .month{position:relative;display:flow-root}
.weekscroll .monthband{position:relative;margin:0;padding:8px 18px 10px}   /* 0056: the stuck month lives on the panel; these are the headings it takes its name from */

.weekscroll .monthband .m{color:var(--deep)}
.weekscroll .monthband .l{border-top-color:var(--rule)}

.line.go{cursor:pointer;border-radius:10px;margin:0 -8px;padding:7px 8px;align-items:center;gap:8px}
.line.go .chev{display:inline;color:var(--muted);font-size:16px;line-height:1;flex:none}
@media (hover:hover){.line.go:hover,.line.go:active{background:color-mix(in srgb,var(--green) 8%,var(--card))}}

/* 8 September, night: the chat lives in the pill, right of Home; its own tint when unselected, the shared indicator when chosen */
.pill a.coach.on{animation:squish .5s cubic-bezier(.5,0,.15,1)}
.pill a.coach .mark{right:4px}

.chart-switches{display:flex;gap:6px;flex-wrap:nowrap;margin:0 0 8px}   /* 13 September (Kostas): the five pills on one line, so they are smaller than a chip */
.chart-switches .chip{display:inline-flex;align-items:center;gap:5px;opacity:.55;height:28px;padding:0 10px;font-size:12px}
.chart-switches .chip.on{opacity:1}
.chart-switches .chip i{width:8px;height:8px;border-radius:999px;background:var(--mc);display:inline-block}

/* 9 September: the week's day tiles go side to side with square edges; Home's tiles stay as they are (Kostas) */
.weekscroll .t{margin:0;border-radius:0;align-items:center}   /* 0056: side to side, and the day's number on one middle with its workouts (Kostas, 10 September) */
.weekscroll .daywrap{margin:0 0 -1px}   /* 0056: the days touch, and the tile below sits on the rule above so it stays one wide */
.weekscroll .daywrap.today{z-index:1}   /* 0056: today paints above its neighbours, or their rules cut into its border and its spine */
/* the done pill: off plan, the cost and the duration on one line; cost in the duration's style, its own colour, and named */
.b .r>*{display:inline-flex;align-items:center;height:18px;line-height:18px}
.b .cost{font-size:12px;font-weight:600;opacity:1;color:var(--muted);margin-right:0;gap:4px}   /* done as planned: quiet */
.b .cost i{font-style:normal;font-size:11px;font-weight:600;opacity:.8}
.b.past .cost{color:var(--muted)}
.b.past.off .cost{color:var(--honey)}   /* off plan: honey says so (Kostas, 9 September) */

/* the laps peek: the header and two laps show, the rest fades and blurs away; the dashed line's chevron turns when open */
.laps-peek{max-height:118px;overflow:hidden;position:relative}   /* the header and two laps clear, a sliver of the third fading away */
.laps-peek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(rgba(255,255,255,0),var(--card) 85%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%);pointer-events:none}
.dash em{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--deep)}   /* the arrow alone, no circle */
.dash em svg{transition:transform .3s ease}
.dash.open em svg{transform:rotate(180deg)}

/* 0052: a changed day, once: the old session struck through beside the new, in lemon */
/* 0052 amended 13 September (Kostas): a changed session carries no colour of its own; the struck-through old label beside the new is the whole mark, and the band and pill are already the updated session's */
.b .nm s{opacity:.55}
.b.rest .nm s{opacity:.55}

/* the steps on a phone: shorter, each anchored to its top just under the pinned phone, so no plain space sits between them */

/* the gauges as arcs that match their numbers */

/* the sign-in sheet: a wide button, the code large and spaced */
.btn.wide{width:100%;height:46px;font-size:15px}
.field textarea.grow{display:block;overflow:hidden;resize:none;min-height:44px;line-height:1.4}   /* grows with its text, so the whole answer is in view while it is edited */
.field input.code{font-size:28px;letter-spacing:.35em;text-align:center;padding:12px;font-variant-numeric:tabular-nums}
.field input.code::placeholder{letter-spacing:.2em;color:var(--dim)}
/* our journey (9 September): the crown by the search, and the sheet of days */
.jhead{display:flex;align-items:center;gap:14px;margin-top:4px}.jcrown{width:58px;height:58px;border-radius:999px;background:var(--deep-bg);color:var(--lemon);display:flex;align-items:center;justify-content:center;flex:none}.jcrown svg{width:34px;height:27px}
.jbig{font-size:46px;font-weight:700;line-height:1;letter-spacing:-.02em}
.jweeks{margin-top:8px}.jweek{display:grid;grid-template-columns:22px repeat(7,34px);gap:8px 6px;justify-content:start;align-items:center;margin-top:8px}.jwk{font-size:11px;font-weight:600;color:var(--dim);text-align:right;padding-right:2px}
.jd{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--muted);font-size:12px;font-weight:600;font-style:normal;border:2px solid transparent;box-sizing:border-box}
.jd-blank{visibility:hidden}.jd-m{background:var(--lemon);color:var(--on-lemon)}.jd-s{background:var(--green-bg);color:#fff}.jd-b{background:var(--lemon);color:var(--on-lemon);border-color:var(--green)}
.jd-ahead{background:transparent;border-color:var(--rule);color:var(--dim)}.jd-today{box-shadow:0 0 0 2px var(--deep)}
.small .jd{display:inline-flex;width:14px;height:14px;font-size:0;vertical-align:-2px;margin-right:4px;border-width:1.5px}
/* the journey pill by the search, and the lime marker for a word or two (Kostas, 9 September) */
.top .circ.journey{width:auto;padding:0 11px 0 9px;gap:6px;border-radius:999px;background:color-mix(in srgb,var(--lemon) 86%,transparent)}   /* 13 September (Kostas): search, feedback and the bell white; the crown keeps its lime */.jdays{font-size:13px;font-weight:700;color:inherit}
.key{font-weight:700;color:var(--green)}.top .key{color:var(--lemon)}
.hairline{height:1px;background:var(--rule)}
.back{width:32px;height:32px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;min-height:44px}
/* the keyboard's height, measured by the app (10 September): the composer and an open sheet sit above it, the pill steps aside */
.topblur{position:fixed;top:0;left:0;right:0;height:calc(env(safe-area-inset-top) + 34px);z-index:5;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 70%,transparent 100%)}   /* the chat's status area: the same blur Home's header wears once scrolled, fading out below (13 September) */
.composer.typing .chips{visibility:hidden;pointer-events:none}   /* 13 September (Kostas): the starters go once something is written in the box; their room stays, so nothing moves under the finger. The composer and the bar are placed by the keyboard module in app.js while a box has the focus */
body.kb-open .sheet .panel{padding-bottom:calc(24px + env(safe-area-inset-bottom) + var(--kb-lift,0px));max-height:calc(100dvh - 24px)}   /* no transition: the lift is measured from where the box is, and an animating padding was counted twice */   /* the sheet never moves: the panel grows at the bottom by what the focused box needs, so the box rises and the panel's white reaches the keyboard with nothing showing between (Kostas, 10 September) */

/* 0067: the three steps that put a file here without a Files app */
.guide{margin-top:12px;border-radius:16px;background:var(--tint);padding:12px 14px 13px}
.guide .micro{color:var(--muted)}
.guide .steps{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:none}
.guide .steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);line-height:1.25}
.guide .steps li span{flex:none;width:20px;height:20px;border-radius:999px;background:var(--lemon);color:var(--on-lemon);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.guide .steps li b{font-weight:700;color:var(--green);padding:0 1px}

/* 16 September 2026, 0059 amended, the canvas "Calendar Without the Shade" approved: the shade behind a workout's title is gone on
   every day but today; the sport pill, the flag, the words and the minutes stay. Today keeps its solid band and its tile. */
.b.ahead,.b.past,.b.rest,.b.race,.b.open,.b.miss,.b.off,.b.skipped,.b.done{background:transparent}
.b.ahead,.b.past,.b.race{color:var(--ink)}
.b.race .flag{--flagline:var(--deep)}

/* 16 September 2026, 0059 amended again (Kostas: "activate not the full day shade, but only the capsule for the workout we had when
   user touches / hovers the workout. for all past, and future"): the capsule's shade comes back under the finger (1 October 2026: a finger's press now shades nothing and a capsule held rises, his "yes"; this was .hold, set on
   pointerdown) or the pointer (hover, where there is one), and goes when it lifts. Today's band keeps its shade as it is. */
.b{transition:background-color .15s}
/* A phone's touch sets :hover on what it touches, and the "no hover" override below used to sit later at the same weight, so it
   won over the held shade and the capsule never lit on a phone (Kostas, 16 September, twice). The pointer's hover lives only
   where there is a pointer; the finger's shade stands on its own. */
@media (hover:hover){.b.ahead:active{background:color-mix(in srgb,var(--sc) 14%,var(--card));color:var(--deep)}}
@media (hover:hover){.b.past:active{background:var(--tint);color:var(--ink)}}
@media (hover:hover){.b.race:active{background:var(--lemon);color:var(--on-lemon)}}
@media (hover:hover){
@media (hover:hover){.b.ahead:hover{background:color-mix(in srgb,var(--sc) 14%,var(--card));color:var(--deep)}}
@media (hover:hover){.b.past:hover{background:var(--tint);color:var(--ink)}}
@media (hover:hover){.b.race:hover{background:var(--lemon);color:var(--on-lemon)}}
}
/* D2 on the phone. Kostas, 18 September, shown the phone with the desktop's D2 (0097 amended): "yes and make tiles have same borders, as in web
   we did". The page a notch deeper than its cards, and every card the web's tile: the thin rule border, a white fill, one soft shadow. The glass
   cards (the dials and the ask box) become plain cards, as the desktop's dials did ("just make health tile borders like your numbers"), and the race
   card's own heavier shadow gives way to the same one. Scoped to the app's pages: the landing keeps the ground it was drawn with, and a sheet's
   cards stay flat inside their panel. */
html:has(> body.sky:not(.land-page)),body.sky:not(.land-page){background:var(--page)}
body.sky:not(.land-page) #main .card,body.sky:not(.land-page) #main .card.glass{background:var(--card);border:1px solid var(--rule);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 2px rgba(36,58,46,.07),0 4px 12px rgba(36,58,46,.08)}
body.sky:not(.land-page) #main .racecard{box-shadow:0 1px 2px rgba(36,58,46,.07),0 4px 12px rgba(36,58,46,.08)}
body.sky:not(.land-page) .composer{background:linear-gradient(to bottom,rgba(238,243,239,0),rgba(238,243,239,.9) 18px,rgba(238,243,239,.97) 40px)}
/* 18 September (Kostas, of what the desktop changed: "do all"): the desktop's sheets, Our journey, the events form and the You page, on the phone.
   Every sheet opens on its title as a heading; the journey's month is a calendar under the tier strip; More is You, its rows in groups. */
.sheet .sh-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 34px 12px 0}
.sheet .sh-title h1{margin:0;flex:1;min-width:0;font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.sheet .sh-title .small{flex-basis:100%;margin-top:2px}
.jstrip{display:grid;gap:2px}
.jstrip i{display:block;height:12px;background:var(--tint)}
.jstrip i:first-child{border-radius:4px 0 0 4px}
.jstrip i:last-child{border-radius:0 4px 4px 0}
.jstrip i.now{box-shadow:0 0 0 2px var(--deep);position:relative;z-index:1;border-radius:2px}
.jtier .j-next{display:inline-flex;color:var(--muted);transform:scale(.8)}
/* 0100 amended, 19 September: the day a tier is reached, the crown and today's block glow */
@keyframes jglow{from{filter:drop-shadow(0 0 2px var(--lemon))}to{filter:drop-shadow(0 0 9px var(--lemon)) drop-shadow(0 0 3px var(--lemon))}}
.j-crown.j-new,.w-jcrown.j-new{animation:jglow 1.4s ease-in-out infinite alternate}
.jstrip i.now.on{animation:jglow 1.4s ease-in-out infinite alternate}
.jstrip i.on{background:var(--mark)}
.jstrip i.tier{background:var(--lemon);box-shadow:inset 0 0 0 1px var(--deep)}
.jstrip i.on.tier{background:var(--mark)}
.j-crown{width:34px;height:34px;border-radius:999px;background:var(--deep-bg);color:var(--lemon);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:auto}
.j-crown svg{width:20px;height:16px}
.jcal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.jcal-head .micro{font-size:13px;letter-spacing:.06em;color:var(--ink)}
.jcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;justify-items:center}
.jcal-dow{margin-bottom:8px}
.jcal-dow span{font-size:11px;font-weight:600;color:var(--muted)}
.pgroup{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:2px 14px;margin-bottom:6px}
.pgroup .morerow{padding:12px 0}
.pgroup .morerow:first-child{border-top:0}
.p-head{margin:16px 0 6px}
.p-you{display:flex;align-items:center;gap:14px;padding:14px}
.avatar{width:52px;height:52px;border-radius:999px;background:var(--deep-bg);color:var(--lemon);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex:none;letter-spacing:.02em}
.morehead .avatar{background:var(--lemon);color:var(--on-lemon)}   /* on the dark green panel the initials take the lime, as the coach's ring did there */
.btn:disabled{opacity:.45;pointer-events:none}   /* 0109: Send me a code waits on the ticks */

/* 0110: How it works, the tour */
.tour-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tour-pages::-webkit-scrollbar{display:none}
.tour-page{flex:0 0 100%;scroll-snap-align:start;padding:8px 16px 18px;box-sizing:border-box;min-height:180px}
.tour-text{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin-top:8px;color:var(--ink);text-wrap:balance}   /* smaller (Kostas, 21 September) */
.tour-foot{display:flex;align-items:center;justify-content:space-between;padding:0 16px 24px}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--deep) 35%,transparent);display:block}
.tour-dots i.on{background:var(--mark);border-color:var(--deep)}

/* 0113: a pasted picture in the composer is a picture with an × */
.att-img{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--rule);flex:none;background:var(--card)}
.att-img img{width:100%;height:100%;object-fit:cover;display:block}
.att-img .x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(31,42,36,.7);color:#fff;border:0;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* 0114 amended: the Google button as the web has it, white with the G; the "or" line between it and the code */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:#1f2320;font:600 15px/1 var(--font-app);font-family:inherit;cursor:pointer;padding:0 16px}
.google-btn:disabled{opacity:.45;pointer-events:none}
.google-btn svg{flex:none}
.or-line{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:13px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--rule)}

/* 0110 amended, 20 September: a picture per page, arrows at the sides, Let's go on the last */
.tour-body{position:relative}
.tour-page{min-height:0}
.tour-pic{margin:12px 0 4px;border-radius:16px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 6px 20px rgba(36,58,46,.15);background:var(--page);display:flex;justify-content:center}
.tour-pic img{display:block;max-width:100%;max-height:48vh;object-fit:contain;object-position:top}
.tour-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--rule);box-shadow:0 4px 12px rgba(36,58,46,.22);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--deep);padding:0;z-index:2}
.tour-arrow.left{left:4px}.tour-arrow.right{right:4px}
.tour-arrow[hidden]{display:none}
.tour-dots{margin-top:0}
.tour-foot .btn[hidden]{display:none}   /* Let's go only on the last page: the button's own display rule beat the hidden attribute */

/* 0115: the lockup's ring is lime on a dark ground and green on a light one */
body.firstscreen .top{--lockup-ring:var(--green)}

/* 0004 amended, 26 September 2026: the week's usage in More, a short gauge beside its share (Kostas: "c, i like"), phone and web */
/* 0022 amended, 9 October 2026 (Kostas: "1 d then c"): under a dial's chart, what I read it from (figure 22/700 beside its usual, meta 13),
   then day by day (body 15, the number 17/600 in its colour, the words meta 13) */
.dial-read{margin-top:22px}.dial-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--rule)}
.dial-v{font-size:22px;line-height:28px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.dial-u,.dial-l,.dial-w{font-size:13px;line-height:18px;font-weight:400;color:var(--muted)}
/* 0125 amended, 9 October 2026: the calories card's rows of what its count is made from */
.kcal-row{padding:7px 0;border-top:1px solid var(--rule);align-items:baseline}.kcal-v{font-variant-numeric:tabular-nums;text-align:right}.kcal-m{font-size:13px;line-height:18px;color:var(--muted);text-align:right}.dial-days{margin-top:22px}.dial-days .micro{margin-bottom:6px}.dial-day{padding:10px 0;border-top:1px solid var(--rule);align-items:baseline;font-size:15px;line-height:20px}.dial-n{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
/* 0171: the month on its card above the days (body 15 the day, heading 17 the month, label 11 the initials) */
.mcal{flex:none;margin:8px 12px 2px;background:var(--card);border-radius:22px;padding:8px 8px 6px;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(17,24,20,.04),0 8px 24px rgba(17,24,20,.06)}
/* 0171 amended: the month moves with its pill alone; the head, the rows' window and the rows slide together, still while a finger drags */
.mcal-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px;box-sizing:border-box;height:40px;overflow:hidden;transition:height .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
.mcal-clip{overflow:hidden;transition:height .26s cubic-bezier(.2,.8,.2,1)}.mcal-grid{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.mcal.dragging .mcal-head,.mcal.dragging .mcal-clip,.mcal.dragging .mcal-grid{transition:none}
.mcal-title{font-size:17px;line-height:22px;font-weight:600;color:var(--ink)}
.mcal-arrow{width:36px;height:36px;border-radius:999px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mcal-wd{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;color:var(--muted);padding-bottom:2px}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.mcal-day{height:44px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:3px 0 0;font:inherit;color:var(--ink);cursor:pointer}
.mcal-n{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
.mcal-day.out{opacity:.35}.mcal-day.today .mcal-n{box-shadow:inset 0 0 0 1.5px var(--deep-bg);font-weight:600}.mcal-day.sel .mcal-n{background:var(--deep-bg);color:#fff;font-weight:600}
.mcal-g{display:flex;gap:1px;height:14px;align-items:center}.mcal-g span{display:block;width:14px;height:14px}.mcal-g svg{width:14px;height:14px;display:block}
.mcal-handle{display:flex;justify-content:center;align-items:center;width:100%;height:28px;border:0;background:transparent;cursor:grab;padding:0;touch-action:none}.mcal-handle i{width:36px;height:4px;border-radius:2px;background:var(--rule-strong)}
/* 0004 amended, 9 October 2026 (Kostas: "a"): under the chat box, the month's usage beside the short gauge; meta, 13/400 grey */
.usage-line{display:flex;align-items:center;gap:8px;padding:0 8px;font-size:13px;line-height:18px;font-weight:400;color:var(--muted);white-space:nowrap}.usage-line .usage-gauge b{width:48px}
.usage-gauge{display:inline-flex;align-items:center;gap:8px}.usage-gauge b{display:inline-block;width:64px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}.usage-gauge b i{display:block;height:100%;border-radius:2px;background:var(--deep-bg)}
/* 26 September 2026: Start looks off only while it is off; it was faded once at render and stayed so after the answers made it live */
#ob-start:disabled{opacity:.5;cursor:default}
/* 26 September 2026: hidden means hidden, whatever display an element's own class sets (Send me a code showed on the waiting list; the tour, the chips and the sheet had each been patched one by one) */
[hidden]{display:none!important}

/* 0133, 29 September 2026: the app in the landing's look (Kostas, on the board beside the way in: "do: 1, 2, 3, 4 ok, 5, 6, 7, 8") */
/* 1: lemon for one thing on a screen. The day's line white, the greeting a short lemon label; the Events card on the tiles' white, its days in a lemon chip */
.hero .dayline{color:inherit}
.hero:not(.ink) .greet{font-size:15px;font-weight:600;color:var(--lemon);opacity:1}
.racecard{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.racecard .n{background:var(--lemon);color:var(--on-lemon);border-radius:999px;padding:6px 12px 5px;font-size:20px;letter-spacing:-.01em}
.racecard .n small{font-size:10px}
/* 2: the bar's buttons as plain lines on the green, no white discs; the crown an outline, its crown lemon; the unseen dot lemon */
.top .circ{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.top .circ.journey{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.top .circ.journey svg{color:var(--lemon)}
.top .circ .mark{background:var(--lemon)}
.top .circ:hover,.top .circ:active{background:rgba(255,255,255,.14)}
body.sky:not(.firstscreen) .top{background:var(--deep-bg)}   /* the lines need the green under them on every page: the panel stands behind the bar only at Home's and the week's top, and the chat scrolled under a see-through bar (seen on the pictures, 29 September) */
body.firstscreen .top .circ{color:var(--deep)}
body.firstscreen .top .circ.journey{border-color:rgba(36,58,46,.3)}
body.firstscreen .top .circ .mark{background:var(--deep-bg)}
body.firstscreen .top .circ:hover,body.firstscreen .top .circ:active{background:rgba(36,58,46,.08)}
/* 3: a section's label without the long rule; its figure stays on the right */
.lbl .micro::after{display:none}
.rule .hair{background:none}
.monthband .l{border-top:0}
#toppanel .m i{border-top:0}
/* 4: the sport's picture in its colour, without the disc; today's session still to do keeps its filled bar and its pill (0057, 0059) */
.b.past .sp{background-color:transparent;background-image:none;box-shadow:none;border-color:transparent;color:var(--sc)}
.b.ahead .sp{background-color:transparent;background-image:none;box-shadow:none;border-color:transparent;color:var(--sc)}
.b.race .sp{background-color:transparent;background-image:none;box-shadow:none;border-color:transparent;color:var(--sc)}
.b.rest .sp{background-color:transparent;background-image:none;box-shadow:none;border-color:transparent;color:var(--sc)}
.b.rest .sp,.b .sp.none,.b .sp.miss{background-color:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
/* 5: numbers named in plain words under them, not spaced capitals */
.nlab{font-size:12px;font-weight:500;color:var(--muted);line-height:1.3}
.crown .gauge .nlab{font-size:13px;color:var(--ink)}
.reading .nlab{font-size:11px}
/* 6: your messages in deep green, the coach's words plain */
body.sky:not(.w-land-page) #main .bubble{background:var(--deep-bg);color:#fff;border:0;box-shadow:none}
#main .bubble .small{color:#fff!important}
#main .bubble a{color:#fff}
/* 7: on the phone the cards that turn swipe, and a dot turns to its card */
.swipe-face{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.cdots.go{gap:0}
.cdots .cdot{width:22px;height:22px;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cdots .cdot i{width:6px;height:6px;transition:width .2s}
.cdots .cdot i.on{width:16px;border-radius:999px}
/* 8: the ring left Home's top; while the coach reads, a small arc turns by the line */
.hero .when.busy,.w-hero .when.busy{display:flex;align-items:center;gap:8px}
.reading-arc{flex:none;display:inline-block;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:2px solid transparent;border-top-color:var(--lemon);border-right-color:color-mix(in srgb,var(--lemon) 35%,transparent);animation:circle 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.reading-arc{animation-duration:3s}}
/* 0133 amended, 29 September 2026: 9 to 16, what the drawings showed beyond the eight (Kostas: "just follow the tile edge with
   outline; 11, 12, 13 smaller font pls its too loud") */
/* 9: a week's days in one white card, a little in from the edges; rounded where the card begins and ends */
.weekscroll .t{margin:0 12px;border-radius:0}
.weekscroll .rule + .daywrap .t{border-top-left-radius:16px;border-top-right-radius:16px}
.weekscroll .monthband + .daywrap .t{border-top-left-radius:16px;border-top-right-radius:16px}
.weekscroll .daywrap:has(+ .rule) .t,.weekscroll .daywrap:last-child .t{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
/* 10: today outlined along its own tile's edge, square between days, round where its week's card is */
.daywrap.today .t::before{display:none}
/* 11: the week's label small and green, its figure muted on the right */
.weekscroll .rule{padding:18px 20px 8px;font-size:10px;letter-spacing:.14em;color:var(--green)}
.weekscroll .rule span:last-child{font-size:11px;color:var(--muted)}
/* 12: the month's name small, bold, ink */
.weekscroll .monthband{padding:18px 20px 2px}
.weekscroll .monthband .m{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.12em}
/* 13: the day's line a size up, over two lines */
.hero .with{font-size:22px;line-height:1.2;letter-spacing:-.015em}
/* 14: Home's week rows name their day as the week does */
.drow .dn .n{font-size:17px;font-weight:700}
.drow .dn .w{font-size:11px;font-weight:600;text-transform:none;color:var(--muted);margin-top:2px}
/* 15: a ride's head a size up; its numbers on the page, not in a box */
.ridetitle{font-size:24px}
.titlerow h1.ridetitle{font-size:24px;font-weight:700;letter-spacing:-.02em}   /* beats .titlerow h1 */
.figs-plain{padding:6px 16px 14px}
/* 0133 amended again, 30 September 2026: the rest of what the drawings show (Kostas: "the screenshots have many unfinished things
   across ui that are not exactly as in canvas you drew") */
/* the filled bar (today's session still to do, a suggestion): one rounded bar, the picture white in it, no disc; every band's
   picture keeps its place (8 in, 24 wide: where the pill's middle was) */
.b{margin-left:0;border-radius:12px;padding-left:8px;height:36px}
.b .sp{margin-left:0;padding:0;background-image:none;background-color:transparent;box-shadow:none;border-color:transparent}
.b .sp.icon,.b .sp.w1,.b .sp.w2,.b .sp.w3{width:24px}
.b .sp.dark{background-color:transparent}
.b.rest{padding-left:8px}
/* the week's rows as drawn: the date 17 bold, the name 15, the minutes quiet */
.weekscroll .t{padding:4px 8px 4px 6px}
.t .num .n{font-size:17px;font-weight:700}
.b .nm{font-size:15px}
.b .r{font-size:14px}
.b.past .r,.b.ahead .r,.b.race .r,.b.rest .r{font-weight:500;color:var(--muted)}
/* Home: today's date beside it, as the rows above; a hairline between the dials and their readings */
.drow-today{display:flex;gap:10px;align-items:center}
.drow-today .dn{width:38px;flex:none;text-align:center}
.drow-today .dn .n{font-size:17px;font-weight:700;line-height:1}
.drow-today .dn .w{font-size:11px;font-weight:600;text-transform:none;color:var(--muted);margin-top:2px}
.drow-today .db{flex:1;min-width:0}
.readings-row{border-top:1px solid var(--rule);margin:10px 14px 0;padding:10px 0 2px}
/* From your coach: the link on the left, the dots on the right */
.offer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:4px}
.linkish{border:0;background:none;padding:0;font:600 14px var(--font-app);color:var(--act);text-decoration:none;cursor:pointer}   /* 0142: a small move, green words, no underline */
a[data-replace]{color:var(--act);font-weight:600;text-decoration:none}
/* a ride: the figures' chevron says what it opens; the power curve on the page */
.dash em{width:auto;padding:0 6px;gap:6px}
.dash-t{font-size:13px;font-weight:600;font-style:normal}
.plain-sec{padding:14px 16px 12px;border-top:1px solid var(--rule);margin:4px 0 8px}
/* your message: the time under the bubble, outside it */
.mine{align-self:flex-end;max-width:86%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mine .bubble{max-width:100%;align-self:auto}
.mine-t{font-size:11px;color:var(--muted)}
/* 0133, compared again with the drawings (30 September 2026): reminders a size up, rows a little closer, the figures' word in plain
   case, the chat's words at the drawing's size, the name kept on the bar now that the bar has its own green, Events' days in words */
.tile .tt{font-size:16px}
.tile .tn{font-size:14px;line-height:1.4}
.t .num{padding:3px 0}
.drow{padding:4px 0}
.dash-t{text-transform:none;letter-spacing:0}
#main .bubble{font-size:16px;line-height:1.45}
#main .said .prose{font-size:16px;line-height:1.55}
body.scrolled .top .lockup{opacity:1}
.racecard .n small{letter-spacing:0;font-size:12px;opacity:1;margin-left:4px}
/* 0133, measured against the drawings, 30 September 2026 (Kostas: "match it exactly ... EXACT ALL DIFFERENCES"): every value below is
   the drawing's own, read from its code, not judged by eye */
:root{--ink:#111814;--muted:#6B746E}
.card{border-radius:16px;padding:16px 18px}
.racecard{border-radius:16px}
.micro{color:var(--green);letter-spacing:.14em}
.row.lbl .small{font-size:12px;font-weight:500;color:var(--muted)}
.hero .with{font-weight:700;letter-spacing:-.025em}
.nlab{font-weight:400;color:var(--muted)}
.crown .gauge .nlab{font-size:13px;font-weight:400;color:var(--muted)}
.reading .nlab{font-size:12px}
.reading .small{font-size:13px;font-weight:400}
.tile .tt{font-weight:700;color:var(--ink)}
.b .l{gap:10px}
.b .r{gap:10px;font-weight:400}
.b.past,.b.ahead,.b.race,.b.rest,.b.miss,.b.off,.b.open,.b.done,.b.skipped{padding-left:0;padding-right:0}
.b.past .r:not(:has(.tick))::after,.b.ahead .r:not(:has(.tick))::after,.b.race .r:not(:has(.tick))::after,.b.rest .r:not(:has(.tick))::after{content:"";width:18px;flex:none}
.weekscroll .t{padding:4px 14px}
.t .num{width:32px;text-align:left}
.t .num .w{font-weight:400}
.drow{padding:10px}
.drow .dn,.drow-today .dn{width:32px;text-align:left}
.drow .dn .w,.drow-today .dn .w{font-weight:400}
#toppanel .m{font-size:12px;letter-spacing:.14em}
.jdays{font-size:14px;font-weight:600}
.bubble{padding:11px 15px}
/* the bar at the foot, as drawn: white, ruled, ink words, the chosen one deep green with white */
.bar{left:14px;right:14px;height:64px}
.pill{background:rgba(255,255,255,.96);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--rule);box-shadow:0 8px 24px rgba(36,58,46,.12);padding:0 5px;gap:4px;justify-content:space-between}
.pill a{flex:1;height:54px;min-width:0;padding:0;gap:3px;font-size:10px;letter-spacing:.08em;color:var(--ink)}
.pill a.on{color:#fff}
.pill .ind{top:4px;height:54px}
.pill .ind::after{background:var(--deep-bg)}
/* a ride */
.ridebox{margin:0 -20px}
.ridebox .bands .b .nm{font-weight:700}
.ridebox .bands .b .r{font-size:15px}
#map-sat{font-weight:600;color:var(--ink)}
.chart-switches .chip{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 6px;height:24px;font-size:13px;font-weight:400;color:var(--muted);opacity:1}
.chart-switches .chip i{display:none}
.chart-switches .chip.on{font-weight:700;color:var(--mc,var(--ink))}
.figv{font-size:22px;font-weight:700;letter-spacing:0;color:var(--ink);line-height:1.1}
.figu{font-size:13px;font-weight:400;color:var(--muted);margin-left:3px}
.figs-plain .nlab{font-size:13px}
/* the chat's starters */
.composer .chip{background:var(--card);border:1px solid var(--rule);backdrop-filter:none;-webkit-backdrop-filter:none;height:38px;padding:0 16px;font-size:14px;font-weight:400;color:var(--ink)}
/* Events: "19 days" in one lemon chip, the day under the name */
.racecard .n{font-size:14px;font-weight:700;padding:0 12px;height:30px;display:inline-flex;align-items:center;letter-spacing:0}
.racecard .n small{font-size:14px;font-weight:700;margin-left:4px}
.racecard .small{font-size:14px;color:var(--muted)}
.drow-today{padding:0 10px}
.b.past .r,.b.ahead .r,.b.race .r,.b.rest .r{font-weight:400}
.b .r span{font-weight:inherit}
.weekscroll .rule span:last-child{font-weight:500}
.ridebox .card:has(#chart){border-radius:14px;padding:14px}
/* 0133, 30 September 2026: measured against the drawings, value by value (Kostas: "match it exactly") */
/* 0171 (Kostas, 9 October 2026: "push bar with logo searc, notif, streak a bit higher"): 44 under 4 on every page, the circles 36 */
.top{padding:calc(env(safe-area-inset-top) + 4px) 12px 0;grid-template-rows:44px}
.top .topgroup{gap:2px}
.top .circ:not(.journey){width:36px;height:36px;padding:0}
.top .circ.journey{height:32px;padding:0 10px;gap:6px}
.top .circ .mark{top:7px;right:8px;width:7px;height:7px}
#toppanel{border-radius:0 0 24px 24px}
#toppanel .m{left:20px;right:20px;bottom:16px;line-height:normal}
.hero:has(#dayline){padding:22px 20px 26px}
.hero:has(#dayline) > div{display:flex;flex-direction:column;gap:10px}
.hero:has(#dayline) .greet{line-height:normal}
.hero:has(#dayline) .with{margin-top:0;line-height:1.12}
.hero:has(#dayline) .when{margin-top:0;font-size:13px;line-height:normal;opacity:1;color:rgba(255,255,255,.6)}
.crown .gauge{gap:6px}
.crown .gauge .nlab{line-height:normal}
.readings-row{margin:0;padding:12px 0 0;gap:0}
.readings-row .reading{padding:0;gap:2px}
.readings-row .reading .nlab{line-height:normal}
.card > .row.lbl,.dtoday > .row.lbl{line-height:normal}
:is([data-offerings],.card-offerings),:is([data-reminders],.card-reminders){gap:12px}
:is([data-offerings],.card-offerings) .b{height:auto;padding:8px 12px 8px 8px}
:is([data-offerings],.card-offerings) .b .sp.icon,#h-days .b .sp.icon,.weekscroll .b .sp.icon,.ridebox .bands .b .sp.icon{height:24px}
.cdots.go{gap:0;margin:0 -3px}
.cdots .cdot{width:auto;padding:0 3px}
.cdots .cdot i{background:var(--dot)}
.cdots .cdot i.on{width:18px;background:var(--mark)}
:is([data-reminders],.card-reminders) .tile .tt{line-height:normal}
:is([data-reminders],.card-reminders) .tile .tn{line-height:1.45;margin-top:4px}
:is([data-reminders],.card-reminders) .tx{width:28px;height:28px;border-radius:8px;border:1px solid var(--rule);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.b .tick:not(.off):not(.miss){background:var(--deep-bg)}   /* 0133 amended: the done tick deep as drawn, on a band only (the answers' rings stay empty); off plan keeps its honey wave and missed its red cross (0065) */
#h-days{gap:10px}
#h-days .drow .b{height:auto;min-height:28px}
.drow .dn .w,.drow-today .dn .w{line-height:1}
#h-days .drow:has(+ .dtoday){border-bottom:0}
.dtoday{padding-top:0;gap:10px}
.drow-today .bands{gap:0}
.drow-today .b.past,.drow-today .b.ahead,.drow-today .b.race,.drow-today .b.rest{height:auto;min-height:28px;padding-top:10px;padding-bottom:10px}
.drow-today .b:not(.past):not(.ahead):not(.race):not(.rest),.weekscroll .daywrap.today .b:not(.past):not(.ahead):not(.race):not(.rest){height:auto;padding:8px 12px 8px 8px}
.drow-today .b:not(.past):not(.ahead):not(.race):not(.rest){margin:4px -4px 6px 0}
.weekscroll .t{padding:10px 14px}
.weekscroll .t .num{padding:0}
.weekscroll .t .num .w{margin-top:2px;line-height:1}
.weekscroll .b.past,.weekscroll .b.ahead,.weekscroll .b.race,.weekscroll .b.rest{height:auto;min-height:28px}
.weekscroll .daywrap.today .t{padding-bottom:6px}
.weekscroll .daywrap.today .b:not(.past):not(.ahead):not(.race):not(.rest){margin-right:-8px}
.weekscroll .daywrap.today .b + .b:not(.past):not(.ahead):not(.race):not(.rest){margin-top:8px}
.daywrap.today .t .num .n{color:var(--ink)}
.daywrap.today .t .num .w{color:var(--muted)}
.weekscroll .rule + .daywrap .t,.weekscroll .monthband + .daywrap .t{padding-top:12px}
.weekscroll .daywrap:has(+ .rule):not(.today) .t,.weekscroll .daywrap:last-child:not(.today) .t{padding-bottom:12px}
.weekscroll .daywrap.today:has(+ .rule) .t,.weekscroll .daywrap.today:last-child .t{padding-bottom:8px}
.weekscroll .daywrap:not(.today) .t{border-top-color:transparent;border-bottom-color:transparent}
.weekscroll .rule + .daywrap:not(.today) .t,.weekscroll .monthband + .daywrap:not(.today) .t{border-top-color:var(--rule)}
.weekscroll .daywrap:has(+ .rule):not(.today) .t,.weekscroll .daywrap:last-child:not(.today) .t{border-bottom-color:var(--rule)}
.weekscroll .daywrap + .daywrap:not(.today) .t::after{content:"";position:absolute;left:4px;right:4px;top:-1px;border-top:1px solid var(--rule);pointer-events:none}
.weekscroll .daywrap.today + .daywrap .t::after{display:none}
.weekscroll .rule{padding:16px 20px 6px;line-height:normal}
.weekscroll .monthband{padding:20px 20px 4px;line-height:normal}
.bar{height:76px;bottom:max(16px,calc(2px + env(safe-area-inset-bottom)))}
.pill .ind{top:10px}
body{padding-bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 96px)}
.composer{bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 76px);gap:10px}
.composer .box{min-height:50px;padding:0 6px 0 16px;gap:10px;align-items:center;border-radius:999px;background:var(--card);border:1px solid var(--rule)}
.composer .box .plus{width:auto;height:auto;background:transparent;padding:0;font:400 22px/1 var(--font-app);color:var(--ink)}
.composer .box textarea{font-size:16px}
.composer .box textarea::placeholder{color:var(--muted)}
.composer .round{width:38px;height:38px}
.thread{padding:26px 16px 0}
.thread .said{padding:0;max-width:94%}
.said-t{font-size:11px;color:var(--muted);margin-top:4px}
.mine{max-width:80%}
.mine-t{line-height:normal}
.sheet .x{width:36px;height:36px;color:var(--ink);background:var(--card)}
.ridetitle{line-height:normal}
.ridebox .titlerow{padding:6px 16px 0}
.sheet .panel:has(.ridebox) .x{top:22px;right:-4px}
.ridebox > .small{padding:4px 16px 0;line-height:normal}
.ridebox > div:has(> .bands){padding:16px 16px 0}
.ridebox .bands .b{height:auto}
.ridebox .card:has(#chart){margin:16px 16px 0}
#map-sat{background:#fff;border-color:transparent}
.chart-switches{gap:14px;margin-bottom:8px}
.chart-switches .chip{padding:0;height:auto;line-height:normal}
.chart-switches .chip[data-metric="power"].on{color:var(--ink)}
.figs-plain{padding:20px 18px 0}
.figs-plain > div{gap:16px 10px!important}
.figs-plain .figv{line-height:normal}
.figs-plain .figv .figu{margin-left:4px}
.figs-plain .nlab{line-height:normal;margin-top:2px}
.ridebox .dash{margin-top:20px;padding:0 0 0}
.ridebox .dash span{border-top:1px dashed var(--rule)}
.ridebox .dash em{padding:0;gap:10px}
.ridebox .dash-t{font-size:14px;font-weight:600}
.ridebox .dash em svg{width:16px;height:16px}
.ridebox .plain-sec{margin:16px 0 8px;padding:16px 16px 12px}
.ridebox .plain-sec .row.lbl{line-height:normal}
body.sky:not(.land-page) #main .card,body.sky:not(.land-page) #main .card.glass,body.sky:not(.land-page) #main .racecard{box-shadow:0 1px 2px rgba(36,58,46,.06),0 4px 12px rgba(36,58,46,.06)}
#map .maplibregl-ctrl-attrib.maplibregl-compact:not([open]){width:22px;height:22px;min-height:22px;padding:0;background:#111814;border-radius:999px}
#map .maplibregl-compact:not([open]) .maplibregl-ctrl-attrib-button{width:22px;height:22px;background-color:transparent;background-size:22px 22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='7' r='1.4' fill='%23fff'/%3E%3Crect x='10' y='9.6' width='2' height='6.4' rx='.8' fill='%23fff'/%3E%3C/svg%3E")}
#h-days .drow + .drow{margin-top:-10px}
.top .topgroup{align-items:center}
.card > .row.lbl > *,.dtoday > .row.lbl > *{line-height:normal}
.offer-foot{padding-top:0}
.cdots.go{margin:-8px -3px}
.composer .box{box-shadow:none}
.composer .round{padding:0}
.ridebox .plain-sec{margin:16px 16px 8px;padding:16px 0 12px}
.weekscroll .daywrap + .daywrap:not(.today) .t::after{top:0}   /* inside the tile: it clips at its padding edge */
.composer .chip:hover,.sheet .x:hover,#map-sat:hover,:is([data-reminders],.card-reminders) .tx:hover{background:color-mix(in srgb,var(--green) 14%,var(--card))}   /* the white set above would otherwise win over the lit state */
/* 0134: Insights, as drawn in the landing's look; one set of rules for the phone and the desktop */
.ins{padding:14px 12px 0;display:flex;flex-direction:column;gap:12px}
.ins-seg{display:flex;background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:3px}
.ins-seg button{flex:1;border:0;background:transparent;padding:7px 12px;border-radius:999px;font:600 13px/normal var(--font-app);color:var(--ink);cursor:pointer;white-space:nowrap}
.ins-seg button.on{background:var(--deep-bg);color:#fff}
.ins-seg button:not(.on):hover{background:color-mix(in srgb,var(--green) 10%,var(--card))}
.ins-card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(36,58,46,.06),0 4px 12px rgba(36,58,46,.06);min-width:0;color:var(--ink);line-height:normal}
.ins-card.ins-tight,.ins-card.ins-recovery{gap:6px}
.ins-eb{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;font-weight:600;color:var(--ink);line-height:normal}
.ins-eb span{font-size:12px;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:500}
.ins-big{display:flex;flex-direction:column;gap:2px;min-width:0}
.ins-big b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ins-big i,.ins-head i,.ins-v i,.ins-rec-h i{font-style:normal;font-size:14px;color:var(--muted)}
.ins-big em,.ins-mark em{font-style:normal;font-size:13px;color:var(--muted)}
.ins-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
.ins-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ins-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ins-foot{font-size:13px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px}
.ins-note{font-size:12px;color:var(--muted)}
.ins-best{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.ins-best > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ins-what{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ins-best em{font-style:normal;font-size:12px;color:var(--muted)}
.ins-v b{font-size:20px;font-variant-numeric:tabular-nums}
.ins-v i{font-size:13px}
.ins-gl{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ins-gl svg{width:22px;height:22px}
.ins-gl.s{width:18px;height:18px}.ins-gl.s svg{width:18px;height:18px}
.ins-sq{width:10px;height:10px;border-radius:3px;display:inline-block}
.ins-plot{position:relative}
.ins-chart{display:block;width:100%;height:140px}
.ins-card:not(.ins-curve) .ins-chart{height:120px}
.ins-dot{position:absolute;width:10px;height:10px;margin:-7px 0 0 -7px;border-radius:999px;background:var(--lemon);border:2px solid var(--deep)}
.ins-xl{position:relative;height:14px;font-size:11px;color:var(--muted)}
.ins-xl span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ins-xl span:first-child{transform:none}.ins-xl span:last-child{transform:translateX(-100%)}
.ins-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.ins-legend > span{display:inline-flex;align-items:center;gap:6px}
.ins-legend .r{margin-left:auto}
.ins-l{display:inline-block;width:16px;height:2.5px;background:var(--mark)}
.ins-l.dash{height:0;border-top:2px dashed #9FB0A5;background:none}
.ins-l.dot{width:9px;height:9px;border-radius:999px;background:var(--lemon);border:2px solid var(--deep)}
.ins-head b{font-size:22px;font-variant-numeric:tabular-nums}
.ins-head b.xl{font-size:26px}
.ins-head i{font-size:13px}
.ins-mark{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ins-mark b{font-size:22px}
.ins-m{width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.ins-m.done{background:var(--deep-bg);color:#fff}.ins-m.off{background:var(--honey);color:var(--deep)}.ins-m.miss{background:var(--red);color:#fff}
.ins-recs{display:flex;flex-direction:column}
.ins-rec{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--rule);min-width:0}
.ins-rec-h{display:flex;justify-content:space-between;align-items:baseline}
.ins-rec-h > span:first-child{font-size:14px;font-weight:600}
.ins-rec-h b{font-size:20px;font-variant-numeric:tabular-nums}
.ins-rec-h i{font-size:13px}
.ins-rec em{font-style:normal;font-size:12px;color:var(--muted)}
.ins-spark{display:block;width:100%;height:56px}
.ins-strip{display:flex;gap:4px}
.ins-strip span{flex:1;height:10px;border-radius:3px;background:var(--rule-strong)}
.ins-strip span.on{background:var(--mark)}
.ins-read{background:var(--deep-bg);color:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;line-height:normal}
.ins-read .ins-eb{color:var(--lemon)}
.ins-read-t{font-size:16px;line-height:1.55}
.ins-read-f{font-size:12px;color:rgba(255,255,255,.6)}
.ins-wait{font-size:14px;color:var(--muted);padding:24px 4px;text-align:center}
.ins-hero > div{display:flex;flex-direction:column;gap:6px}
.hero.ins-hero{padding:14px 20px 22px}
.ins-hero .greet{line-height:normal}
.ins-hero .with{font-size:28px;font-weight:700;letter-spacing:-.025em;line-height:1.12;margin-top:0}
.pill.five{gap:2px}
.pill.five a{font-size:9px;letter-spacing:.06em}
.bar:has(.pill.five){left:12px;right:12px}
/* the desktop: the read first, then three columns; the recovery's three side by side */
.ins-wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.ins-wide > .ins-card,.ins-span2 > .ins-card{height:100%;box-sizing:border-box}
.ins-span2{grid-column:span 2;display:grid;min-width:0}
.ins-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.ins-stack > .ins-card{flex:1}
.ins-wide .ins-recovery .ins-recs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ins-wide .ins-recovery .ins-rec{border-top:0;padding:4px 0 0}
.ins-wide .ins-recovery .ins-spark{height:110px}
/* 0133 amended, 30 September 2026: what the restyle lost, given back. A session's cost in its time's own type (the small COST label
 * as before; off plan still honey); the card under a session's figures on the page 16 below them, as between sections (his WHOOP spin);
 * rest on Insights with its bed in the rest band's grey */
.b .cost{font-size:inherit;font-weight:inherit;color:inherit}
.b.past.off .cost{color:var(--honey)}
.figs-plain + .card{margin-top:16px}
.ins-m.rest{color:var(--muted)}
.ins-m.rest svg{width:20px;height:20px}
/* 0133 amended, 30 September 2026 (Kostas: "audit design once more so its all clean and neat, even and visually nice ... do it until no
 * more fixes"): what the audit measured. A session's page on one left edge, 16 from the sheet; the dashed More figures is the divider,
 * the curve under it wears no second; today's filled band on its column; the week's foot and Insights' clear of the bar; the starters
 * run to the screen's edge; a button and the round one beside it one height; Changes' middle column in one line, its rules straight;
 * the charts' end dots whole; More in the cards' look; one quiet grey, the green-tinted one */
.ridebox .figs-plain{padding-left:16px;padding-right:16px}
.ridebox > .card{margin-left:16px;margin-right:16px}
.figs-plain:has(#figs-more) + .plain-sec{border-top:0;padding-top:4px}
.weekscroll .daywrap.today .b:not(.past):not(.ahead):not(.race):not(.rest),.drow-today .b:not(.past):not(.ahead):not(.race):not(.rest){margin-left:-8px;margin-right:0}
.weekscroll::after{content:"";display:block;height:30px}
.ins{padding-bottom:26px}
#composer .chips{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;scroll-padding-left:12px}
.iconbtn{width:36px;height:36px}
.line.go{border-top-color:transparent;background-image:linear-gradient(var(--rule),var(--rule));background-size:calc(100% - 16px) 1px;background-position:8px 0;background-repeat:no-repeat}
.line.go > .small{flex:1;text-align:right}
#rs-chart svg,.hist svg{overflow:visible}
.ins-card.ins-tight,.ins-card.ins-recovery{gap:12px}
.ins-m{width:18px;height:18px}
.pgroup{background:var(--card);border-radius:16px;padding:2px 16px}
:root{--dim:#9AA39D}
.card .small,.serif,.prose p,.tile .small{text-wrap:pretty}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--deep)}
.b .sp.w1,.b .sp.w2,.b .sp.w3{width:auto;min-width:24px;white-space:nowrap}
/* the gauge sheets: the ring on the title's edge, the chart's end dots whole (the chart's box is #hist); the readout's figure in ink, its
 * ring keeps the colour (honey text read at 1.6 to 1) */
.sheet .panel .gauge,.w-sheet .panel .gauge{padding:0}
#hist svg{overflow:visible}
/* the journey's crown on the close button's line (it sat 9 lower) */
.sheet .sh-title .j-crown{transform:translateY(-9px)}
/* a month that begins mid-week: a quiet row inside the week's card, the card unbroken */
.weekscroll .monthband.inline{margin:0 12px;padding:10px 14px 4px;background:var(--card);border-top:1px solid var(--rule)}
.weekscroll .monthband.inline .m{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.weekscroll .monthband.inline + .daywrap .t{border-top-left-radius:0;border-top-right-radius:0;padding-top:6px}
/* the tour's arrows in its foot beside the dots, off the pictures; the foot keeps one height, so the last page does not jump */
.tour-foot{min-height:44px}
.tour-foot .tour-arrow{position:static;transform:none;box-shadow:none;background:var(--card);flex:none}
.tour-foot .tour-arrow.left[hidden]{display:flex;visibility:hidden}
.tour-foot .tour-end{display:flex;justify-content:flex-end;align-items:center;min-width:110px}
.tour-foot .tour-dots{flex:1;display:flex;justify-content:center}
/* the tour's foot in three fixed columns: the dots centred, never moving when the back arrow is not there */
.tour-foot{display:grid;grid-template-columns:110px 1fr 110px;align-items:center}
.tour-foot .tour-arrow.left{grid-column:1;justify-self:start}
.tour-foot .tour-dots{grid-column:2;justify-content:center}
.tour-foot .tour-end{grid-column:3;min-width:0}
/* the audit, round 2: the way back to today above the bar, not under it; the bar and the chat's strip opaque, so a message never shows
 * through them; Reminders one height as it turns; a ride's title clear of its line; an answer not given in the quiet grey; More's title as
 * Insights'; the week's first month said once (the top already says it); both turning cards' dots centred; inputs side by side one height;
 * no hover left behind by a tap; the small greys a shade deeper, to be read */
.totoday{bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 76px + 12px)}
.pill{background:var(--card)}
body.sky:not(.land-page) .composer{background:linear-gradient(to bottom,rgba(238,243,239,0),rgb(238,243,239) 12px)}
.ridetitle{margin-bottom:4px}
.obans.none{color:var(--muted)}
.more-title{padding-left:20px}
.more-title h1{font-size:28px;font-weight:700;letter-spacing:-.025em}
.weekscroll > section.month:first-of-type > .monthband:first-child{height:0;padding:0;margin:0;overflow:hidden;visibility:hidden}
.field input:not(.code){height:46px}
@media (hover:none){.dash:hover,.line.go:hover,.morerow:hover{background:transparent}}
:root{--muted:#5F6862;--dim:#86908A}
.t .num .w,.drow .dn .w,.drow-today .dn .w{font-size:10px}
/* both turning cards keep their dots on the right: Reminders' just before its cross (centring the coach's split its link in two) */
:is([data-reminders],.card-reminders) > div:last-child{display:flex!important;justify-content:flex-end;align-items:center;gap:12px}
:is([data-reminders],.card-reminders) > div:last-child > span:first-child{display:none}
/* the audit, round 3: the chat's box 10 above the bar, the page's colour behind the bar so the thread never shows around it; the coach's
 * unread dot on its icon's shoulder, lemon ringed in deep; Home's day rows on the card's edge (their shade reaching past it); a band's
 * shade 6 past its content; the week's month rule inset as its day rules; an empty date in the placeholders' grey; the journey's days
 * read and its crown clear of the cross; the tour's foot inside its column */
.composer{bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 86px)}
.composer::after{content:"";position:absolute;left:0;right:0;top:100%;height:140px;background:rgb(247,250,248)}
body.sky:not(.land-page) .composer::after{background:rgb(238,243,239)}
.pill a .mark{top:5px;left:calc(50% + 5px);right:auto;background:var(--deep-bg);border:1.5px solid #fff}   /* 1 October 2026 (Kostas: "make it all deep green. lime with deep green around looks weird") */
#h-days .drow{padding:10px 0}
#h-days .drow-today{padding:0}   /* today's block on the same edge as the rows above it */
@media (hover:hover){#h-days .drow:hover,#h-days .drow:active{box-shadow:0 0 0 8px color-mix(in srgb,var(--green) 8%,var(--card))}}
@media (hover:hover){.b.past:active{box-shadow:0 0 0 6px var(--tint)}}
@media (hover:hover){.b.ahead:active{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc) 14%,var(--card))}}
@media (hover:hover){.b.past:hover{box-shadow:0 0 0 6px var(--tint)}.b.ahead:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc) 14%,var(--card))}}
@media (hover:hover){.obhead:active{box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 8%,var(--card))}}
.weekscroll .monthband.inline{border-top:0;position:relative}
.weekscroll .monthband.inline::before{content:"";position:absolute;left:4px;right:4px;top:0;border-top:1px solid var(--rule)}
.field input[type=date]:invalid{color:var(--muted)}
.jd-ahead{color:var(--muted)}
.sheet .sh-title:has(.j-crown){padding-right:48px}
.tour-foot{grid-template-columns:96px minmax(0,1fr) 96px}
/* 0133 amended, 30 September 2026 (the audit, round 4) */
.weekscroll .monthband.inline{border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding-left:18px;padding-right:18px}   /* a month named inside a week's card keeps the card's sides */
.weekscroll .monthband.inline + .daywrap:not(.today) .t{border-top-color:transparent}
.weekscroll .t{padding-left:18px;padding-right:18px}   /* a day's row on Home's inset, 31: the same row, one place on both */
.titlerow h1.ridetitle{margin-bottom:4px}   /* round 2's, which .titlerow h1 had overruled */
.composer > .tobottom{position:absolute;right:16px;bottom:calc(100% - 2px)}   /* rides on the box: 12 above the starters, wherever the box stands */
.pgroup{margin-left:-8px;margin-right:-8px;padding-left:18px;padding-right:18px}   /* More's cards on the tabs' one gutter, 12, their words at 31 */
.weekscroll::after{height:47px}   /* the week's end clear of the way back to today */
.tile .tn{text-wrap:pretty}
.tour-pages{margin:0 -20px}   /* the tour's column on the title's edge */
.tour-page{padding:8px 20px 18px}
.tour-foot{padding:0 0 24px}
[data-zone-row]:last-child{padding-bottom:0}
.chips:has(> [data-ask][hidden]:only-child){display:none}   /* the course's ask waits for a finger on the profile; its row with it */
.sheet .panel .sh-title + .serif,.sheet .panel .sh-title + div > .serif:first-child{margin-top:8px}   /* one gap under every sheet's title */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
#name-input:focus{outline:none;border-color:var(--lemon);box-shadow:0 0 0 1px var(--lemon)}
#p-nameline:has(#name-input){gap:8px!important}
/* 0133 amended, 30 September 2026 (the audit, round 5) */
.sheet .pgroup{margin-left:0;margin-right:0;padding-left:16px;padding-right:16px}   /* round 4's gutter is More's page; a sheet keeps its own edge */
.sheet .sh-title{padding-top:0}   /* a sheet's title on its cross's line, 28 */
.sheet .sh-title:has(.j-crown){position:relative;padding-right:80px}
.sheet .sh-title .j-crown{position:absolute;top:-5px;right:38px;margin:0;transform:none}   /* the crown beside the cross, on its line, out of the title's row */
.sheet .panel:has(.ridebox) .x{top:17px}   /* the session page's cross on its title's line, 35 */
.card .line.go:last-child,.card .line.go:has(+ [hidden]:last-child){margin-bottom:-7px}   /* a card's last row does not add its own air to the card's */
[data-zone-row]:last-child{padding-bottom:0!important}
.ins-best:last-child,.ins-rec:last-child{padding-bottom:0}
.drop .chip{background:var(--card);border-color:transparent}   /* the drop area's buttons (0142): its ground is the soft fill, so they take the card's colour or vanish into it (round 2) */
.chips #earlier{background:var(--card);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}   /* round 2: on the page's soft ground the soft fill vanished; the card's colour, no border */
.tour-pic img{height:auto}
.b .sp.flagslot{display:inline-flex;align-items:center;justify-content:center}
/* 30 September 2026 (Kostas: "make sure the basic bugs are all gone ... scrolling, tapping, touching"): the base every element stands on */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* no grey box flashing on a tap; no text blown up when the phone turns */
button,input,textarea,select{font-family:inherit}   /* a button or a box wears the app's face, never the system's (Our journey's count was in Arial) */
.chip:active,.btn:active,.iconbtn:active,.x:active,.arrow:active,.tobottom:active,.totoday:active,.back:active,.qmark:active{filter:brightness(.94)}   /* a press answers, now the system's grey box is gone */
/* 30 September 2026, late (Kostas: "nav bar very big vertically now. can we make it shorter"): the bar 62 tall, its tabs 48; the box,
   the way back to today and the page's foot keep the same air above it */
.bar{height:62px}
.pill a{height:48px}
.pill .ind{top:6px;height:48px}   /* the lit tab's disc, centred in the shorter bar */
body{padding-bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 82px)}
.composer{bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 72px)}
.totoday{bottom:calc(max(16px,calc(2px + env(safe-area-inset-bottom))) + 62px + 12px)}
/* (Kostas: "dont let cursor select text. a prolonged touch and drag on calendar starts selecting text"): the app's screens are not text
   to select; the chat's words stay selectable (a selection there offers Quote), and every box you type in */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],.said,.said *,.bubble,.bubble *,.wi,.wi *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* the round 6 phone look, its real ones: the race's flag centred in its picture's place, its size */
.b .sp.flagslot .flag{margin-right:0;width:12px;height:12px;background-size:8px 8px}
#h-days .drow:has(+ .row.lbl){border-bottom:0}   /* 0102 amended ("B ofc"): last week's day ends where this week's head begins */
/* 30 September 2026, late (Kostas, on the week's board: "b. for the dates, make WED be middle aligned under day number"): the week
   quieter and with more room, as drawn, a day 63 tall; the same day on Home as quiet; a day's weekday centred under its number */
.weekscroll .b .nm{font-weight:500!important}
.weekscroll .num .n{font-weight:600!important;font-size:16px!important}
.weekscroll .t{padding-top:17px!important;padding-bottom:16px!important}
.weekscroll .daywrap.today .t{padding-bottom:12px!important}
.weekscroll .t .body{gap:12px!important}
.weekscroll .num .w{margin-top:2px}
#h-days .b .nm{font-weight:500}
#h-days .dn .n{font-weight:600;font-size:16px}
.t .num,.drow .dn,.drow-today .dn{text-align:center}
/* 1 October 2026 (Kostas: "Health metrics shading in home is squared. Everywhere do the rounded shading"): what shades on a press shades a
   rounded shape a little larger than the thing, drawn behind it, so a row's lines stay straight and the shade never hugs the words */
.reading{border-radius:12px}   /* no lines of its own: it lights itself, rounded */
#h-days .drow,.row.lbl[data-go],.morerow{position:relative;z-index:0}
#h-days .drow:active,.row.lbl[data-go]:active,.morerow:active,#h-days .drow:hover,.row.lbl[data-go]:hover,.morerow:hover{background:transparent!important;box-shadow:none!important}
@media (hover:hover){#h-days .drow:hover::before,.row.lbl[data-go]:hover::before,.morerow:hover::before{content:'';position:absolute;z-index:-1;border-radius:12px;background:color-mix(in srgb,var(--green) 8%,var(--card));pointer-events:none}}
#h-days .drow::before{inset:0 -10px}
.row.lbl[data-go]::before{inset:-6px -10px}
.morerow::before{inset:3px -10px}
/* 1 October 2026 (Kostas, on the board "Home's cards that turn": "Aaa"); the cards' rules read their classes too, so the copy under the top card,
   which carries none of the card's handles, stands as the card will. 1A: a card that turns is the top of a pile; it follows the finger,
   tilts, and goes under, the next card waiting underneath; an edge shows for each further card (two at most). 2A: pressed, the card lifts;
   its words never tint. 3A: the coach's line set as the reminders' line. */
.pile{position:relative;margin:12px 12px 0}
.pile .card{margin:0!important}
.pile > [data-pile-top]{position:relative;z-index:3;touch-action:pan-y;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.pile > [data-pile-top].lift,body.sky:not(.land-page) #main .pile > [data-pile-top].lift{transform:scale(1.02);box-shadow:0 12px 30px rgba(31,42,36,.16);border-color:transparent}   /* over the sky ground's card shadow */
.pile > [data-pile-top].held{transition:none}
@media (hover:hover){.pile > [data-pile-top]:hover:not(.lift),body.sky:not(.land-page) #main .pile > [data-pile-top]:hover:not(.lift){box-shadow:0 8px 22px rgba(31,42,36,.12)}}   /* under a pointer it lifts a little (0104 amended: buttons light under the pointer) */
.pile-next{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;display:flex}
.pile-next > .card{flex:1;box-sizing:border-box;overflow:hidden}
.pile-edge{position:absolute;z-index:0;background:var(--card);border:1px solid var(--rule);border-radius:16px;pointer-events:none}
[data-pile] .tile[data-tile]:active,[data-pile] .tile[data-tile]:hover,[data-pile] [data-offer]:active,[data-pile] [data-offer]:hover{background:transparent!important}
.serif.offer-line{font-size:14px;line-height:1.45;color:var(--muted)}
/* 1 October 2026, later (Kostas, of four ways to answer a press drawn on the canvas: "lets do a"): a quick tap shows nothing; held, the
   thing rises, as the cards do; moved, it settles; a workout's capsule too (his "yes"). Buttons keep their own press, and a mouse its light,
   on hover and press (0104 amended): the tints are scoped to (hover:hover), so a touch screen's press and its sticky hover shade nothing
   and take no white away (his "but now the whole tile shades too": a cover-up rule had made a week's day transparent). */
.risen{position:relative;z-index:5;transform:scale(1.03)!important;transition:transform .16s ease}
.risen::before{content:''!important;display:block!important;position:absolute;inset:-4px -10px!important;border-radius:14px!important;background:var(--card)!important;box-shadow:0 10px 26px rgba(31,42,36,.16)!important;z-index:-1;pointer-events:none}
.t.risen{border-radius:14px!important;filter:drop-shadow(0 10px 18px rgba(31,42,36,.18))}   /* a week's day lifts out of its week's card: its own white, rounded */
.t.risen::before{content:none!important}
.t:has(.b.risen){overflow:visible}   /* a capsule held rises out of its day, its surface and shadow whole */
/* 0136, one identity (Kostas, 1 October 2026, of the board drawn on the canvas: "yes"). Kept from the app as it is: the green top with the rings,
   Archivo, deep green and one lemon, white cards on the soft ground, the sports' colours and pictures, the marks, the bar at the foot.
   Drawn from zero: six text roles, two figure sizes, one rhythm. Every text on every screen takes one role and nothing else.

   display   26/30 700 -.02em   a screen's title, the day's line, a workout's date
   heading   17/22 600          what a card is about: a reminder, an event, a name; a day's number
   body      15/22 400          sentences: the coach's words, the chat, a row of More
   body-m    15/22 500          a row's name: a session, a best
   meta      13/18 400 grey     what qualifies it: times, units, counts, dates, a figure's name
   label     11/14 600 caps     what a section is (green); a weekday, a month (grey)
   figure    22/26 700 tabular  a reading, a session's figure, a number on a card
   figure-l  26/30 700 tabular  a big number: a dial, Insights' totals
   micro     11/14 400 grey     a chart's ticks, a message's time
   chip      13/600             a choice: a chip, a segment, Earlier

   The rhythm: 12 from the screen's edge, 16 inside a card, 12 between cards, 8 under a section's label. */
body.sky:not(.land-page) /* display */
.hero #dayline,body.sky:not(.land-page) .titlerow.more-title h1,body.sky:not(.land-page) .ins-hero .with,body.sky:not(.land-page) h1.ridetitle{font-size:26px!important;line-height:30px!important;font-weight:700!important;letter-spacing:-.02em!important}
body.sky:not(.land-page) /* heading */
.tile .tt,body.sky:not(.land-page) .racedoor > div:not(.micro):not(.small),body.sky:not(.land-page) #prof-name,body.sky:not(.land-page) .dn .n,body.sky:not(.land-page) .num .n,body.sky:not(.land-page) .weekscroll .daywrap .t .num .n,body.sky:not(.land-page) #h-days .drow .dn .n,body.sky:not(.land-page) #h-days .drow-today .dn .n{font-size:17px!important;line-height:22px!important;font-weight:600!important;letter-spacing:-.005em!important}
body.sky:not(.land-page) /* body */
.serif,body.sky:not(.land-page) .serif.prose,body.sky:not(.land-page) .tile .tn,body.sky:not(.land-page) .morerow > span:first-child,body.sky:not(.land-page) .morerow > a,body.sky:not(.land-page) .morerow > #homescreen,body.sky:not(.land-page) .mine .bubble > div,body.sky:not(.land-page) .said .serif{font-size:15px!important;line-height:22px!important;font-weight:400!important}
body.sky:not(.land-page) /* body-m */
.b .nm,body.sky:not(.land-page) .ins-best .ins-what,body.sky:not(.land-page) .ins-rec-h > span:first-child{font-size:15px!important;line-height:22px!important;font-weight:500!important}
body.sky:not(.land-page) .linkish,body.sky:not(.land-page) .dash,body.sky:not(.land-page) .dash span,body.sky:not(.land-page) .ridebox .dash{font-size:15px!important;font-weight:600!important}
body.sky:not(.land-page) /* meta */
.b .r span,body.sky:not(.land-page) .row.lbl .small,body.sky:not(.land-page) .ins-eb span,body.sky:not(.land-page) .reading .small,body.sky:not(.land-page) .nlab,body.sky:not(.land-page) .numpart .small,body.sky:not(.land-page) .card[data-numbers] .small,body.sky:not(.land-page) .morerow .small,body.sky:not(.land-page) .morerow > span.small,body.sky:not(.land-page) .morehead .small,body.sky:not(.land-page) .rule > span + span,body.sky:not(.land-page) .woke span,body.sky:not(.land-page) .racedoor .small,body.sky:not(.land-page) .ins-big em,body.sky:not(.land-page) .ins-head i,body.sky:not(.land-page) .ins-mark em,body.sky:not(.land-page) .ins-best em,body.sky:not(.land-page) .ins-legend span,body.sky:not(.land-page) .ins-rec em,body.sky:not(.land-page) .ins-note,body.sky:not(.land-page) .ins-big i,body.sky:not(.land-page) .ins-v i,body.sky:not(.land-page) .ins-rec-h i,body.sky:not(.land-page) .ridebox .small,body.sky:not(.land-page) .ridebox [style*="font-size:13px"],body.sky:not(.land-page) .ridebox [style*="font-size: 13px"]{font-size:13px!important;line-height:18px!important;font-weight:400!important}
body.sky:not(.land-page) .racecard .n small{font-size:13px!important;font-weight:400!important;color:var(--muted)!important;margin-left:4px}
body.sky:not(.land-page) .ridebox > div[style*="font-size:14px"]{font-size:13px!important;line-height:18px!important}
body.sky:not(.land-page) /* label */
.micro,body.sky:not(.land-page) .ins-eb,body.sky:not(.land-page) .rule > span:first-child,body.sky:not(.land-page) .monthband .m,body.sky:not(.land-page) .greet,body.sky:not(.land-page) .ridebox .micro,body.sky:not(.land-page) #panelmonth{font-size:15px!important;line-height:20px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important}
/* 0142 (Kostas, of the audit's 3: "ok"): a card's name, in ink, at 17; a list's heading stays at 15 in grey */
body.sky:not(.land-page) .card > .row.lbl .micro,body.sky:not(.land-page) .ins-eb,body.sky:not(.land-page) #sheet .panel .micro:not(.p-head){font-size:17px!important;line-height:22px!important;color:var(--ink)!important}
body.sky:not(.land-page) .monthband .m{color:var(--muted)!important}   /* a month, in grey, as a weekday */
body.sky:not(.land-page) .dn .w,body.sky:not(.land-page) .num .w{font-size:11px!important;line-height:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
body.sky:not(.land-page) /* figure */
.reading > span:first-child,body.sky:not(.land-page) .card[data-numbers] > div > .numpart > span:first-child,body.sky:not(.land-page) .card[data-numbers] > div > div > span:first-child,body.sky:not(.land-page) .ins-head b,body.sky:not(.land-page) .ins-mark b,body.sky:not(.land-page) .ins-best .ins-v b,body.sky:not(.land-page) .ins-rec-h b,body.sky:not(.land-page) .ridebox b[style*="font-size: 22px"],body.sky:not(.land-page) .ridebox b[style*="font-size:22px"]{font-size:22px!important;line-height:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.01em!important}
body.sky:not(.land-page) .reading > span:first-child > .small,body.sky:not(.land-page) .card[data-numbers] > div > .numpart > span:first-child > .small{font-size:13px!important;font-weight:400!important}
body.sky:not(.land-page) .racecard .n{font-size:22px!important;line-height:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}
body.sky:not(.land-page) /* figure-l */
.ins-big b,body.sky:not(.land-page) .ins-head b.xl{font-size:26px!important;line-height:30px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}
body.sky:not(.land-page) /* micro */
.mine-t,body.sky:not(.land-page) .said-t,body.sky:not(.land-page) .ins-xl span,body.sky:not(.land-page) [data-zone-top],body.sky:not(.land-page) .card[data-numbers] > .numpart .small,body.sky:not(.land-page) .card[data-numbers] > .numpart > span:not(.small){font-size:11px!important;line-height:14px!important}
body.sky:not(.land-page) /* chip */
.chip,body.sky:not(.land-page) #earlier,body.sky:not(.land-page) .ins-seg button{font-size:13px!important;font-weight:600!important}
body.sky:not(.land-page) #composer .chip{font-weight:500!important}
body.sky:not(.land-page) /* a list's figure,body.sky:not(.land-page) smaller */
.card > div > div > span > b{font-size:15px!important;font-weight:600!important;font-variant-numeric:tabular-nums!important}
body.sky:not(.land-page) /* rhythm */
#main .card,body.sky:not(.land-page) .pile .card{padding:16px!important}
body.sky:not(.land-page) .row.lbl{margin-bottom:2px}
body.sky:not(.land-page) /* a list's own figure and its names (Best efforts) */
.card > div > div > span.small{font-size:13px!important;line-height:18px!important}
body.sky:not(.land-page) /* emphasis inside a sentence: the heading's weight */
.serif b,body.sky:not(.land-page) .serif strong,body.sky:not(.land-page) .prose b,body.sky:not(.land-page) .prose strong{font-weight:600!important}
body.sky:not(.land-page) .card > div > div > span > span.small{font-size:13px!important}
body.sky:not(.land-page) /* the workout card: its expanders as links,body.sky:not(.land-page) its curve's watts as a list's figure,body.sky:not(.land-page) the morning's numbers as figures,body.sky:not(.land-page) the laps' head as a label */
.dash-t{font-size:15px!important;font-weight:600!important}
body.sky:not(.land-page) #ridebox div > div > span > b{font-size:15px!important;font-weight:600!important;font-variant-numeric:tabular-nums!important}
body.sky:not(.land-page) #ridebox .big{font-size:22px!important;line-height:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}
body.sky:not(.land-page) #laps th{font-size:11px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important}
body.sky:not(.land-page) #laps td{font-size:13px!important;font-variant-numeric:tabular-nums!important}
/* 0136, the same day (Kostas: "reminders have quite a lot of empty space now. can we make it snug as 'from your coach'?"): a reminder's grey
   line stops at two lines, so the card, as tall as its tallest face, leaves no face in empty room */
body.sky:not(.land-page) [data-pile="reminder"] .tile .tn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.sky:not(.land-page) .weekscroll .t{padding-left:16px!important}   /* the week's date column on Home's edge, now Home's card holds 16 inside */

/* 0138: the health consent on the first screen, and the rest closed until it is ticked */
.ob-consent{display:flex!important;gap:12px;align-items:flex-start;margin:8px 0 14px;padding:14px 16px!important;font-size:15px;line-height:22px;color:var(--ink);cursor:pointer}
.ob-consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--deep)}
.ob-gate[inert]{opacity:.42;filter:grayscale(.6);user-select:none}
/* 0139: a quiet Connect, what each door brings, Garmin's other way, the version at the foot of You, today's box rounded */
.btn.quiet{background:var(--tint);border:1.5px solid transparent;color:var(--deep)}   /* 0142: everything else you can press, one soft fill */
.door-brings{margin-top:2px}
.ga-ivl{color:var(--deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ga-steps{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:22px}
.version-foot{text-align:center;margin:18px 0 6px;font-size:11px;line-height:14px;font-weight:400;color:var(--muted);cursor:pointer}   /* 0136: the smallest role */
.weekscroll .daywrap.today .t,.weekscroll .monthband.inline + .daywrap.today .t,.weekscroll .daywrap.today:has(+ .rule) .t,.weekscroll .daywrap.today:last-child .t{border-radius:16px;margin:6px 8px}   /* today rounded whatever band sits above it or rule below */
.daywrap.today .t::before{display:none}
/* 0140: the ride's chart: the canvas in its box, the scale beside it and under it in the smallest size, the readout on top, a part's summary */
.chart-box{position:relative;margin:0 0 22px 44px}
.chart-box.no-y{margin-left:0}   /* 0140 amended: with no line drawn there is no scale, so no gutter for one */
.chart-y{position:absolute;right:calc(100% + 6px);transform:translateY(-50%);font-size:11px;line-height:14px;font-weight:400;color:var(--muted);white-space:nowrap;pointer-events:none}
.chart-x{position:absolute;top:calc(100% + 5px);transform:translateX(-50%);font-size:11px;line-height:14px;font-weight:400;color:var(--muted);white-space:nowrap;pointer-events:none}
.chart-x.cx-first{transform:none}.chart-x.cx-last{transform:translateX(-100%)}
.chart-box .cursor{z-index:3}
.chart-sel{display:flex;align-items:center;gap:10px;margin:4px 0 2px;padding:9px 8px 9px 16px;background:var(--deep-bg);color:#fff;border-radius:18px;font-size:13px;line-height:18px}
.chart-sel-t{flex:1;display:flex;flex-direction:column;min-width:0}
.chart-sel-t b{font-weight:600}.chart-sel-t span{color:rgba(255,255,255,.8)}
.chart-sel button{flex:none;width:28px;height:28px;border-radius:999px;border:0;background:rgba(255,255,255,.18);color:#fff;font:600 15px/1 var(--font-app);cursor:pointer}
.sheet a.btn{text-decoration:none}   /* 0139: a link drawn as a button, Open Intervals.icu */
/* 0142: Insights' recovery lines mark their latest morning over the chart, which stretches */
/* 0151: a chart answers a mouse and a finger: a cursor, the reading's dot, and a bar that rises and glows */
.ins-vl{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--deep);pointer-events:none}
.ins-cur{pointer-events:none;z-index:1}
.ins-dot.prev{background:var(--card);border-color:#9FB0A5}
.ins-bar{transform-box:fill-box;transition:transform .18s ease,opacity .18s ease}
.ins-bar.dim{opacity:.38}
.ins-bar.lift{transform:translateY(-3px)}
.ins-legend [data-f]{transition:color .18s ease}
.ins-legend [data-f].on,.ins-lv{color:var(--ink)}
.ins-lv{font-variant-numeric:tabular-nums}
.ins-lv:empty{display:none}
.ins-reading .ins-legend > .r{display:none}
.ins-strip span{transition:transform .18s ease,box-shadow .18s ease}
.ins-strip span.lift{transform:translateY(-2px);box-shadow:0 2px 6px color-mix(in srgb,var(--deep) 40%,transparent)}
[data-best-day] .ins-track{transition:transform .18s ease,box-shadow .18s ease}
[data-best-day].on .ins-track{transform:translateY(-2px);box-shadow:0 2px 8px color-mix(in srgb,var(--c) 75%,transparent)}
@media (prefers-reduced-motion: reduce){.ins-bar,.ins-strip span,[data-best-day] .ins-track,.ins-legend [data-f]{transition:none}}
.ins-spark-wrap{position:relative}.ins-last{position:absolute;left:100%;width:11px;height:11px;border-radius:50%;background:var(--lemon);border:2px solid var(--deep);box-sizing:border-box;transform:translate(-50%,-50%);pointer-events:none}

/* 0142 (Kostas, of the audit's 1: "ok"): dark follows the device's setting, in the app's own greens; lemon stays the one accent and the
   dials keep their colours. A surface names its own colour (--deep-bg, --green-bg), so deep green and green can turn light as words and lines. */
/* 0142 round 3: a door's brand logo where its name stood, at its brand's minimum or above; the picture keeps its own proportions */
.brand{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:1}
picture.brand{gap:0}   /* its <source> for dark is a flex item too: no gap, or the logo sits 8 px in from the words' edge */
.connbtn .brand-intervals,.connbtn .brand-garmin,.connbtn .brand-suunto{color:var(--ink)}   /* 0157: Garmin in words, as Intervals.icu's name; 0162: Suunto too */
.brand img{display:block;width:auto;max-width:none}
.brand-whoop img{height:16px}
.brand-wahoo img{height:30px}
.brand-oura img{height:18px}
.brand-polar img{height:15px}
.brand-intervals img{height:20px;width:20px}
.brand-apple img{height:28px;width:28px}   /* Apple's icon as Apple gives it: no corner, border or shadow added; no smaller than another icon in view */
.door-name .brand,.conn-door .name .brand{margin:2px 0}
/* 0142 round 2 (Kostas, of the audit's 2: "1. a, but no need "2 sessions" words. today + date is enough"): Home's green top opens on the day,
   its sessions in the identity's sizes on the green: one still to do at 26, two or more at 22, the durations beside them; the coach's line
   under them, never cut. Lemon for one thing (0133): the day's label; the line, the pictures and the ticks in white */
.hero.today-hero{padding:22px 20px 26px}
.hero.today-hero > div{display:flex;flex-direction:column;width:100%;min-width:0}
.today-hero .th-day{font-size:13px;line-height:18px;font-weight:600;color:var(--lemon)}
.today-hero .th-bands{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.today-hero .th-bands .b{background:transparent!important;color:#fff!important;margin:0!important;padding:0!important;height:auto!important;min-height:0;border-radius:0;box-shadow:none}
.today-hero .th-bands .b .l{gap:12px}
.today-hero .th-bands .b .sp{color:#fff!important;background-color:transparent!important;background-image:none!important;--flagline:#fff}
body.sky:not(.land-page) .today-hero .th-bands .b .nm{font-size:22px!important;line-height:28px!important;font-weight:700!important;letter-spacing:-.01em;color:#fff!important}
.today-hero .th-bands .b .r{gap:10px;color:rgba(255,255,255,.85)!important}
.today-hero .th-bands .b .r > *{height:auto;line-height:normal}
.today-hero .th-bands .b .r span:not(.tick){font-size:17px!important;line-height:22px!important;font-weight:600!important;color:rgba(255,255,255,.85)!important}
.today-hero .th-bands .b .tick{width:22px;height:22px}
.today-hero .th-bands .b .tick:not(.off):not(.miss){background:#fff!important;color:var(--deep-bg)}
.today-hero .th-bands .b .r:not(:has(.tick))::after{content:"";flex:none;width:22px}
.today-hero .th-bands.big .b .sp.icon{transform:scale(1.25);transform-origin:left center;margin-right:6px}
body.sky:not(.land-page) .today-hero .th-bands.big .b .nm{font-size:26px!important;line-height:32px!important;letter-spacing:-.02em}
.today-hero .th-bands.big .b .r span:not(.tick){font-size:22px!important;line-height:28px!important;font-weight:700!important}
.today-hero .th-bands.big .b .r::after{display:none}
.today-hero .th-ask{font-size:15px;line-height:22px;color:rgba(255,255,255,.72);margin-top:6px}
.today-hero .th-line{font-size:15px;line-height:20px;color:#fff;margin-top:16px;text-wrap:pretty}
.today-hero .when{margin-top:4px;font-size:13px;line-height:18px;opacity:1;color:rgba(255,255,255,.62)}
/* 0142 round 2 (Kostas, of the audit's 6: "2. ok but for a done session we need a line above done"): inside a sheet a section is not framed:
   its name, its content and a thin line above it, across the sheet's words; the first under a session's band takes it too. The ride's chart
   follows its map unframed and without a line. The Events list: rows and the lines between them. Insights: no line under a card's name. */
.sheet .panel .card{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:16px 0 4px!important;margin-top:16px!important;border-top:1px solid var(--rule)!important}
.sheet .panel .ridebox > .card{margin-left:16px!important;margin-right:16px!important}
.sheet .panel .card:has(#chart){border-top:0!important;padding-top:0!important}
.sheet .panel .ridebox > .words{border-top:1px solid var(--rule);margin:16px 16px 0;padding:16px 0 12px!important}
.sheet .panel .pgroup{background:transparent;border:0;border-radius:0;padding-left:0;padding-right:0}
.sheet .panel .sec-head{border-top:1px solid var(--rule);padding-top:16px;margin-top:16px!important}
.ins-best:first-child{border-top:0}
.ins-recs > .ins-rec:first-child{border-top:0}
/* 0142 round 2 (Kostas, of the audit's 9: "3. ok but the shading must be even and shade area must cover items nicely ... 5% is ok"): a session in
   the week and in Home's tile wears its sport at 5% over the card (10% in dark, as strong over the dark card). Every session's shade takes the
   shape of today's filled bar: the same edges, height and corners, 8 px before the picture and 12 px after the mark, and the duration where
   every other duration is. A rest day, a day away and a day with nothing planned have none. */
.weekscroll .b:not(.rest),#h-days .b:not(.rest){box-sizing:border-box;min-height:40px;height:auto;margin-left:-8px;margin-right:0;padding:8px 12px 8px 8px;border-radius:12px}
.weekscroll .b:is(.past,.ahead,.race),#h-days .b:is(.past,.ahead,.race){background:color-mix(in srgb,var(--sc) var(--shade),var(--card))}
@media (hover:hover){.weekscroll .b:is(.past,.ahead):hover,#h-days .b:is(.past,.ahead):hover{background:color-mix(in srgb,var(--sc) var(--shade-on),var(--card))}}
.weekscroll .b .r:not(:has(.tick))::after,#h-days .b .r:not(:has(.tick))::after{content:"";width:18px;flex:none}
.weekscroll .bands .b + .b,#h-days .bands .b + .b{margin-top:6px}
@media (prefers-color-scheme: dark){:root{--ground:#0B110E;--paper:#0B110E;--card:#151D19;--tint:#1E2924;--ink:#E8EEEA;--muted:#97A39B;--dim:#6E7A73;--rule:rgba(255,255,255,.09);--rule-strong:rgba(255,255,255,.16);--deep:#CFE0D4;--green:#9DC0A9;--act:#9FD3AE;--deep-bg:#17241D;--green-bg:#2F4A3A;--page:#0B110E;--shade:10%;--shade-on:18%;--quiet:var(--muted);--dot:var(--rule-strong);color-scheme:dark}
:where(:root) .glass{background:rgba(21,29,25,.72)}:where(:root) .composer .box{background:var(--card);border-color:var(--rule)}:where(:root) .chip{background:rgba(21,29,25,.7);border-color:var(--rule)}
:where(:root) .tour-arrow{background:rgba(21,29,25,.94)}:where(:root) .pill{background:rgba(21,29,25,.96)}
:where(:root) .composer{background:linear-gradient(to bottom,rgba(11,17,14,0),rgba(11,17,14,.9) 18px,rgba(11,17,14,.97) 40px)}
:where(:root) .pill .ind::after{background:#2F6B4C}:where(:root) .b.past .tick:not(.off):not(.miss),:where(:root) .obrow.done .tick{background:#2F6B4C}
:where(:root) .laps tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--lemon) 10%,var(--card))}
:where(:root) .ins-chart linearGradient stop{stop-color:#9DC0A9}:where(:root) .ins-chart linearGradient stop:first-child{stop-opacity:.3}
:where(:root) body.sky:not(.land-page) .composer{background:linear-gradient(to bottom,rgba(11,17,14,0),rgb(11,17,14) 12px)}:where(:root) body.sky:not(.land-page) .composer::after{background:rgb(11,17,14)}
:where(:root) .b .tick:not(.off):not(.miss){background:#2F6B4C}
/* 3 October 2026 (Kostas, of the desktop in dark): the chosen view or span, and Insights' done mark, stood in the ground's deep green and
   vanished on the dark card; they take the green a done tick and the tab bar's chosen tab take here */
:where(:root) .ins-seg button.on{background:#2F6B4C}:where(:root) .ins-m.done{background:#2F6B4C}
/* 9 October 2026: the usage gauge's fill, under the chat box and in You, vanished the same way; the same green */
:where(:root) .usage-gauge b i{background:#2F6B4C}
/* 0171: the chosen day's fill and today's ring, in the deep green, would vanish the same way */
:where(:root) .mcal-day.sel .mcal-n{background:#2F6B4C}:where(:root) .mcal-day.today .mcal-n{box-shadow:inset 0 0 0 1.5px var(--deep)}
}

/* 0149: the season, tile A and its tap-through (Kostas, 4 and 5 October 2026): the coach's blocks as a strip, today, the races; the colours
   are the tokens', so dark draws it too; the type keeps 0136's roles (11, 13, 15, 22) */
.ss-strip{position:relative;margin-left:2px;margin-right:2px}
.ss-seg{position:absolute;box-sizing:border-box;border-radius:4px;border:1px solid transparent;background:none;padding:0;margin:0;overflow:hidden;display:flex;align-items:center;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.ss-seg.ahead{background:var(--tint);border-color:var(--rule-strong)}
.ss-seg.now{background:var(--act)}
.ss-seg.gone{background:color-mix(in srgb,var(--green) 30%,var(--card))}   /* gone: a paler fill, its name in ink, readable in light and dark */
.ss-seg.pick{box-shadow:0 6px 14px rgba(31,42,36,.24);transform:translateY(-3px);z-index:2}   /* the chosen block rises (Kostas, 5 October 2026: "a is ok") */
.ss-seg.pick .ss-name{color:var(--deep);font-weight:600}
.ss-seg.now.pick .ss-name{color:var(--card)}
@media (prefers-color-scheme: dark){.ss-seg.pick{box-shadow:0 6px 16px rgba(0,0,0,.6)}}
.ss-name{padding:0 6px;font-size:11px;line-height:14px;white-space:nowrap;color:var(--muted);pointer-events:none}
.ss-seg.now .ss-name{color:var(--card);font-weight:600}
.ss-seg.gone .ss-name{color:var(--ink)}
.ss-today{position:absolute;top:-5px;width:2px;border-radius:1px;background:var(--ink)}
.ss-flag{position:absolute;top:-17px;line-height:0}
.ss-flag .flag{margin-right:0}
.ss-months{position:relative;height:14px;margin:6px 2px 0;font-size:11px;line-height:14px;color:var(--muted)}
.ss-months span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ss-lines{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ss-now{display:flex;flex-direction:column;gap:2px}
.ss-big{font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.ss-page{display:flex;flex-direction:column;gap:12px;padding:4px 0 24px}
.ss-head{display:flex;align-items:center;gap:6px;padding:0 16px 0 6px}
.ss-back{all:unset;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.ss-back svg{width:22px;height:22px}
.ss-title{font-size:22px;line-height:28px;font-weight:700;color:var(--ink)}
.ss-right{margin-left:auto}
.ss-bh{display:flex;flex-direction:column;gap:2px}
.ss-bn{font-size:22px;line-height:28px;font-weight:700;color:var(--ink)}
.ss-aim{font-size:15px;line-height:22px;color:var(--ink)}
.ss-weeks{display:flex;flex-direction:column;margin:0 -10px}
.ss-week{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px}
.ss-week.now{background:var(--tint)}
.ss-wl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ss-wt{font-size:15px;line-height:20px;color:var(--ink)}
.ss-week.now .ss-wt{font-weight:600}
.ss-wc{white-space:nowrap}
/* 0159: the block's days, a small bar per day in its sport's colour (C on the board "What a block is made of") */
.ss-wtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ss-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px}
.ss-day{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.ss-kd{display:block;width:7px;height:7px;border-radius:50%}
.ss-day.ss-dkey .ss-kd{background:var(--lemon);box-shadow:inset 0 0 0 1.5px var(--deep)}
.ss-lane{display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;gap:1px;width:100%}
.ss-bar{display:block;width:18px;border-radius:3px;background:var(--sc)}
.ss-bar.plan{opacity:.42}
.ss-bar.miss{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sc)}
.ss-flat{display:block;width:18px;height:3px;border-radius:2px;background:var(--rule)}
.ss-beyond{display:block;width:18px;height:0;border-top:2px dotted var(--rule-strong,var(--rule))}
.ss-dlt{font-size:11px;line-height:11px;color:var(--muted)}
.ss-other{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:10px 0;min-height:44px;cursor:pointer;border-top:1px solid var(--rule)}
.ss-od{width:118px;flex:none}
.ss-on{flex:1;min-width:0;font-size:15px;line-height:20px;color:var(--ink)}
.ss-chev{color:var(--muted);display:flex}
/* 0150: the zones as one thick bar with each zone's name inside it; at each change its top and the heart rate under it (Kostas, 5 October
   2026: "b ok"); the shades are fixed greens, so their names are a fixed ink and white, readable in light and dark; type in 0136's roles */
.numpart.zones{padding-top:2px}
.zbar{display:flex;gap:2px}
.zband{flex:1;min-width:0;height:28px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.02em;color:#243A2E;font-variant-numeric:tabular-nums}
.zband.dark{color:#fff}
.ztops{position:relative;height:36px;margin-top:6px}
.ztop{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap}
.zv{font-size:13px;line-height:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.zu{font-size:11px;font-weight:400;color:var(--muted);margin-left:2px}
.zh{display:inline-flex;align-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 0168 (Kostas, 8 October 2026: "a is ok"): the round button above the bar on every page, as drawn; on a session's card it says what the
   words are about; on Coach the mic sits in the chat box, quiet beside the send. The words to check are client/voice.js's own */
#voice-fab{position:fixed;right:16px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:10;display:flex;align-items:center;gap:10px;pointer-events:none;transition:transform .2s}
#voice-fab .vf-mic{pointer-events:auto;width:56px;height:56px;padding:0;border-radius:999px;border:0;background:var(--deep-bg);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(36,58,46,.35);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#voice-fab .vf-about{display:none;background:var(--card);color:var(--deep);font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.14);white-space:nowrap}
#voice-fab.on-card{bottom:calc(34px + env(safe-area-inset-bottom))}
#voice-fab.on-card .vf-about{display:block}
body.awayfromtoday #voice-fab:not(.on-card){transform:translateY(-56px)}   /* the Week's Today rides under it, not behind it */
.round.vmic{background:var(--tint);color:var(--deep);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.vmark{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.vmark svg{flex:none}
@media (prefers-color-scheme: dark){#voice-fab .vf-mic{background:var(--green-bg);box-shadow:0 6px 18px rgba(0,0,0,.5)}}