/* ============================================================ THEME ------------------------------------------------------------ Light is the default and dark is opt-in, switched by the header toggle, which stamps data-theme on and remembers the choice (see the theme block at the top of js/app.js). The OS preference is deliberately NOT consulted: a first visit should look the same for everyone, and that first look is light. Every color the app draws is declared once here and redefined wholesale in the [data-theme="dark"] block below, so no rule further down this file ever has to know which theme is on. The one exception is a color that belongs to someone else — Strava's orange — which is the same in both because it is their brand, not our palette. The light/dark relationship to hold on to: --color-surface is what a CARD is, --color-bg is both the page behind it and the INSET panels inside it (summary tiles, inputs, week headers, chart wells). In dark the inset is darker than the card; in light it is a shade of grey on white. Same tokens, same meaning, opposite direction. ============================================================ */ :root { color-scheme: light; /* Deliberately a shade deeper than the near-white it started at. This one value is doing two jobs — the page behind the cards AND the inset panels inside them — and at #f2f4f9 neither read: white cards disappeared into the page, and the summary tiles disappeared into the card. */ --color-bg: #eceff6; --color-surface: #ffffff; --color-text: #151a26; --color-text-muted: #697388; --color-border: #e3e7f0; /* The SAME edge, one step further along, for a panel whose own back is --color-bg rather than --color-surface. --color-border is tuned to sit on a card, and against the page colour it is very nearly the page colour — in light, #e3e7f0 on #eceff6 is a hairline nobody can see, so the summary tiles, the pace legend and the chart well all lost their shape while claiming to have an edge. Mixing toward the muted text ink rather than hard-coding a second hex keeps it moving with the palette, and keeps both themes on one rule: light gains the edge it was missing, dark keeps the one it already had. Which token a panel takes follows only from what is BEHIND it: --color-border over --color-surface, this over --color-bg. */ --color-border-inset: color-mix(in srgb, var(--color-border) 62%, var(--color-text-muted)); --color-primary: #4f46e5; /* Not literally "darker than primary" any more — it is the primary used as TEXT, which on white has to go darker and on near-black had to go lighter. The name is kept because every use site means the same thing by it. */ --color-primary-dark: #4338ca; --color-primary-light: rgba(79, 70, 229, 0.1); /* Reserved specifically for content the app filled in automatically — AI review notes/tips and Strava auto-fill badges (see color audit below). Nothing else should reach for this color; it needs to keep meaning "the app did this for you" at a glance. */ --color-accent: #0d8f72; --color-accent-light: rgba(13, 143, 114, 0.1); /* Formerly one-off hex values inlined into .form-error/.form-warning — pulled up here so they sit alongside the rest of the palette instead of being the only colors in the file that don't go through a token. */ --color-error: #c0392b; --color-error-bg: #fdeceb; --color-error-border: #f3c9c4; --color-warning: #8a6100; --color-warning-bg: #fff6e2; --color-warning-border: #f0dca8; /* The header's own ramp and the text that sits on it. These are deliberately NOT the near-white first draft (#dfe3ff / #eaedfb): measured against --color-bg, that ramp moved 13/12/9 per channel where the dark theme's moves 27/30/78, so the light header read as one flat block while the dark one had a visible glow. Light backgrounds hide a gradient far more readily than dark ones, so the light stops have to start further from the page color to travel the same visual distance. */ --header-from: #c6ccf9; --header-mid: #dee3fb; --header-text: #1b2136; /* "The surface color at zero alpha", for the one gradient that fades a surface out (.form-submit-bar). Spelled out per theme rather than using `transparent`, which Safari interpolates through transparent BLACK — a dark smear across the top of the fade. */ --surface-fade: rgba(255, 255, 255, 0); /* Where the today-card's wash starts (see .today-card). Opaque, and its own token rather than reusing --color-primary-light: that one is a 10% indigo, which over the white card composited to rgb(237,237,252) against an rgb(236,239,246) end stop — a gradient one channel wide, i.e. no gradient at all. It stays 10% because half a dozen tints around the app depend on it being that light. */ --today-wash: #d2d6f8; --color-dummy-text: #7a5600; --color-dummy-bg: rgba(255, 183, 3, 0.16); --color-dummy-border: rgba(196, 140, 0, 0.45); /* Session type colors. Every one of these is used two ways: as a badge fill with WHITE text on it, and as a bare chart bar or dot. The badge is the binding constraint, which is why the light set below is noticeably deeper than the dark set — the dark-theme values are mid tones chosen to glow against near-black, and white text on those same values over a white card is unreadable. */ --type-recovery: #776a5e; --type-easy: #3f7530; --type-longrun: #0f7460; --type-tempo: #8a6512; --type-interval: #b34f24; --type-repetition: #b52539; --type-rest: #656d7d; /* Weekday rest days suggest strength training (see app.js's restDisplayKey) — a distinct violet (a hue nothing else in this list uses) so that badge reads as its own thing at a glance instead of blending into plain --type-rest gray. Weekend rest keeps --type-rest; this is only for the weekday variant. */ --type-rest-strength: #6f4fac; /* Days inside a break the runner declared (see BREAK_LEVELS in js/planGenerator.js). A cool, low-saturation steel blue: it has to read as "nothing is expected of you here" next to plain --type-rest gray while still being obviously deliberate rather than absent, and it has to not be mistaken for --type-rest-strength violet (a slot that IS asking for something) or --type-race indigo. */ --type-break: #46718f; --type-race: var(--color-primary); /* Chart series colours for the VDOT trend plot (see renderVdotTrend in js/app.js). Two categorical slots, validated as a pair against the chart surface with the dataviz palette validator — lightness band, chroma floor, CVD separation (deutan ΔE 23.8, tritan 10.2), normal-vision separation (ΔE 28.9) and 3:1 contrast all pass in this mode. Do NOT retune either value without re-running that check: the two series are the whole point of the chart, and a pair that collapses under colour-vision deficiency makes it unreadable. --chart-planned reuses the primary indigo, which already means "the plan" everywhere else in this app. --chart-measured is its own token rather than --color-accent because the dark-mode accent (#4fd6b5) sits above the validator's lightness ceiling for a chart mark, while still being right for the badges and text it was picked for. */ --chart-planned: var(--color-primary); --chart-measured: #0d8f72; /* SPACING GRID — 2px, and every padding, margin and gap in this file sits on it. There are no --space-* tokens on purpose: the steps in use run 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, then 24, 26, 28 for section breaks, and naming fifteen numbers after the pixels they already state would make `padding: var(--space-14) var(--space-16)` harder to read than `padding: 14px 16px`, not easier. The grid is the rule; this comment is where it is written down. It was already the de-facto rule before it was written down — 88% of the 409 spacing values in this file were even. The other 12% were hand-tuned odd numbers (7px and 9px paddings on four different buttons, 11px and 13px on a tile) with no comment anywhere saying why, which is what makes "is 7 or 8 right here?" unanswerable for the next person. They are snapped now. TWO EXCEPTIONS, both marked at their own rule, and both the same kind of thing: a number derived from another dimension rather than chosen as spacing. The visually-hidden inputs cancel their own 1px box with margin: -1px, and anything centring itself uses translateX rather than half its own width negated. If a value has to leave the grid, it needs a reason of that shape and a comment saying so. */ /* Softer, larger corners read as calmer, and are what every current phone UI does; --radius-sm is for the panels nested inside a card, which need to stay visibly tighter than the card containing them. */ --radius: 20px; --radius-sm: 14px; /* The two steps below were in use long before they were named: 10px on rows and notices inside a panel, 6px on inline chrome (a strip, a small toggle, a checkbox). Naming them is what stops the drift that had already set in — the same "row inside a panel" shape was written 8px in eight places, 9px in one and 10px in five, and the same "panel" shape 12px, 13px and 14px, none of which reads as deliberate at 1px apart. --radius-control is the form-control step and is deliberately NOT one of the others: it is tuned to the 51px control height set in the input rule, so it moves with that and nothing else. Everything meant to be a pill uses 999px, not a radius large enough to clamp into one. */ --radius-item: 10px; --radius-chrome: 6px; --radius-control: 12px; /* Two layers: a wide soft one for depth and a hairline-tight one so the card still has a defined edge against a light page, which a single large blur alone doesn't give. */ --shadow: 0 8px 24px rgba(21, 26, 38, 0.06), 0 1px 2px rgba(21, 26, 38, 0.05); /* How far a not-yet-run volume-chart bar recedes. This is a color-mix strength (how much of the phase color survives against the chart's own --color-bg), NOT an element opacity: transparency dimmed the hairline edge along with the fill, which left a light-theme bar reading as a washed pastel with no defined edge and a visibly different hue from the full-strength dot the legend names it with. Mixing the FILL only, and keeping the edge at full strength, dims the bar without ever changing which phase color it looks like. Light needs a stronger survival rate than dark: these phase colors are text-grade and dark, so on the pale page a low mix washes them out, while on near-black the same color already recedes on its own. */ --chart-dim: 0.62; /* Same idea on hover — the bar steps toward its true color. */ --chart-dim-hover: 0.74; /* The selected pill in a segmented control (.plan-tabs). A white pill on the --color-bg track read as barely-there — from arm's length the two halves looked like one band. It's filled with the brand primary instead, so which tab you're on is legible at a glance in either theme, with white text on top. */ --tab-active-bg: var(--color-primary); --tab-active-border: var(--color-primary-dark); --tab-active-fg: #ffffff; /* The track behind the pills: tinted rather than flat --color-bg so the control reads as a switch, not a stray row of buttons. */ --tab-track-bg: var(--color-primary-light); --tab-track-border: color-mix(in srgb, var(--color-primary) 32%, transparent); /* One family, four weights. There used to be a second face here — Space Grotesk — nominally the "display" font, but both it and Manrope are geometric sans with the same skeleton and near-identical x-height, so the pairing never read as two voices: it read as one voice that kept slipping. Hierarchy is carried by the scale below and by weight (800 for anything that was reaching for the display face) instead, which also drops the loaded weights from eight files to four. */ --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Type scale ------------------------------------------------------ Sizes used to be picked per rule, which left 39 distinct values in this file — 0.84, 0.85, 0.86, 0.87, 0.88, 0.9, 0.92, 0.95, 0.96, 0.98, 1rem all living at once. Steps that small (0.01rem is a fifth of a pixel) are not read as a difference in rank; they are read as the page being sloppy. Worse, only 8 of ~150 declarations were >= 1rem, so almost every string in the app was smaller than the body default and the whole UI sat one notch too tight. Eight steps, each far enough from its neighbour to be legible AS a step. Pick the nearest one; do not invent a value in between. Any rule that still carries a raw rem is a documented exception with its reason written next to it. */ --text-2xs: 0.6875rem; /* 11px. Reserved for labels wedged into a fixed width — volume-chart column captions, the VDOT chart's axis text. Not for prose, ever. */ --text-xs: 0.75rem; /* 12px. Uppercase eyebrows, badges, chips. */ --text-sm: 0.875rem; /* 14px. Captions, meta lines, helper text. */ --text-base: 1rem; /* 16px. Body copy, controls, card contents. */ --text-md: 1.125rem; /* 18px. Card and panel titles, today-card title, primary CTA. */ --text-lg: 1.375rem; /* 22px. Metric figures. */ --text-xl: 1.75rem; /* 28px. Page and section headings, wordmark, the one hero figure (today's distance). */ /* Line height ran to 11 values (1.45 / 1.5 / 1.55 / 1.6 ...) and letter spacing to 16, including -0.005em and -0.011em — differences no eye resolves. Three of each, chosen by what the text IS. */ --leading-tight: 1.2; /* Headings and big figures. */ --leading-snug: 1.35; /* Two-line labels, table cells. */ --leading-normal: 1.5; /* UI copy. */ --leading-relaxed: 1.65; /* Paragraphs meant to be read through. */ --tracking-tight: -0.02em; /* Large type only; it needs closing up. */ --tracking-normal: 0; --tracking-wide: 0.06em; /* Uppercase micro-labels only. */ /* ---------------------------------------------------------------- */ /* Mask sources for the pseudo-element icons further down (see the ::before block under "Icons"). Same shapes as index.html's sprite; duplicated as data URIs only because mask-image cannot point at a . Stroke color is irrelevant to a mask — only the alpha is read — so these all draw in black and take their real color from the element's own currentColor. */ --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-10.5'/%3E%3C/svg%3E"); --i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.8 11.7 8 17 9.8 11.7 11.5 10 16.8 8.3 11.5 3 9.8 8.3 8 10 2.8Z'/%3E%3Cpath d='m18 14.2.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9.9-2.4Z'/%3E%3C/svg%3E"); --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 20h18.4L12 3.5Z'/%3E%3Cpath d='M12 9.5v4.2'/%3E%3Ccircle cx='12' cy='16.9' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 20.4h17.6'/%3E%3Cpath d='M6.8 20.4v-7.6'/%3E%3Cpath d='M12 20.4V4.6'/%3E%3Cpath d='M17.2 20.4v-5.2'/%3E%3C/svg%3E"); --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 21.2V3.2'/%3E%3Cpath d='M5.2 4.4h13.4l-2.6 4.3 2.6 4.3H5.2'/%3E%3C/svg%3E"); --i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m8 12.2 2.8 2.8 5.4-5.6'/%3E%3C/svg%3E"); } /* The whole dark theme, in one place. Only tokens are redefined — if a rule further down this file needs a [data-theme="dark"] variant of its own, that is a sign it is drawing a color literal it should have been taking from a token. */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #10131a; --color-surface: #1a1f2b; --color-text: #e8eaf0; --color-text-muted: #939bac; --color-border: #2b3243; --color-primary: #6366f1; --color-primary-dark: #a5b4fc; --color-primary-light: rgba(99, 102, 241, 0.18); --color-accent: #4fd6b5; /* Own step, not an automatic flip of the light value — re-validated against the dark chart surface (#1a1f2b): deutan ΔE 23.0, tritan 10.5, normal ΔE 27.2, all bands pass. See --chart-measured in :root. */ --chart-measured: #22a888; --color-accent-light: rgba(79, 214, 181, 0.14); --color-error: #ff9c90; --color-error-bg: #3a1a1a; --color-error-border: #63302a; --color-warning: #f0c66a; --color-warning-bg: #3a2c10; --color-warning-border: #5c4519; --header-from: #2b3168; --header-mid: #171b2e; --header-text: #ffffff; --today-wash: #272c4f; --surface-fade: rgba(26, 31, 43, 0); --color-dummy-text: #ffd98a; --color-dummy-bg: rgba(255, 183, 3, 0.16); --color-dummy-border: rgba(255, 183, 3, 0.4); /* Mid tones, chosen to glow against near-black rather than to carry white text on white — see the light set's own note. */ --type-recovery: #b0a396; --type-easy: #74b358; --type-longrun: #3aa98c; --type-tempo: #d9a53a; --type-interval: #d97a4f; --type-repetition: #d9455a; --type-rest: #8b93a3; --type-rest-strength: #9d84c9; --type-break: #6f97b8; /* A dark card's edge comes from its own surface tone against the page, so the shadow here is doing depth only and can be deeper and softer than the light one, with no hairline layer. */ --shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --chart-dim: 0.45; --chart-dim-hover: 0.68; /* Dark can't reuse --color-surface here: on the near-black --color-bg track it is only a few steps lighter, and the shadow that carries the lift in light does nothing against near-black. So the selected pill steps up past the border tone and takes a hairline of its own — the same "which half am I on" answer, given with value instead of shadow. */ /* One step brighter than the dark --color-primary so the filled pill still separates from the near-black track; the border adds the edge that the light theme gets from the page around it. */ --tab-active-bg: #5b5ef0; --tab-active-border: #8b8ef7; --tab-active-fg: #ffffff; --tab-track-bg: rgba(99, 102, 241, 0.16); --tab-track-border: rgba(139, 142, 247, 0.42); } * { box-sizing: border-box; } [hidden] { display: none !important; } /* ---------- Icons ---------- */ /* Every icon is a into the sprite at the top of index.html. Sized in em so it scales with whatever text it sits beside, and stroked in currentColor so it takes that text's exact color — the thing emoji could never do, since each renders in its own fixed vendor palette. */ .icon-sprite { display: none; } .icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Pseudo-element form, for the handful of places where the icon is a fixed property of a message class rather than part of specific markup (.sync-status, .ai-intro, ...). Those elements have their text written via textContent — some of it server- or AI-authored — so the icon can't be markup there without giving up that safety. A mask over background:currentColor keeps the same inherit-the-text-color behavior the icons have. */ .sync-status::before, .strava-fill-badge::before, .ai-intro::before, .ai-tips::before, .week-ai-note::before, .week-race-tips::before, .completed-badge::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: 0.42em; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Same geometry as the matching in index.html's sprite, inlined here because mask-image can't reference a sprite symbol. Keep the two in step if an icon is ever redrawn. */ .sync-status::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); } .sync-status.is-ai::before, .ai-intro::before, .ai-tips::before, .week-ai-note::before { -webkit-mask-image: var(--i-sparkle); mask-image: var(--i-sparkle); } .sync-status.is-error::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); } .strava-fill-badge::before { -webkit-mask-image: var(--i-chart); mask-image: var(--i-chart); } .week-race-tips::before { -webkit-mask-image: var(--i-flag); mask-image: var(--i-flag); } .completed-badge::before { -webkit-mask-image: var(--i-check-circle); mask-image: var(--i-check-circle); } body { margin: 0; font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Mobile polish: kill the grey flash Android paints over every tap target (the app draws its own :active states), and point the few remaining native controls — the date pickers, the select — at the brand color instead of the browser's default blue. */ -webkit-tap-highlight-color: transparent; accent-color: var(--color-primary); } /* Figures that sit in a column, or that change while the runner watches. Proportional digits are narrower on 1 than on 0, so a pace ticking from 5:19 to 5:20, or a stack of weekly totals, shifts sideways by a pixel or two on every redraw — small, but it reads as the layout being unsteady. Tabular digits are all one width, so the numbers stay put. Deliberately NOT set on body: tabular figures pad the 1 with air, which is right in a table and wrong in a sentence, and most of the running prose in this app (the AI notes, the field help) is sentences. So this is a list of the places that are actually numeric, rather than one blanket rule — it used to be nineteen declarations scattered down the file, which is how half the numeric elements came to be missed. */ .day-table td, .week-header .week-total, .week-progress, .week-header .week-phase, .summary-item .value, .recap-metric-value, .recap-metric-sub, .recap-range, .today-card-metric strong, .today-card-week, .today-card-next, .today-progress-label, .volume-chart-value, .volume-chart-week-no, .vt-axis-text, .pace-zone-table td, .pace-goal-item .value, .completed-badge, .completed-analysis .rep-splits, .completed-analysis .gap-note, .block-history-meta, .break-item-meta, .fitness-strip, .vdot-trend-tip-value, .vdot-trend-table-wrap td, .upcoming-meta, .legend-step, .gate-mock-km, .gate-zone-pace, .gate-preview-total, .gate-preview-km { font-variant-numeric: tabular-nums; } .container { max-width: 900px; margin: 0 auto; padding: 0 20px; } /* ---------- Header ---------- */ /* A soft halo behind the wordmark that resolves into the page background, rather than the old 135deg navy-to-near-black ramp — that one ended on a different color than --color-bg, so the header met the page at a visible seam right where the first card overlaps it. */ .site-header { /* Two layers, not one. The radial alone only reaches --color-bg at 100% of its radius, and the header's bottom edge sits at ~71% of it — so the element ended on a mid lavender and met the page background at a hard horizontal line, level with the action row under the title. The linear layer on top fades the whole width to exactly --color-bg by the bottom edge, so there is nothing left to see a seam against. */ background: linear-gradient(to bottom, transparent 45%, var(--color-bg) 100%), radial-gradient(120% 140% at 50% 0%, var(--header-from) 0%, var(--header-mid) 45%, var(--color-bg) 100%); color: var(--header-text); padding: 26px 0 38px; } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; text-align: center; } /* grid-row: 1 on both, not just a column each. .header-tools comes first in the DOM, so once it claimed column 3 the auto-placement cursor had passed column 2 and the brand — which only named a column — was pushed onto a row of its own, leaving the theme toggle floating a row above the wordmark. Naming the row puts them back on the same line, vertically centred. */ .brand { grid-column: 2; grid-row: 1; } .tagline, .sync-status { grid-column: 1 / -1; } /* Three columns rather than a centred brand with the tools absolutely positioned over it. Absolute positioning takes the tools out of flow, so nothing stopped them and the brand occupying the same pixels — and once the theme toggle joined the cluster they did: at 760px the brand overran the tools by 64px, stacking the MODE DUMMY badge, the toggle and the account name on top of each other. Grid columns cannot overlap, so this cannot come back at any width. The 1fr on either side is what keeps the brand optically centred. */ .header-tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 8px; } .auth-box { display: flex; align-items: center; gap: 10px; } /* A circular icon button, the shape every phone UI uses for a single header action. Translucent rather than a fixed color so it sits on the header's gradient in both themes without needing a variant of its own. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border: 1px solid color-mix(in srgb, var(--header-text) 18%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--header-text) 7%, transparent); color: var(--header-text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .theme-toggle .icon { width: 17px; height: 17px; vertical-align: 0; } .theme-toggle:hover { background: color-mix(in srgb, var(--header-text) 14%, transparent); border-color: color-mix(in srgb, var(--header-text) 32%, transparent); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .auth-box .btn-link { color: var(--header-text); opacity: 0.75; } .auth-box .btn-link:hover { opacity: 1; } .user-info { display: flex; align-items: center; gap: 10px; } /* Bounded and on one line: a Strava display name is whatever the runner set it to, and left free it wraps to two lines and grows the header for a label nobody reads twice. */ .user-email { font-size: var(--text-sm); opacity: 0.85; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sync-status { margin: 10px 0 0; font-size: var(--text-sm); font-style: italic; opacity: 0.75; } .sync-status.is-error { color: var(--color-error); opacity: 1; font-style: normal; } /* ---------- Header, per screen ---------- */ /* is set by setScreen() in js/app.js. The tagline and the header's generous top padding are first-impression furniture: they earn their space on the gate and the empty form, and stop earning it the moment the runner is looking at a plan they have already generated. On a 390x780 phone this header measured 212px, which — stacked on top of the 195px action row that used to sit under the result heading — was landing #todayCard, the one thing this page gets opened for on an ordinary morning, at y=715. Trimming here is worth more than anywhere else on the page because it is paid on every single visit. */ /* Everywhere except the gate, the header stops being a centred wordmark lockup and becomes an app bar: the mark stays as a mark, the screen names itself, and the account/theme controls sit at the far end. The centred-logo shape is a landing page's, and it was costing 19% of a 390x820 phone on every single visit to a plan the runner has already generated. The gate is the one screen where the wordmark IS the content, so it keeps the full lockup and the tagline. */ body:not([data-screen="gate"]) .site-header { padding: 14px 0 26px; } body:not([data-screen="gate"]) .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; } body:not([data-screen="gate"]) .brand { grid-column: 1; grid-row: 1; justify-self: start; } /* The MODE DUMMY badge goes too: sitting between the mark and the screen title it split the lockup and read as part of the title. The gate explains dummy mode at length, and the sync line under this header says "(mode dummy — lokal)" on every save. */ body:not([data-screen="gate"]) .brand-name, body:not([data-screen="gate"]) .dummy-badge, body:not([data-screen="gate"]) .tagline { display: none; } body:not([data-screen="gate"]) .header-tools { grid-column: 3; grid-row: 1; } /* The in-page heading would now say the same thing twice, three lines apart. The header carries it; the section drops it. */ body[data-screen="result"] .result-header h2, body[data-screen="form"] .form-card > h1 { display: none; } .header-title { grid-column: 2; justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--header-text); } /* The display name goes well before the phone breakpoint. Above 640px the brand is centred and .header-tools is absolutely positioned at the right edge, so the two can and did collide: at 760px the brand's right edge overran the tools' left edge by 64px, piling the MODE DUMMY badge, the theme toggle and the name on top of each other. 900px is where the container stops growing, and at that width the widest case (brand plus badge, tools plus name) fits with room to spare. Below it the name is the part worth losing — one account is signed in at a time, and "Logout" is the half that does any work. */ @media (max-width: 900px) { .user-email { display: none; } } @media (max-width: 640px) { /* Brand and account on one row, the way an app's own chrome is shaped — rather than the account line stacked above a centered wordmark, which is what `position: static` alone gave and which cost a whole extra row of header on the narrowest screens. The tagline keeps its own full width row underneath (on the screens that still show it). */ /* minmax(0, 1fr), not 1fr: a bare 1fr floors at the brand lockup's own min-content width, and with the MODE DUMMY badge in the row that came to 250px — which, next to the account column, pushed the whole grid 35px wider than the phone and gave the page a horizontal scrollbar. The brand wraps instead. */ .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; text-align: left; } .brand { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; flex-wrap: wrap; row-gap: 4px; } .header-tools { grid-column: 2; grid-row: 1; } /* The display name goes entirely. Truncated to fit beside the theme toggle it was down to "Demo Runn…", which identifies nothing, and the column it was taking left the brand lockup too narrow — logo, wordmark and badge each wrapped onto a line of their own, 112px of header for a name nobody reads twice. This app has one account signed in at a time; "Logout" is the part that does any work. */ .user-info { flex-wrap: nowrap; } .auth-box .btn-link { white-space: nowrap; } } /* A lockup — mark beside wordmark — rather than the mark stacked above it. The stack is a landing-page shape; a row reads as an app's identity and gives back ~60px of vertical space at the top of every single visit, which on a phone was 336px of chrome before any content. */ .brand { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; } .brand-logo { width: 34px; height: 34px; } .brand-name { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); } .dummy-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--color-dummy-text); background: var(--color-dummy-bg); border: 1px solid var(--color-dummy-border); border-radius: 999px; padding: 4px 10px; } /* Subordinate to the wordmark now, instead of competing with it: same display face at bold 1.05rem meant two headline-weight lines stacked on top of each other with no hierarchy between them. */ .tagline { margin: 8px 0 0; font-size: var(--text-base); font-weight: 500; letter-spacing: var(--tracking-normal); opacity: 0.6; } /* 24px, not 60: the last card already carries 24px of its own margin below it and the footer another 24 above, so a 60px band here put 118px of empty page between the end of the plan and "Made with ❤️" — enough that the footer read as unmoored from the content rather than as the end of it. */ main.container { margin-top: -28px; padding-bottom: 24px; } /* ---------- Card ---------- */ .card { /* No hairline border — the surface tone against --color-bg plus the shadow below is enough of an elevation cue on its own, and dropping the outline reads as a calmer, less "boxed-in" surface. */ background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 32px; margin-bottom: 24px; } .card h1 { margin-top: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); } .section-desc { color: var(--color-text-muted); margin-top: -6px; line-height: var(--leading-relaxed); } /* ---------- Loading screen (between form submit and result render) ---------- */ .loading-card { text-align: center; padding: 56px 28px; } .loading-card h1 { margin-top: 0; font-size: var(--text-lg); } .loading-card .section-desc { max-width: 420px; margin-left: auto; margin-right: auto; } /* Shimmering placeholders shaped like the summary-cards row + a week block that are about to render — gives the wait something concrete to look at instead of a content-free spinner, and roughly previews the shape of what's coming. */ .loading-skeleton { max-width: 480px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 10px; text-align: left; } .skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .skeleton-block, .skeleton-bar { border-radius: var(--radius-item); background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface) 37%, var(--color-border) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite; } .skeleton-block { height: 52px; } .skeleton-bar { display: block; height: 14px; width: 100%; } .skeleton-bar-title { width: 55%; height: 18px; margin-top: 6px; } .skeleton-bar-short { width: 40%; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skeleton-block, .skeleton-bar { animation-duration: 3.2s; } } /* ---------- Disclosure reveal ---------- */ /* Every

in the app (week accordions, plan warnings, field help) snapped its content into place with no transition at all, which on the week blocks meant a whole table appearing between two frames. Only the opening is animated: a closing

removes its content from the box tree immediately, so there is nothing left to animate out without reaching for height interpolation this doesn't need. */ @keyframes details-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .week-block[open] > *:not(summary), .result-warning[open] > *:not(summary), .field-help[open] > *:not(summary) { animation: details-reveal 0.18s ease-out; } @media (prefers-reduced-motion: reduce) { .week-block[open] > *:not(summary), .result-warning[open] > *:not(summary), .field-help[open] > *:not(summary) { animation: none; } } /* SATU chevron untuk semua disclosure di app ini. Bentuk yang sama tadinya digambar ulang di lima tempat dengan lima ukuran (0.48em, 0.5em, 0.55em, 8px, dan sebuah glyph teks), sumber warna berbeda, dan translate() penengah yang berbeda-beda — jadi header step, peringatan plan, bantuan field, tabel zona pace, dan akordeon minggu masing-masing punya panah sendiri yang mirip tapi tidak pernah sama. Sekarang bentuk, ukuran, tebal garis, dan transisinya ditulis sekali di sini; tiap pemakainya cuma menentukan warna, posisi, dan arah bukanya. Bentuknya pojok kotak (border kanan + bawah) yang diputar, bukan glyph teks: '▾' yang dipakai akordeon minggu tebal dan tingginya berbeda-beda per platform, dan tidak pernah cocok dengan empat chevron CSS di sebelahnya. Arah dasar = menunjuk ke BAWAH, yaitu keadaan tertutup untuk semuanya kecuali header step (lihat .legend-chevron). */ .legend-chevron, .week-toggle-icon, .result-warning-summary::after, .field-help > summary::after, .pace-zone-details > summary::after { flex: none; width: 8px; height: 8px; /* Glyph '▾' di .week-toggle-icon dibuang lewat CSS supaya markup di js/app.js tidak perlu tahu soal ini; font-size: 0 menyembunyikannya tanpa menghapus elemennya. */ font-size: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; } /* Terbuka = menunjuk ke atas, satu putaran yang sama di mana pun. */ .week-block[open] > summary .week-toggle-icon, .result-warning[open] .result-warning-summary::after, .field-help[open] > summary::after, .pace-zone-details[open] > summary::after { transform: rotate(-135deg); } /* ---------- Login gate ---------- */ .gate-card { text-align: center; padding: 36px 24px; } /* The gate is the first screen, but its heading was running at the full page-heading size above an equally large CTA. One notch down keeps the hierarchy and takes the bulk out. */ .gate-card h1 { margin-top: 0; font-size: var(--text-lg); } .gate-card .section-desc { max-width: 440px; margin-left: auto; margin-right: auto; font-size: var(--text-sm); } .gate-actions { max-width: 320px; margin: 20px auto 0; } .dummy-note { max-width: 480px; margin: 16px auto 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); } /* A scaled-down, made-up week block — the same header/row/badge shapes the real schedule uses (see .week-header and .type-badge below), so this screen shows what login gets you rather than only describing it in two paragraphs. Deliberately quiet: it sits behind the button in the visual order, and the caption underneath says the numbers are invented. */ /* ---------- Login gate preview carousel ---------- */ /* The frame the slides scroll inside. Sized once here so every slide is exactly one viewport wide and the whole thing never grows past the caption underneath it. */ .gate-carousel { max-width: 340px; margin: 28px auto 0; text-align: left; } /* The scroll container itself. scroll-snap does the paging, which means swipe on a phone, two-finger scroll on a trackpad and arrow keys in the focused track all work with no JS at all — js/app.js only adds the auto-advance and the dots. */ .gate-carousel-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--radius-sm); } .gate-carousel-track::-webkit-scrollbar { display: none; } .gate-carousel-track:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* flex: 0 0 100% makes each slide exactly one frame wide; the default stretch alignment makes every slide as tall as the tallest one, so the carousel has a stable height without any measuring. */ .gate-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; gap: 6px; /* The track is an overflow-x scroll container, so it clips at its content edge, and this slide's own text used to start flush against that edge — the first glyph of each label lost about a pixel of ink off its left side, enough that the S of "SESI HARI INI" read as a 3. The inset goes here rather than on the track: padding on the scroll container itself narrows the slides (they are flex-basis 100% of its content box), which lets the next slide peek in at the right edge. Inside the slide, the slide stays a full viewport wide. */ padding-inline: 2px; } .gate-slide-label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } /* The card each slide draws inside. flex:1 so short slides fill the height the tallest one sets, rather than floating in it. */ .gate-mock { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); } /* The week slide draws its own internal rules, so it keeps the padding on its parts instead of the box. */ .gate-mock-week { padding: 0; gap: 0; overflow: hidden; } .gate-mock-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary-dark); } .gate-mock-title { margin: 0; font-size: var(--text-base); font-weight: 800; letter-spacing: var(--tracking-normal); } .gate-mock-line { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); } .gate-mock-muted { color: var(--color-text-muted); } .gate-mock-caption { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); } /* Same segmented shape as .workout-structure in the real plan — which means the pill and the clip live on the bar, exactly as .structure-bar does it, rather than a 3px radius on each segment. That is what "same shape" was already claiming. */ .gate-mock-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; } .gate-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 74px; } .gate-chart-bars > span { flex: 1; border-radius: 3px 3px 1px 1px; } .gate-mock-zones { gap: 0; } .gate-zone-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--text-sm); } .gate-zone-row + .gate-mock-caption { margin-top: 6px; } .gate-zone-pace { margin-left: auto; font-weight: 700; } /* The .zone-dot rule further down is scoped to .pace-zone-table, so these need their own — same shape, one size smaller. */ .gate-zone-row .zone-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .gate-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } /* A tap target bigger than the dot it draws — the dot itself is 7px, which is nowhere near thumb-sized, so the button is padded out to 22px and paints the dot with a pseudo-element inside it. */ .gate-carousel-dot { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .gate-carousel-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: background 0.2s ease, width 0.2s ease; } .gate-carousel-dot:hover::before { background: var(--color-text-muted); } .gate-carousel-dot[aria-selected="true"]::before { width: 18px; /* The dot is 7px tall and grows sideways into a bar, so this is the same pill its 50% circle already was — 4px only looked like a third shape between them. */ border-radius: 999px; background: var(--color-primary); } .gate-carousel-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; border-radius: var(--radius-chrome); } .gate-preview-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); } .gate-preview-week { font-weight: 800; } .gate-preview-phase { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); /* --color-accent is the Build phase color in PHASE_COLORS (js/app.js), matching the "BUILD" this sample week is labelled with. */ color: var(--color-accent); } .gate-preview-total { margin-left: auto; font-weight: 700; color: var(--color-primary-dark); } .gate-preview-rows { padding: 4px 0; } .gate-preview-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: var(--text-sm); } .gate-preview-day { width: 26px; color: var(--color-text-muted); } .gate-preview-km { margin-left: auto; font-weight: 600; } .gate-preview-caption { max-width: 340px; margin: 8px auto 0; font-size: var(--text-sm); color: var(--color-text-muted); } /* ---------- Login gate: exactly one screen, no page scroll ---------- */ /* The gate has one job — explain the app and offer the Strava button — and a visitor should be able to do that job without moving anything. Both on a phone and on a desktop the screen was taller than the viewport, so the button and the preview carousel could sit below the fold on the very first thing anyone sees. Instead of trimming content, the gate is laid out as a fixed-height column: header and footer keep their natural height, the card takes whatever is left, and the carousel — the one part with no fixed size — absorbs the difference. Only applies while data-screen is "gate" (see setScreen in js/app.js); every other screen scrolls normally. */ body[data-screen="gate"] { /* dvh, not vh: on mobile browsers vh counts the URL bar's hidden state, which would put the footer under it in exactly the case this rule exists to fix. */ height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body[data-screen="gate"] .site-header { flex: none; padding: 22px 0 30px; } body[data-screen="gate"] main.container { flex: 1 1 auto; /* Both minimums matter: without min-height the card can't shrink inside the column, and without min-width/width the container — now a flex item — refuses to go below its content's min-content width, which pushed the card 60px wider than a 320px phone. */ min-height: 0; min-width: 0; width: 100%; box-sizing: border-box; display: flex; /* The -28px pull that lets a card overlap the header everywhere else has to go here: the card is vertically centred in the remaining space, so the pull just slides it up into the tagline — on a 650px window the two touched. */ margin-top: 0; padding-bottom: 0; } body[data-screen="gate"] .gate-card { min-width: 0; } /* The card wraps its content and is centred in what's left of the window, rather than being stretched to fill it — a full-height white box with the content floating in the middle of it is the untidy version of the same centring. */ body[data-screen="gate"] main.container { align-items: center; } body[data-screen="gate"] .gate-card { flex: 0 1 auto; max-height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; /* The last resort, not the layout: everything below is sized so the card fits, but a very short window (or a very large text-size setting, or the dummy-mode note) must not clip the button. Then, and only then, the card's own contents scroll — the page still doesn't. */ overflow: auto; } /* No stretching inside the card. Both blocks keep their natural height and the card centres the stack as a whole, so the leftover space shows up as equal margins top and bottom instead of a gap opening up in the middle of the content. */ body[data-screen="gate"] .gate-preview { /* Nothing in the card shrinks: a squeezed mock clipped its own last line mid-glyph, and a squeezed preview let the carousel overlap the caption under it. The blocks keep their height and the card's own overflow (above) is what gives on a window too short for them — the page still never scrolls. */ flex: 0 0 auto; display: flex; flex-direction: column; } body[data-screen="gate"] .gate-carousel { flex: 0 0 auto; /* min-width: auto on a flex item floors at the track's min-content width, which is a whole slide — so the 340px cap became a 340px floor and the carousel hung 40px past the card's right edge on a 375px phone. */ min-width: 0; width: 100%; display: flex; flex-direction: column; margin-top: 22px; } /* Capped, or on a tall phone the four mock cards stretch into half a screen of empty space around three lines of text. */ /* min-height as well as max: squeezed below this the mock card clips its own last line mid-glyph, which looks broken. At that point the card's own overflow (above) takes over instead — the page still never scrolls, and nothing is cut in half. */ body[data-screen="gate"] .gate-carousel-track { flex: 0 0 auto; min-width: 0; max-height: 260px; } body[data-screen="gate"] .gate-carousel-dots { flex: none; } /* The bar chart is the only mock with a hard height; let it give some of it back when the viewport is short rather than forcing the card taller. */ body[data-screen="gate"] .gate-chart-bars { height: auto; flex: 1 1 auto; min-height: 46px; } body[data-screen="gate"] .site-footer { flex: none; padding: 14px 0 18px; } /* Short windows (landscape phones, small laptops): take the remaining slack out of the chrome before anything starts scrolling. */ @media (max-height: 760px) { body[data-screen="gate"] .site-header { padding: 10px 0 12px; } body[data-screen="gate"] .tagline { margin-top: 4px; font-size: var(--text-sm); } body[data-screen="gate"] .gate-card { padding: 16px 18px 18px; } body[data-screen="gate"] .gate-card h1 { font-size: var(--text-md); } body[data-screen="gate"] .gate-actions { margin-top: 14px; } body[data-screen="gate"] .gate-carousel { margin-top: 12px; } body[data-screen="gate"] .gate-carousel-dots { margin-top: 6px; } /* The mock is the tallest single thing on the screen, so it is where the last few tens of pixels come from before anything has to scroll. */ body[data-screen="gate"] .gate-mock { padding: 10px 12px; gap: 6px; } body[data-screen="gate"] .gate-preview-caption { margin-top: 6px; font-size: var(--text-xs); } body[data-screen="gate"] .site-footer { padding: 10px 0 12px; } } /* Desktop keeps the same single centred column the phone gets — the two are the same screen at two sizes, and the column is what this gate is. All the desktop needs is for the whole of it, footer included, to fit without scrolling, so the card is capped at a comfortable measure and the parts that can give height back do. */ @media (min-width: 760px) { body[data-screen="gate"] .gate-card { /* Narrower than the 900px container: a login card stretched to the full width of a desktop window is a banner, not a card. */ max-width: 560px; width: 100%; margin-inline: auto; padding: 30px 32px 32px; } } /* ---------- Form ---------- */ /* Tiap step adalah sebuah KARTU, bukan blok teks yang dipisah garis tipis. Sebelumnya baris-baris step melayang di atas permukaan kartu yang sama dengan isinya, jadi tidak ada apa pun yang bilang "baris ini sebuah objek yang bisa ditekan" — terbaca sebagai daftar teks, bukan kontrol. Punggungnya --color-bg: konvensi panel inset di file ini (lihat catatan token di paling atas), yang otomatis benar di kedua tema. */ fieldset { /* Bawaan

adalah `min-inline-size: min-content`, yang membuat kartunya melar melebihi layar begitu ada ringkasan satu baris panjang ("3 hari/minggu · Sel, Rab, Sab · long run Selasa") di dalamnya — di layar 390px kartunya jadi 401px. */ min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); /* 14px, sama dengan jarak di ATAS baris pertama (margin bawah ), supaya isi kartu duduk simetris. Pasangannya aturan :last-child di bawah: tanpa itu margin bawah field terakhir menumpuk di atas padding ini dan tiap section terbuka menyisakan ~31px kosong di bawah lawan 14px di atas — bagian paling terlihat "tidak rapi" di form ini. */ padding: 0 14px 12px; margin: 0 0 10px; transition: border-color 0.15s ease; } /* Jarak antar-baris di dalam section datang dari margin bawah .field (dan gap .field-row untuk baris yang wrap); di baris terakhir tidak ada lagi yang perlu dijarakkan, jadi yang tersisa cuma ruang kosong. */ fieldset > *:not(legend):last-child, fieldset > *:not(legend):last-child > .field, fieldset > .field:last-child { margin-bottom: 0; } /* Menutup float legend (lihat catatan di aturan `legend` di bawah). Isi section-nya juga di-clear: header-nya sengaja lebih lebar dari kotak isi (full-bleed), dan tanpa clear, blok pertama sesudahnya digeser ke samping float itu — keluar dari kartu. */ fieldset::after { content: ""; display: table; clear: both; } fieldset > *:not(legend) { clear: both; } /* --color-text-muted directly: this used to name a --color-border-strong that is defined in neither theme, so the fallback was the only branch that ever ran. */ fieldset:hover { border-color: var(--color-text-muted); } /* Terlipat = tinggal headernya, jadi padding bawahnya ikut hilang; kalau tidak, tiap baris ringkasan menyisakan 16px kosong di bawahnya. */ fieldset.is-collapsed { padding-bottom: 0; } /* Section yang sedang terbuka adalah satu-satunya yang terbuka (lihat openOnly di js/app.js), jadi dia boleh menonjol: permukaan kartu penuh dan border indigo tipis, supaya jelas di mana kamu sekarang. */ fieldset:not(.is-collapsed) { background: var(--color-surface); border-color: var(--color-primary); /* The app's one elevation token rather than a hand-mixed near-black shadow, which had no dark-theme counterpart and so simply vanished on the dark surface this sits on. */ box-shadow: var(--shadow); } /* A section header, built by renumberFieldsets in js/app.js as a numbered step rather than the small uppercase "1. DETAIL RACE" line it was. The form runs ~1750px; a bare number promised nothing about how much was left, so the scroll read as open-ended. Number in a circle, title at readable size, and how far through you are spelled out beside it. */ /* Header menjangkau selebar kartu (padding kartu ditarik balik lewat margin negatif) supaya area tekannya benar-benar seluruh baris. `float: left` bukan gaya, melainkan syarat: sebuah secara default digambar MENIMPA garis atas fieldset-nya, jadi begitu fieldset punya border + latar kartu, judulnya melayang di luar kotak. Di-float, legend berperilaku sebagai blok biasa di dalam kartu — karenanya clearfix di fieldset di atas. */ legend { float: left; width: calc(100% + 28px); padding: 0; margin: 0 -14px 12px; } /* The header is one full-width button: the whole row folds the section, with the chevron as its affordance. Same interaction the week accordions, the plan warnings and the field help already use, so there is nothing new here to learn. */ .legend-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; margin: 0; border: none; border-radius: var(--radius-sm); background: none; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease; } .legend-toggle:hover { background: var(--color-primary-light); } /* Judul dan ringkasannya satu kolom, bukan dua ujung baris yang berjauhan: di layar lebar keduanya dulu terpisah ~500px ruang kosong, jadi tidak terbaca sebagai satu hal. Ini juga menyamakan desktop dengan bentuk yang sudah dipakai di mobile. */ .legend-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .legend-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; } .legend-chevron { margin-left: 4px; color: var(--color-text-muted); } /* Terlipat = menunjuk ke kanan ("buka aku"), terbuka = menunjuk ke bawah (nilai dasar .chevron). Ini satu-satunya chevron di app yang punya keadaan "kanan"; sisanya bawah/atas. */ fieldset.is-collapsed .legend-chevron { transform: rotate(-45deg); } /* Everything except the header goes; no wrapper element needed around the fields, which keeps index.html's markup exactly as it was. The class is doubled to raise specificity: .field-row's own display is set by `.field-row:not(:has(.field-small))` in the subgrid block above, which carries two classes and would otherwise win and leave a folded section's rows still on screen. Same trick as .type-badge.type-badge-quiet further down, and preferred to !important for the same reason. */ fieldset.is-collapsed.is-collapsed > *:not(legend) { display: none; } fieldset.is-collapsed > legend { margin-bottom: 0; } /* Ringkasan hanya muncul saat terlipat: section yang sedang terbuka sudah menunjukkan field-nya sendiri, jadi mengulangnya di header cuma bising. */ .legend-summary { display: none; } fieldset.is-collapsed .legend-summary { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); } /* A section with nothing in it yet says so, rather than folding away to a blank line that reads as broken. Italic so "Belum diisi" is visibly a state and not a value someone typed. */ .legend-summary.is-empty { font-style: italic; opacity: 0.75; } /* Section yang memang tidak wajib: chip netral kecil, bukan "Belum diisi" miring yang terbaca seperti ada yang kurang. */ fieldset.is-collapsed .legend-summary.is-optional { align-self: flex-start; padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-normal); font-style: normal; opacity: 1; } .legend-step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; /* Belum selesai = lingkaran netral bernomor; selesai = lingkaran hijau bercentang (.is-done di bawah). Satu bentuk di satu posisi yang berganti isi — sebelumnya nomor indigo dan centang hijau terbaca sebagai dua jenis benda yang berbeda di dalam satu daftar. */ background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 800; transition: background 0.15s ease, color 0.15s ease; } /* Filled in once every required field in the section has a value — see updateFieldsetProgress, which is deliberately careful about what it claims. The number is replaced by a tick rather than sitting beside one, so the circle stays the same size either way and the row of headers doesn't shift as you fill the form in. */ fieldset:not(.is-collapsed) .legend-step { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .legend-step.is-done, fieldset:not(.is-collapsed) .legend-step.is-done { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-size: 0; } .legend-step.is-done::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--i-check) no-repeat center / contain; mask: var(--i-check) no-repeat center / contain; } .legend-title { font-size: var(--text-base); font-weight: 800; letter-spacing: var(--tracking-normal); color: var(--color-text); } /* Pushed to the far end and quiet — it is a position report, not part of the heading. Hidden on a phone, where the row has no width to spare and the numbered circle already carries the sequence. */ /* Kemajuan seluruh form, sekali di atas daftar step — menggantikan "Langkah x dari y" yang dulu diulang di setiap baris. Penyebutnya hanya section yang bisa benar/salah, jadi mode yang menyembunyikan section (First-timer) otomatis punya total yang lebih kecil. */ .form-progress { margin: 0 0 14px; } .form-progress-track { height: 5px; border-radius: 999px; background: var(--color-bg); overflow: hidden; } .form-progress-track > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-primary); transition: width 0.25s ease, background-color 0.25s ease; } .form-progress-text { margin: 8px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); } .form-progress-text.is-complete { color: var(--color-accent); } .form-progress-text.is-complete ~ * { color: inherit; } .form-progress:has(.is-complete) .form-progress-track > span { background: var(--color-accent); } .field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } .field { margin-bottom: 12px; display: flex; flex-direction: column; } /* The 220px and 90px are WIDTHS — how much of a multi-column .field-row each field asks for — so they have to be scoped to that row. Left unscoped they also applied inside the column-direction panels (.breaks-form and friends), where flex-basis means HEIGHT: every field in "Ubah hari latihan" was being inflated to a 220px-tall box holding about 85px of label and chips, which is where the huge empty gaps between those fields came from. */ .field-row .field { flex: 1 1 220px; } .field-row .field-small { flex: 0 1 90px; } /* A label is the question; the value in the box below it is the answer, and the answer is what a runner scans for when checking their numbers over. Both used to be 600 weight in full --color-text, so every row carried the same weight and there was nothing to sweep your eye down. Deliberately NOT --color-text-muted, though: these labels are whole Indonesian sentences ("Rata-rata jarak lari per minggu saat ini"), not one-word field names, so they genuinely have to be read at least once. 82% of the text color steps back without going quiet. */ label { display: block; font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--tracking-normal); color: color-mix(in srgb, var(--color-text) 82%, transparent); margin-bottom: 6px; } /* Keeping the controls in a multi-column row lined up used to be done by reserving two lines of height on EVERY label (min-height: 3.1em), so a one-line label wouldn't leave its input sitting higher than one next to a wrapped label. It worked, but it charged every field ~21px of empty space for a wrap that, measured across 620–1040px, never actually happens: every label in this form renders on one line, and the one row where they do wrap wraps both of them together. Subgrid does the same job for nothing: the label / control / hint rows belong to the ROW, not to each field, so the controls line up whatever the labels above them do, and a one-line label takes one line. Rows containing .field-small are left on the flex fallback — those are the hour/minute/second triplets, whose labels are single words that cannot wrap, and whose columns are deliberately unequal widths. */ @supports (grid-template-rows: subgrid) { .field-row:not(:has(.field-small)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-rows: auto auto auto; align-items: start; column-gap: 16px; /* Explicitly zero, because the rows here are label / control / hint — parts of one field, not separate fields. Inheriting the flex fallback's 16px gap put that much air between every label and its own input. Spacing between fields comes from .field's own margin and the label's, as it does everywhere else. */ row-gap: 0; } .field-row:not(:has(.field-small)) > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; } } input[type="text"], input[type="number"], input[type="date"], select, textarea { width: 100%; /* ~45px tall. Still a comfortable phone target, one notch down from the 51px this used to run at — at that height the form scrolled far longer than it had content for. */ padding: 11px 14px; /* The border is transparent, not absent: .has-error and :focus below both paint it, and a border that appears from nowhere would shift the control by a pixel as it did. At rest the fill alone marks the field out — it used to also carry a --color-border hairline, which against a --color-bg fill is very nearly the same value in both themes, so it drew a slab with a faint dirty edge rather than a clean inset. */ border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--text-base); font-family: inherit; /* The other half of the hierarchy the label rule above sets up: the value a runner typed is the thing worth scanning, so it is the heavier of the two. */ font-weight: 600; background: var(--color-bg); color: var(--color-text); } textarea { resize: vertical; min-height: 60px; } /* iOS Safari shrink-wraps a date input to whatever its own value renders as ("26 Oct 2026") and ignores the width:100% above, so on a phone these came out as stubby boxes underneath full-width selects — the one place on the form where two controls in the same column had visibly different widths. Dropping the native appearance makes them honor that width like every other field; the min-height then restores the row height the padding gives a text input, which the stripped-down control no longer works out on its own. */ input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 51px; } /* Normal weight, unlike the control's own 600: a placeholder is an example of what to type, not something the runner has typed. */ input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; font-weight: 400; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } /* Custom checkbox & radio (replaces native browser controls) */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; margin: 0; border: 1.5px solid var(--color-border); background: var(--color-bg); display: inline-grid; place-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; } input[type="checkbox"] { border-radius: var(--radius-chrome); } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]::before, input[type="radio"]::before { content: ""; background: #fff; transform: scale(0); transition: transform 0.12s ease-in-out; } input[type="checkbox"]::before { width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%); } input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--color-primary); border-color: var(--color-primary); } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Chip toggles (mode/day) carry their own checked styling on the pill — the underlying input stays functional but visually hidden. */ .mode-chip input, .day-chip input { position: absolute; width: 1px; height: 1px; /* Off the spacing grid on purpose, and not a spacing value at all: this is the visually-hidden idiom, where the negative margin cancels the 1px box directly above it. It moves with that box, not with the grid. */ margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mode-chip:has(input:focus-visible), .day-chip:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; } .field-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 4px 0 0; } /* ---------- Foldable field help ---------- */ /* The three longest .field-hint paragraphs on this form ran to three or four lines each and were re-read on every visit by everyone, including the runner who already knows perfectly well why their weekly mileage is being asked for. Nothing is removed — the same words are one tap away, and the summary line says what is behind it. Short hints stay inline: the point is to fold away the paragraphs, not to hide the labels. */ .field-help { margin: 6px 0 14px; font-size: var(--text-sm); } .field-help > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--color-text-muted); width: fit-content; padding: 2px 0; } .field-help > summary::-webkit-details-marker { display: none; } .field-help > summary:hover { color: var(--color-text); } /* Bentuk & rotasinya ikut blok chevron bersama (lihat "Disclosure reveal"); yang khas di sini cuma redupnya. */ .field-help > summary::after { content: ""; opacity: 0.7; } .field-help > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-chrome); } .field-help p { margin: 6px 0 0; color: var(--color-text-muted); line-height: var(--leading-relaxed); } .strava-fill-badge { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); background: var(--color-accent-light); border: 1px solid var(--color-accent); border-radius: var(--radius-item); padding: 6px 10px; margin: 8px 0 0; } .checkbox-field { margin-bottom: 10px; } .checkbox-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .checkbox-option input { margin-top: 2px; flex-shrink: 0; } .checkbox-option-title { display: block; font-weight: 600; } .checkbox-option-desc { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; } .mode-toggle { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } /* That margin is for a hint or another control following the chips — when the chips are the last thing in their field it is just trailing space, doubled up with the field's own spacing underneath. */ .field > .mode-toggle:last-child { margin-bottom: 0; } .mode-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: var(--text-sm); cursor: pointer; margin: 0; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .mode-chip input { width: auto; margin: 0; } .mode-chip:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* A locked chip group — today only #daysPerWeekToggle, pinned to 3 days for the First-timer program (see updateGoalTypeUI in js/app.js). The inputs are genuinely disabled; this is what stops the chips still looking tappable, since .mode-chip carries all its own styling and knows nothing about the input's state otherwise. */ .mode-toggle.is-disabled { opacity: 0.55; } .mode-toggle.is-disabled .mode-chip { cursor: not-allowed; } .day-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; } .day-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: var(--text-sm); cursor: pointer; margin: 0; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .day-chip input { width: auto; margin: 0; } .day-chip:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .form-error, .form-warning { border-radius: var(--radius-item); padding: 12px 14px; font-size: var(--text-base); margin: 14px 0; } .form-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-border); } /* Marks the one input a form error is actually about (see showError in js/app.js, which also scrolls to and focuses it) — the message itself is pinned below the whole form, too far from the box in question to point at it on its own. Also applied to the day-chip group, which is a container rather than a single input: the outline is the point there, the focus() is a no-op. */ /* A box-shadow ring rather than an outline, so the same rule works on a bordered and on an un-bordered container div (the day-chip group) alike. The :focus variant has to be spelled out because showError focuses the field it marks, and `input:focus` above — which kills the outline and paints its own primary-colored ring — outranks a bare class on specificity, so without it every error ring would render as the ordinary blue focus ring. */ .has-error { border-color: var(--color-error); box-shadow: 0 0 0 2px var(--color-error); border-radius: var(--radius-control); } input.has-error:focus, select.has-error:focus, textarea.has-error:focus { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error); } .form-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); } /* inline-flex, not inline-block: every button label is now icon + text, and baseline-aligning an SVG next to text is guesswork where centering two flex children is not. */ /* ---------- Buttons ---------- */ /* SHAPE RULE, for everything in this file that can be pressed: - a pill (999px) if it carries a text label — every .btn at every size, the mode/day chips, the swap-mode toggle; - a circle if it is an icon on its own — .theme-toggle, .swap-day-btn; - a rounded rectangle ONLY for things that are not buttons — inputs, cards, panels, the rows inside a dropdown menu. Before this, .btn was 8px but .btn-large was 999px, so two buttons with the identical role came out different shapes purely because of their size — and the pill was simultaneously meaning "marquee CTA" and "pick one of these" on the chips. Shape said nothing you could rely on. It does now. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 12px 20px; font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-normal); cursor: pointer; font-family: inherit; transition: transform 0.1s, filter 0.15s, background 0.15s, border-color 0.15s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { filter: brightness(1.06); } /* Strava's orange (#FC4C02), deliberately outside this file's palette and its token system — it is Strava's brand color, not one of ours, and their guidelines for API apps ask that the "Connect with Strava" button be recognisably theirs rather than restyled into the host app's look. Same reason its label stays in English while everything around it is Indonesian. Used for that one button and nothing else. */ .btn-strava { background: #fc4c02; color: #fff; } .btn-strava:hover { filter: brightness(1.08); } .btn-strava .icon { width: 1.15em; height: 1.15em; } /* The two marquee calls-to-action (Strava login, generate plan). What marks them out is full width, a solid fill and the extra size — the radius no longer does any of that work, since every button is a pill now (see the shape rule above); it is repeated here only so this rule still stands on its own if .btn's own radius ever changes. */ .btn-large { width: 100%; padding: 13px 18px; font-size: var(--text-base); margin-top: 10px; border-radius: 999px; } /* Neutral, not accent-colored: this is a plain secondary action (export a PDF, open the adjust-schedule panel), not something the app filled in automatically — see the --color-accent comment in :root. Sits one step up from .btn-ghost (a visible fill instead of just an outline) without borrowing a color that's supposed to mean something else. */ .btn-secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); } .btn-secondary:hover { border-color: var(--color-primary-dark); } /* A toggle that opens a panel stays lit while that panel is open. Without it the only sign that "Lagi nggak fit?" is the thing you just opened is the panel itself, further down the page — on a phone the button can be scrolled out of view entirely, and coming back to it, it looks untouched. Keyed off aria-expanded so the visual state and the state screen readers are told can't drift apart. */ .btn-secondary[aria-expanded="true"] { background: var(--color-primary); border-color: var(--color-primary-dark); color: #fff; } .btn-secondary[aria-expanded="true"]:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-ghost { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } .btn-ghost:hover { border-color: var(--color-text-muted); color: var(--color-text); } .btn-small { padding: 8px 14px; font-size: var(--text-sm); } .btn:disabled { opacity: 0.6; cursor: wait; } /* ---------- Overflow menu (result actions) ---------- */ /* See .result-actions in index.html. Plain absolute positioning rather than a