/* The cockpit's layout, on the phone's stylesheet. 0097 the arrangement, 0098 the day, 0099 the widths.
   app.css is loaded first and carries every component — the card, the band, the pill, the sphere, the
   thread, the composer. Only the wide arrangement is new here; nothing below re-draws a component the
   phone already has. */
body{max-width:none!important;margin:0!important;padding:0!important;background:var(--ground)}
body.cockpit{padding-bottom:0!important;overflow:hidden}
a{color:var(--green)} a:hover{color:var(--deep)}
/* 100vh, never 100dvh: iOS standalone reports dvh short of the screen and lifts every fixed element
   with it (client/README.md, 0056). The cockpit is a flex column and the month inside it scrolls. */
.w{height:100vh;overflow:hidden;background:var(--ground);color:var(--ink);position:relative;display:flex;flex-direction:column;font:14px/1.5 var(--font-app)}
/* The way in (0097 point 13) is a page, not the cockpit: it scrolls, and it is taller than any
   screen. The shell above is one viewport and clipped, which is right for a month that scrolls
   inside itself and wrong for this — it put the close and the footer out of reach entirely. */
.w.w-landroot{height:auto;overflow:visible}
.w .card{margin:0}

/* the top: the dark green panel, one row */
.w-bar{flex:none;height:56px;background:var(--deep-bg);color:#fff;display:flex;align-items:center;gap:20px;padding:0 16px}
.w-bar .lockup{font-size:22px;color:#fff}
.lockup{display:inline-block;font-family:var(--font-brand);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.lockup-mark{display:inline-block;width:1.575em;height:.99em;margin:0 .22em;vertical-align:-.16em;color:var(--lockup-ring,var(--lemon))}   /* 0116: G */
.w-grow{flex:1}
.w-icons{display:flex;gap:8px;align-items:center}
.w-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);box-shadow:0 4px 12px rgba(36,58,46,.24);color:var(--deep);cursor:pointer;padding:0;font:inherit}
.w-circ.journey{width:auto;padding:0 11px 0 9px;gap:6px;background:color-mix(in srgb,var(--lemon) 86%,transparent)}
.w-circ .jdays{font-size:13px;font-weight:700}
.w-circ .mark{position:absolute;top:4px;right:5px;width:8px;height:8px;border-radius:999px;background:var(--deep-bg)}

/* the body under the bar */
.w-body{flex:1;min-height:0;display:flex;gap:12px;padding:12px 14px 14px;position:relative}

/* the rail: one tile to a column, a 300 px floor, and it scrolls sideways rather than squeezing
   (0097). Kostas: "lets do fixed now. 1 per column, scrollable horizontally whole home top or
   draggable with mouse" — and "more tiles could be created once we brainstorm, so scrolling is
   required anyway", which is why it is built to be dragged at any width. */
.w-rail{flex:none;display:flex;gap:12px;padding:12px 14px 0;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;scroll-behavior:smooth}
.w-rail::-webkit-scrollbar{display:none}
.w-rail.drag{cursor:grabbing;scroll-behavior:auto;user-select:none}
.w-rail.drag *{pointer-events:none}
.w-tile{flex:1 0 300px;display:flex}   /* 4 October 2026: no explicit min-width, so a tile is never narrower than what it carries; it starts at 300 and never shrinks (the first tile's card ran 50 px under the dials when a 300 px floor overrode its content's own); like the rail's worded tiles it grows wider, never taller (0133) */
/* every tile takes the height of the tallest, and its content spreads from head to foot instead of
   pooling at the top. Kostas: "make reminders, offerings, health tile take over whole or most of the
   tile. empty space now looks weird" */
.w-rail [data-fill="1"]{flex:1;min-height:0;justify-content:space-between}
.w-rail .w-hero[data-fill="1"]{justify-content:flex-start}   /* the fill rule spreads a column's rows apart; the hero is a row, and its text stays beside its mark (Kostas, 19 September: "logo and text is split by space") */
.w-rail [data-fill="1"] .crown{padding-top:10px}

/* the coach, present: the phone's hero as a card in the panel's colour */
.w-hero{background:var(--deep-bg);color:#fff;border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.w-hero .greet{font-size:13px;opacity:.85}
.w-hero .dayline{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--lemon);margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-hero .when{font-size:12px;opacity:.8;margin-top:4px}

/* the month */
.w-month{flex:1;min-width:0;background:var(--card);border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.w-mhead{flex:none;display:flex;align-items:baseline;justify-content:space-between;padding:10px 14px 6px}
.w-mhead h2{margin:0;font-size:18px;font-weight:600}
.w-mhead .hr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.w-mhead .hr b{color:var(--ink);font-weight:600}
.w-dow{flex:none;display:grid;border-bottom:1px solid var(--rule)}
.w-dow span{padding:0 8px 5px;font-size:11px;font-weight:600;color:var(--muted)}
/* height buys month, width buys the day's detail (0099): the weeks scroll, so a short window is a
   worse cockpit than a narrow one, and neither is broken */
.w-weeks{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.w-week{display:grid;border-bottom:1px solid var(--rule);position:relative}
.w-day{position:relative;min-width:0;padding:6px 6px 8px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:2px;min-height:112px}
.w-day.today{box-shadow:inset 0 0 0 1.5px var(--deep)}
.w-day.today::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--mark)}   /* a mark takes the deep of words, light in dark (3 October 2026: "today is not enough emphasized"; the ground's deep stayed dark and the edge vanished) */
.w-num{display:flex;align-items:baseline;gap:6px;padding-left:4px;font-size:15px;font-weight:500;line-height:1.2}
.w-day.today .w-num{font-weight:700;color:var(--deep);padding-left:7px}
.w-num .mo,.w-num .tw{font-size:11px;font-weight:600;color:var(--deep)}
.w-line{font-family:var(--font-coach);font-size:12px;line-height:1.35;color:var(--deep);padding-left:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-wk{padding:8px 8px;background:var(--paper);display:flex;flex-direction:column;gap:3px;min-width:0}
.w-wk .micro{font-size:10px;color:var(--deep)}
/* 0099 amended, 3 October 2026 (Kostas: "can we do numbers only 8:00 of 12:00 or something smaller. and then we would get narrower stripe"):
   the week's figures alone in 72 px at every width, done in ink over "of" planned in grey, each its own line and never broken over two;
   where the column has to earn its width (slim) the week's number goes, as before. A week with no plan yet says so in the label's size. */
.w-wk .n{font-size:13px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.w-wk .n.pl{color:var(--muted);font-weight:400}
.w-wk .n.none{font-size:11px;line-height:14px;font-weight:600;color:var(--muted)}

/* a day's rows (0098): one line per sport — the pill, the title, the distance and the duration at the
   end of the line, the mark after it. Rows are one height, so every day in a week starts its first
   pill on the same line and the longest day sets the row's height. */
.w-row{display:flex;align-items:center;gap:6px;height:26px;min-width:0;border-radius:9px;margin:0 -3px;padding:0 3px;transition:box-shadow .18s ease,background .18s ease}
.w-row .w-lbl{flex:1;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
.w-row .w-km{flex:none;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.w-row .w-dur{flex:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.w-row.done .w-lbl,.w-row.quiet .w-lbl{color:var(--muted)}
.w-row .w-lbl s{opacity:.55}   /* 0165: a workout taken away on its day, struck as the phone strikes it */
.w-row:hover,.w-row.on{background:var(--card);box-shadow:0 4px 14px color-mix(in srgb,var(--rowc,var(--deep)) 34%,transparent)}
.w-mini{flex:none;width:30px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 3px rgba(36,58,46,.25)}
.w-mini svg{width:15px;height:15px}
.w-mini.rest{background:color-mix(in srgb,var(--rest) 26%,var(--card));color:var(--deep);box-shadow:none}
.w-mini.none{background:var(--card);border:1px solid var(--rule);color:var(--muted);box-shadow:none}
.w-mini.blank{background:transparent;border:0;box-shadow:none}
/* 0098 point 4: the marks at the line's end — a green tick done, a honey wave off plan, a red cross
   missed, a dashed ring for a day gone holding nothing. A day still ahead carries no mark at all. */
.w-row .tick{width:16px;height:16px;flex:none;background:var(--tint);color:var(--deep)}
.w-row .tick.done{background:var(--green-bg);color:#fff}
.w-row .tick.off{background:var(--honey);color:var(--deep)}
.w-row .tick.miss{background:var(--red);color:#fff}
/* the two-line texts under a row: the session's own first line on a day ahead, the coach's words on
   a day gone. Both go below 1920 (0099), and neither is drawn on a day of three sports (0098). */
.w-struct{font-family:var(--font-coach);font-size:11.5px;line-height:1.3;color:var(--muted);padding-left:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-eval{font-family:var(--font-coach);font-size:11.5px;line-height:1.3;color:var(--muted);padding-left:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 0098 point 12: a changed session wears a lime dot, top right. Nothing else — the day shows what it
   now holds and the bell's Changes list says what it was. Kostas: "just do a small lime dot on the
   day, top right, user will get the change in notif bell." */
.w-daydot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:999px;background:var(--lemon);box-shadow:0 0 0 1px rgba(36,58,46,.18)}

/* 0098 point 10: where the month changes, one continuous step — along the foot of a row for the
   columns whose day below belongs to another month, and straight down where the month changes inside
   a row. ONE element per week row, its limbs inside it, so the corner meets: they are placed on the
   same grid, not on the cells. Kostas, on the first attempt which drew it per day: "wtf is the split
   month now??? leave the glow and make lines connect to each other so its one continuous line." */
.w-edge{position:absolute;inset:0;z-index:4;pointer-events:none}
.w-edge i{position:absolute;background:color-mix(in srgb,var(--deep) 10%,transparent);box-shadow:0 0 10px 1px color-mix(in srgb,var(--deep) 24%,transparent)}
.w-edge i.h{bottom:-1px;height:1.5px}
.w-edge i.v{top:0;bottom:-1px;width:1.5px}

/* narrow screens: the same day, tighter, so the names survive (0099) */
.w-month.tight .w-day{padding:5px 5px 7px;min-height:100px}
.w-month.tight .w-row{height:24px;gap:4px}
.w-month.tight .w-mini{width:24px;height:18px}
.w-month.tight .w-mini svg{width:13px;height:13px}
.w-month.tight .w-row .w-lbl{font-size:12px}
.w-month.tight .w-row .w-dur{font-size:11.5px}
.w-month.tight .w-row .tick{width:15px;height:15px}
.w-month.tight .w-num{font-size:14px}
.w-month.tight .w-wk{padding:7px 6px}

/* the chat beside the month, full height (0097 point 4) */
.w-chat{flex:none;background:var(--card);border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.w-chead{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--deep-bg);color:#fff}
.w-chead .t1{color:var(--lemon)}
.w-chead .small{color:#fff;opacity:.8}
.w-chead .w-x{color:#fff;background:transparent;border-color:rgba(255,255,255,.4)}   /* 26 September 2026: .w-x's white disc came later and hid the white × */
.w-chead .t1{font-size:16px;font-weight:600;line-height:1.2}
.w-chat .thread{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 10px}
.w-chat .composer{position:static;left:auto;right:auto;bottom:auto;background:none;padding:6px 12px 12px;z-index:auto}
.w-chat .box{box-shadow:none;border:1px solid var(--rule)}
.w-chat .chip{background:var(--tint);border-color:var(--tint)}
.w-chat .chips{flex-wrap:wrap;overflow:visible}
/* the coach unfolded at a narrow width: over the calendar, not beside it */
.w-over{position:absolute;right:14px;top:12px;bottom:14px;z-index:9;box-shadow:-26px 0 64px rgba(36,58,46,.22)}

/* the coach folded (0097 point 5): a tile at the foot on the right, in the panel's green so it never
   reads as a day. Kostas: "folded coach should be bottom right horizontal tile. maybe not white as it
   blends with calendar." */
.w-coachtile{position:absolute;right:14px;bottom:14px;height:60px;padding:0 24px 0 11px;border-radius:999px;background:var(--deep-bg);display:flex;align-items:center;gap:12px;box-shadow:0 14px 34px rgba(36,58,46,.30);z-index:8;cursor:pointer;border:0;font:inherit}
.w-coachtile .w-ctxt{display:flex;flex-direction:column;justify-content:center;line-height:1.25;text-align:left}
.w-coachtile .w-ct{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--lemon)}
.w-coachtile .w-cs{font-size:11.5px;color:rgba(255,255,255,.72);font-weight:500;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* 26 September 2026: a pause's sentence made the tile a banner across the month; the whole of it is the tile's title */
.w-coachtile .w-ctxt{min-width:0}
.w-coachtile .dot{position:absolute;top:10px;right:14px;width:9px;height:9px;border-radius:999px;background:var(--lemon);border:1px solid var(--deep)}

/* a day opens as a card that slides out of the coach, over the right of the calendar, taking the
   coach card's own box. The chat keeps its place and its box (0097 point 6). Kostas: "user needs to
   be able to write to coach without closing the workout card." */
.w-slide{position:absolute;top:12px;bottom:14px;background:var(--card);border:1px solid var(--rule);border-radius:18px;box-shadow:-26px 0 64px rgba(36,58,46,.22);overflow:hidden;z-index:9;display:flex;flex-direction:column}
.w-shead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;min-height:65px;border-bottom:1px solid var(--rule)}
.w-sbody{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 16px}
.w-slide.overtile .w-sbody{padding-bottom:84px}   /* 26 September 2026: the folded coach's tile covered the card's last lines, Quote this among them */
.w-x{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;flex:none;padding:0}

/* 0097 point 7, as 0062 has it on the week: the way back to today appears only while today is off
   the screen, and goes when it is on. Nothing else floats over the month. */
.w-totoday{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;height:40px;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,.16);display:none;align-items:center;font-size:12px;font-weight:600;letter-spacing:.06em;z-index:8;cursor:pointer}
.w-totoday.on{display:flex}

/* a sheet over the cockpit: the bell, search, More. The phone's panel, centred rather than at the foot. */
.w-sheet{position:fixed;inset:0;background:rgba(36,58,46,.35);z-index:20;display:flex;align-items:center;justify-content:center}
.w-sheet .panel{background:var(--card);width:min(560px,92vw);max-height:84vh;overflow-y:auto;border-radius:22px;padding:18px 22px 22px;position:relative;box-shadow:0 24px 60px rgba(36,58,46,.28)}
.w-sheet .panel .w-x{position:absolute;top:12px;right:12px}
/* 0164 (Kostas: "your rule"): a list as a panel from the right edge with an arrow back; one thing in the middle over the cockpit blurred;
   a yes or no in our own popup over a blur */
.w-sheet.sh-card{background:rgba(36,58,46,.26);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.w-sheet.sh-page{justify-content:flex-end;align-items:stretch;background:rgba(36,58,46,.22)}
.w-sheet.sh-page .panel{width:min(560px,100vw);max-height:none;height:100%;border-radius:22px 0 0 22px;padding-top:0;animation:w-page-in .32s cubic-bezier(.2,.8,.2,1)}
.w-sheet.sh-page .w-pbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;height:52px;margin:0 -22px;padding:0 14px;background:var(--card)}
.w-sheet.sh-page .w-pbar .w-x{position:static;display:flex;align-items:center;gap:6px;width:auto;height:auto;border:0;background:none;color:var(--green);font:inherit;font-size:15px;font-weight:500;padding:8px;border-radius:10px;cursor:pointer}
.w-sheet.sh-page .w-pbar .w-x svg{flex:none;width:10px;height:16px}
.w-sheet.sh-page .w-pbar .w-x:hover{background:color-mix(in srgb,var(--green) 8%,transparent)}
.w-sheet.sh-page .w-pbar.scrolled{box-shadow:0 1px 0 var(--rule)}
@keyframes w-page-in{from{transform:translateX(100%)}to{transform:none}}
.w-pop{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(36,58,46,.18);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.w-pop .box{width:min(400px,92vw);background:var(--card);border-radius:20px;padding:22px;box-shadow:0 24px 60px rgba(17,24,20,.28);display:flex;flex-direction:column;gap:14px}
.w-pop .ttl{font-size:17px;font-weight:650;color:var(--ink)}
.w-pop .msg{font-size:15px;line-height:1.45;color:var(--ink)}
.w-pop .w-pop-in{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--card);color:var(--ink)}
.w-pop .acts{display:flex;justify-content:flex-end;gap:8px}

/* The ride page (0097 point 6 amended). The workout card keeps the coach's own box; a session that
   has a device file takes the width it needs — a map, a chart of every sample, the figures, up to
   seventeen laps and a nine-row power curve do not fit in 360 px. Kostas: "IF the workout card has a
   file and becomes a ride page, we could extend it in width." */
.w-slide.w-ride{box-shadow:-30px 0 70px rgba(36,58,46,.26)}
.w-ride .w-sbody{padding:14px 18px 20px}
/* The race wears the same card as the ride (Kostas, 16 September: "make it same as workout card /
   ride file format") — it slides out of the coach rather than sitting over the middle of the month. */
.w-slide.w-race{box-shadow:-30px 0 70px rgba(36,58,46,.26)}
.w-race .w-sbody{padding:14px 18px 20px}
.w-ride #w-map{height:240px;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--tint)}
.w-ride .mapwrap{position:relative;margin-bottom:10px;isolation:isolate;z-index:0}
.w-ride .mapwrap .chip{position:absolute;right:10px;top:10px;z-index:2;height:28px;padding:0 10px;font-size:12px}
.w-ride .chartwrap{position:relative}
.w-ride canvas{width:100%;height:auto;display:block}
.w-ride .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w-ride .w-curve{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.w-ride .w-curve > div{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;padding:3px 0}
.w-ride table.laps{width:100%}
/* the laps peek and the chart's switches are app.css's own; only the box around them is new here */
.w-ride .lapsbox{overflow-x:auto}

/* Connections (0047): one row a door — its name, what it does or what it last read, and one way in */
.conn-door,.conn-soon{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--rule)}
.conn-door:first-child{border-top:0}
.conn-door .name,.conn-soon .name{font-weight:600;font-size:16px;color:var(--ink)}
.conn-soon .name,.conn-soon .small{color:var(--muted)}   /* 0133 amended: read, in the quiet grey (faded it read at 2.3 to 1) */

/* Kostas's first notes, 17 September (docs/design/2026-09-17-desktop-notes.md) */
/* 7: a workout's row and the text under it are one capsule under the pointer */
.w-grp{border-radius:9px;margin:0 -3px;padding:0 3px 3px;transition:box-shadow .18s ease,background .18s ease}
.w-grp .w-row{margin:0;padding:0}
.w-grp .w-row:hover{background:transparent;box-shadow:none}
.w-grp:hover{background:var(--card);box-shadow:0 4px 14px color-mix(in srgb,var(--rowc,var(--deep)) 34%,transparent)}
/* 15: the chat's starters on one line, scrolling sideways; the files waiting still wrap */
.w-chat .composer > .chips:not(#w-attach){flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.w-chat .composer > .chips:not(#w-attach)::-webkit-scrollbar{display:none}
.w-chat .composer > .chips:not(#w-attach) .chip{flex:none}
/* 12 and 16: what can be clicked answers the pointer, mildly */
.w-circ,.w-coachtile,.w-rail [data-numbers],.w-rail [data-race],.w-rail [data-face],.w-rail [data-offer],.w-rail .gauge,.w-rail .reading{cursor:pointer;transition:filter .15s ease,background .15s ease}
.w-circ:hover,.w-coachtile:hover{filter:brightness(.95)}
.w-rail .card[data-numbers][style*="cursor:pointer"]:hover{filter:brightness(.985)}   /* a numbers card with nothing on record is one door, the whole card */
/* 0120, 21 September (Kostas: the reminders' hover shade "is rough edges"): THE HOVER SHADE, one rule everywhere. A part that answers the pointer
   lights with a soft tint, rounded, with air around it, so the shade never touches the words or a colour bar; never a brightness filter on text. */
.w-rail [data-face],.w-rail [data-offer]{border-radius:12px;margin:-8px -6px;padding:8px 6px;transition:background .15s ease}
.w-rail [data-face]:hover,.w-rail [data-offer]:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
/* the event's own row lights, not the tile around it; and the add button on its own (Kostas, second notes) */
.w-rail .w-event{border-radius:12px;margin:-6px -10px;padding:6px 10px;transition:background .15s ease}
.w-rail .w-event:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.w-rail #w-addrace{border-radius:8px;margin-left:-6px !important;padding:3px 6px !important;transition:background .15s ease}
.w-rail #w-addrace:hover{background:color-mix(in srgb,var(--deep) 9%,transparent) !important}   /* the button's own inline background:none would win without it */
.w-rail .gauge,.w-rail .reading{border-radius:12px;transition:background .15s ease}
.w-rail .gauge:hover,.w-rail .reading:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.w .tx,.w-sheet .morerow,.w-sheet .line.go{border-radius:12px;transition:background .15s ease}
.w .tx:hover,.w-sheet .morerow:hover,.w-sheet .line.go:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.w-sheet .morerow,.w-sheet .line.go{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
.w .chip:hover,.w-sheet .chip:hover,.w .btn:hover,.w-sheet .btn:hover,.w .round:hover,.w .plus:hover,.w .arrow:hover{filter:brightness(.96)}
/* 5 (Kostas's answer "b"): Our journey's days as a strip, like the zones strip */
.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.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)}
/* Kostas's third notes, 17 September. "hovering shade on your numbers tile - just until the best efforts. best efforts line gets a separate hover":
   the numbers are one door down to the line above Best efforts, and Best efforts another below it, each shading on its own */
.w-rail .w-numdoor{transition:background .15s ease}
.w-rail .numpart{cursor:pointer;border-radius:12px;margin:-6px -6px;padding:6px 6px;transition:background .15s ease}.w-rail .numpart:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}   /* 0120's shade */   /* 0104: the parts light, the card's area does nothing */
.w-rail #w-bests{background:transparent;border-radius:12px;transition:background .15s ease}
.w-rail #w-bests:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
/* "coach textbox filler text … make it middle so send button, + button and text are all aligned horizontally": the box's line is as tall as
   the buttons beside it (34 px, a 22 px line and 6 px above and below), so its words sit where their centres are, empty or written; and it is
   measured border to border, so the height set while writing is the height it has */
#w-composer .box textarea{box-sizing:border-box;min-height:34px;padding:6px 2px;line-height:22px}
/* "hand with finger on a mouse is activated everywhere basically on the calendar. activate only when its on something clickable" (Kostas,
   17 September): on the month the hand is only where wire() gave a click something to do — a day that opens as a whole, a row that opens its
   session, the capsule around one */
.w-month .w-door{cursor:pointer}
/* Kostas's fourth notes, 17 September: "week strip blends with background too much. can we also just a bit make tiles pop compared to
   background?" — put to him as pictures, and his pick, "lets try d2": a soft shadow under the tiles, the month and the beside chat, on a slightly
   deeper page; and the week strip white like the month, with a line before it, so it can never take the page's colour again. The page is the
   cockpit's own, not the --ground token: the way in keeps the ground it was drawn with. The rail clips below its tiles, so the room a shadow
   needs moves into the rail, and a margin as deep gives it back, so the month stays 12 px under the tiles and nothing placed in .w-body moves. */
body.cockpit:not(.w-land-page),body.cockpit .w:not(.w-landroot){background:var(--page)}
.w-rail{padding-bottom:12px;margin-bottom:-12px}
.w-rail .card,.w-rail .racecard,.w-hero,.w-month,.w-chat:not(.w-over){box-shadow:0 1px 2px rgba(36,58,46,.07),0 4px 12px rgba(36,58,46,.08)}
.w-wk{background:var(--card);box-shadow:inset 1px 0 0 var(--rule-strong)}
/* Our journey (Kostas's fifth notes): a month of days under the tier strip, the crown beside the title */
.w-jcrown{width:36px;height:36px;border-radius:999px;background:var(--deep-bg);color:var(--lemon);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:auto}
.w-jcrown svg{width:22px;height:17px}
.w-jhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.w-jhead .micro{font-size:13px;letter-spacing:.06em;color:var(--ink)}
.w-jgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;justify-items:center}
.w-jdow{margin-bottom:8px}
.w-jdow span{font-size:11px;font-weight:600;color:var(--muted)}
/* More as the athlete's own page (Kostas's fifth notes): groups of rows under quiet heads, the way a profile page reads */
.w-prof,.w-group{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:2px 14px;margin-bottom:6px}
.w-prof .morerow,.w-group .morerow{padding:12px 0}
.w-prof .morerow:first-child,.w-group > .morerow:first-child{border-top:0}
.w-prof-head{margin:16px 0 6px}
.w-prof-you{display:flex;align-items:center;gap:14px;padding:14px}
.w-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}
/* every sheet opens on its title (Kostas's fifth notes: "other pages if there are any left"), as You and Our journey do: the title as a heading,
   its one line under it, whatever sits beside it on the right, and room left for the close button; the lists sit in groups, as on You */
.w-shtitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:2px 44px 14px 0}
.w-shtitle h1{margin:0;flex:1;min-width:0;font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.w-shtitle .small{flex-basis:100%;margin-top:2px}

.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)}
@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))}}
.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}

/* 0105: days selected on the month. The band is a deep-green line with a see-through deep-green fill; a selected square wears the same
   fill; the chip sits bottom right of the month like the way back to today, with Quote this in lime above it. */
body.w-selecting,body.w-selecting *{user-select:none;-webkit-user-select:none;cursor:crosshair}
.w-band{position:fixed;z-index:40;pointer-events:none;border:1.5px solid var(--deep);background:color-mix(in srgb,var(--deep) 12%,transparent);border-radius:4px}
.w-month .w-row.sel,.w-grp .w-row.sel{background:color-mix(in srgb,var(--deep) 12%,transparent);box-shadow:0 0 0 1.5px var(--deep) inset;margin-left:-6px;margin-right:-6px;padding-left:6px;padding-right:6px}   /* 0105 amended: the session, not the day; the selected pill reaches into the square's padding, wider not taller, so the duration keeps its air (Kostas, 19 September) */
.w-selbox{position:fixed;transform:translate(-100%,-100%);z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.w-selchip{height:40px;padding:0 10px 0 18px;gap:8px;border-radius:999px;background:var(--card);color:var(--deep);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(42,42,44,.16);display:flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.w-selquote{background:var(--lemon);color:var(--on-lemon);border-color:var(--lemon)}
.w-selquote:hover{filter:brightness(.96)}
.quote + .quote{margin-top:4px}
.w-selchip .x{border:0;background:transparent;font:inherit;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0}.w-selchip .x:hover{background:color-mix(in srgb,var(--deep) 8%,transparent);color:var(--deep)}
.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}
.obhead .small:empty{display:none}
.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}

/* the first screen scrolls inside the 100vh frame: on a laptop window Start sat below the fold, unreachable (found 20 September) */
.w-first{flex:1;min-height:0;overflow-y:auto}
body.w-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}   /* the page held while a sheet is open */

/* 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 */
.w-sheet .panel.w-tour{width:min(960px,92vw)}   /* the tour's pictures are the cockpit's, wide */
.w-tour .tour-pic img{max-height:56vh}

/* 0116: Ga — the sphere is a thin ring with the mark inside */
.sphere{position:relative;flex:none;border-radius:50%;border-style:solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.sphere.lime{border-color:var(--lemon);color:var(--lemon)}
.sphere.deep{border-color:var(--green);color:var(--green)}


/* 0133, 29 September 2026: the app in the landing's look, the desktop's half (the shared rules are in app.css) */
.w-hero .dayline{color:#fff}
.w-hero .greet{font-size:13px;font-weight:600;color:var(--lemon);opacity:1}
.w-chead .t1{color:#fff}   /* the coach's head wears the hero's colours, as before */
.w-circ{background:transparent;border:0;box-shadow:none;color:#fff}
.w-circ.journey{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.w-circ.journey svg{color:var(--lemon)}
.w-circ .mark{background:var(--lemon)}
.w-circ:hover{background:rgba(255,255,255,.14);filter:none}
.w-mini{background:transparent;box-shadow:none}
.w-mini.rest{background:transparent;color:var(--muted)}
.w-mini.none{background:transparent;border-color:transparent}
.w-chat .bubble{background:var(--deep-bg);color:#fff;border:0}
.w-chat .bubble .small{color:#fff!important}
.w-chat .bubble a{color:#fff}
/* 0133 amended: 16, the first tile's greeting at its top, Last review at its foot */
.w-hero{align-items:stretch}
.w-hero > div{display:flex;flex-direction:column;flex:1}
.w-hero .when{margin-top:auto;padding-top:10px}
/* 0133 amended again: the desktop's coach tile link a size down */
.w-rail .linkish{font-size:13px}
/* 0133, measured against the drawing: the desktop's half */
.w-bar{padding:0 16px 0 20px}
.w-bar .lockup{font-size:20px}
.w-hero{border-radius:16px}
.w-month{border-radius:16px}
.w-rail .b .nm{font-size:14px}
.w-rail .b .r{font-size:13px}
.w-circ .jdays{font-size:14px;font-weight:600}
.w-hero .dayline{font-weight:700;letter-spacing:-.02em}
/* 0133, 30 September 2026: measured against the drawing, value by value (Kostas: "match it exactly") */
.w-bar{gap:4px;padding:0 16px 0 20px}
.w-bar .lockup{font-size:20px}
.w-icons{gap:4px}
.w-circ:not(.journey){width:40px;height:40px}
.w-circ.journey{height:32px;padding:0 10px;gap:6px}
.w-circ .mark{top:7px;right:8px;width:7px;height:7px}
.w-rail{padding:14px 16px 12px}   /* 12 under: the month stays where it is (the drawing: "The month below stays as it is"; his d2's 12) */
.w-rail > .w-tile{min-height:196px}   /* the drawn 196; a tile whose words need more grows wider (fitRail), never taller */
.w-rail .card,.w-rail .racecard,.w-hero,.w-month,.w-chat:not(.w-over){box-shadow:0 1px 2px rgba(36,58,46,.06),0 4px 12px rgba(36,58,46,.06)}
.w-rail .card{gap:10px;justify-content:flex-start}
.w-rail .card > .offer-foot,.w-rail .card > div:last-child:has(> .cdots){margin-top:auto}
.w-hero{border:1px solid var(--deep);border-radius:16px}
.w-hero > div{display:flex;flex-direction:column;gap:10px}
.w-hero .greet{line-height:normal}
.w-hero .dayline{margin-top:0;line-height:1.12;letter-spacing:-.02em}
.w-hero .when{margin-top:auto;padding-top:0;font-size:12px;line-height:normal;opacity:1;color:rgba(255,255,255,.6)}
.w-dials{padding:14px 16px}
.w-dials .crown{display:flex;justify-content:space-between;padding:0;gap:0}
.w-rail [data-fill="1"] .w-dials .crown,.w-rail .w-dials[data-fill="1"] .crown{padding-top:0}
.w-dials .crown .gauge{padding:0;gap:6px}
.w-dials .crown .gauge .nlab{line-height:normal}
.w-dials .readings-row{margin:0;padding:8px 0 0;gap:0}
.w-dials .reading .nlab{line-height:normal}
.w-rail .w-numdoor{flex:none}
.w-bests-link{font-size:13px;font-weight:600;color:var(--deep);text-decoration:underline;text-underline-offset:3px;line-height:normal;display:inline-block;min-width:96px;text-align:right}   /* close takes the count's place */
.w-rail [data-offer] .b{height:auto;padding:8px 12px 8px 8px}
.w-rail [data-offer] .b .sp.icon{height:24px}
.w-rail .arrow{width:30px;height:30px;color:var(--ink)}
.w-dots{gap:6px}
.w-dots i{width:6px;height:6px;border-radius:999px;background:var(--dot)}
.w-dots i.on{width:18px;background:var(--mark)}
.w-rail .card > .row.lbl,.w-rail .racecard > .micro{line-height:normal}
.w-rail .offer-foot{padding-top:0}
.w-rail .row.lbl,.w-rail .row.lbl > *{line-height:normal}
.w-rail .numpart .nlab,.w-rail .numpart .small{line-height:normal}
.w-rail #w-addrace{line-height:normal;margin-bottom:-3px}
.w-rail .w-event > div:first-child{line-height:normal}
.w-rail [data-kill]:hover{background:color-mix(in srgb,var(--deep) 6%,var(--card))!important}   /* its ground is inline */
/* 0134: Calendar | Insights over the calendar (Kostas's D2); Insights in three columns, the coach at the side */
.w-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.w-left > .w-month{flex:1;min-height:0}
.w-switch{flex:none;display:flex;align-items:center;gap:14px}
/* 0099 amended, 3 October 2026: the tick for the two lines under each session, at the far end from Calendar and Insights; its words answer the
   pointer with the one hover shade (0120); ticked, the deep of a chosen view */
.w-lines{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:600;line-height:18px;color:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease}
.w-lines:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.w-lines input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid var(--rule-strong);background:var(--card);display:inline-grid;place-items:center;cursor:pointer}
.w-lines input:checked{background:var(--deep-bg);border-color:var(--deep-bg)}
.w-lines input:checked::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.w-lines input:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
@media (prefers-color-scheme: dark){.w-lines input:checked{background:#2F6B4C;border-color:#2F6B4C}}   /* as a done tick and a chosen view take in dark */
.w-viewseg{width:240px}
.w-spanseg{width:360px}
.w-ins{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:4px;scrollbar-width:thin}
.w-ins-body{padding-top:14px}
/* 0133 amended, 30 September 2026: the coach's head as the Insights drawing has it, no ring (Kostas: "never use sphere anymore") */
.w-chead .t1{font-size:15px;font-weight:700}
.w-chead .small{font-size:12px;opacity:1;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:8px}
.w-coachtile{padding:0 24px}
.w-chat .composer .chip{background:var(--card);border:1px solid var(--rule);color:var(--ink);font-weight:400}   /* the phone's starters, the same on both (0133 amended) */
.w-chat .composer .chip:hover{background:color-mix(in srgb,var(--green) 14%,var(--card))}
/* 0133 amended, 30 September 2026 (Kostas: "audit design once more so its all clean and neat, even and visually nice"): one 16 gutter
 * from the bar's logo to the chat; the week column one line, its figures top-left as the days'; a row with no mark keeps the mark's room;
 * a chip on a card is a chip, not white on white; the row of tiles fades and wears an arrow where it goes on; the chat's starters wrap */
.w-bar{padding:0 16px}
.w-body{padding:12px 16px 16px}
.w-week > .w-day:has(+ .w-wk){border-right-color:transparent}   /* his d2's line is the week column's own; Sunday's border doubled it */
.w-wk.slim{align-items:flex-start;justify-content:flex-start;padding:8px 8px}
.w-row .w-noslot{width:16px;flex:none}
.w-month.tight .w-row .w-noslot{width:15px}
.card .chip,.w-slide .chip,.w-sheet .panel .chip{background:var(--tint);border-color:var(--tint)}
.w-rail.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent)}
.w-rail.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to right,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.w-rail.more-left:not(.more-right){-webkit-mask-image:linear-gradient(to right,transparent,#000 72px);mask-image:linear-gradient(to right,transparent,#000 72px)}
.w-railnext{position:fixed;z-index:8;width:36px;height:36px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--deep);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(36,58,46,.14)}
.w-railnext:hover{background:color-mix(in srgb,var(--green) 14%,var(--card))}
.w-sbody > :first-child{margin-top:0!important}
/* the chat's two voices in one size, their times in one size; a lone last word kept off the cell's and the hero's lines; the folded
 * coach's round button leaves the month's and Insights' last lines clear; the dials' card inside its tile */
.w-chat .bubble,.w-chat .said .serif,.w-chat .said .prose{font-size:15px}
.w-chat .mine-t,.w-chat .said-t{font-size:12px}
.w-struct,.w-eval,.w-hero .w-dayline,#w-dayline,.dayline{text-wrap:pretty}
.w-dials{min-width:0;max-width:100%;box-sizing:border-box}
/* the tiles' bottom rows on one line, each 28 high at the card's foot; the Reminders row one height, so its arrows stay put as it turns */
.w-rail .offer-foot,.w-rail .rem-foot,.w-rail #w-addrace{margin-top:auto}
.w-rail .rem-row{align-items:flex-start}
.w-rail .rem-row .arrow{margin-top:6px}
.w-rail .rem-foot{transform:translateY(4px)}
.w-rail .offer-foot{transform:translateY(-3px)}
.w-rail #w-bests{transform:translateY(-4px)}
/* 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 room for the folded coach's button only when it is there, none under a sheet (a sheet sits above it); sheets
 * and the button on the 16 gutter; a sheet's cross on its title's line and in view while the sheet scrolls; the You and Events rows inside
 * their box's padding, their rules straight; Search's panel still while its results change; the month's Earlier a chip; the tiles' hover
 * fills clear of their neighbours; the chat's starters wrap; the journey's future days read; the hero's two lines even */
.w-body.folded .w-weeks,.w-body.folded .w-ins{padding-bottom:84px}
.w-slide{bottom:16px}
.w-coachtile{right:16px;bottom:16px}
.w-prof .morerow,.w-group .morerow{padding:12px 10px;border-top-color:transparent;background-image:linear-gradient(var(--rule),var(--rule));background-size:calc(100% - 20px) 1px;background-position:10px 0;background-repeat:no-repeat}
.w-prof .morerow:first-child,.w-group > .morerow:first-child{background-image:none}
.w-sheet:has(#w-q){align-items:flex-start}
.w-sheet:has(#w-q) .panel{margin-top:86px}
.w-month .chip{background:var(--tint);border-color:var(--tint)}
.w-rail [data-face],.w-rail [data-offer]{margin:-4px -6px;padding:4px 6px}
.jd-ahead{color:var(--muted)}
.w-hero .w-dayline,#w-dayline{text-wrap:balance}
.w-rail .rem-foot{display:flex!important;justify-content:flex-end;gap:12px}
.w-rail .rem-foot > span:first-child{display:none}
.tour-foot{grid-template-columns:96px minmax(0,1fr) 96px}
.field input[type=date]:invalid{color:var(--muted)}
/* the audit, round 3: a sheet's cross in its title row, the row staying in view with its own ground as the sheet scrolls; the chat
 * overlay and the way back to today on the 16 gutter and in the app's face, the month leaving it room; a label beside a count on its
 * neighbours' line; the month's first column on one edge; the dials' readings inside their tile at 1440; a reminder at three lines on
 * its tile (its whole words on a hover), so turning it never widens the tile past the window */
.w-sheet .panel > .w-shtitle.with-x{position:sticky;top:-18px;z-index:2;background:var(--card);margin:-18px -22px 0;padding:18px 22px 14px}
.w-shtitle.with-x h1{order:1}
.w-shtitle.with-x > :not(h1):not(.w-x):not(.small){order:1}
.w-shtitle.with-x .w-x{position:static;order:2;margin-left:auto;align-self:center}
.w-shtitle.with-x .small{order:3}
.w-over{right:16px;bottom:16px}
.w-totoday{font-family:inherit}
.w-month:has(.w-totoday.on) .w-weeks{padding-bottom:64px}
.row.lbl .small,.ins-eb > span{line-height:12px}
.w-mhead{padding-left:10px}
.w-dow span{padding-left:10px}
.w-dials .readings-row .reading > span:first-child{font-size:14px!important}.w-dials .readings-row .reading .nlab{font-size:11px!important}   /* round 5: the 1440 sizes at every width, so the readings keep a gap at 1920 too */
.w-rail [data-face] > div:nth-child(2){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-sheet .small{text-wrap:pretty}
/* 0133 amended, 30 September 2026 (the audit, round 3): the starters keep his one line (15), and the one cut at the chat's edge fades
   instead of showing a lone letter; the wheel turns the line, as the rail's */
.w-chat .composer > .chips.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.w-chat .composer > .chips.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
.w-chat .composer > .chips.more-left:not(.more-right){-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
/* 0133 amended, 30 September 2026 (the audit, round 4) */
.w-chat .thread{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14px);mask-image:linear-gradient(to bottom,transparent,#000 14px)}   /* a message scrolled up fades before the head, never hangs from it */
.w-coachtile{z-index:10}   /* the folded coach over an open card: the room the card keeps at its end is for it (0097 point 6) */
.w-slide .chart-switches .chip{background:transparent;border-color:transparent}   /* the chart's switches plain words, the phone's */
.w-chead{min-height:65px}   /* the coach's head one height with a card's beside it, 65 (as when it carried the ring) */
.w-rail .gauge:hover,.w-rail .reading:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--deep) 6%,transparent)}   /* the shade's air (0120): never on the ring or the words */
.w-sheet .obhead:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 8%,var(--card));border-radius:10px}
.w-sheet .panel > .w-shtitle.with-x.scrolled{box-shadow:0 1px 0 var(--rule)}   /* a rule under the title once the sheet scrolls, as a card's head */
.w-hero .when{transform:translateY(-3px)}   /* on the tiles' one bottom line, 239 */
.w-dow span:last-child{padding-left:8px}   /* WEEK on its column's edge */
.w-month.tight .w-dow span:last-child{padding-left:6px}
.w-day.today .w-struct,.w-day.today .w-eval{padding-left:7px}   /* today's line on its date's edge */
.w-railnext{background:var(--deep-bg);color:#fff;border-color:var(--deep)}   /* the row's own arrow, not a card's */
.w-railnext:hover{background:color-mix(in srgb,var(--deep-bg) 86%,#fff)}
.rem-row [data-face] > div:first-child{text-wrap:balance}
.w-tour .tour-pic{height:min(460px,50vh);align-items:center}
.w-tour .tour-pic img{max-height:100%}
.w-tour .tour-pages{margin:0 -22px}   /* the tour's column on the title's edge, the phone's */
.w-tour .tour-page{padding:8px 22px 18px}
.w-tour .tour-foot{padding:0 0 24px}
/* 0133 amended, 30 September 2026 (the audit, round 5) */
.w-chat .composer::after{display:none}   /* the phone's strip under its box: here it grew the cockpit past the window, and a note's open scrolled it up */
.w-sheet .panel > .w-shtitle.with-x{z-index:5}   /* above a result's sport picture */
.w-chat .thread{-webkit-mask-image:none;mask-image:none}
.w-chat .thread.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px);mask-image:linear-gradient(to bottom,transparent,#000 32px)}   /* a line's height of fade, once something has gone under the head */
.w-dials .readings-row{gap:8px}
.w-dials .readings-row .reading svg.sig{margin-right:1px!important}   /* a reading's mark beside its own figure, not its neighbour's word */
.w-tour .tour-text{min-height:2.6em}   /* two lines kept, so the frame does not jump from page to page */
.w-slide .b:hover{box-shadow:none}   /* a card's own band is not a door on the desktop */
.w-sheet .b.past:hover{box-shadow:0 0 0 4px var(--tint)}
.w-sheet .b.ahead:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 14%,var(--card))}
.w-month .w-row.sel,.w-grp .w-row.sel{margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}   /* selected days' rows keep a line between them */
.w-month.tight .w-row.sel{margin-left:-3px;margin-right:-3px;padding-left:3px;padding-right:3px}
#w-name-input:focus{outline:none;border-color:var(--deep)}
/* 30 September 2026 (the audit, round 6: real bugs and round 5's that did not take) */
.w-slide .drop .chip{background:var(--card);border-color:var(--rule)}   /* round 5's rule lost to .w-slide .chip: the button to choose a course was invisible */
@media (hover:hover){.w-slide .b.past:hover,.w-slide .b.ahead:hover,.w-slide .b.race:hover{background:transparent;color:var(--ink)}}   /* a card's own band is no door: nothing changes under the pointer (the race's band too, 10 October 2026) */
#w-name-input{border:1px solid var(--rule)}
#w-name-input:focus{outline:none;border-color:var(--deep)}
#w-name-edit:hover{background:color-mix(in srgb,var(--green) 14%,var(--card));color:var(--deep)}   /* the pencil's hover, not the bin's red */
.w-chat .thread.upward:not(.scrolled){-webkit-mask-image:linear-gradient(to top,transparent,#000 56px);mask-image:linear-gradient(to top,transparent,#000 56px)}
.w-chat .thread.upward.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 56px),transparent)}
.w-chat .composer{position:relative}
#w-composer > #w-tobottom{position:absolute;right:18px;bottom:calc(100% + 10px);z-index:3}   /* over the thread's faded foot */
/* 0136 on the cockpit (Kostas, 1 October 2026, of the board drawn on the canvas: "yes"): the phone's ten roles, the same six sizes. The month's day cells
   are the one dense place: a session's name there takes the choice's 13/600 and its time the meta's 13 grey, so a day still holds three. */

/* display */
#w #w-dayline{line-height:1.22!important;font-weight:700!important;letter-spacing:-.02em!important}   /* its size and lines from fitDayLine: the identity's 22, 17, 15 */

/* heading */
#w .w-mhead h2,#w .w-chead .t1,#w [data-face] > div:first-child,#w .w-event > div:not(.n):not(.small),#w .w-num{font-size:17px!important;line-height:22px!important;font-weight:600!important;letter-spacing:-.005em!important}

/* body */
#w .said .serif,#w .said .serif p,#w .mine .bubble > div,#w [data-offer] .serif,#w [data-face] > div + div{font-size:15px!important;line-height:22px!important;font-weight:400!important}

/* body-m */
#w .b .nm,#w .ins-best .ins-what,#w .ins-rec-h > span:first-child{font-size:15px!important;line-height:22px!important;font-weight:500!important}
#w .linkish{font-size:15px!important;font-weight:600!important}

/* meta */
#w .w-hero .when,#w .row.lbl .small,#w .reading .small,#w .nlab,#w .numpart .small,#w .numpart > span > span,#w .b .r span,#w .racecard > .small,
#w .w-wk .small,#w .w-eval,#w .w-struct,#w .w-dur,#w .w-km,#w .w-chead .small,#w .woke span,#w .ins-eb span,#w .ins-big em,#w .ins-big i,#w .ins-head i,
#w .ins-mark em,#w .ins-best em,#w .ins-v i,#w .ins-legend span,#w .ins-rec em,#w .ins-rec-h i,#w .ins-note{font-size:13px!important;line-height:18px!important;font-weight:400!important}
#w .w-dur,#w .w-km{color:var(--muted)!important}

/* label */
#w .micro,#w .greet,#w .ins-eb,#w .w-dow span,#w .w-num .mo,#w .w-num .tw,#w .w-wk .micro{font-size:11px!important;line-height:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important}
/* 0142: a tile's name in plain words at 13 in ink, in the room the old capitals took: the cockpit's tiles and its packed Insights hold their
   sizes (a 15 px name pushed Your numbers' door over Best efforts and left New bests 30 px of empty room); the greeting at 13 */
#w .card .micro:not(.p-head),#w .ins-eb,#w .w-wk .micro{font-size:13px!important;line-height:14px!important;color:var(--ink)!important}#w .greet{font-size:13px!important;line-height:18px!important}
#w .w-dow span,#w .w-num .mo{color:var(--muted)!important}
#w #w-bests .nlab{font-size:11px!important;line-height:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--green)!important}
#w #w-bests-count{font-size:13px!important;font-weight:400!important;color:var(--muted)!important}

/* figure */
#w .reading > span:first-child,#w .numpart > span:first-child,#w .ins-head b,#w .ins-mark b,#w .ins-v b,#w .ins-rec-h b,#w .w-event .n{font-size:22px!important;line-height:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.01em!important}
#w .reading > span:first-child > .small,#w .numpart > span:first-child > span{font-size:13px!important;font-weight:400!important}
#w .w-event .n small{font-size:13px!important;font-weight:400!important;color:var(--muted)!important;margin-left:4px}

/* figure-l */
#w .ins-big b,#w .ins-head b.xl{font-size:26px!important;line-height:30px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}

/* micro */
#w .said > .small,#w .mine-t,#w .ins-xl span{font-size:11px!important;line-height:14px!important;font-weight:400!important}

/* choice: chips, segments, a session's name in a day cell, Add another event */
#w .chip,#w .ins-seg button,#w .w-lbl,#w #w-addrace{font-size:13px!important;font-weight:600!important}
#w #w-composer .chip{font-weight:500!important}
/* the cockpit's workout: its figures as figures, their names and units, the started line and what it was, in the meta; the head's label whole */
#w .w-ride .figs .big{font-size:22px!important;line-height:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}
#w .w-ride .figs .small{font-size:13px!important;line-height:18px!important;font-weight:400!important}
#w #w-ridebody > .small,#w #w-ridebody > .small a{font-size:13px!important;line-height:18px!important;font-weight:400!important}
#w .w-shead .micro > span{font-size:11px!important;font-weight:600!important}
/* the day's line at the display's size takes a third line, the tile has the room; a reading stands as on the phone, its name under it */
#w .w-dials .readings-row .reading{flex-direction:column!important;align-items:center!important;gap:0!important}
#w .w-dials .readings-row{justify-content:space-around!important}
/* the tiles at the top, one step down the same scale (Kostas, of the board: "i want the fonts a bit smaller on tiles at the top"): the day's
   line 22, a tile's heading 15, its sentences 13, a row's name and a link 13 semibold, its figures 17; the small grey stays 13, labels 11 */
#w .w-rail [data-face] > div:first-child,#w .w-rail .w-event > div:not(.n):not(.small){font-size:15px!important;line-height:20px!important;font-weight:600!important}
#w .w-rail [data-offer] .serif,#w .w-rail [data-face] > div + div{font-size:13px!important;line-height:18px!important}
#w .w-rail .b .nm,#w .w-rail .linkish{font-size:13px!important;font-weight:600!important}
#w .w-rail .reading > span:first-child,#w .w-rail .numpart > span:first-child,#w .w-rail .w-event .n{font-size:17px!important;line-height:22px!important;font-weight:600!important}

/* Reminders on the cockpit (Kostas, of the board: "make the text, heading, arrows in the middle ... vertical and horizontal"): the face and its
   arrows in the middle of the room between the label and the foot, the words centred between the arrows */
#w .w-rail .rem-row{flex:1!important;align-items:center!important}
#w .w-rail .rem-row [data-face]{text-align:left!important}   /* his "oops no. left and middle": the words to the left, the face in the middle of the room */
/* From your coach (Kostas: "make mobility bar width of the textbox below"): the session's bar in from each side by an arrow and its gap,
   its edges on the line's */
#w .w-rail [data-offer] > .b{margin-left:calc(30px + 8px)!important;margin-right:calc(30px + 8px)!important}

/* Insights on the cockpit, packed (Kostas, of the board: "this is tons of free useless space. same with thresholds tile"): the year over the
   thresholds beside New bests and the weekly volume, the follow-through and consistency beside the curve, recovery across, the year's four
   figures in one row. Only when every piece is there: a record without a curve or a recovery keeps the grid as it was, with no hole. */
#w .ins-wide:has(> [data-ins="sofar"]):has(> [data-ins="bests"]):has(> [data-ins="volume"]):has(> [data-ins="curve"]):has(> [data-ins="thr"]):has(> [data-ins="rec"]):has(> [data-ins="plan"]){grid-template-areas:"sofar bests volume" "thr bests volume" "curve curve plan" "rec rec rec"}
#w .ins-wide > [data-ins="sofar"]{grid-area:sofar}
#w .ins-wide > [data-ins="bests"]{grid-area:bests}
#w .ins-wide > [data-ins="volume"]{grid-area:volume}
#w .ins-wide > [data-ins="curve"]{grid-area:curve}
#w .ins-wide > [data-ins="thr"]{grid-area:thr}
#w .ins-wide > [data-ins="rec"]{grid-area:rec}
#w .ins-wide > [data-ins="plan"]{grid-area:plan}
/* 5 October 2026: any piece missing, not only these four: a span with no new bests left every card on one named spot, all of them lying
   on each other (found by 0151's walk step, the follow-through card over the weekly volume) */
#w .ins-wide:not(:has(> [data-ins="curve"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="rec"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="thr"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="plan"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="sofar"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="bests"])) > [data-ins],#w .ins-wide:not(:has(> [data-ins="volume"])) > [data-ins]{grid-area:auto}
#w .ins-wide > [data-ins="sofar"] .ins-grid2{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* 0138: the health consent on the first screen, and the rest closed until it is ticked */
.w-first .ob-consent{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px 18px;font-size:15px;line-height:22px;color:var(--ink);cursor:pointer}
.w-first .ob-consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--deep)}
.w-first .ob-gate[inert]{opacity:.42;filter:grayscale(.6);user-select:none}
/* 0139: the first screen's questions in the identity's sizes (0136: a question 17, its line 15) */
.w-first .obhead .oblabel{font-size:17px!important;line-height:22px!important}
.w-first .obhead .oblabel .small{font-size:15px!important;line-height:22px!important}
/* 0139: a quiet Connect, what each door brings, Garmin's other way; no dotted circle on a day not planned yet */
.w-sheet .btn.quiet{background:var(--tint);border:1.5px solid transparent;color:var(--deep)}   /* 0142 (7): the soft fill without a border, as the phone's; it had kept the outline */
.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}
.w-month .w-day .w-mini.none{visibility:hidden}
/* 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 48px}
.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}
.w-sheet a.btn{text-decoration:none}   /* 0139: a link drawn as a button, Open Intervals.icu */
/* 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 month wears its sport at the phone's strength (--shade, app.css), one shape for every session inside its day, the mark within it; a
   session with its line under it is shaded as one; a name takes 2 lines before it is cut; a day ahead with nothing planned is quieter */
.w-month .w-day{gap:4px}
.w-month .w-day > .w-row[style*="--rowc"],.w-month .w-grp{background:color-mix(in srgb,var(--rowc) var(--shade),var(--card));border-radius:8px;margin:0;padding:5px 6px}
.w-month .w-day > .w-row[style*="--rowc"]{height:auto;min-height:28px;box-sizing:border-box}
.w-month .w-grp .w-row{height:auto;min-height:18px}
.w-month .w-grp .w-struct,.w-month .w-grp .w-eval,.w-month .w-day.today .w-grp .w-struct,.w-month .w-day.today .w-grp .w-eval{padding-left:0}
.w-month .w-row .w-lbl{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:16px}
.w-month .w-day:not(.past):not(.today):not(:has(.w-row[style*="--rowc"],.w-grp)) .w-num{color:var(--quiet)}   /* --quiet: grey in light, the muted grey in dark (the dim one is too dark on the dark card) */
/* 0142 round 2 (Kostas, of the audit's 6): the desktop's card beside the calendar and its sheets, as the phone's: a section unframed, a thin
   line above it; the ride's chart follows its map without one */
.w-slide .card,.w-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}
.w-slide .card:has(canvas),.w-sheet .panel .card:has(canvas){border-top:0!important;padding-top:0!important}
/* 0142 round 2 (Kostas, of the audit's 2): the first tile opens on the day, as the phone's green top: its sessions as the month draws them,
   in the identity's sizes on the green, one still to do large; the coach's line under them, never cut; lemon for the day's label alone (0133) */
.w-hero-today{display:flex;flex-direction:column;gap:4px;margin-top:-2px}
.w-hero-today .w-row{height:auto;min-height:24px;margin:0;padding:0 4px;margin-left:-4px;margin-right:-4px;gap:8px;background:transparent!important;box-shadow:none!important;border-radius:8px}
.w-hero-today .w-row:hover{background:rgba(255,255,255,.08)!important}
.w-hero-today .w-mini{color:#fff!important;width:22px;justify-content:flex-start}
.w-hero-today .w-mini svg{width:18px;height:18px}
#w .w-hero-today .w-lbl{font-size:17px!important;line-height:22px!important;font-weight:600!important;color:#fff!important;white-space:nowrap;display:block;-webkit-line-clamp:none;overflow:hidden;text-overflow:ellipsis}
#w .w-hero-today .w-dur{font-size:15px!important;line-height:20px!important;font-weight:500!important;color:rgba(255,255,255,.85)!important}
.w-hero-today .w-km{display:none}
.w-hero-today .tick.done{background:#fff;color:var(--deep-bg)}
.w-hero-today.big .w-mini{width:26px}
.w-hero-today.big .w-mini svg{width:22px;height:22px}
#w .w-hero-today.big .w-lbl{font-size:22px!important;line-height:28px!important;font-weight:700!important;letter-spacing:-.01em}
#w .w-hero-today.big .w-dur{font-size:17px!important;line-height:22px!important;font-weight:600!important}
.w-hero-today.big .w-noslot{display:none}
.w-hero-ask{font-size:13px;line-height:18px;color:rgba(255,255,255,.72);margin-top:-6px}
#w .w-hero #w-dayline{font-size:15px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0!important;color:#fff!important;display:block!important;-webkit-line-clamp:none!important;overflow:visible!important;text-wrap:pretty}
/* 0142 round 3, found on the pictures: the first screen's drop zone sits in a card, and a card's chips take the soft fill, the zone's own
   ground, so its buttons vanished; on a soft ground a button is the card's colour, as on the phone */
.card .drop .chip,.w-sheet .panel .drop .chip{background:var(--card);border-color:transparent}
/* 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-week3{align-items:flex-end}
.ss-week3 .ss-wl{flex:0 0 230px}
.ss-week3 .ss-days{margin-top:0;grid-template-columns:repeat(7,34px)}
.ss-week3 .ss-bar,.ss-week3 .ss-flat,.ss-week3 .ss-beyond{width:22px}
.ss-week3 .ss-wc{margin-left:auto;padding-bottom:14px}
.ss-week3 .ss-wl{padding-bottom:14px}
.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}
/* 0149, the desktop: the panel where the calendar stands, the chosen block beside the other blocks; this week's days a row each */
.w-season-panel{display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
.w-season-panel .ss-head{padding:0 4px 0 0}
.ss-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.ss-dayrow{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--rule)}
.ss-dl{width:64px;flex:none;font-size:13px;line-height:18px;color:var(--muted)}
.ss-dayrow.today .ss-dl{font-weight:600;color:var(--ink)}
.ss-dr{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.w-season .ss-lines{margin-top:4px;gap:4px}
/* 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}