:root { /* Cream, 20 Aug 2026. BenchBear was dark from the first build until Del picked a light ground off a contact sheet of fourteen. Warm sand rather than white: the identity colours are the same four ideas as before, darkened enough to letter with on paper. --muted is still the dimmer of the two greys, which on a light ground means the LIGHTER one — don't "fix" that back. */ /* ── THE PROOF THIS FILE ARRIVED (28 Aug 2026) ───────────────────────────────────────── index.html reads this one property back on load. If it is empty the stylesheet did not apply — a 404 during a GitHub Pages tree swap, most likely — and the shell re-requests the file rather than leaving Del looking at a column of unstyled text. Do not remove it, and do not move it out of :root. */ --dlog-css: 1; --bg: #f4efe6; --bg2: #fdfaf4; --bg3: #fdfaf4; --border: #e2d9c9; --border2: #d2c6b1; --text: #231f1a; --muted: #8d8272; --muted2: #6a6053; --accent: #b45527; --green: #4f7a3f; --blue: #3a6b96; --amber: #9a6a17; --red: #a63f30; /* Identity-only colours, added 17 Aug 2026 for the session/programme tiles. Deliberately NOT reused for state anywhere — see the tile block below for why the split matters. */ --violet: #71519b; --teal: #2c7a6b; /* The workout tile's own fill, 29 Sept 2026: cut B off the tint sheet, plus a line (see .exercise-block). It was --bg3, two steps off the ground, and the tile edge barely read. Its own token so the 17 other --bg3 users stay as they are. */ --tile: #ffffff; } /* ─── ONE COLOUR, ONE JOB (20 Aug 2026) ─────────────────────────────────────── --amber used to carry seven unrelated jobs, so a coloured number in BenchBear predicted nothing and every one of them had to be decoded. The split, scheme B off the contact sheet: --amber IDENTITY ONLY — the Upper session tile, the History workout rail and title. It sits beside violet / teal / blue and means "this is a thing of that kind". It never states a value again. --red ATTENTION — weight or waist up against last week, a macro missed, a backup overdue. One colour, one meaning: this went the wrong way. --green done / on target. Unchanged. --accent you can tap this. Unchanged. --muted no verdict. A state that is neither good nor bad takes no colour — see .gv-soft below, which is the whole reason the rule needs saying. Before adding a colour user anywhere, check what that token already means: grep -c -- "var(--X)" css/style.css */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; } /* `overflow: hidden` only. `touch-action: none` used to sit here too, and on an iOS PWA that is a root-level suppression of default touch behaviour for every descendant — including the two inputs you have to use to get in. Paired with the scroll handler below (which snapped the page back to 0 whenever iOS scrolled the focused field up above the keyboard) it made the login screen genuinely hard to operate on a phone, which is what "I can't log in without swiping the app off" was. Nothing is lost by dropping it: #login-screen is `position: fixed; inset: 0` over an opaque background, so there is no page behind it to scroll or rubber-band into view. */ html.login-active { overflow: hidden; } /* overflow-y:auto and `margin: auto` on the card, together, since 24 Aug: the reset panel is a code box plus two password boxes plus a heading, and on a small phone with the keyboard up it is taller than what is left of the screen. A centred flex item that overflows gets clipped at the TOP — the half you need — and `align-items: center` alone cannot scroll to it. `margin: auto` centres it while it fits and lets it scroll once it doesn't. html.login-active still has overflow:hidden, so this is the only thing on the screen that scrolls. */ #login-screen { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); overflow-y: auto; } .login-card { width: 100%; max-width: 380px; margin: auto; } .login-mark { display: block; color: var(--accent); margin-bottom: 10px; } .login-title { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 2px; line-height: 1; margin-bottom: 4px; } .login-sub { font-size: 13px; color: var(--muted); margin-bottom: 2.5rem; } .form-group { margin-bottom: 1rem; } .form-group label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; } .form-group input { width: 100%; background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 14px 16px; color: var(--text); font-size: 15px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.2s; } .form-group input:focus { border-color: var(--accent); } .btn-primary { width: 100%; background: var(--accent); border: none; border-radius: 8px; padding: 14px; color: #fff; font-size: 15px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; margin-top: 0.5rem; transition: background 0.2s, transform 0.1s; } .btn-primary:active { transform: scale(0.98); background: #933f1c; } .login-error { font-size: 13px; color: var(--red); margin-top: 0.75rem; text-align: center; display: none; } .login-diag { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 1.25rem; text-align: center; letter-spacing: 0.02em; word-break: break-word; } .login-diag.warn { color: var(--red); } /* The reset flow's own furniture. A