/* LUCID — every rule in the app. * * Lifted out of index.html on 24 August 2026, unchanged. The file was * 29,699 lines with 4,500 of them CSS, and finding a rule meant scrolling * past a fifth of the application to reach the markup that uses it. * * NO BUILD STEP. Matt deploys by dragging a folder into Netlify, so this is * a plain stylesheet the page links to — not something a bundler assembles. * Splitting it any further would mean more requests on a phone for no gain. */ :root{ /* DARK (default) — muted-card + contained-glow language: each hue stays flat/desaturated as a surface color, with a small bright glow pool anchored near it rather than washing the whole element. */ --bg-mid:#080A1A; --bg-base:#050710; --bg-deep:#020306; --bloom-1: rgba(61,107,255,0.12); --bloom-2: rgba(160,125,255,0.08); --bloom-3: rgba(255,154,68,0.06); --bloom-4: rgba(184,225,74,0.06); --glass-bg: rgba(28,40,86,0.44); --glass-border: rgba(255,255,255,0.09); --glass-border-hi: rgba(255,255,255,0.20); --glass-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 18px -6px rgba(0,0,0,0.4), 0 28px 56px -16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 42%); --glass-blur: 24px; --glass-sat: 160%; /* ---- MOTION SYSTEM ---- Everything that moves now resolves to these six values. Before this there were five ad-hoc durations (.1/.15/.2/.25/.28s) and easing was whatever `ease` happens to be — which is why nothing felt related to anything else: every component accelerated on its own curve. One decelerating curve for entrances (things arriving should slow as they land), one symmetric curve for travel between two states, one slight-overshoot spring for the few playful bits. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 130ms; --dur-base: 220ms; --dur-slow: 320ms; /* The dissolve between pages. Deliberately shorter than --dur-base: a page transition is the one animation the eye is waiting on, so it should be over before it is noticed. Kept in step with VIEW_FADE_MS in JS. */ --dur-view: 150ms; /* ---- THE THREE ANSWERS ROW 1822 OWED, AND WHY EACH ONE IS A NAME AND NOT A LITERAL. Row 1827 counted seventeen raw values left in this file and eleven of them were durations down here, which is the same fault this block was written to cure, in the one corner the block had no word for. SURVIVORS, DECIDED RATHER THAN INHERITED. --ease-in-out stays: 37 rules use it and 25 of those are `infinite` — a breath, a pulse, a wobble — where a decelerating curve jerks at the seam because the loop restarts from a standstill it had already reached. --dur-view stays: it is a contract with VIEW_FADE_MS in app.js and a name is the only thing holding the two ends together. --ease-spring stays with its single use named here so nobody has to grep for it: .chat-pill, the sphere you drag around the screen, where the slight overshoot is the difference between a thrown object settling and a rectangle being placed. AMBIENT, WHICH IS THE FOURTH ROLE AND WAS THE MISSING ONE. A state change at 130, something appearing at 220, something crossing at 320 — and then the sky, the clouds, the stars, the snow, a photograph crossfading in its frame and the brand mark changing colour with the theme, which were spending 0.9s, 1.2s, 1.4s, 1400ms and 1600ms on one decision. The point of an ambient fade is that you never catch it happening, so the exact number matters less than there being one of it. 1.2s is the number seven of the ten already agreed on. A TICK IS NOT A DURATION, IT IS THE CLOCK. .mb-fuse's width is rewritten once a second by mbPaintClock(), and the transition has to be exactly that interval or the bar never arrives where it was sent — at 1.2s it would run permanently a sixth of a step behind the countdown it claims to be drawing, which is a number on screen that is not true. AND NEVER IS NOT A DURATION EITHER, it is a switch wearing a speed: Chrome paints its own yellow over an autofilled input and the only way to refuse it is to start a background-color transition so long it never arrives. It is named rather than exempted in tests/lint-the-scale.js because "very large numbers are fine" would wave through a great many things that are simply wrong, and this is the only one that is right. */ --dur-ambient: 1.2s; --dur-tick: 1s; --dur-never: 9999s; /* ------------------------------------------------------------------ THE THREE WASHES, AND THE THING THEY FIX. Twelve rules in this file paint a hover, or a "this is the one you are standing on", with `rgba(255,246,230,.045)` written out in full — a warm white at four and a half percent. On charcoal that is a correct and rather nice touch of light. ON EVERY LIGHT THEME IT IS WHITE ON WHITE AND DOES NOTHING AT ALL: hovering a row in the rail on Denim, Terracotta, Alabaster, Parchment, Light or any of the three Serenity papers gave no feedback whatever, because the feedback was a lighter version of an already-light surface. A hover that cannot be seen is a control that looks like it works and does not. So the wash becomes a token with two definitions, and the light one is made of the theme's OWN INK rather than of white — a hint of Denim's navy on Denim, of Terracotta's near-black brown on Terracotta. It darkens where the dark themes lighten, which is the only way one name can read on both. --wash-soft a hover in the open rail --wash-hover a hover where the row is a square around an icon, and the backing behind a focus ring, both of which need more --wash-on the row you are standing on --wash-soft WAS ALREADY BEING ASKED FOR by the matte icon-button rule further down this file, with the same warm white as its fallback and nothing anywhere defining it. Defining it here fixes that rule too, and it is the second dead token found this shift — see the note by :root[data-mode="light"] .chat-pill for the first and worse one. SIX RULES POINT AT THESE SO FAR: the rail rows, the collapsed rail rows, the current row, the spine's add button, the attention mini button and the matte icon button — the rail and the spine, which is the ground this shift owns. The other six sites of the literal are in menus and account switchers that other work is inside this week; they are listed in the shift notes rather than changed here, because a merge conflict in a stylesheet is how a colour goes missing. ------------------------------------------------------------------ */ --wash-soft: rgba(255,246,230,.045); --wash-hover: rgba(255,246,230,.075); --wash-on: rgba(255,246,230,.05); --text:#F4F6FD; --text-dim:#A6AFD4; --text-faint:#8C94BC; --ring: rgba(255,255,255,0.42); --ring-soft: rgba(255,255,255,0.22); --blue:#3D6BFF; --blue-2:#7C9CFF; --blue-glow: rgba(61,107,255,0.5); --green:#B8E14A; --green-2:#D3EE8E; --green-glow: rgba(184,225,74,0.45); --violet:#A07DFF; --violet-2:#D3C2FF; --violet-glow: rgba(160,125,255,0.42); --orange:#FF9A44; --orange-2:#FFBF87; --orange-glow: rgba(255,154,68,0.45); --pink:#FF5A47; --pink-2:#FF9A87; --pink-glow: rgba(255,90,71,0.42); --teal:#2DD4BF; --teal-2:#8FEFE3; --teal-glow: rgba(45,212,191,0.42); /* Contact/Organization category colors — deliberately separate from the shared account-color palette above (which Mail/Calendar use). Deeper jewel-tones instead of the brighter neon set: the glow itself provides the "pop," so the base fill doesn't need to be as vivid — reads as premium rather than a rave with six saturated hues glowing across a page of cards at once. */ --cat-blue:#2954D9; --cat-blue-2:#6E8CE8; --cat-blue-glow: rgba(41,84,217,0.45); --cat-green:#3F9B6B; --cat-green-2:#7EC49E; --cat-green-glow: rgba(63,155,107,0.4); --cat-violet:#7B5FD9; --cat-violet-2:#AD98E8; --cat-violet-glow: rgba(123,95,217,0.4); --cat-orange:#D97D2E; --cat-orange-2:#EAA766; --cat-orange-glow: rgba(217,125,46,0.42); --cat-red:#B8382E; --cat-red-2:#D97066; --cat-red-glow: rgba(184,56,46,0.42); --cat-teal:#1F9E8E; --cat-teal-2:#5FC4B6; --cat-teal-glow: rgba(31,158,142,0.4); /* FOUR MORE, TO MAKE TEN. His #5. Picked to sit alongside the six above at the same weight rather than shouting over them — the same mid-saturation band, so no category reads as more important than another by accident. */ --cat-gold:#B08A20; --cat-gold-2:#DCC067; --cat-gold-glow: rgba(176,138,32,0.42); --cat-rose:#C0487A; --cat-rose-2:#E087AC; --cat-rose-glow: rgba(192,72,122,0.40); --cat-slate:#5A6B85; --cat-slate-2:#93A3BC; --cat-slate-glow: rgba(90,107,133,0.38); --cat-moss:#6E8F35; --cat-moss-2:#A6C273; --cat-moss-glow: rgba(110,143,53,0.40); --ink:#031225; --pulse-lo: color-mix(in srgb, var(--blue) 25%, transparent); --pulse-hi: color-mix(in srgb, var(--blue) 48%, transparent); --neutral-1:#EDEFFC; --neutral-2:#ffffff; --neutral-ink:#0A0E1F; --neutral-glow: rgba(255,255,255,.2); --radius:16px; /* Accent — buttons/highlights follow the selected account's color; defaults to blue when "All accounts" is selected. Set at runtime by applyAccentColor() in the main script. */ --accent: var(--blue); --accent-2: var(--blue-2); --accent-glow: var(--blue-glow); /* ============================================================ THE FIVE AREAS, AND THE METAL. ------------------------------------------------------------ 2 September. Matt, on the spine: "the arrows offsetting the media due to menu, the LCS initials, the oblong action button....I need anything we do to be the top of the line." Then, on the third mock: "nailed it....love the color per area (which scared me as I dont want a circus sideshow)." That fear is the whole brief for these five values. The rail's accents used to be --blue and --violet at full strength, which is the circus he meant — a saturated hue is a toy, and five of them at once is a toybox. These are the same five hues taken DOWN: mid-saturation, none of them brighter than the brass they sit beside, chosen the way --cat-* above was chosen and for the same stated reason ("premium rather than a rave"). Brass is the metal everything not-an-area wears — the masthead line, the focus ring, a count that is currently yours. It is deliberately the same value as --area-work, because Work IS the brass in this scheme rather than a sixth colour competing with it. WHY THEY ARE NOT ALIASES OF --cat-*. The --cat-* set is contact and organization categories, and a person can retag a company tomorrow. An area's colour must never move, because the point of it is that the same green marks Life in the rail, in the flyout and on the page header. Two independent palettes that happen to sit in the same saturation band. LIGHT MODE TAKES DARKER STEPS, below. These five are lit for a near-black rail; on cream they measure as pastels, and a pastel hairline against paper is the invisible-control failure this file has hit three times. EVERY THEME NOW CARRIES ITS OWN FIVE, and this block is Dark's. ------------------------------------------------------------------ 4 September. Asked whether he wanted area colours that move with the theme or one fixed set for the whole wardrobe, Matt answered: "Colors that move with the theme." Until then five of the thirteen themes — Chocolate, Forest, Ink, Alabaster, Parchment — re-tinted these five for their own ground and the other eight shared this one set, which is how Light ended up wearing a metal that measured 3.56:1 against the bottom of its own page gradient while Parchment, two chips along in the same picker, held 4.83:1 for the same token. Each theme's block below now states its own five, measured against its own ground. THESE VALUES WERE DARK'S, AND DARK HAS GONE — row 2136, and the sentence that used to be here is the whole of row 2162. It read: "Dark is the only theme with no :root[data-theme=…] block — it IS the base :root, and it is what an unrecognised or unset theme falls back to painting… Anything that lands here without a theme gets Dark's colours, which is the right answer for the same reason it always was." That stopped being the right answer on 14 September, when Dark was deleted. The base set was still here, still built for #080A1A, and still what an unrecognised name painted out of — so "fell back to Dark" had quietly become "fell back to the leftovers of a theme that is not in the picker, is not in the retirement table and cannot be chosen". Nothing on screen said so, and the Mac titlebar took the metal on this line and wore it, because the page measures --brass off whatever is live and posts it to the shell. NOTHING ARRIVES HERE WITHOUT A THEME ANY MORE. parseTheme() in app.js now refuses a name that is not in THEME_CYCLE and returns DEFAULT_THEME instead, loudly, so data-theme is always a theme that exists and one of the blocks below is always in force. These five stay as the floor under that — a base every block below overrides in full, and the thing a theme added tomorrow inherits if somebody forgets one — rather than as a thirteenth room nobody can open. They measure 5.28:1 at their worst on #080A1A, which is Midnight's neighbourhood too, so there is nothing to re-tune. */ --area-now:#8195C7; --area-people:#BE7A87; --area-work:#C8A45D; --area-media:#5F9E96; --area-life:#8CA36D; --brass:#C8A45D; --brass-dim:#8E7639; --titlebar: color-mix(in srgb, var(--brass) 10%, var(--bg-mid)); /* THE RAIL'S OWN INK, AND WHY IT IS WARMER THAN THE APP'S. --text is #F4F6FD — a blue-white, which is a screen colour. #F3EFE6 is paper. Everything set on it reads as printed rather than lit, and that single shift is most of what separated the mock he approved from the rail he called a garage. It is scoped to the spine on purpose: turning the whole app warm is a one-line change from here, but it is a change to every page at once and he has not seen that yet. */ --rail-ink:#F3EFE6; --rail-ink-2:#9E9A90; --rail-ink-3:#6B685F; /* ============================================================ THE LIFE WALL'S HEAT RAMP — treatment H, and the only colour on that page that means anything. ------------------------------------------------------------ Six steps that encode exactly ONE variable — how far away a thing is — because that is the only variable on the Life wall worth a colour, and it is what stops a coloured page becoming the circus he was afraid of in item 210. EVERY STEP IS AN ALIAS ONTO A TOKEN THAT ALREADY MOVES WITH THE THEME, which is why there is no second copy of this block in any of the twelve theme blocks below. --cat-red-2, --cat-orange-2, --brass, --area-life and --text-faint are each stated per theme already, so the ramp re-tunes itself for cream, for Forest and for Obsidian without anybody having to remember to come here. A literal #D97066 on this line would have been the one colour on the page that stayed a dark-room colour on paper. THE ONE THAT NEEDED WORK IS THE FOURTH. --cat-slate-2 is declared once, in this block, and inherited by all twelve themes — so on cream it is a #93A3BC pastel, which is the invisible-control failure this file has hit three times. Mixing it toward --text fixes it in BOTH directions at once rather than in a light-theme override that a thirteenth theme would miss: --text is near-black on paper and near-white in the dark, so the mix always moves the step away from the ground it is being read against. */ --life-heat-0: var(--cat-red-2); --life-heat-1: var(--cat-orange-2); --life-heat-2: var(--brass); --life-heat-3: var(--area-life); --life-heat-4: color-mix(in srgb, var(--cat-slate-2) 62%, var(--text)); --life-heat-5: var(--text-faint); /* THE GROUND, AND WHY THE WALL IS NOT THE SAME FLAT DARK AS EVERY OTHER PAGE. Matt on the app in general: "We have white and white, and everything else is dark." Every area page sits on the same gradient, which is a large part of why Life looked like Media. This is that gradient rotated toward the area's own colour — the same luminance with a little of Life's green put in — and it is derived rather than stated so that every theme's wall is that theme's own ground rather than Dark's. The floor, --bg-deep, is left exactly alone: the bottom of a page should be the same in every room of the app. */ --life-wall-1: color-mix(in srgb, var(--bg-mid) 93%, var(--area-life)); --life-wall-2: color-mix(in srgb, var(--bg-base) 95%, var(--area-life)); --life-grid: color-mix(in srgb, var(--text-faint) 20%, transparent); --life-piece: color-mix(in srgb, var(--area-life) 6%, var(--glass-bg)); /* THE LIGHT THE WALL'S DRAWINGS ARE MODELLED IN — the night half. See the twin block under :root[data-mode="light"] for the day half, and the long note at the head of THE DRAWINGS in app.js for why there are two halves at all. ON BLACK YOU DRAW BY ADDING LIGHT. A highlight is a pale colour, a lit face is a pale colour, and a shadow is an ABSENCE of light, so --la-cast runs to the floor of the page. Turn the ground over and every one of those moves reverses, which is why not one of these is stated once and inherited: a day theme that fell through to this block would paint a near-black shade onto cream, and a near-black shade on cream is not a shadow, it is a hole punched in the page. That is the exact complaint Matt made about the clouds and the graphs, and this is the shape of the fix. EVERY ONE IS MIXED FROM A TOKEN EVERY THEME ALREADY STATES — --text, --bg-mid, --bg-base, --bg-deep, --area-life, --brass — so a family arriving next month gets a lit wall without anybody remembering to come back here, and the four families the theme work is collapsing to get one each for free. --h, the piece's own heat, is deliberately not in this list: it is set per piece by the wall, and it is what makes the same object read hot in September and cool in March. */ --la-core: var(--text); --la-spec: color-mix(in srgb, var(--text) 88%, var(--brass)); --la-rim: color-mix(in srgb, var(--text) 58%, var(--area-life)); /* --la-face is the plane turned INTO the key and --la-lit the plane just off it. Two steps rather than one, because a solid with a lit face and a shade has a corner and a solid with only a body has a silhouette — which is exactly what the house on this wall was for one round of pictures. */ --la-face: color-mix(in srgb, var(--bg-mid) 24%, var(--text-faint)); --la-lit: color-mix(in srgb, var(--bg-mid) 56%, var(--text-faint)); --la-body: color-mix(in srgb, var(--bg-base) 78%, var(--text-faint)); --la-deep: var(--bg-deep); --la-cast: var(--bg-deep); --la-ao: var(--bg-deep); --la-haze: color-mix(in srgb, var(--bg-mid) 62%, var(--text-faint)); /* A SHEET OF PAPER IS A SHEET OF PAPER IN BOTH ROOMS. A document drawn dark because it needed to separate from black is the single most repeated light-mode bug in this app, and the vault's fan is six of them at once. */ --la-sheet: color-mix(in srgb, var(--text) 86%, var(--brass)); --la-sheet-2: color-mix(in srgb, var(--text) 52%, var(--bg-mid)); --la-ink: var(--bg-deep); --la-dust: var(--text-faint); /* THE PHYSICS, and it is four values rather than a second stylesheet. The identical bloom that ADDS light at night MULTIPLIES by day, and a bloom at night's strength multiplies into a bruise. */ --la-blend: screen; --la-bloom: 1; /* How much of the ground plane is left in. A dark ground plane under an object is a floor at night and, on a short mount on cream, a ruled grey slab — because subtracting light from paper is a much louder move than adding it to black. Same drawing, two strengths, one number. */ --la-plane: .22; --la-grain-o: .11; --la-grain-blend: overlay; } /* The five areas and the metal, stepped down for cream. Same hues, enough ink in them to hold an edge against paper. The rail's ink goes back to the app's own text colours — warm ink is a dark-room idea, and #F3EFE6 on cream is not a colour, it is a smudge. SINCE 4 SEPTEMBER EVERY LIGHT THEME OVERRIDES THESE FIVE, and they are kept anyway as the floor a new one lands on. They are no longer what Light or Serene paint — both now state their own, darker, against their own grounds. What is left here is the answer to "somebody adds a paper theme next month and forgets the rail": it gets a set that is at least stepped for cream rather than the near-black set from :root above, which on paper is the pastel-hairline failure the block above names. The rail ink lines are NOT dead, though — nothing below overrides those, so they are still doing the work on every light theme in the wardrobe. */ :root[data-mode="light"]{ --area-now:#4E5F8C; --area-people:#9B4E5C; --area-work:#8E7639; --area-media:#3D7A72; --area-life:#5E7440; --brass:#8E7639; --brass-dim:#6E5A2B; --rail-ink:var(--text); --rail-ink-2:var(--text-dim); --rail-ink-3:var(--text-faint); /* THE WASHES, INVERTED — see the long note at the top of this file. Made from var(--text), which every ground defines as its own ink, so this one declaration gives Denim a navy hover, Terracotta a clay-brown one and Mist a green-grey one without naming a single colour. Nothing resolves here: a custom property is a token stream until it is used, so --text is read at the row rather than at this line, and each theme's own ink is what arrives. The percentages are higher than the dark set's because a dark wash on paper has to beat the page's own gradient, which runs eleven points of lightness from the top of the rail to the bottom of it. */ --wash-soft: color-mix(in srgb, var(--text) 6%, transparent); --wash-hover: color-mix(in srgb, var(--text) 10%, transparent); --wash-on: color-mix(in srgb, var(--text) 7%, transparent); /* THE LIFE WALL'S DRAWINGS, RE-DERIVED FOR PAPER — the day half, and this block is the whole of the light-mode fix for that page. Every token in the night half above was authored against black, where a shape is drawn by ADDING light: the highlight is a pale colour, the lit edge is a pale colour, and the deep end of a gradient runs toward the ground, which on black means toward black. Turn the ground over and every one of those reverses. On paper a shape is drawn by SUBTRACTING light: the highlight is where the ink STOPS, the lit face is nearly bare page, and the deep end is saturated hue with ink in it — never a run to black, because a run to black on cream is a hole rather than a shade. THE RIM INVERTS RATHER THAN DIMS, and that is the one move that is not a swap of two numbers. A rim light is the edge of a form on the side AWAY from the key; on black that is where light creeps round and so it is BRIGHTER than the form. On paper it is simply the side with more ink on it, so it becomes a fine dark edge. Dimming the night value instead leaves a pale hairline on cream, which is the invisible-control failure this stylesheet has already hit three times. AND THE CAST SHADOW IS NOT BLACK. A black cast shadow on a toned board reads as dirt on the page rather than as an object sitting on it, so it is the page's own ink with the area's green in it. Not one literal colour here either: everything is mixed from --bg-mid, --text, --area-life and --brass, all of which every light family states for itself. */ --la-core: color-mix(in srgb, var(--bg-mid) 94%, var(--brass)); --la-spec: color-mix(in srgb, var(--bg-mid) 88%, var(--brass)); --la-rim: color-mix(in srgb, var(--text) 46%, var(--area-life)); --la-face: color-mix(in srgb, var(--bg-mid) 94%, var(--area-life)); --la-lit: color-mix(in srgb, var(--bg-mid) 78%, var(--area-life)); --la-body: color-mix(in srgb, var(--area-life) 52%, var(--bg-mid)); --la-deep: color-mix(in srgb, var(--area-life) 46%, var(--text)); --la-cast: color-mix(in srgb, var(--text) 34%, var(--area-life)); --la-ao: color-mix(in srgb, var(--text) 52%, var(--area-life)); --la-haze: color-mix(in srgb, var(--bg-mid) 82%, var(--area-life)); --la-sheet: color-mix(in srgb, var(--bg-mid) 96%, var(--brass)); --la-sheet-2: color-mix(in srgb, var(--bg-mid) 74%, var(--brass)); --la-ink: var(--text); --la-dust: color-mix(in srgb, var(--text) 62%, var(--area-life)); --la-blend: multiply; --la-bloom: .40; --la-plane: .12; --la-grain-o: .07; --la-grain-blend: multiply; } /* ============================================================ SURFACE TREATMENTS — three dark variants beyond the default. The DEFAULT dark theme separates card from page by LUMINANCE: the card is simply lighter than what's behind it. The two "edge-lit" themes below (midnight, obsidian) deliberately throw that away. Their cards sit at almost exactly the same darkness as the page, and depth comes entirely from modelled light instead: 1. A bright top border (--glass-border-hi) acting as a rim/specular highlight, as if a light source sits above and in front. 2. A directional light POOL replacing the old flat top sheen — --glass-sheen becomes a radial gradient anchored off the card's top-left corner, so every card looks lit from a consistent direction rather than uniformly tinted. 3. A much deeper cast shadow, which is what actually sells elevation once the brightness cue is gone. FROSTED goes the opposite way: it keeps the ambient bloom HIGH (you need something behind the glass for frost to be frosted *of*), makes the card fill very translucent, and pushes backdrop blur from 24px to 44px so the background reads through as diffused colour. All four inherit every other token from dark — accents, the --cat-* jewel tones, all text — so nothing but the surfaces change. ============================================================ */ /* MIDNIGHT — deep blue room, cards the same darkness as the room, edge-lit. */ :root[data-theme="midnight"]{ --bg-mid:#030718; --bg-base:#01040E; --bg-deep:#000206; --bloom-1: rgba(61,107,255,0.06); --bloom-2: rgba(160,125,255,0.035); --bloom-3: rgba(255,154,68,0.02); --bloom-4: rgba(184,225,74,0.02); --glass-bg: rgba(14,24,58,0.62); --glass-border: rgba(150,180,255,0.10); --glass-border-hi: rgba(150,185,255,0.44); --glass-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 12px 26px -6px rgba(0,0,0,0.66), 0 40px 80px -20px rgba(0,0,0,0.85), 0 0 40px -12px rgba(61,107,255,0.16), inset 0 1px 0 rgba(160,190,255,0.14); --glass-sheen: radial-gradient(130% 90% at 14% -12%, rgba(140,175,255,0.17), rgba(140,175,255,0.045) 38%, rgba(255,255,255,0) 72%); --glass-blur: 26px; --glass-sat: 150%; /* THE FIVE, IN A BLUE ROOM. Midnight's ground is #030718 — darker than Dark's and with a hue you can name — and the blooms over it are blue. Dark's five were lit for a blue-BLACK, so on this ground the two warm ones sat slightly apart from the room while the cool ones vanished into it: the rail read as gold-and-rose plus three smudges. Each hue is turned a few degrees toward the room's own blue and lifted a step, which the darker ground pays for — the tightest of the five measures 5.88:1 on the page here against 5.28:1 for Dark's set on Dark. Media is the one that moved most: #5F9E96 is a green-teal that read as a dim cousin of Life on a blue ground, and #5CA3AC is the same teal turned toward cyan so the two stop being the same idea. */ --area-now:#8AA6D8; --area-people:#BC8096; --area-work:#C6A868; --area-media:#5CA3AC; --area-life:#8AA97C; --brass:#C6A868; --brass-dim:#8C7645; /* THE WORK METAL — row 2141. STEEL — Matt named this one. A cool blue-grey that belongs to a blue room; a warm metal here would be the only warm thing in it. 9.42:1 on a resting card, 7.38:1 on a lit one. */ --work-metal:#A9B8CE; } /* OBSIDIAN — the same idea with the blue taken out. Near-black, neutral, maximum separation between "unlit surface" and "lit edge". */ :root[data-theme="obsidian"]{ --bg-mid:#0A0A0D; --bg-base:#050506; --bg-deep:#000000; --bloom-1: rgba(61,107,255,0.035); --bloom-2: rgba(160,125,255,0.025); --bloom-3: rgba(255,154,68,0.015); --bloom-4: rgba(184,225,74,0.015); --glass-bg: rgba(23,24,29,0.66); --glass-border: rgba(255,255,255,0.07); --glass-border-hi: rgba(255,255,255,0.34); --glass-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 14px 30px -8px rgba(0,0,0,0.75), 0 46px 90px -22px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.10); --glass-sheen: radial-gradient(130% 90% at 14% -12%, rgba(255,255,255,0.13), rgba(255,255,255,0.035) 38%, rgba(255,255,255,0) 72%); --glass-blur: 22px; --glass-sat: 130%; /* THE FIVE, WITH THE BLUE TAKEN OUT OF THEM TOO. This theme's whole idea is a room with no hue in it, and Dark's five are mixed for a ground that has one — on neutral near-black they are the most saturated thing on the screen by a distance, which is the "circus sideshow" the base block says these values exist to avoid. Each is pulled about a tenth of its chroma toward grey and given back the lightness that costs, so they still read as blue/rose/gold/teal/green rather than as five greys. The floor is the pair that always gets closest — the tightest here is Media against Life at ΔE 22.4, which is the same distance Chocolate and Ink live at, so pulling the chroma did not collapse anything. */ --area-now:#8B9BBC; --area-people:#BE8189; --area-work:#C8A96B; --area-media:#6C9E97; --area-life:#95A67C; --brass:#C8A96B; --brass-dim:#8E7844; /* THE WORK METAL — row 2141. PLATINUM — the sharpest theme takes the coldest, brightest metal. Neutral to the point of being hueless, which is what Obsidian is. 11.59:1 on a resting card, 8.94:1 on a lit one. */ --work-metal:#C8CACE; } /* ============================================================ REGAL — the one that is a different REGISTER, not another palette. ============================================================ Matt sent a reference and said: "I absolutely love this look… call it elegant or regal." What he liked was not a colour. It was restraint — deep bottle-green glass, a warm bloom well away from the content, hairline rules instead of borders, and a great deal of air. So this theme changes three things the other four do not: 1. THE GROUND IS GREEN, not blue or neutral. Deep bottle glass. It is the only theme here whose ground has a hue you would name. 2. ONE ACCENT, and it is BRASS. Every other theme inherits Lucid's five jewel accents and uses whichever the surface calls for. This one overrides --accent to aged brass and leaves it there, so a page has a single warm note on a lot of quiet instead of five competing ones. That is the whole difference between "elegant" and "colourful". 3. HAIRLINES, NOT EDGES. The border drops to a barely-there warm line and the lit edge is halved. Depth comes from the shadow and the bloom rather than from a drawn outline. The bloom is warm and deliberately weak — it sits behind the glass as a hint of a lamp somewhere off-page, which is what stops a dark green room from reading as a terminal. Text tokens are NOT overridden. They were measured against every theme and this ground is darker than dark's, so they pass here by construction — see tests/test-readability.js, which now runs this theme too. */ :root[data-theme="regal"]{ --bg-mid:#0A1512; --bg-base:#05100D; --bg-deep:#020706; /* Green-tinted ink. The inherited lilac dim measured 4.46:1 here — under the 4.5 floor — so the ramp is re-stepped against this ground, not borrowed. #B0BEB5 measures 5.0:1 on it. Dark ink on the brass fill, because brass is light and white on it measured 3.51:1. */ --text:#F2F6F1; --text-dim:#B0BEB5; --text-faint:#98A79D; --on-accent:#0A1512; /* Warm, faint, and placed away from the middle: a lamp off-page rather than a light behind the content. */ --bloom-1: rgba(214,168,96,0.055); --bloom-2: rgba(120,180,150,0.035); --bloom-3: rgba(214,168,96,0.030); --bloom-4: rgba(80,140,120,0.020); --glass-bg: rgba(16,36,30,0.62); /* A hairline, not a border. Half the lit edge of the other dark themes. */ --glass-border: rgba(220,200,160,0.085); --glass-border-hi: rgba(226,201,148,0.26); --glass-shadow: 0 1px 2px rgba(0,0,0,0.62), 0 14px 32px -8px rgba(0,0,0,0.7), 0 48px 96px -24px rgba(0,0,0,0.9), 0 0 46px -14px rgba(214,168,96,0.10), inset 0 1px 0 rgba(226,201,148,0.09); --glass-sheen: radial-gradient(130% 90% at 16% -14%, rgba(226,201,148,0.10), rgba(226,201,148,0.028) 40%, rgba(255,255,255,0) 74%); --glass-blur: 28px; --glass-sat: 140%; /* ONE ACCENT. Brass, and only brass. */ --brass:#D6A860; --brass-2:#EFD6A6; --brass-glow: rgba(214,168,96,0.40); --accent: var(--brass); --accent-2: var(--brass-2); --accent-glow: var(--brass-glow); /* The two that read as "this is happening now" follow the accent, or the page grows a second warm colour that means nothing different. */ --pulse-lo: color-mix(in srgb, var(--brass) 22%, transparent); --pulse-hi: color-mix(in srgb, var(--brass) 44%, transparent); /* Blue is Lucid's default accent and it is wrong in this room — it is the one hue that fights bottle green. Warmed toward the brass rather than replaced, so anything hard-coded to --blue still belongs here. */ --blue:#8FB9A8; --blue-2:#BFDCCF; --blue-glow: rgba(143,185,168,0.34); --violet:#B9A2D8; --violet-2:#DCCEEE; --violet-glow: rgba(185,162,216,0.30); --teal:#6FBFA8; --teal-2:#A9DCCC; --teal-glow: rgba(111,191,168,0.32); --green:#A8C878; --green-2:#CEE0AE; --green-glow: rgba(168,200,120,0.32); --pink:#D98C74; --pink-2:#EEBBAB; --pink-glow: rgba(217,140,116,0.32); /* Orange was the ONE hue this room never redefined, so it fell through to the default #FF9A44 — a bright modern orange in a bottle-green-and-brass room, which is exactly the fight the note above describes. Found while giving the chat source chips a hue each: nine of the ten had a version for this paper and the tenth was shouting. Warmed to amber to sit with the brass. */ --orange:#D9A05B; --orange-2:#EFCB9A; --orange-glow: rgba(217,160,91,0.30); /* THE FIVE AREAS, IN THE ONE ROOM THAT HAS A COLOUR. Every hue above was warmed toward the brass because blue is the one hue that fights bottle green — and the rail was still painting Dark's five straight over that, so the theme that overrides ten accents to stay in one register kept a five-colour navigation rail from a different room. These are the same warming, applied to the areas. WORK IS THE BRASS, EXACTLY. Not a near-miss of it: #D6A860 is the value --accent already carries here, so the one metal in this theme and the Work area are the same object rather than two warm colours a shade apart, which is the "two metals is jewellery" mistake in miniature. NOW STAYS A BLUE, and that is deliberate against the grain of the block above. --blue was warmed all the way to #8FB9A8 — a sage — because it is read as text on green glass. An area colour is not text; it is a 2px bar and a dot, and warming Now that far would have put it inside touching distance of both Media and Life, leaving three greens in a five-colour rail. #8098B8 is a slate that has enough of the room's grey-green in it to belong and enough blue left to still be the blue one: the closest pair here is Media/Life at ΔE 29.8, the widest spread of any theme. */ --area-now:#8098B8; --area-people:#CE8B84; --area-work:#D6A860; --area-media:#6BB49E; --area-life:#9FBE76; /* Regal never set --brass-dim and so inherited #8E7639 from :root — a duller, browner gold than the #D6A860 the rest of this block is built on. Nothing reads it today, which is exactly why it would have gone wrong the first time something did. */ --brass-dim:#9A7A3C; /* THE WORK METAL — row 2141. BRASS, and by reference rather than by value: Regal IS the brass theme, so its metal is the one already stated three lines up. Writing the hex again would be a second copy to keep in step with the first for no gain. 8.34:1 on a resting card, 6.31:1 on a lit one. */ --work-metal:var(--brass); } /* ========================================================================== THE MATTE SIX — and the finish that makes them possible. ========================================================================== 2 September. Matt, after the spine went in: "our use of light has become almost cartoonish. Not keeping with the theme of elegance and expensive... brass, maroon, chocolate, and forest green as backgrounds, card, and use of light and shadow to make everything look elegant." Then, on the ten I mocked up: "you just raised the bar from a cool looking app to something similar to Apple....people just have to have it." And the right question with it: "How are we going to be able to prop up the things we do with color if we get away from the glow?" ------------------------------------------------------------------ THE ANSWER, BECAUSE IT IS THE WHOLE DESIGN OF THIS BLOCK. The glow was doing five separate jobs at once, which is exactly why it had stopped doing any of them. Each job now has its own signal: "you are here" → a 2px edge bar in the thing's own colour "this belongs to X" → a 3px left keyline plus the colour on the number or the label, never on the whole row "this is a card" → elevation: a 1px lit top edge and a long soft shadow. Light from above, and nothing else "this is current, yours" → the metal, on about six things per screen "this is LATE" → the glow. It keeps exactly one job That last line is the real answer. Glow did not stop working; it stopped MEANING anything, because eighty-five declarations had it and the overdue badge was competing with the navigation rail for his eye. Taking it off everything else makes the one alarm louder, not quieter. Search this file for attnPulse: that is the only glow left in a matte theme, and it fires only while something is actually overdue. ------------------------------------------------------------------ HOW THE FINISH IS SWITCHED, and why it is an attribute rather than six selectors repeated eighty-five times. setTheme() stamps data-finish="matte" or "glow" on the root, the same way it already stamps data-mode. Everything below keys off that one attribute. Two consequences worth stating: 1. THE OLD THEMES ARE UNTOUCHED. Dark, Midnight, Obsidian, Frosted, Light and all nine Serene combinations still stamp finish="glow" and render exactly as they did this morning. Matt: "If it doesnt translate we can always revert back." Reverting is choosing Dark. 2. NEARLY ALL THE GLOW REMOVES ITSELF. Eighty of those eighty-five declarations read a --*-glow token, so the matte block sets those tokens to transparent once and every one of them collapses. Only the handful that hard-code a color-mix or an rgba literal need naming, and they are named below. WHAT MAKES THESE GROUNDS LOOK EXPENSIVE — five rules, followed by all six: 1. The ground is a colour mixed down to near-black, not black with a tint dropped on it. Chocolate at 6% lightness still reads as brown. 2. The card is three or four points lighter than the ground and is separated by a hairline and a shadow, never by contrast. 3. One metal. Two metals is jewellery. 4. Ink is warm and never pure white. 5. Light from above: one lit top edge, one long shadow, no coloured halo hidden in the shadow stack the way Midnight and Regal hide one. ========================================================================== */ /* BORDEAUX — oxblood taken to 6% lightness. A leather chair, not a red screen. The dim ink is re-stepped against this ground rather than borrowed: the inherited lilac measures under the 4.5 floor on anything this warm, which is the same trap Regal fell into. */ /* ONE LAMP, NOT TWO. body's second bloom sits at 108% 18% — the top-right corner, over a 1000x760 radial — and on the first pass every matte theme gave it a second hue: rose on Bordeaux, taupe on Chocolate, mint on Forest. At 3% each of them was still the brightest object on Home and it was in a corner saying nothing. All four now carry the theme's own metal, weaker, so the room has one light in it rather than a light and a rumour of another. Found by looking at shots/matte-forest-home.png, not by reading this file: a 3% wash is invisible in a diff and unmistakable in a screenshot. */ /* BORDEAUX STOOD HERE, and it was cut on 4 September on Matt's instruction: asked which of thirteen themes to keep, he answered "Get rid of red." It was the oxblood one — the only red ground in the wardrobe — and its whole block is gone rather than left commented out, because a theme nobody can choose is a theme nobody maintains, and a stylesheet that keeps its dead is how you end up with 11,000 lines nobody trusts. If it is ever wanted back it is in the history, whole. The other five matte themes (Chocolate, Forest, Ink, Alabaster, Parchment) are untouched — the finish was never the objection. */ /* CHOCOLATE — espresso, not brown. The warmest of the six, and the one where cream ink stops reading as white text and starts reading as paper. */ :root[data-theme="chocolate"]{ --bg-mid:#16120D; --bg-base:#100D09; --bg-deep:#080604; --text:#F3EAD8; --text-dim:#C4B6A6; --text-faint:#A2947F; /* 4.47:1 on the contact-detail tabs at #BFB0A0 — three hundredths under the floor, which is exactly the kind of miss no eye finds and every warm ground produces. Same trap as Bordeaux above, one step up. */ --bloom-1: rgba(217,179,117,0.045); --bloom-2: rgba(217,179,117,0.024); --bloom-3: rgba(217,179,117,0.022); --bloom-4: rgba(110,90,60,0.018); --glass-bg: rgba(42,35,25,0.62); --glass-border: rgba(255,236,205,0.075); --glass-border-hi: rgba(255,236,205,0.26); --glass-shadow: 0 1px 2px rgba(0,0,0,0.62), 0 14px 32px -8px rgba(0,0,0,0.72), 0 48px 96px -24px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,236,205,0.08); --glass-sheen: radial-gradient(130% 90% at 16% -14%, rgba(255,236,205,0.09), rgba(255,236,205,0.024) 40%, rgba(255,255,255,0) 74%); --glass-blur: 26px; --glass-sat: 140%; --brass:#D9B375; --brass-dim:#9A7C42; --brass-2:#F0DCB8; --rail-ink:#F3EAD8; --rail-ink-2:#AFA294; --rail-ink-3:#7A7061; --area-now:#93A3C6; --area-people:#D4948A; --area-work:#D9B375; --area-media:#7FAFA2; --area-life:#A9B87D; --blue:#93A3C6; --blue-2:#C2CCE0; --violet:#B79EC8; --violet-2:#D9CBE3; --teal:#7FAFA2; --teal-2:#B2D0C9; --green:#A9B87D; --green-2:#CDD7AF; --pink:#D4948A; --pink-2:#EBC1BA; --orange:#D9B375; --orange-2:#F0DCB8; /* THE WORK METAL — row 2141. COPPER — Matt named this one too, and it is the pair that made the idea legible: espresso and copper is a real object. 6.73:1 on a resting card, 4.98:1 on a lit one. */ --work-metal:#DA8E5E; } /* INK & EMERALD — the restrained one. True black, near-monochrome ink, and a single live green. The metal here is the emerald: a theme gets one, and on this ground brass would be the second. */ :root[data-theme="ink"]{ --bg-mid:#08090A; --bg-base:#050506; --bg-deep:#000000; --text:#F0F1F2; --text-dim:#B2B8BC; --text-faint:#8B9196; /* True black is the ground you would expect to have contrast to spare, and it does — everywhere except on the tab strips, which sit on a lifted panel rather than on the page. #A8AEB2 measured 4.37–4.45 on those three. The ramp is stepped against the PANEL, not the room. */ --bloom-1: rgba(47,158,79,0.032); --bloom-2: rgba(255,255,255,0.012); --bloom-3: rgba(47,158,79,0.018); --bloom-4: rgba(255,255,255,0.012); --glass-bg: rgba(20,22,24,0.66); --glass-border: rgba(255,255,255,0.07); --glass-border-hi: rgba(255,255,255,0.26); --glass-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 14px 30px -8px rgba(0,0,0,0.8), 0 46px 90px -22px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.075); --glass-sheen: radial-gradient(130% 90% at 14% -12%, rgba(255,255,255,0.075), rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 72%); --glass-blur: 22px; --glass-sat: 120%; /* FOREST, not mint (Matt, 30 Sep: "forest green, or something stronger than mint"). Pure forest #228B22 reads 3.7-4.1 on the lifted panels; #2F9E4F is the forest that holds 6.1 on black, 5.3 on a card, 4.7 on a lit one. */ --brass:#2F9E4F; --brass-dim:#1F6B36; --brass-2:#9BD6AC; --rail-ink:#F0F1F2; --rail-ink-2:#9AA0A4; --rail-ink-3:#63696E; --area-now:#7C99C4; --area-people:#C2848F; --area-work:#C4A96F; --area-media:#2F9E4F; --area-life:#8DB874; --blue:#7C99C4; --blue-2:#B4C4DC; --violet:#A797C4; --violet-2:#CFC6E0; --teal:#2F9E4F; --teal-2:#9BD6AC; --green:#8DB874; --green-2:#BFD5B0; --pink:#C2848F; --pink-2:#E0B6BD; --orange:#C4A96F; --orange-2:#E2D2AF; /* THE WORK METAL — row 2141. PEWTER — near-monochrome wants a near-monochrome metal. The emerald is this theme’s ONE live colour and the figures are not it; a green count would have spent the theme’s single accent on arithmetic. 9.84:1 on a resting card, 7.70:1 on a lit one. */ --work-metal:#B4BABD; } /* ALABASTER — the dark rules run backwards. Warm paper, one metal, hairlines instead of contrast, and a shadow soft enough to read as depth rather than as a drawn border. This is what the light themes were supposed to be. */ :root[data-theme="alabaster"]{ --bg-mid:#FDFBF7; --bg-base:#F7F4EE; --bg-deep:#EFEBE2; --text:#17150F; --text-dim:#57513F; --text-faint:#6E6759; /* THE RING IS DARKER ON PAPER THAN IT LOOKS. Row 2232. At 0.32 this composited to 2.0:1 against its own ground — a focus ring that clears midnight at 4.08:1 and all but vanishes on the two light themes and the three papers, which is the fault nobody finds because nobody tests in the theme they do not use. 0.55 is 3.3-3.8:1, over the 3:1 WCAG asks of a mark that is not text, and it is measured every run by tests/test-the-keyboard-reaches-everything.js on all thirteen grounds. */ --ring: rgba(30,26,16,0.55); --ring-soft: rgba(30,26,16,0.16); --bloom-1: rgba(142,118,57,0.05); --bloom-2: rgba(120,110,90,0.035); --bloom-3: rgba(142,118,57,0.03); --bloom-4: rgba(90,100,70,0.025); --glass-bg: rgba(255,255,255,0.62); --glass-border: rgba(40,32,20,0.09); --glass-border-hi: rgba(40,32,20,0.17); --glass-shadow: 0 1px 2px rgba(80,64,48,0.07), 0 6px 14px -5px rgba(80,64,48,0.10), 0 22px 44px -14px rgba(80,64,48,0.18), inset 0 1px 0 rgba(255,255,255,0.9); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%); --glass-blur: 22px; --glass-sat: 140%; /* THE GOLD, ONE STEP DOWN — the last token under the floor after the 4 September pass over the other themes. Alabaster wrote out the shared cream set by hand rather than tuning one, so it carried the same #8E7639 metal Light did, and measuring the rail against the BOTTOM of the page gradient — which is where it ends, since the rail runs the full height of the window — caught it here too: 3.68:1 on --bg-deep, against 4.18 to 5.29 for the other four in this block. That is the pastel-hairline failure again, on the theme whose whole idea is hairlines. ONLY THE GOLD MOVED. Darkening all five to the 4.5 floor the way Light and Serene were done takes Now from 5.29:1 to 6.39:1 and visibly weighs down a theme Matt has already approved, to buy contrast a 2px bar does not need. #82662C is the same gold pulled a little toward its red at nine tenths the lightness: 4.54:1 on --bg-deep, and it widens the closest pair in this set (Work against Life) from ΔE 22.5 to 24.4. --brass follows it, because Work IS the metal here. */ --brass:#82662C; --brass-dim:#6E5A2B; --brass-2:#B99A50; --rail-ink:#17150F; --rail-ink-2:#57513F; --rail-ink-3:#6E6759; --area-now:#4E5F8C; --area-people:#9B4E5C; --area-work:#82662C; --area-media:#3D7A72; --area-life:#5E7440; --blue:#4E5F8C; --blue-2:#8C99BC; --violet:#6A4F94; --violet-2:#A492C4; --teal:#3D7A72; --teal-2:#7FAAA4; --green:#5E7440; --green-2:#96A87C; --pink:#9B4E5C; --pink-2:#C48D96; --orange:#8E5A22; --orange-2:#BE9358; --cat-blue:#3E5FB0; --cat-green:#4A7D42; --cat-violet:#6B4FBD; --cat-orange:#A65A1C; --cat-red:#A8402E; --cat-teal:#1C7A6E; --ink:#17150F; --neutral-1:#3A342A; --neutral-2:#221E16; --neutral-ink:#FDFBF7; /* THE ORB'S GROUND, added 6 September with the other light grounds. Alabaster had never defined one, so it wore the hardcoded brown the rule used to fall back to. Tinted to this theme's own --glass-shadow, so the orb casts in the same light as every card on the page. */ --orb-halo: rgba(140,124,100,0.20); --orb-shadow: 0 9px 18px rgba(80,64,48,0.26); --orb-shadow-hi: 0 14px 26px rgba(80,64,48,0.34); /* THE WORK METAL — row 2141. BRONZE — the light themes take their metals OXIDISED, and that is the whole rule for this half of the wardrobe: a real metal is lighter than paper, so a bright one on cream is invisible. What a printer does instead is the aged version of it — bronze, old gold, tarnished silver — which is dark enough to read and still unmistakably metal. 6.29:1 on a resting card, 5.17:1 on a lit one. */ --work-metal:#7A5326; } /* PARCHMENT & CHOCOLATE — warmer and older. Brown ink rather than black, which is the single thing that stops a cream page reading as a pastel. */ :root[data-theme="parchment"]{ --bg-mid:#FAF5EA; --bg-base:#F3ECDE; --bg-deep:#E9E0CD; --text:#241A10; --text-dim:#574733; --text-faint:#6B5D48; /* FIFTY-EIGHT FAILURES ON THE FIRST PASS, and every one of them was the quiet end of the ramp: section labels, feed timestamps, field hints. #7C6E58 computes to 4.84:1 on this theme's flat panel and MEASURED 4.00 in the app, because the panels are not flat — the warm bloom sits under them and lifts the ground by about a fifth. Cream is the one ground where that gap matters, and it is why these two steps are darker than they look like they need to be. Alabaster, whose bloom is weaker, passed at the lighter values on the first run. */ --ring: rgba(36,26,16,0.55); --ring-soft: rgba(36,26,16,0.16); --bloom-1: rgba(122,90,34,0.055); --bloom-2: rgba(140,110,70,0.035); --bloom-3: rgba(122,90,34,0.03); --bloom-4: rgba(90,100,60,0.025); --glass-bg: rgba(255,252,244,0.66); --glass-border: rgba(60,44,20,0.10); --glass-border-hi: rgba(60,44,20,0.19); --glass-shadow: 0 1px 2px rgba(90,70,40,0.08), 0 6px 14px -5px rgba(90,70,40,0.12), 0 22px 44px -14px rgba(90,70,40,0.20), inset 0 1px 0 rgba(255,255,255,0.9); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 46%); --glass-blur: 22px; --glass-sat: 140%; --brass:#7A5A22; --brass-dim:#5C4318; --brass-2:#A67F3A; --rail-ink:#241A10; --rail-ink-2:#63533E; --rail-ink-3:#7C6E58; --area-now:#4A5A83; --area-people:#93414F; --area-work:#7A5A22; --area-media:#33726A; --area-life:#586D3B; --blue:#4A5A83; --blue-2:#8894B4; --violet:#644A8C; --violet-2:#A08EBE; --teal:#33726A; --teal-2:#78A49D; --green:#586D3B; --green-2:#92A478; --pink:#93414F; --pink-2:#BE838C; --orange:#8A5418; --orange-2:#BA8D4E; --cat-blue:#3A5698; --cat-green:#44713C; --cat-violet:#5F47A6; --cat-orange:#95521A; --cat-red:#9A3A2A; --cat-teal:#1A6E62; --ink:#241A10; --neutral-1:#3A2E1E; --neutral-2:#221A10; --neutral-ink:#FAF5EA; /* Same addition, same reason, this theme's own shadow colour. */ --orb-halo: rgba(150,128,92,0.20); --orb-shadow: 0 9px 18px rgba(90,70,40,0.26); --orb-shadow-hi: 0 14px 26px rgba(90,70,40,0.34); /* THE WORK METAL — row 2141. ANTIQUE GOLD — deeper and yellower than Alabaster’s bronze, because Parchment is the older, warmer paper and these two sit next to each other in the picker. 6.01:1 on a resting card, 4.85:1 on a lit one — the tightest pair in the wardrobe, and still above the 4.5:1 that is the floor for body text, which this is four times the size of. */ --work-metal:#75570F; } /* ========================================================================== FATHOM - a deep, heavy blue, and Lucid burning ember in it. ========================================================================== Matt, 23 September, looking at an agenda tray: "a hard orange rim - not ember, hard orange and not what we discussed." He is right, and the rim is not a bug. It is doing exactly what he asked for the day before - "every edge that gets opened is Lucid" - so it refuses the theme's border token and the event kind's colour and takes Lucid's own. Lucid's own, on every theme in the wardrobe until now, is --th-base:#FF6A1E - hue 20, saturation 100, a freshly painted orange. That is the colour he is looking at, on all seven surfaces lucid-rim.js reaches plus the thread's own panel. So this theme is where that gets fixed, and the fix is three lines. An ember is a BANKED COAL: redder, deeper and less saturated than a flame. The three stops below are one object at three temperatures. --th-base #E0522A hue 13, saturation 68, lightness 52 --th-mid #EC8138 the shoulder of the coal, an amber --th-hot #FFEBD4 the core, near white and warm Against #FF6A1E that is seven degrees of hue toward red, thirty-two points of saturation taken out, and four points of lightness down. On a blue ground it stops reading as paint and starts reading as heat. THOSE THREE LINES ARE THE ONLY EMBER IN THIS BLOCK, on purpose. The next thought is one light theme, one dark theme, and a separate choice of what colour Lucid is - so changing Lucid here has to be changing three values and nothing else. Nothing below is mixed from them and nothing below repeats them. --bloom-3 is the closest thing to an exception and it is mixed from this theme's own --orange, which is a warning colour and a different job. WHY THE ROOM IS A COLOUR RATHER THAN A DARKNESS. Midnight is already a blue room, at #030718 - three parts blue in a hundred, a near-black that photographs blue. This page is #0C1A38 falling to #050C1C: hue 218 at 13% lightness, heavy enough that the ember has something to be warm against. That one contrast is the whole theme. An ember on charcoal is a smudge. AND THE METAL IS CHAMPAGNE RATHER THAN BRASS, for the same reason. Every other dark theme wears a gold, and a gold beside an ember is two warm colours arguing about which one is the accent. #CDB07A is that metal with the heat taken out of it, so the only saturated warm thing on screen is Lucid - which is what makes the ember read as an ember instead of as an orange that happens to be there. ========================================================================== */ :root[data-theme="fathom"]{ /* LUCID, AND THE ONLY THREE LINES THAT DECIDE WHAT COLOUR THE OPENED EDGES OF THIS APP ARE. Swapping Lucid's colour on this theme is changing these three values and touching nothing else in the file. */ --th-hot:#FFEBD4; --th-mid:#EC8138; --th-base:#E0522A; --bg-mid:#0C1A38; --bg-base:#08122A; --bg-deep:#050C1C; --text:#EAEFFA; --text-dim:#A7B4D2; --text-faint:#8D9BBC; --ring: rgba(198,216,255,0.45); --ring-soft: rgba(198,216,255,0.22); --wash-soft: rgba(226,236,255,.05); --wash-hover: rgba(226,236,255,.08); --wash-on: rgba(226,236,255,.055); /* Two lamps and no more: the room's own blue, and one warm one mixed from this theme's --orange rather than from the ember above. */ --bloom-1: rgba(99,137,255,0.055); --bloom-2: rgba(169,139,255,0.030); --bloom-3: rgba(239,161,92,0.022); --bloom-4: rgba(168,214,92,0.018); --glass-bg: rgba(20,36,74,0.62); --glass-border: rgba(150,180,255,0.11); --glass-border-hi: rgba(160,190,255,0.40); --glass-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 12px 26px -6px rgba(0,0,0,0.66), 0 40px 80px -20px rgba(0,0,0,0.85), 0 0 40px -12px rgba(30,60,140,0.20), inset 0 1px 0 rgba(170,198,255,0.13); --glass-sheen: radial-gradient(130% 90% at 14% -12%, rgba(150,182,255,0.16), rgba(150,182,255,0.042) 38%, rgba(255,255,255,0) 72%); --glass-blur: 26px; --glass-sat: 145%; --brass:#CDB07A; --brass-dim:#8F7A47; --brass-2:#EADCBC; --rail-ink:#F0EEE8; --rail-ink-2:#9FA3B4; --rail-ink-3:#6C7185; /* THE FIVE, IN A HEAVY BLUE ROOM. Now is the trap Denim's block names: the page is blue and Now is the blue area, so an obvious navy reads as "the page, darker" rather than as a colour that means something. Now is a lifted periwinkle at hue 227 against the ground's 218, and Media is turned to cyan so it cannot be mistaken for a dim Life. Work is the metal, as it is everywhere. */ --area-now:#93A8E6; --area-people:#D1889A; --area-work:#CDB07A; --area-media:#5FB3BE; --area-life:#96BC7C; --blue:#6389FF; --blue-2:#9FB6FF; --blue-glow: rgba(99,137,255,0.45); --green:#A8D65C; --green-2:#CDE8A0; --green-glow: rgba(168,214,92,0.42); --violet:#A98BFF; --violet-2:#D2C4FF; --violet-glow: rgba(169,139,255,0.40); --orange:#EFA15C; --orange-2:#FFCB9B; --orange-glow: rgba(239,161,92,0.42); --pink:#FF6E5C; --pink-2:#FFA89B; --pink-glow: rgba(255,110,92,0.40); --teal:#3FC9BC; --teal-2:#93E6DF; --teal-glow: rgba(63,201,188,0.40); --cat-blue:#4C74E0; --cat-blue-2:#8AA3EE; --cat-blue-glow: rgba(76,116,224,0.45); --cat-green:#4BA878; --cat-green-2:#8BCFAA; --cat-green-glow: rgba(75,168,120,0.40); --cat-violet:#8A6FE0; --cat-violet-2:#B9A6EE; --cat-violet-glow: rgba(138,111,224,0.40); --cat-orange:#D98B3E; --cat-orange-2:#EDB578; --cat-orange-glow: rgba(217,139,62,0.42); --cat-red:#C74A3C; --cat-red-2:#E08277; --cat-red-glow: rgba(199,74,60,0.42); --cat-teal:#28AD9C; --cat-teal-2:#6FCEC2; --cat-teal-glow: rgba(40,173,156,0.40); --cat-gold:#BE9A2E; --cat-gold-2:#E2CB78; --cat-gold-glow: rgba(190,154,46,0.42); --cat-rose:#CE5586; --cat-rose-2:#E895B7; --cat-rose-glow: rgba(206,85,134,0.40); --cat-slate:#6B7D99; --cat-slate-2:#A0AFC8; --cat-slate-glow: rgba(107,125,153,0.38); --cat-moss:#7C9D42; --cat-moss-2:#B0CB80; --cat-moss-glow: rgba(124,157,66,0.40); /* THE ACCENT AND THE PULSE, STATED RATHER THAN INHERITED. :root aliases these onto --blue, and this block restates them so nothing about this theme depends on reading another block to know what it wears. */ --accent: var(--blue); --accent-2: var(--blue-2); --accent-glow: var(--blue-glow); --pulse-lo: color-mix(in srgb, var(--blue) 25%, transparent); --pulse-hi: color-mix(in srgb, var(--blue) 48%, transparent); --brass-glow: rgba(205,176,122,0.40); /* The ink that goes ON an accent fill. Regal is the only other theme that states it, because its accent is a bright brass and needs a dark ink; this accent is a blue, so it takes the page own light ink. */ --on-accent:#EAEFFA; --ink:#040A18; --neutral-1:#E6ECFB; --neutral-2:#ffffff; --neutral-ink:#08122A; --neutral-glow: rgba(210,225,255,.2); --orb-halo: rgba(120,150,220,0.24); --orb-shadow: 0 9px 18px rgba(0,0,0,0.42); --orb-shadow-hi: 0 14px 26px rgba(0,0,0,0.50); } /* ========================================================================== THE MATTE FINISH — one attribute, and eighty-five glows go out. ========================================================================== Placed AFTER the six theme blocks deliberately. :root[data-finish] and :root[data-theme] have identical specificity, so the later block wins the tie, and that is what lets a theme set its own colours above while the finish takes the halo off them here. STEP ONE, AND IT IS MOST OF THE WORK: every --*-glow token goes transparent. Eighty of the eighty-five glow declarations in this file are of the form `box-shadow: 0 0 Npx var(--something-glow)`, and a transparent colour makes each of them paint nothing at all. No selector had to be found, and none can be missed. It also survives applyAccentColor(), which writes `--accent-glow: var(--blue-glow)` as an inline style on the root element: the inline value wins, points at --blue-glow, and --blue-glow is transparent here. Nothing has to know about anything else. --cat-red-glow is the exception and it is the point of the whole exercise: it is what the overdue alarm is built from, and it stays lit. */ :root[data-finish="matte"]{ --accent-glow: transparent; --blue-glow: transparent; --green-glow: transparent; --violet-glow: transparent; --orange-glow: transparent; --pink-glow: transparent; --teal-glow: transparent; --brass-glow: transparent; --neutral-glow: transparent; --cat-blue-glow: transparent; --cat-green-glow: transparent; --cat-violet-glow: transparent; --cat-orange-glow: transparent; --cat-teal-glow: transparent; --cat-gold-glow: transparent; --cat-rose-glow: transparent; --cat-slate-glow: transparent; --cat-moss-glow: transparent; } /* STEP TWO: THE FIVE THAT HARD-CODE THEIR OWN HALO and therefore cannot be switched off by a token. Each is named, and each is replaced rather than merely removed — a control that loses its only "I am on" signal is worse than one that glows. */ :root[data-finish="matte"] .pill.active{ background:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-finish="matte"] .ht-breathe-dot, :root[data-finish="matte"] .em-toggle-pill.active, :root[data-finish="matte"] .tlf-chip.active{ box-shadow:none; } /* The assistant pill keeps a cast shadow and loses the violet bloom around it. It is a floating object; it still needs to look like one. */ /* The doubled attribute is not a typo. :root[data-mode="light"] .chat-pill and the five :root[data-tone=…] .chat-pill rules both sit LATER in this file at the same specificity, so a single-attribute selector here loses the tie to every one of them and the violet bloom survives on the two paper themes. Doubling data-finish buys one more attribute of specificity, which is the smallest change that wins without reaching for !important. */ :root[data-finish="matte"][data-finish="matte"] .chat-pill{ filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)); } /* AND THE MATTE PAPERS READ THE SAME TOKEN, WHICH IS HOW THE FIRST FIX FOR THIS MISSED THEM. 6 September. The note by :root[data-mode="light"] .chat-pill explains the dead --orb-shadow-1; pointing that rule at the theme's real token fixed Light, Alabaster's glow twin and the three Serenity papers, and DID NOTHING AT ALL for Denim and Terracotta — the two coloured papers, which are the whole reason the shadow's hue matters. This rule carries one more attribute than that one and quietly won the cascade, so the orb on a blue page went on sitting in the same hardcoded brown. Found by breaking the harness on purpose: with a deliberately invalid --orb-shadow on Terracotta the orb still had a shadow, which it could not have had if that token were the one painting it. The matte finish takes the GLOW off the orb; it was never supposed to have an opinion about the cast shadow, which is the same physical fact on both finishes. So it defers to the same two tokens and the difference between matte and glow stays what it says it is. */ :root[data-finish="matte"][data-finish="matte"][data-mode="light"] .chat-pill{ filter:drop-shadow(var(--orb-shadow)); } :root[data-finish="matte"][data-finish="matte"] .chat-pill:hover{ filter:drop-shadow(0 14px 32px rgba(0,0,0,.58)); } :root[data-finish="matte"][data-finish="matte"][data-mode="light"] .chat-pill:hover{ filter:drop-shadow(var(--orb-shadow-hi)); } /* STEP THREE: FOCUS RINGS, WHICH WOULD OTHERWISE HAVE GONE INVISIBLE. Every one of these was `0 0 0 3px var(--accent-glow)` — a blurred halo doing the job of a focus indicator. Turning the token transparent would have silently removed the only mark saying which field has the keyboard, which is not a style regression, it is an accessibility one. A solid 2px ring is the same statement, sharper, and it survives every ground here. */ :root[data-finish="matte"] .mail-search-input:focus, :root[data-finish="matte"] .field:focus, :root[data-finish="matte"] .login-input:focus, :root[data-finish="matte"] .chat-input:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent) !important; border-color:var(--accent); } /* STEP FOUR: WHAT REPLACES THE GLOW AS A SIGNAL. ------------------------------------------------------------------ A CONTACT ROW'S CATEGORY was said entirely by a coloured wash bled in from the left edge, built out of --row-glow — so a matte theme would have taken the category off the contacts page altogether. It becomes a 3px keyline in the same colour, which is the treatment a mail row has always used for its account and is the more legible of the two anyway: an edge has a position, a bloom only has a direction. renderContacts() and the organization rows now write --row-color alongside --row-glow so there is a solid colour here to draw with; see the note at those two lines in app.js. */ :root[data-finish="matte"] .contact-row{ background-image:none; border-left:3px solid var(--row-color, transparent); } /* THE INNER CIRCLE keeps its halo's meaning and loses its haze: two rings, the outer one a tint, instead of a 16px bloom that on a near-black ground was mostly invisible and on cream was a smudge. */ :root[data-finish="matte"] .avatar.has-halo{ box-shadow:0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); animation:none; } /* ELEVATION INSTEAD OF EMISSION. A card that was glowing to say "I am on top of the page" now says it with a longer shadow — the thing that is actually true of an object above a surface. */ :root[data-finish="matte"] .btn.primary, :root[data-finish="matte"] .project-card:hover, :root[data-finish="matte"] .task-card:hover, :root[data-finish="matte"] .mail-row:hover{ box-shadow:var(--elev-raised); } /* THE SIGNATURE TAB, WHICH NOTHING COULD READ IN EITHER DIRECTION. .sig-tab.active paints its label on color-mix(--accent 78%, #000). On the original themes --accent is a bright blue and that mix is dark enough for white; on Forest and Ink the accent is already a muted mid-tone, so the mix lands in the middle of the range where NEITHER white nor near-black reaches 4.5:1 — white measured 4.03 on Forest and dark measured 4.37 on Ink. There is no ink that fixes a fill like that; the fill is the bug. Taking the mix down to 52% black makes it properly dark, and white on it clears 6:1 on all six grounds. Found by tests/test-readability.js, which now runs every one of them. */ :root[data-finish="matte"] .sig-tab.active{ background:color-mix(in srgb, var(--accent) 52%, #000); border-color:color-mix(in srgb, var(--accent) 52%, #000); color:#fff; } /* AND THE ONE THAT KEEPS ITS GLOW. Stated here rather than left implicit, because the next person to read this block will otherwise assume the overdue badge was missed. It is the only emitting object left in a matte theme, and that is precisely why it works. */ :root[data-finish="matte"] .spine-count.has-overdue, :root[data-finish="matte"] .spine-attn-collapsed.has-overdue svg{ /* left lit on purpose */ } /* ============================================================ SERENE — the light themes. ============================================================ The brief was "pastels, light creamy goodness", and the trap it named was the obvious approach: invert Midnight's tokens and ship it. That produces what every app's light mode looks like — grey-white, cold, clinical. It would earn the name Serene about as well as a hospital corridor does. Midnight works because it has a language, not just a darkness: cards the same value as the room, depth from a lit top edge and a contained pool of light in one corner. Serene needs its own language rather than a negation of that one, and it is this: WARMTH INSTEAD OF WHITE. Every surface sits on the warm side of neutral. Nothing here is #fff. Warmth is most of what separates "serene" from "blank", and it is the first thing lost by inverting. SHADOW INSTEAD OF GLOW. Midnight's contained glow pools have no light equivalent — light does not pool on paper. The counterpart is a soft, warm, low-contrast cast shadow: cards as paper resting on paper. The shadows are TINTED, never grey. A neutral shadow on a warm ground reads as dirt. PASTELS CARRY THE HUE, NOT THE CONTRAST. This is the part that goes wrong. Pastel-on-cream is where accessibility dies, so the pastel lives in the -2 and -glow tokens — gradients, halos, fills behind dark text — while the base token stays saturated enough to be read as text on cream. Every base below clears 4.5:1 against its own background; tests/test-serene-contrast.js fails the build if one stops. THREE OF THEM, because the brief asked for interpretations to compare rather than one "correct" answer, and because "serene" is a feeling that could reasonably mean any of these three. Each block is deliberately self-contained — some duplication, but each can be adjusted without working out what it inherits. */ /* ------------------------------------------------------------------ TWO AXES, NOT THREE THEMES. Serene shipped as three fixed themes. Matt's reaction was the useful kind: "the first one is the base one, but I also really like the third one in green" — which is not indecision, it is two separate preferences that had been welded together. They are separate things. The GROUND is warmth, texture and the colour of the shadow a card casts. The PALETTE is which six hues the accounts and categories draw from. Nothing makes them one choice except that they were written as one block. So they are now two attributes, and any of the nine combinations works. The three original themes survive as the three matched pairs — they are what the presets select — and Linen paper with the Cool palette, which is the one he actually asked for, is simply another of the nine. Every combination is checked: tests/test-serene-contrast.js walks the whole 3x3 grid rather than the three presets, because a palette that passes on its own ground and fails on another would be a failure nobody would find until it was picked. ------------------------------------------------------------------ */ /* LINEN — unbleached paper. The quietest ground: warm ivory, and shadows tinted toward its own brown so a card reads as paper resting on paper. */ :root[data-paper="linen"]{ --bg-mid: #FAF6EC; --bg-base: #F4EEE0; --bg-deep: #ECE4D2; --bloom-1: rgba(126,146,181,0.10); --bloom-2: rgba(168,146,186,0.09); --bloom-3: rgba(214,166,116,0.10); --bloom-4: rgba(150,175,138,0.09); --glass-bg: rgba(255,253,248,0.78); --glass-border: rgba(74,58,40,0.10); --glass-border-hi: rgba(74,58,40,0.18); --glass-shadow: 0 1px 2px rgba(92,72,48,0.07), 0 4px 10px -3px rgba(92,72,48,0.09), 0 18px 36px -12px rgba(92,72,48,0.14), inset 0 1px 0 rgba(255,255,255,0.85); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 52%); --glass-blur: 18px; --glass-sat: 128%; --text: #2E2620; /* THE PAPERS GOT DARKER SECONDARY INK, 9 OCTOBER, AND THE FLOOR IS WHY. --text-dim and --text-faint were chosen on these three papers to a COMPUTED ratio, and computed they were fine: linen --text-dim measured 5.37:1 on its own ground. In PIXELS at 11px they were not. The darkest sixteenth of a crop through an 11px glyph never reaches the pure colour, so tests/test-readability.js -- which photographs the page rather than reading this file -- was getting 4.32:1 out of .ask-allow-text, 4.25 to 4.42 out of .agenda-meta-txt, 4.39 to 4.49 out of .lane-fig and 4.50 out of .work-row-kind. All of them are this token, all of them are small, and all of them were under the 4.5 floor on the ground Matt reads on. Matt, 9 October, asked whether to darken the Serene text and said yes to all of it rather than to the worst of it. So both tokens move on all three papers, toward each paper own ink rather than toward grey: linen --text-dim goes 6.78:1 computed where it was 5.37, mist 6.70 where it was 5.18, blush 6.80 where it was 5.17, and --text-faint lands at 6.32, 6.53 and 6.52. That is roughly 5.3:1 once the instrument has had its say, which clears the floor with room rather than sitting on it. NOTHING DARK IS TOUCHED. These are the three paper blocks; hearth, ink and chocolate declare their own --text-dim and --text-faint elsewhere and are not reachable from here. Raising contrast cannot fail a check that asserts a minimum, and tests/test-serene-contrast.js asserts minimums. */ --text-dim: #5A4F42; /* was #6B5F52 -- see THE PAPERS GOT DARKER SECONDARY INK above */ --text-faint: #5E554A; /* was #6F6559 */ --ring: rgba(46,38,32,0.55); --ring-soft: rgba(46,38,32,0.14); --ink: #2E2620; --neutral-1: #4A3F36; --neutral-2: #2E2620; --neutral-ink: #FAF6EC; --neutral-glow: rgba(74,63,54,.14); --orb-halo: rgba(150,130,110,0.20); --orb-shadow: 0 9px 18px rgba(92,72,48,0.26); --orb-shadow-hi: 0 14px 26px rgba(92,72,48,0.34); /* THE WORK METAL — row 2141. TARNISHED SILVER, turned to this paper: warm grey. Serenity is the cool, cerebral face of the app and a gold count on it would be the warm, traditional register the whole family is written against. The paper carries it rather than the palette, because what the metal has to survive is the GROUND, and the ground is the paper. 6.77:1 on a resting card, 5.51:1 on a lit one. */ --work-metal:#5A564F; } /* BLUSH — the warmest ground, and the closest to the words "creamy goodness". Off ivory toward peach, with the shadow tinted further into red so it stays part of the same page rather than sitting in grey. */ :root[data-paper="blush"]{ --bg-mid: #FDF5EF; --bg-base: #F9EBE1; --bg-deep: #F2DFD2; --bloom-1: rgba(198,156,146,0.12); --bloom-2: rgba(186,152,178,0.10); --bloom-3: rgba(232,176,128,0.13); --bloom-4: rgba(158,182,150,0.09); --glass-bg: rgba(255,252,249,0.80); --glass-border: rgba(96,58,44,0.09); --glass-border-hi: rgba(96,58,44,0.17); --glass-shadow: 0 1px 2px rgba(122,74,54,0.07), 0 4px 10px -3px rgba(122,74,54,0.10), 0 18px 38px -12px rgba(122,74,54,0.15), inset 0 1px 0 rgba(255,255,255,0.88); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0) 52%); --glass-blur: 20px; --glass-sat: 136%; --text: #33241E; --text-dim: #614D42; /* was #755E52 */ --text-faint: #605146; /* was #736255 */ --ring: rgba(51,36,30,0.55); --ring-soft: rgba(51,36,30,0.14); --ink: #33241E; --neutral-1: #54403A; --neutral-2: #33241E; --neutral-ink: #FDF5EF; --neutral-glow: rgba(84,64,58,.14); --orb-halo: rgba(190,140,120,0.22); --orb-shadow: 0 9px 18px rgba(122,74,54,0.28); --orb-shadow-hi: 0 14px 26px rgba(122,74,54,0.36); /* THE WORK METAL — row 2141. TARNISHED SILVER, turned to this paper: a red-grey. Serenity is the cool, cerebral face of the app and a gold count on it would be the warm, traditional register the whole family is written against. The paper carries it rather than the palette, because what the metal has to survive is the GROUND, and the ground is the paper. 6.84:1 on a resting card, 5.54:1 on a lit one. */ --work-metal:#62534D; } /* MIST — the cool argument. Pale sage and stone rather than cream: the calm of an early morning room rather than of paper. Included because the brief assumed warmth, and that was worth testing rather than agreeing with — and it is the one Matt picked the green out of. */ :root[data-paper="mist"]{ --bg-mid: #F6F7F2; --bg-base: #EDF0E9; --bg-deep: #E2E7DD; --bloom-1: rgba(130,158,178,0.12); --bloom-2: rgba(158,150,186,0.09); --bloom-3: rgba(206,180,140,0.07); --bloom-4: rgba(146,178,146,0.12); --glass-bg: rgba(253,254,251,0.80); --glass-border: rgba(42,58,48,0.10); --glass-border-hi: rgba(42,58,48,0.18); --glass-shadow: 0 1px 2px rgba(52,72,60,0.07), 0 4px 10px -3px rgba(52,72,60,0.09), 0 18px 36px -12px rgba(52,72,60,0.14), inset 0 1px 0 rgba(255,255,255,0.90); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0) 52%); --glass-blur: 20px; --glass-sat: 124%; --text: #232B26; --text-dim: #4C5550; /* was #5C6660 */ --text-faint: #505652; /* was #616762 */ --ring: rgba(35,43,38,0.55); --ring-soft: rgba(35,43,38,0.14); --ink: #232B26; --neutral-1: #3C4740; --neutral-2: #232B26; --neutral-ink: #F6F7F2; --neutral-glow: rgba(60,71,64,.14); --orb-halo: rgba(120,145,140,0.20); --orb-shadow: 0 9px 18px rgba(52,72,60,0.26); --orb-shadow-hi: 0 14px 26px rgba(52,72,60,0.34); /* THE WORK METAL — row 2141. TARNISHED SILVER, turned to this paper: a green-grey. Serenity is the cool, cerebral face of the app and a gold count on it would be the warm, traditional register the whole family is written against. The paper carries it rather than the palette, because what the metal has to survive is the GROUND, and the ground is the paper. 6.83:1 on a resting card, 5.51:1 on a lit one. */ --work-metal:#4E5953; } /* ------------------------------------------------------------------ WHICH AXIS OWNS THE FIVE AREA COLOURS — and why it is this one. Serene is a paper crossed with a palette, so "give Serene its own area colours" has three possible answers: one set for all nine combinations, one per paper, or one per palette. It is one per palette, and the reason is the split the TWO AXES note above already draws. The GROUND is warmth and texture and the colour of a shadow; the PALETTE is which hues this copy of the app is drawn in. An area colour is a hue, so it belongs to the palette — and the three papers are within four points of luminance of each other, which means a set that holds on one holds on all three. Each of these three blocks is measured against the deepest ground of all THREE papers, not just the one it came from, for exactly the reason the harness walks the grid rather than the presets. The five are drawn from the palette's own six hues — Now from its blue, People from its pink, Work from its orange, Media from its teal, Life from its green — and then taken one step down. The step is not decoration: those six are measured as text on a CARD, and every one of them clears 4.5:1 there. The rail is not on a card. It runs the height of the window, over the page gradient, and at the bottom of that gradient the palette's own blue measures 4.35:1 and its orange 3.96:1. Nine tenths of the lightness, applied to all five so their relative weights survive, puts the whole set over 4.5:1 on the deepest ground of any of the three papers. THE METAL FOLLOWS WORK, as everywhere else in this file. Serene had no metal of its own at all — all nine combinations inherited #8E7639 from the cream fallback above, which meant picking the Cool palette changed six accents and left the masthead rule and every "this is yours" count sitting in the Warm palette's gold. ------------------------------------------------------------------ */ /* SOFT — chalky and dusty, like gouache on a warm ground. Pigment rather than ink. Pairs most naturally with Linen, which is where it came from. */ :root[data-palette="soft"]{ --blue: #4A6B93; --blue-2: #AFC4DC; --blue-glow: rgba(175,196,220,0.42); --green: #537648; --green-2: #B4CDA6; --green-glow: rgba(180,205,166,0.42); --violet: #6E5A96; --violet-2: #C3B4DC; --violet-glow: rgba(195,180,220,0.40); --orange: #99612D; --orange-2: #E5C29A; --orange-glow: rgba(229,194,154,0.44); --pink: #A85462; --pink-2: #E0B4BC; --pink-glow: rgba(224,180,188,0.40); --teal: #3A7973; --teal-2: #A5CBC6; --teal-glow: rgba(165,203,198,0.42); --cat-blue: #4A6B93; --cat-blue-2: #AFC4DC; --cat-blue-glow: rgba(175,196,220,0.36); --cat-green: #537648; --cat-green-2: #B4CDA6; --cat-green-glow: rgba(180,205,166,0.36); --cat-violet: #6E5A96; --cat-violet-2: #C3B4DC; --cat-violet-glow: rgba(195,180,220,0.34); --cat-orange: #99612D; --cat-orange-2: #E5C29A; --cat-orange-glow: rgba(229,194,154,0.36); --cat-red: #A14A3E; --cat-red-2: #DDB0A6; --cat-red-glow: rgba(221,176,166,0.34); --cat-teal: #3A7973; --cat-teal-2: #A5CBC6; --cat-teal-glow: rgba(165,203,198,0.36); --pulse-lo: rgba(175,196,220,0.26); --pulse-hi: rgba(175,196,220,0.46); /* The five, chalked down for the rail. Media is the one that is not simply this palette's teal darkened: #3A7973 sits close enough to the green that the two read as one dusty pigment at dot size, and the whole point of a chalky palette is that it is already low in chroma — there is no saturation left to tell them apart with. #316E6E is the same teal turned a few degrees toward cyan, which takes the closest pair from ΔE 21.9 to 26.2 without making either colour louder. */ --area-now: #436084; --area-people: #974C58; --area-work: #7C5F2E; --area-media: #316E6E; --area-life: #4F6B3E; --brass: #7C5F2E; --brass-dim: #5D4723; } /* WARM — the same hues pushed toward apricot, rose and clay. The two cool hues are held further from the rest here than in the other palettes, because a warm palette is the one at risk of collapsing into one blur. */ :root[data-palette="warm"]{ --blue: #4F6A96; --blue-2: #B6C7E0; --blue-glow: rgba(182,199,224,0.44); --green: #55764C; --green-2: #B8CDAC; --green-glow: rgba(184,205,172,0.42); --violet: #7A5A93; --violet-2: #CFB6DC; --violet-glow: rgba(207,182,220,0.42); --orange: #A55B21; --orange-2: #F0C199; --orange-glow: rgba(240,193,153,0.48); --pink: #B04A57; --pink-2: #EFB0B7; --pink-glow: rgba(239,176,183,0.44); --teal: #377872; --teal-2: #A8CDC8; --teal-glow: rgba(168,205,200,0.42); --cat-blue: #4F6A96; --cat-blue-2: #B6C7E0; --cat-blue-glow: rgba(182,199,224,0.38); --cat-green: #55764C; --cat-green-2: #B8CDAC; --cat-green-glow: rgba(184,205,172,0.36); --cat-violet: #7A5A93; --cat-violet-2: #CFB6DC; --cat-violet-glow: rgba(207,182,220,0.36); --cat-orange: #A55B21; --cat-orange-2: #F0C199; --cat-orange-glow: rgba(240,193,153,0.40); --cat-red: #A8453F; --cat-red-2: #E8ADA6; --cat-red-glow: rgba(232,173,166,0.36); --cat-teal: #377872; --cat-teal-2: #A8CDC8; --cat-teal-glow: rgba(168,205,200,0.36); --pulse-lo: rgba(240,193,153,0.28); --pulse-hi: rgba(240,193,153,0.48); /* The five for the warm palette, and this is the one the block above warns about: "a warm palette is the one at risk of collapsing into one blur." Three of the five — People, Work, Life — are already on the warm side, so Media is held further out here than in the other two palettes (#2C6B6B rather than a darkened #377872) and Life is allowed a little more yellow. That is the same move the accents make for the same reason, and it buys the widest closest-pair of the three palettes. */ --area-now: #465E85; --area-people: #9C414D; --area-work: #855C26; --area-media: #2C6B6B; --area-life: #516A3E; --brass: #855C26; --brass-dim: #63451C; } /* COOL — sage, slate and deep teal. This is the green Matt picked out of Mist, and it is now available on any of the three papers. */ :root[data-palette="cool"]{ --blue: #41688C; --blue-2: #A8C3DB; --blue-glow: rgba(168,195,219,0.42); --green: #4F7A46; --green-2: #A9C8A0; --green-glow: rgba(169,200,160,0.42); --violet: #65588F; --violet-2: #BAB2D8; --violet-glow: rgba(186,178,216,0.40); --orange: #98642F; --orange-2: #DDBE96; --orange-glow: rgba(221,190,150,0.42); --pink: #9E5060; --pink-2: #D9AFB8; --pink-glow: rgba(217,175,184,0.40); --teal: #2E7971; --teal-2: #9AC8C2; --teal-glow: rgba(154,200,194,0.42); --cat-blue: #41688C; --cat-blue-2: #A8C3DB; --cat-blue-glow: rgba(168,195,219,0.36); --cat-green: #4F7A46; --cat-green-2: #A9C8A0; --cat-green-glow: rgba(169,200,160,0.36); --cat-violet: #65588F; --cat-violet-2: #BAB2D8; --cat-violet-glow: rgba(186,178,216,0.34); --cat-orange: #98642F; --cat-orange-2: #DDBE96; --cat-orange-glow: rgba(221,190,150,0.36); --cat-red: #96453C; --cat-red-2: #D2A69E; --cat-red-glow: rgba(210,166,158,0.34); --cat-teal: #2E7971; --cat-teal-2: #9AC8C2; --cat-teal-glow: rgba(154,200,194,0.36); --pulse-lo: rgba(168,195,219,0.26); --pulse-hi: rgba(168,195,219,0.46); /* The five for the cool palette. The metal is the interesting one: a tobacco gold in a room of sage and slate looks like it wandered in from Parchment, so #715F2F is an olive gold — the same step down from this palette's own #98642F, which was already the coolest of the three oranges. Work and the masthead rule are that colour, which is what makes choosing Cool change the metal as well as the accents. */ --area-now: #3A5E7E; --area-people: #8E4856; --area-work: #715F2F; --area-media: #296D66; --area-life: #476E3F; --brass: #715F2F; --brass-dim: #554723; } /* Swatch colours. Deliberately literal rather than var(--bg-mid): a swatch has to show the paper you are NOT currently using, so it cannot read from the tokens that are currently applied. These are the only duplicated values in the theme system, and test-serene-contrast.js checks they still match the blocks they represent. */ [data-sw-paper="linen"]{ background:linear-gradient(135deg,#FAF6EC,#ECE4D2); } [data-sw-paper="blush"]{ background:linear-gradient(135deg,#FDF5EF,#F2DFD2); } [data-sw-paper="mist"] { background:linear-gradient(135deg,#F6F7F2,#E2E7DD); } [data-sw-palette="soft"]{ background:linear-gradient(100deg,#4A6B93 0 33%,#537648 33% 66%,#99612D 66%); } [data-sw-palette="warm"]{ background:linear-gradient(100deg,#4F6A96 0 33%,#B04A57 33% 66%,#A55B21 66%); } [data-sw-palette="cool"]{ background:linear-gradient(100deg,#41688C 0 33%,#4F7A46 33% 66%,#2E7971 66%); } /* ---- LITE: the same app, without the compositor melting ------------- Only three things change, and none of them is layout or colour: · backdrop blurs become flat translucent fills · the orb's halo stops breathing · continuous decorative animation stops Everything keeps its position, its size and its palette, so switching between the two is close to invisible in a still frame. */ /* A universal selector on purpose. The first version listed the six classes that were known to use a backdrop blur, and sixteen elements still had one — a panel style here, a `style="backdrop-filter:…"` on a floating button there. In a mode whose entire job is "draw nothing expensive", a list that can be incomplete is the wrong shape. This one cannot miss, it beats inline styles, and it costs nothing at all in the normal mode because the attribute is not there. */ :root[data-fx="lite"] *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* The blur was doing two jobs: softening what is behind the panel, and making the panel read as a distinct surface. Losing the first is fine; losing the second is not, so the fill is made more opaque to compensate — which is what keeps the two modes looking like the same app. */ :root[data-fx="lite"] .glass{ /* The sheen layer is repeated here because this rule replaces the whole `background` shorthand — dropping it would make cheap mode a visibly flatter panel rather than the same panel drawn cheaply. */ background:var(--glass-sheen), color-mix(in srgb, var(--glass-bg) 100%, var(--bg-base) 55%); } :root[data-fx="lite"] .modal-backdrop{ background:color-mix(in srgb, var(--bg-deep) 78%, transparent); } /* Anything decorative that loops for ever. Deliberately NOT a blanket `animation:none` — the view cross-fade, toasts and the send whoosh are feedback, and an app whose transitions vanish reads as broken rather than as fast. */ :root[data-fx="lite"] [class*="breathe"]{ animation:none !important; } /* Someone who has asked their system for less motion gets lite as the starting point, before any measurement happens. */ @media (prefers-reduced-motion: reduce){ :root:not([data-fx="full"]) .glass{ backdrop-filter:none; -webkit-backdrop-filter:none; } } *{ box-sizing:border-box; } html,body{ height:100%; margin:0; } /* WHY THIS IS data-mode AND NOT data-theme. Every one of these guards used to read :not([data-theme="light"]) — one theme name, hard-coded, thirty times. Adding a second light theme would have handed it the whole dark-mode glow treatment: contained glow pools on cream, which is not a design choice, it is a smudge. setTheme now stamps data-mode="light" or "dark" alongside the name, so "is this a light theme" is a question with one answer in one place. */ /* THE RAIL LEFT THIS GROUP ON 2 SEPTEMBER, and it is the one row of the glow treatment that is now wrong rather than merely different. A 1px ring plus a 22px halo around the current nav row is three statements of one fact — the wash, the ring, the glow — and it is what made the spine read as a demo beside pages that had already been quietened. The current row is now a 2px bar in its area's colour; see .nav-item.active further down this file for the argument. Deleted here rather than overridden there, because this selector carries :root and would win. */ :root:not([data-mode="light"]) .mail-row{ box-shadow:0 0 14px 0 var(--row-glow, transparent); } :root:not([data-mode="light"]) .mail-row:hover{ box-shadow:0 0 18px 1px var(--row-glow, var(--accent-glow)); } :root:not([data-mode="light"]) .mail-row.selected{ box-shadow:0 0 0 1px color-mix(in srgb, var(--row-color, var(--accent)) 35%, transparent), 0 0 28px 4px var(--row-glow, var(--accent-glow)); } :root:not([data-mode="light"]) .list-check.done{ box-shadow:0 0 12px 2px var(--green-glow); } :root:not([data-mode="light"]) .contact-row{ background-image: linear-gradient(90deg, color-mix(in srgb, var(--row-glow, transparent) 65%, transparent) 0%, transparent 45%); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 20px -6px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.55), 0 0 26px -8px var(--row-glow, transparent); } :root:not([data-mode="light"]) .contact-row:hover{ transform:translateY(-3px); background-image: linear-gradient(90deg, color-mix(in srgb, var(--row-glow, transparent) 80%, transparent) 0%, transparent 50%); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px -6px rgba(0,0,0,.55), 0 36px 72px -20px rgba(0,0,0,.6), 0 0 38px -4px var(--row-glow, transparent); } :root:not([data-mode="light"]) .rel-strong{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat-green) 35%, transparent), 0 0 16px 0 var(--cat-green-glow); } :root:not([data-mode="light"]) .rel-stable{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat-violet) 30%, transparent), 0 0 16px 0 var(--cat-violet-glow); } :root:not([data-mode="light"]) .rel-cooling, :root:not([data-mode="light"]) .rel-stale{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat-blue) 40%, transparent), 0 0 16px 0 var(--cat-blue-glow); } body{ position:relative; color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow:hidden; background: radial-gradient(900px 620px at 12% -8%, var(--bloom-1), transparent 60%), radial-gradient(1000px 760px at 108% 18%, var(--bloom-2), transparent 58%), radial-gradient(760px 620px at 90% 90%, var(--bloom-3), transparent 55%), radial-gradient(760px 620px at 10% 118%, var(--bloom-4), transparent 60%), linear-gradient(180deg, var(--bg-mid), var(--bg-base) 55%, var(--bg-deep)); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Subtle film-grain over the bloom gradients — without it, large soft radial glows read as flat/plasticky (banding, "generic AI dashboard" look). A faint noise layer is what most premium dark UIs use to make a gradient feel like it has material, not just color. Kept very low-opacity so it reads as texture, not visible speckle. */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .app{ position:relative; z-index:1; } /* ---- THE EVENT BANNER (row 1922, cut to a third on 22 September) ------- Matt, 22 September: "Popup reminder is really cool with the countdown. But when I X out, it keeps coming back. Need a way to dismiss permenatly. Also it is way too big and bulky. Needs to shrink to 1/3rd the current length and hight." It was a 640 x 97 card and it carried nine things: a 32px countdown, the title, the start and end times, which call it is, four faces, the names under them, a line about anything clashing, a line about the weather, and two buttons. Every one of them was true. None of them was the question at 09:56, which is "what is it, how long have I got, and can I get rid of this" — and the price of the other six was a card a third of the way up the screen. 212 x 32 holds the countdown he likes, which thing it is, one thing to press and the X. What is gone is not lost: the hours, the room and the people are on the event itself, one press away on the same card; the coat sentence is still above the agenda where it was written first, and it is still here as the forecast's own icon with the sentence on it; and a second thing on the same minute is still said, as +1 rather than as a sentence. Still a banner and never a modal, still bottom-centre, still built from app/tokens.css, and the rail still carries the calendar's own colour. */ .meeting-banner{ position:fixed; bottom:var(--space-8); left:50%; z-index:998; transform:translateX(-50%) translateY(140%); opacity:0; pointer-events:none; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); /* A third of 640, rounded down to the 4px grid. Narrower than the old card was tall. */ width:min(212px, calc(100vw - var(--space-10))); /* The event's own colour, written onto the element by showMeetingBanner() from the calendar the event lives on. The rail, the pip and the fuse all read it, so the card carries one statement about which calendar this is rather than three. The fallback matters: this rule has to be right on a card drawn before the property is set, and on the bare markup a check builds by hand. */ --mb-accent: var(--accent); /* ONE ROW, AND THE HEIGHT IS THE POINT. 24px of content between 4px of padding is exactly 32 — a third of 97 is 32.3 — so nothing in here may be taller than 24px, which is what settles every size below. */ display:flex; align-items:center; gap:var(--space-1); min-height:var(--space-8); padding:var(--space-hair) var(--space-1) var(--space-hair) var(--space-3); border-radius:var(--radius-pill); overflow:hidden; box-shadow: var(--glass-shadow), var(--elev-floating); } .meeting-banner.show{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; } /* THE RAIL, now a hairline inside the pill's own curve rather than a bar down a card's edge. Absolute, so it is not a flex item competing for the width the title needs. */ .mb-rail{ position:absolute; left:var(--space-2); top:var(--space-2); bottom:var(--space-2); width:var(--space-hair); border-radius:var(--radius-pill); background:var(--mb-accent); } /* THE COUNTDOWN. The one thing on here he asked to keep, so it is the only thing given two lines. THE WORD ABOVE IT IS LOAD-BEARING. "4:00" on its own beside a meeting title reads as four o'clock, and it reads identically four minutes before the hour and four minutes after it, which are opposite facts. IN / AGO / LATE are short enough that the column is no wider than the digits, so the distinction costs nothing the title would otherwise have. */ .mb-clock{ display:flex; flex-direction:column; align-items:flex-start; flex:none; line-height:1; } .mb-eyebrow{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--type-label); font-weight:var(--weight-loud); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); line-height:1; white-space:nowrap; } .mb-count{ font-size:var(--type-body); font-weight:var(--weight-loud); line-height:1; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; } /* The dot is the pip that says this is happening NOW rather than being a record of something. Its colour comes from the event, like the rail. Kept breathing: tests/test-icon-motion.js holds a list of the motion in this app that earned its place and "a meeting starting now" is on it. */ .mb-dot{ width:var(--space-2); height:var(--space-2); border-radius:var(--radius-round); background:var(--mb-accent, var(--green)); box-shadow:0 0 var(--space-3) var(--space-hair) var(--green-glow); flex:none; animation:breathe 1.6s var(--ease-in-out) infinite; } /* WHICH ONE. The only thing that gets the leftover width, and the only thing allowed to be cut short — the whole title is on the element as a tooltip, and one press opens the event with everything that used to be printed here. */ .mb-title{ flex:1 1 auto; min-width:0; font-size:var(--type-body); font-weight:var(--weight-strong); letter-spacing:-.01em; line-height:1.2; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Two things on one minute. Still said, because "you have a meeting at ten" and "you have two things at ten" are different statements and only one of them is true — but said as a count with the other one named on it, not as a sentence across the bottom of a card. */ .mb-also{ flex:none; font-size:var(--type-label); font-weight:var(--weight-loud); line-height:1; color:var(--text-faint); padding:var(--space-hair) var(--space-1); border-radius:var(--radius-pill); border:1px solid var(--glass-border); cursor:default; } /* THE COAT (row 1757). The forecast's own icon, with the sentence on it. The rule about what may say this and when has not moved an inch — see mbCoatLine() — only how much room the answer takes. */ .mb-coat{ flex:none; display:inline-flex; align-items:center; color:var(--blue); cursor:default; } .mb-coat svg{ width:var(--space-4); height:var(--space-4); } /* THE ACTION, and there is only ever one of it. Join when there is a link, Open when there is something behind it, nothing at all otherwise — a Join button beside a meeting with no link is the exact thing the house rule about controls that look like they work forbids. The service is named on the button rather than in it: "Join Teams" does not fit in 212 pixels and a tooltip that says it is better than a card that does not. */ .mb-acts{ display:flex; align-items:center; flex:none; } .mb-act{ font:inherit; display:inline-flex; align-items:center; justify-content:center; padding:var(--space-hair); border-radius:var(--radius-round); border:1px solid var(--glass-border-hi, var(--glass-border)); background:transparent; color:var(--text); cursor:pointer; white-space:nowrap; line-height:1; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .mb-act svg{ width:var(--space-4); height:var(--space-4); display:block; } .mb-act:hover{ background:var(--glass-bg); border-color:var(--text-faint); } /* The primary reads in the app's own primary language — the accent gradient and --ink, which is the "text that sits on the accent" colour every theme in this file already states. A literal white here would be a hardcoded colour in a new rule, and it would be the wrong white on Alabaster. */ .mb-act-go{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; color:var(--ink); } .mb-act-go:hover{ border-color:transparent; filter:brightness(1.08); } .mb-act:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--accent); } /* THE X, AND IT MEANS IT NOW. 24 square inside a 24px row, because the press that has to work on the first go is this one. */ .mb-x{ font:inherit; font-size:var(--type-lead); line-height:1; cursor:pointer; color:var(--text-faint); background:transparent; border:0; flex:none; width:var(--space-5); align-self:stretch; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); transition:color var(--dur-fast) var(--ease-out); } .mb-x:hover{ color:var(--text); } .mb-x:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--accent); } /* THE FUSE. The countdown, drawn: the fraction of the five-minute lead-in that is left. Its width is written by mbPaintClock() once a second and it is empty from the moment the meeting starts. */ .mb-fuse{ position:absolute; left:0; bottom:0; height:var(--space-hair); width:0; background:var(--mb-accent); transition:width 1s var(--ease-linear); } /* ON A PHONE. 212 pixels fits in 430 with room to spare, so the four-column rebuild the old card needed here is gone with the columns. What is left is the one thing that was never about width: the pill has to clear the bottom navigation, because a card floating over the navigation is the same fault as a card floating over the reading. 780px rather than 640 because 780 is where .bottom-nav appears. */ @media (max-width:780px){ .meeting-banner{ /* Clear of the bottom bar: the nav is one 48px row plus its own padding, and the safe-area inset underneath it on a notched phone. */ /* OFF THE BUTTON AS WELL AS OFF THE BAR, 26 September. This number was the bar worked out by hand -- a 48px row, its padding and the chin -- and it was right for as long as the bar was the only thing down there. The big Ask Lucid button stands on top of the bar now, and this banner was landing on it: the check in tests/test-the-ask-button-is-on-the-phone.js could not press the button at all while a meeting was near, and it named this element as the thing taking the press. So it reads the two names the pages own floor reads rather than doing the arithmetic a second time and disagreeing with it later. */ bottom:calc(var(--bottom-nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(160%); } .meeting-banner.show{ transform:translateX(-50%) translateY(0); } } .display{ font-family:var(--font-display); } .mono{ font-family:var(--font-mono); } /* ========================================================== WHY THERE IS A "LITE" MODE, AND WHAT IT TURNS OFF ========================================================== Matt: "the whole UI is all herky jerky, like it is shorting out." It was not JavaScript. Measured over ten seconds of an idle app, the main thread was 5% busy and there were zero layouts. It was the GPU, and the count is the whole story: THIRTY-SIX visible elements with a live backdrop-filter — twenty of them at blur(26px) saturate(1.5). backdrop-filter is the most expensive thing on this page by a distance. Each one makes the compositor snapshot everything behind it, blur it, and saturate it — every frame, per element, and the cost scales with the pixel area. Twenty of them on a high-DPI screen is a lot of full-screen blurs sixty times a second. Add a WebGL orb animating continuously and a readPixels() that stalls the pipeline on a timer, and "shorting out" is a fair description. None of it is new. It has been creeping up with every panel added, and it has now crossed the line on his machine. So: the effects are adaptive. The app measures its own frame rate a moment after load, and if the machine cannot hold a smooth one it drops to data-fx="lite" — the same layout and the same colours, with the blurs replaced by flat translucency. It is barely distinguishable in a screenshot and it is the difference between 12fps and 60. Settings lets him force it either way, because a measurement taken during a busy first second can be wrong in both directions and he should not have to argue with it. ========================================================== */ .glass{ position:relative; overflow:hidden; /* THE SHEEN IS A BACKGROUND LAYER, NOT AN OVERLAY. THIS IS THE LIGHT-MODE READABILITY BUG. It used to be `.glass::before{ position:absolute; inset:0 }` — a positioned pseudo-element with no z-index, which paints ABOVE every non-positioned child. So the sheen was not a highlight on the glass; it was a sheet of translucent white laid over the text. In the dark themes the sheen is rgba(255,255,255,0.09–0.16) and washing already-pale text a little paler is invisible. In Serene it is 0.55–0.65, and it covered the TOP HALF of every panel and every popup at about 52% — which is why a weekday letter set to #796F63 rendered as rgb(185,179,173), and why the popups were "impossible to read when white/grey". Measured, not guessed: that pixel is exactly #796F63 composited at alpha .52 over the panel. No amount of darkening the token could have fixed it. 52% of a darker colour is still 52%. As a background layer the sheen sits above the fill and below the content: the look is unchanged and it is one less painted layer. */ background:var(--glass-sheen), var(--glass-bg); /* Blur/saturation are tokens now rather than hardcoded, because the "frosted" theme's whole identity is a much heavier blur — that is the one property that separates a frosted pane from a tinted one. */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border:1px solid var(--glass-border); border-top-color: var(--glass-border-hi); border-radius:var(--radius); box-shadow: var(--glass-shadow); transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* (.glass::before is deliberately gone — see the background layer above.) */ /* A PANEL YOU GLANCE PAST CAN BE GLASS. A PANEL YOU READ HAS TO BE PAPER. --------------------------------------------------------------------- The sheen fix above stopped a translucent sheet being painted OVER the text. This is the other half of the same complaint — "the Ask window is too transparent to read" — and it is not the sheen, it is the fill. Measured with a red sheet behind the open Ask card: 42% of it came through. Behind that card in real use is the mail list, the home grid, and now a turning vortex. After this rule: 12%. Contrast alone does not catch this, and the readability harness was right to pass it: the text IS legible against the composited pixels. What it cannot measure is that the pixels keep MOVING. Reading a paragraph over a scrolling backdrop is work, and no amount of darkening the ink fixes it. So the fill gets an almost-opaque backing layer underneath it. The glass tint and the sheen sit on top of that exactly as designed, so the panel looks like the same panel — it simply has paper behind it now. Twelve per cent is deliberately not zero: the frosted theme's whole identity is what shows through, and a completely solid card would make it a different theme rather than a readable one. Applied only to the things that are READ: the Ask card, every modal, the dialog, and the search results. Tiles, the rail and the banner are glanced at and keep the full glass. ONE SYNTAX TRAP, WORTH THE COMMENT. In `background: A, B, C` only the LAST layer may be a colour. Writing the glass tint as the middle layer — which is what it is in .glass, where it happens to be last — makes the whole declaration invalid, and an invalid background is not a slightly wrong panel — it is a panel with NO background at all. The first version of this rule did exactly that, and the same red sheet went from 42% through to 94%: the fix made it twice as bad and looked plausible. So the tint is wrapped in a flat gradient, which is a legal image layer, and the paper goes last where a colour is allowed. */ /* NOT a tray. Matt, 26 Aug: "dont like the new look you just made. I want them all to look like the task trays." He is describing a colour difference, and this rule is it. A tray is a .compose-modal.glass, so it was picking up the paper below — bg-base at 96% — while the task drawer next to it stands on bg-mid. Two panels doing the same job, in two different tones, one click apart. A tray takes the drawer's ground instead; see the as-tray block. */ .chat-card, .modal-backdrop:not(.as-tray) > .compose-modal.glass, #dlgCard.glass, .omni-card{ background:var(--glass-sheen), linear-gradient(var(--glass-bg), var(--glass-bg)), color-mix(in srgb, var(--bg-base) 96%, transparent); } /* 96%, up from 88%. Matt, 26 Aug: "Make lucid chat panels a dark frosted glass...still have text bleeding in from behind." He is right and this rule already existed — it just was not opaque enough. Eight percent of the backdrop is nothing against a flat colour, which is what the harness measures, and clearly visible against an inbox, which is what is actually behind the chat card. Words on words is the one thing a reading surface cannot do. Deliberately NOT solid. A previous attempt at this set an opaque background-color on .chat-card and took the bleed to zero, which reads as a grey box stuck on the page — the frosted themes are frosted, and test-ask-readable holds a FLOOR as well as a ceiling for exactly that reason. Four percent is a whisper of what is behind, which is the point, and it is a whisper you cannot read words through. */ /* The meeting banner carries BOTH .meeting-banner and .glass. Both set `position`, both have identical specificity, and .glass is declared later — so .glass's `position:relative` was silently winning. The banner therefore sat in normal document flow at the very top of the page: invisible (opacity:0) but 53px tall. That pushed the whole app down 53px and, because .app is height:100vh, pushed the same 53px off the bottom of the screen. THIS is why every page "sat too low". Restated here with higher specificity so it beats .glass on source order without needing !important. */ .meeting-banner.glass{ position:fixed; } /* Fills #appZoomRoot, which is the thing that knows about the app's scale setting. Using vh/vw here instead is what caused the shrink-into-the- corner bug. */ .app{ display:flex; height:100%; width:100%; } /* position:fixed, not the static default — added alongside 138's move from `zoom` to `transform:scale()`. At any scale below 100% #appZoomRoot's own box is deliberately counter-sized LARGER than the viewport (100/scale vh/vw, and in applyFontScale in app.js) so the scaled-down result still fills exactly one windowful. `zoom` folded that larger box back down before handing a footprint to its ancestor, so `` never saw more than one viewport's worth of content. `transform` does not — it is a paint-only operation, so a normal-flow #appZoomRoot hands body its full PRE-transform size (up to 122% of the window at the smallest step), and document.documentElement.scrollWidth measured exactly that 122% back (test-ui-scale.js caught it: a real 468px of sideways scrollWidth at Small, on a 1440px window). `overflow:hidden`/`clip` on body do not help — scrollWidth measures the union of descendant boxes regardless of the overflow keyword, in-flow or not. Taking #appZoomRoot OUT of flow is what works: a fixed element is anchored to the viewport rather than in ``'s normal flow, so its size — however much larger than the window — never contributes to any ancestor's scrollable area at all, which is the same reason #loginGate is fixed rather than trusting overflow:hidden to hide it. transition:none for an unrelated reason found alongside it: this app sets `transition-duration:.01ms !important` on every element under prefers-reduced-motion (see the *,*::before,*::after rule above), and the CSS default `transition-property` is `all` — so with no `transition` declared here, #appZoomRoot had an accidental, technically-real transition on every property INCLUDING transform any time reduced motion was on. `zoom` was never picked up by this, because it isn't a transitionable property; `transform` is. A transition of .01ms is imperceptible in a live tab, but it is a real transition with a real start-of-frame keyframe, and test-ui-scale.js found the failure mode: in a headless/software-rendered browser that doesn't paint a frame between two rapid style writes, getComputedStyle can keep reporting the value the never-rendered transition started from rather than the one it was set to — flaky by exactly the margin of "did a frame happen to render in between". A scale change is not an animation Lucid ever wants — it should land in the one frame it is set, the same way `zoom` always did — so transitions are switched off here outright rather than left to the accident of whether reduced motion happens to be on. */ #appZoomRoot{ position:fixed; inset:0; height:100vh; width:100vw; transition:none; } /* IN THE IPHONE APP THE PAGE SCROLLS, NOT .main — see lucidShellBoot in app.js for the measurement. Nothing is fixed between the finger and the document, so the web view's own scroll takes the pan. The bottom nav and every sheet are position:fixed already and stay put. */ html.ios-shell, html.ios-shell body{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; } html.ios-shell #appZoomRoot{ position:relative; inset:auto; height:auto; min-height:100vh; transform:none !important; } html.ios-shell .app{ height:auto; min-height:100vh; } html.ios-shell .main{ overflow:visible; height:auto; } @keyframes breathe{ 0%,100%{opacity:1;} 50%{opacity:.35;} } /* SIDEBAR / SPINE */ .sidebar{ width:216px; flex:none; margin:var(--space-4) 0 var(--space-4) var(--space-4); padding:var(--space-4) var(--space-3); display:flex; flex-direction:column; transition:width var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); overflow-y:auto; overflow-x:hidden; } .sidebar.collapsed{ width:70px; padding:var(--space-4) var(--space-3); } /* THE SPINE ON MAIL IS THE SPINE. Row 2166, 15 September. Row 2147 lived here for one day: on Mail the collapsed spine went to 88px, #folderRail was moved into it under Mail's own row, and the six folders hung off an indented spur. Matt: "Hate the new spine with the crooked email icons under...looks weird. Need other options." Every rule of it is gone rather than overridden — the 88px width, the pinned 46px column, the --room-c, the spur, the 38px squares and the bar that landed on the spur. An overridden rule is still a rule somebody has to read before they can be sure it does nothing, and there is nothing left for it to describe: the folders are a row across the top of the tray now (see .folder-rail below) and Mail is not a special case anywhere in this file. WHAT SURVIVED THE ROW IS THE PRINCIPLE, and it moved with the folders: the PAGE you are on is a RING round a spine square, the FOLDER you are in is a BAR in the same area colour, and no folder ever gets a ring. Two levels of "where am I" told apart by shape rather than by brightness. It is written out again at .folder-rail, which is where it now applies. */ /* A HAIRLINE UNDER THE MASTHEAD. A newspaper puts a rule under its own name for the same reason: it says the name is not the first item in the list. Without it the wordmark was simply the top row of the rail. */ .sidebar-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-hair) var(--space-2) var(--space-3); margin-bottom:var(--space-2); border-bottom:1px solid var(--glass-border); } /* Wraps the wordmark and its masthead line so the two travel as one unit against the collapse button — see .sidebar-head's align-items:center, which now centers a two-line block instead of a single row. */ .brand-block{ display:flex; flex-direction:column; gap:var(--space-hair); min-width:0; } /* 700 to 600, and a hair larger. Fraunces at 700 is a heavy face fighting a glowing mark beside it; at 600 with the size raised it reads as a signature rather than a shout — which is the difference between expensive and loud, and the only place in the rail a serif is allowed to appear at all. */ .brand{ font-family:var(--font-display); font-size:var(--type-title); font-weight:600; letter-spacing:.005em; display:flex; align-items:center; gap:var(--space-2); white-space:nowrap; color:var(--rail-ink); } /* THE MASTHEAD LINE, quiet enough to read once. Indented to the wordmark's own text, not the icon beside it, so the two lines feel like one signature rather than a caption bolted under the logo. IN BRASS. --text-faint made it a caption nobody read; the metal makes it the one warm mark at the top of a cool rail, which is what a masthead line is for. It used to be small caps at .3em tracking as well, and that was right while it read "For Life" — a subtitle has to look like a subtitle rather than a second, competing headline. It is not a subtitle any more; see below. */ /* 345 — THE SECOND LINE IS THE PRODUCT'S NAME NOW, SO IT IS SET AS THE NAME IS SPELLED. It used to read FOR LIFE, a caption, and uppercase at .3em tracking is exactly what a caption wants. "4Life" through that same rule comes out as 4 L I F E, which is not the word on the domain, on the marketing site, or in his sentence. The brass, the weight and the position stay; the shouting goes, the tracking comes down to something a mixed-case word can carry, and 9px goes to 10 because losing the caps loses a couple of pixels of apparent size with them. */ .brand-tagline{ font-family:var(--font-body); font-size:var(--type-label); font-weight:600; letter-spacing:.06em; color:var(--brass); opacity:.85; margin-left:var(--space-8); margin-top:var(--space-1); white-space:nowrap; } /* The mark carries the brand alone whenever the rail is collapsed, since .nav-label (the "Lucid" wordmark) is hidden in that state — so it goes slightly LARGER when collapsed, not smaller. */ .brand-mark{ width:24px; height:24px; flex:none; display:block; } .sidebar.collapsed .brand-mark{ width:26px; height:26px; } /* THE LENS IS THE LOGO, 24 September. Same object as the sign-in screen and the Ask Lucid header, one variable apart. */ .brand-lens.lth-mark{ flex:none; margin:0; } .sidebar.collapsed .brand-lens{ --m:26px; } /* 70px rail − 20px padding = 50px usable. A 26px mark beside a 26px button overflows by 2px, so the collapse button tightens when collapsed. */ .sidebar.collapsed .collapse-btn{ width:22px; height:22px; } .sidebar.collapsed .sidebar-head{ padding-left:0; padding-right:0; } .collapse-btn{ width:26px; height:26px; border-radius:var(--radius-control); display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer; flex:none; } .collapse-btn:hover{ background:rgba(120,120,140,.12); color:var(--text); } .collapse-btn svg{ width:14px; height:14px; transition:transform var(--dur-base); } .sidebar.collapsed .collapse-btn svg{ transform:rotate(180deg); } .sidebar.collapsed .sidebar-head{ justify-content:center; } /* Previously the collapse-btn hid itself while collapsed, leaving no way back to labeled view. It now stays visible (just rotated) so the icon rail is never a dead end. */ /* ============================================================ A ROW IN THE RAIL. ------------------------------------------------------------ Four pixels less air per row, four pixels less corner, and the current row said with an edge instead of a lit box. Each of those is a small thing and together they are the entire difference between the rail he called a garage and the one he called regal. WHICH AREA A ROW BELONGS TO IS SAID IN CSS, NOT IN JAVASCRIPT. --c is set by the attribute selectors below, so a row carries its own colour from the markup out — nothing has to remember to paint it, and a row added to the markup tomorrow without a rule here falls back to --accent rather than to nothing. */ .nav-item{ --c:var(--accent); display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-tight); color:var(--rail-ink-2); font-size:var(--type-body); font-weight:500; cursor:pointer; margin-bottom:1px; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space:nowrap; position:relative; } .nav-item[data-view="home"], .nav-item[data-view="today"], .nav-item[data-view="inbox"]{ --c:var(--area-now); } .nav-item[data-view="contacts"]{ --c:var(--area-people); } /* .nav-item, not .nav-group — Media, and since item 288 Work, are destinations as well as area headings, so they are ordinary rail rows carrying data-group. The colour belongs to the AREA, so it follows the attribute rather than the class, and the rail row, the front page's doors and the pages underneath all wear the same one. Written as .nav-item[data-group] rather than .nav-group[data-group] for Work as well now: the class went when the dropdown did, and a rule matching the old class would have left the Work row wearing --accent — silently, because nothing goes red when a row falls back to a colour that exists. See NAV_GROUPS.work and NAV_GROUPS.media in app.js. */ .nav-item[data-group="work"]{ --c:var(--area-work); } .nav-item[data-group="media"]{ --c:var(--area-media); } /* AND LIFE THE SAME WAY, for exactly the reason the paragraph above gives about Work: this row was .nav-group until the wall gave it a `page`, and a rule still matching the old class would have left it wearing --accent silently, because nothing goes red when a row falls back to a colour that exists. See NAV_GROUPS.life. */ .nav-item[data-group="life"]{ --c:var(--area-life); } /* BROWSE TAKES MEDIA'S HUE because it came out of the Media group on 14 October and is still a Media place — the row moved, its area did not. */ .nav-item[data-shell-page="window"]{ --c:var(--area-media); } .sidebar.collapsed .nav-item{ justify-content:center; padding:var(--space-2); border-radius:var(--radius-control); } /* The rounded-rect outline is the rail's visual language — make it read more clearly rather than replacing it. */ .sidebar.collapsed:not(.peek) .nav-item:hover{ background:var(--wash-hover); box-shadow:inset 0 0 0 1px var(--glass-border); } /* THE BAR CANNOT WORK IN A 70px RAIL. There, the icon is the navigation and the row is a square around it, so the ring says "here" instead — the same statement in the shape the collapsed rail can make. */ .sidebar.collapsed:not(.peek) .nav-item.active{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); } .sidebar.collapsed:not(.peek) .nav-item.active::before{ display:none; } .sidebar.collapsed:not(.peek) .nav-item .dot{ display:none; } .nav-item:hover{ background:var(--wash-soft); color:var(--rail-ink); } /* THE CURRENT ROW, SAID WITH AN EDGE. It used to be a 16% wash of the accent inside a 35% ring inside a 20px glow — three statements of the same fact, and the glow is what made a $20-a-month app look like a demo. One 2px bar in the area's own colour, one weight of type, one barely-there wash. The bar sits in the rail's 12px padding rather than inside the row, so it lands on the rail's edge and the column of them reads as a margin rule down the side. */ .nav-item.active{ background:var(--wash-on); color:var(--rail-ink); font-weight:600; } .nav-item.active::before{ content:''; position:absolute; left:-6px; top:2px; bottom:2px; width:2px; border-radius:var(--radius-tight); background:var(--c); } /* ------------------------------------------------------------------------ THE RAIL, BY KEYBOARD — and until now there was no such thing. Every row in the primary navigation is a bare
with an onclick. No tabindex, no role, no focus rule anywhere in this file matching .nav-item. Tab through Lucid and the rail is simply not there: the whole left-hand navigation of the application could not be reached without a mouse, and nothing said so because nothing that is unreachable can look wrong. railKeyboard() in app.js gives the rows the role and the tabindex; this rule is what makes the focus visible once they have it. THE RING IS THE AREA'S OWN COLOUR, which is row 210's language rather than a new one — the 2px bar beside the current row is already --c, so focusing Work outlines it in brass and focusing People in rose, and the rail gains a second use for a palette it already carries instead of a seventh hue. NOT `outline: … var(--accent)` like the dozen focus rules elsewhere in this file: the accent is one colour for the whole app, and on the one control where every row means a different place, one colour throws that away. The offset is negative so the ring sits INSIDE the row. A positive offset on a 226px rail puts two pixels of ring under the page edge on one side and over the active bar on the other, and a focus ring that is clipped reads as a rendering fault rather than as a state. */ .nav-item:focus-visible{ outline:2px solid var(--c); outline-offset:-2px; background:var(--wash-hover); color:var(--rail-ink); } .nav-item:focus-visible .nav-icon{ opacity:1; } /* The collapsed rail is a 70px column of squares, so the ring goes round the square rather than round a row, and it needs no inset — there is padding on both sides of it there. */ .sidebar.collapsed:not(.peek) .nav-item:focus-visible{ outline-offset:1px; } /* 18px in the open rail, 23px collapsed. In a 70px rail the icon IS the navigation and needs the size; beside a 13.5px label at 18px it was shouting over the word it was supposed to be introducing. Hairline stroke for the same reason — 2.0 is a marker pen. */ .nav-icon{ width:18px; height:18px; opacity:0.62; flex:none; stroke-width:1.5; transition:opacity var(--dur-fast) var(--ease-out); } .sidebar.collapsed .nav-icon{ width:23px; height:23px; opacity:0.8; stroke-width:1.7; } .nav-item:hover .nav-icon{ opacity:0.85; } .nav-item.active .nav-icon{ color:var(--c); opacity:1; } /* THE INBOX DOT NOW MEANS SOMETHING. It was decorative — a fixed accent dot breathing on a 2.4s loop whether or not a single message was unread, which is a control that lies quietly for months. renderSpineCounts() in app.js now hides it unless there is unread mail in the loaded inbox. It does not breathe: an animation is a request for attention, and "you have mail" is a fact, not an alarm. */ .nav-item .dot{ width:5px; height:5px; border-radius:var(--radius-round); background:var(--c); margin-left:auto; flex:none; } /* A COUNT, NOT A BADGE. Tabular figures, right-aligned, no bubble — so 4, 8 and 312 line up on the digit and the rail gains a straight edge down its right-hand side. The pill it replaces was the single most dated thing in the spine. */ .nav-n{ margin-left:auto; font-size:var(--type-body); font-weight:500; color:var(--rail-ink-3); font-variant-numeric:tabular-nums; letter-spacing:.01em; flex:none; } .nav-item.active .nav-n{ color:var(--c); } .nav-item .dot + .nav-n, .nav-item .nav-n + .dot{ margin-left:var(--space-2); } /* Labels fade (see THE SPINE, ONE GRID at the end of this file); they are never display:none, so nothing reflows between closed and open. */ /* Generic hover-tooltip system — content comes from data-tooltip so any element can get one without separate markup to keep in sync. Sidebar icons show it to the right (they sit at the left edge); everything else shows it below by default. */ [data-tooltip]{ position:relative; } /* A HIDDEN TOOLTIP IS STILL IN THE LAYOUT, AND THAT PUSHED THE PAGE SIDEWAYS. ----------------------------------------------------------------------- This used to sit at opacity:0; visibility:hidden and nothing else — which hides it from the eye and NOT from the layout engine. An absolutely positioned box still contributes to its ancestors' scrollable overflow, and `transform` does not move a layout box, only its painted pixels. So every one of these was a nowrap label, up to a couple of hundred pixels wide, whose real box began at the middle of its button and ran off to the right of it, permanently. Almost everywhere there is slack to the right and nothing shows. In the mail toolbar at 760px there is none: "Threads, Tidy and Select" hangs off the last control on the row and made the whole inbox 15px wider than the window, at every text size — a page that scrolls sideways, which is the one thing tests/test-no-h-overflow.js exists to forbid. It found it; this is the cause it found. display:none is the fix, because it is the only value that takes a box out of layout entirely. The fade is kept where the browser can do it — transition-behavior:allow-discrete plus @starting-style animate a property that is switching between none and block, which is exactly this case — and a browser without them simply shows the tooltip at once, which is what a tooltip did for thirty years. */ [data-tooltip]::after{ content: attr(data-tooltip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); background:var(--bg-deep); color:var(--text); font-size:var(--type-label); font-weight:600; padding:var(--space-2) var(--space-2); border-radius:var(--radius-control); white-space:nowrap; pointer-events:none; display:none; opacity:0; transition:opacity var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete; z-index:80; box-shadow:var(--elev-floating); border:1px solid var(--glass-border-hi); } [data-tooltip]:hover::after{ display:block; opacity:1; } @starting-style{ [data-tooltip]:hover::after{ opacity:0; } } .nav-item[data-tooltip]::after, .theme-toggle[data-tooltip]::after{ left:calc(100% + 12px); top:50%; transform:translateY(-50%); } .sidebar:not(.collapsed) .nav-item::after{ display:none; } /* labels already visible — no need to duplicate them */ /* Rail tooltips were CSS ::after pseudo-elements sitting outside the rail's 70px width — and the sidebar clips overflow-x, so they were cut off and mostly never appeared at all. This is a single fixed element positioned by JS: outside the clipping context, and shown on mouseenter with no transition, so it is instant rather than fading in over 130ms. */ .sidebar [data-tooltip]::after{ display:none !important; } #railTip{ position:fixed; z-index:200; pointer-events:none; opacity:0; visibility:hidden; background:var(--bg-deep); color:var(--text); font-size:var(--type-body); font-weight:600; padding:var(--space-2) var(--space-3); border-radius:var(--radius-control); white-space:nowrap; border:1px solid var(--glass-border-hi); box-shadow:var(--elev-floating); } #railTip.show{ opacity:1; visibility:visible; } .accounts{ margin-top:var(--space-5); } /* SECTION LABELS, SET LIKE SECTION LABELS. Smaller and much wider tracked: .09em is a word squeezed into caps, .2em is a heading. Same trick as the masthead line above and for the same reason — at 9.5px the spacing is doing the work the size cannot. AND THE TRACKING CAME DOWN TO .1em WHEN THE SIZE WENT UP TO 11px, which is the sentence above read the other way round. .2em was compensating for type too small to carry a heading on its own; at 11px it is not compensating for anything, it is just wide — and it was wide enough to break something. On the 11px step "TASKS & REMINDERS" measured 154px of text into 139px of rail and ellipsised itself to "TASKS & REMIND…", which is a label that no longer says what it is. Measured rather than guessed: .14em still overflows by five pixels, .12em lands exactly on the edge, .1em fits with room and is still unmistakably a tracked heading beside 11px body-weight text. */ .accounts-label{ font-size:var(--type-label); font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--rail-ink-3); padding:0 var(--space-3); margin-bottom:var(--space-2); } /* Generic pill — still used by the mobile folder switcher (folderMobile) */ .pill{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill); border:1px solid var(--glass-border); color:var(--text-dim); font-size:var(--type-body); margin:0 var(--space-2) var(--space-2) 0; cursor:pointer; transition:all var(--dur-fast) var(--ease-out); } .pill:hover{ border-color:var(--glass-border-hi); color:var(--text); } .pill.active{ border-color:transparent; font-weight:700; background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--text); box-shadow:0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } .acct-switcher{ position:relative; padding:0 var(--space-1); } /* Squared with the rest of the third pass. A 10px control sitting between a 4px nav row above it and a 4px task row below it is the one rounded thing left in the column, which is how a rail starts looking assembled rather than designed. */ .acct-switcher-btn{ width:100%; display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-tight); border:1px solid var(--glass-border); background:rgba(255,246,230,.03); color:var(--rail-ink-2); cursor:pointer; font-size:var(--type-body); font-family:var(--font-body); } .acct-switcher-btn:hover{ border-color:var(--glass-border-hi); } .acct-switcher-dot{ width:9px; height:9px; border-radius:var(--radius-round); background:linear-gradient(135deg,var(--neutral-1),var(--neutral-2)); flex:none; } .acct-switcher-label{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-switcher-chevron{ width:13px; height:13px; flex:none; transition:transform var(--dur-fast); color:var(--text-faint); } .acct-switcher.open .acct-switcher-chevron{ transform:rotate(180deg); } .acct-switcher-panel{ display:none; position:absolute; top:calc(100% + 6px); left:4px; right:4px; z-index:60; background:var(--bg-deep); border:1px solid var(--glass-border-hi); border-radius:var(--radius-card); box-shadow:var(--elev-floating); padding:var(--space-2); max-height:280px; overflow-y:auto; } .acct-switcher.open .acct-switcher-panel{ display:block; } .acct-switcher-item{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-2); border-radius:var(--radius-control); cursor:pointer; font-size:var(--type-body); } .acct-switcher-item:hover{ background:rgba(120,120,140,.12); } .acct-switcher-item.active{ background:color-mix(in srgb, var(--accent) 18%, transparent); } .acct-switcher-item .dot{ width:8px; height:8px; border-radius:var(--radius-round); flex:none; } .acct-switcher-item .email{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-switcher-item .provider-tag{ font-size:var(--type-label); text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); border:1px solid var(--glass-border-hi); border-radius:var(--radius-control); padding:1px var(--space-1); flex:none; } .acct-switcher-divider{ height:1px; background:var(--glass-border); margin:var(--space-2) var(--space-hair); } .acct-switcher-connect{ font-size:var(--type-body); color:var(--accent); font-weight:600; padding:var(--space-2) var(--space-2); cursor:pointer; border-radius:var(--radius-control); } .acct-switcher-connect:hover{ background:rgba(120,120,140,.12); } .spine-section{ margin-top:var(--space-5); overflow-y:auto; min-height:0; } .spine-section.grow{ flex:1; } /* THE CAP WAS ON THE WRONG ELEMENT, AND IT COST HIM THE ADD BUTTON. ------------------------------------------------------------------ .spine-section.capped holds three things: the "Tasks & Reminders" heading, the list, and the "+ Add task" button under it. A max-height of 168px on the SECTION therefore capped all three together — so the heading ate part of the allowance, the fourth task was cut through its own date line, and the Add button was pushed below the clip and could not be seen or pressed at all. It has been invisible for as long as the cap has existed; nobody noticed because a control that is scrolled out of a hidden overflow leaves no gap where it used to be. The cap belongs on the list alone. A task row measures 41px in the browser (printed by tests/shots-spine.js, not estimated), so four whole rows is 164px; the heading and the button now sit outside it, always visible, and tasks five and six are reached by scrolling the list itself. */ .spine-section.capped{ flex:none; overflow:visible; } .spine-section.capped #taskList{ max-height:164px; overflow-y:auto; } /* ROLLED UP INTO A CHEVRON. (344) "tasks and reminders in the spine (along with the add task button) need to roll up into a chevron." The section closes to its own heading. display:none rather than a height animation on purpose: #taskList is a scroller with its own max-height, and animating the height of a box that scrolls produces a list that jumps under the finger on the way open. The chevron does the moving instead — the same quarter turn .cd-know-chevron and .tlc-chev use, so a chevron pointing down means open everywhere in this app. .spine-task-add is the full-width button, which rolls up with the list; the small + in the heading is what keeps adding a task to one press. */ .spine-task-add{ margin-top:var(--space-2); } .spine-section.rolled #taskList, .spine-section.rolled .spine-task-add{ display:none; } .spine-toggle .spine-chevron{ transition:transform var(--dur-fast) var(--ease-out); } .spine-section:not(.rolled) .spine-toggle .spine-chevron{ transform:rotate(90deg); } .spine-head-acts{ display:flex; align-items:center; gap:1px; flex:none; } /* THE HEADING HAS TO SURVIVE A THREE-DIGIT COUNT. "TASKS & REMINDERS" is 133px of letterspaced 9.5px caps and the rail gives the row 186 — so the words, the number and two controls are within a few pixels of the edge, and the first thing that happened was the count dropping onto a second line, which reads as a broken heading rather than a tight one. The words are what gives way now, not the number: the count is the entire reason to look at a heading whose list is folded away, so it is flex:none and the words ellipsise around it. In practice they never do — this only comes into play past a hundred open tasks. */ .spine-toggle-label{ display:flex; align-items:baseline; min-width:0; } .spine-toggle-words{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .spine-toggle .spine-count{ flex:none; margin-left:var(--space-2); } /* A 15px hit area is too small for a control he uses daily, so the box is 22px and the glyph is centred in it — the + reads at 15px and the target is the whole square. Same ink as the chevron beside it until it is pointed at, because two lit controls in one heading is a heading that argues with itself. */ .spine-add{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-control); font-size:var(--type-lead); line-height:1; font-weight:600; color:var(--rail-ink-3); cursor:pointer; flex:none; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .spine-add:hover{ background:var(--wash-soft); color:var(--text); } .spine-add:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } /* A TASK ROW, IN THE SAME LANGUAGE AS A NAV ROW. Squared to 4px, tightened, and the glowing blue dot replaced by a plain one — a dot with an 8px halo on every task turns a list of six into six small lights. The day count keeps the mono, because it is a number in a column of numbers. */ .attn-mini{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-tight); cursor:pointer; margin-bottom:1px; } .attn-mini:hover{ background:var(--wash-soft); } .attn-mini .dot{ width:5px; height:5px; border-radius:var(--radius-round); background:var(--area-now); flex:none; } .attn-mini-name{ font-size:var(--type-body); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .attn-mini-days{ font-family:var(--font-mono); font-size:var(--type-label); color:var(--rail-ink-3); flex:none; font-variant-numeric:tabular-nums; } .spine-attn-collapsed{ display:none; margin-top:var(--space-5); flex-direction:column; align-items:center; gap:var(--space-1); cursor:pointer; position:relative; } .sidebar.collapsed .spine-attn-collapsed{ display:flex; } /* A 9px unread count is the smallest type in the app and it sits on a solid accent. --ink is near-black, which works on the dark themes' bright blue and disappears on the light themes' deeper one. */ :root[data-mode="light"] .spine-badge{ color:var(--on-accent); } .spine-badge{ position:absolute; top:-4px; right:8px; background:var(--blue); color:var(--ink); font-size:var(--type-label); font-weight:800; width:15px; height:15px; border-radius:var(--radius-round); display:flex; align-items:center; justify-content:center; } /* ---- Needs Attention, when there IS something ------------------------ Blue is the colour of everything else in the app, so a blue warning triangle read as decoration. It goes red and breathes ONLY while there is something overdue — a permanent red glow is just a new background colour, and stops being noticed within a day. Nothing overdue, nothing glowing. */ .spine-attn-collapsed.has-overdue svg{ color:var(--cat-red-2, #ff6b5e) !important; filter:drop-shadow(0 0 7px rgba(255,90,80,.8)); animation:attnPulse 2.1s var(--ease-in-out) infinite; } .spine-attn-collapsed.has-overdue .spine-badge{ background:var(--cat-red, #b8382e); color:#fff; box-shadow:0 0 9px 1px var(--cat-red-glow); } /* THE ALARM COLOUR IS A PASTEL IN LIGHT MODE. --cat-red-2 is the light-on-dark red: on a near-black spine it is a hot coral. In the light themes it is #D6907F, and white lettering on it measured 1.94:1 — the one badge in the app whose entire job is to be noticed was the least readable thing on the screen. Light mode takes the solid --cat-red, and the drop-shadow glow goes with it: a glow on cream is a smudge, not a light. */ :root[data-mode="light"] .spine-attn-collapsed.has-overdue svg{ color:var(--cat-red) !important; filter:none; } :root[data-mode="light"] .spine-attn-collapsed.has-overdue .spine-badge, :root[data-mode="light"] .spine-count.has-overdue{ background:var(--cat-red); color:var(--neutral-ink); box-shadow:none; } /* The padding and radius live HERE now rather than on .spine-count, because the resting state stopped being a shape when the pill was removed. An alarm still gets to be one: this is the only filled count left in the rail and it appears only while something is actually late. */ .spine-count.has-overdue{ background:var(--cat-red, #b8382e); color:#fff; border-radius:var(--radius-tight); padding:1px var(--space-2); box-shadow:0 0 10px 1px var(--cat-red-glow); animation:attnPulse 2.1s var(--ease-in-out) infinite; } .spine-toggle.has-overdue > span{ color:var(--cat-red-2, #ff6b5e); } @keyframes attnPulse{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(255,90,80,.55)); } 50% { filter:drop-shadow(0 0 11px rgba(255,90,80,.95)); } } /* A pulsing red glow is exactly the thing someone with vestibular trouble asked the browser to stop doing. The colour still carries the meaning. */ @media (prefers-reduced-motion: reduce){ .spine-attn-collapsed.has-overdue svg, .spine-count.has-overdue{ animation:none; } } .sidebar-foot{ margin-top:var(--space-6); margin-bottom:var(--space-16); padding:var(--space-2) var(--space-3); color:var(--text-faint); font-size:var(--type-label); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); } /* THE BUILD STAMP IN THE SPINE. Quieter than "Live data" above it and set in the mono face, because it is an identifier to be read character by character and compared against another one — a proportional font is the wrong tool for telling 116 from 118 in a screenshot. It carries no colour of its own beyond the footer's --text-faint: nothing about knowing which build you are running is a warning. `gap` is already 10px on the column, so a negative top margin pulls it up under its neighbour rather than letting it read as a third, unrelated row. Empty until buildStamp() fills it, and :empty collapses the gap it would otherwise leave in a working copy that has no build number to print. */ .sf-build{ font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:.02em; margin-top:-6px; opacity:.85; } .sf-build:empty{ display:none; } /* HALF OF ONE DEPLOY AND HALF OF ANOTHER, SAID ACROSS THE TOP. ====================================================================== Built by showStaleBuildBanner() in app.js and only ever present when index.html and app.js disagree about which build they belong to. It sits ABOVE everything for the reason it exists: every number and every control under it may be from a different build, so it must not be something a person scrolls past. position:FIXED, NOT sticky, and that is measured rather than stylistic. `body` is `height:100%; overflow:hidden` and `.app` inside it is `height:100%` — so a bar inserted into the normal flow pushes the whole application down by its own height and the bottom of it is clipped away by that overflow:hidden. Taking the bar out of flow costs the top forty pixels of a screen that is already showing the wrong code, which is the right trade; silently cropping the app while telling somebody their app is unreliable is not. --cat-red rather than --orange, and this is the one place in the app where that is right. Orange is Lucid's colour for "this is not quite what it looks like" — a mailbox that failed, a search that is not in date order — and those are all statements about DATA. This is a statement about the application itself: the screen is not showing the code that was deployed, so nothing on it can be trusted, including the orange warnings. */ .stale-build-bar{ position:fixed; top:0; left:0; right:0; z-index:9999; display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-3) var(--space-4); font-size:var(--type-body); line-height:1.45; color:#fff; background:var(--cat-red); box-shadow:var(--elev-raised); } .stale-build-bar b{ font-family:var(--font-mono); font-weight:600; } /* The button inherits .btn's shape from elsewhere; only the colours are overridden, because .btn's own palette is invisible on a red field. */ .stale-build-bar .btn{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff; flex:none; } .stale-build-bar .btn:hover{ background:rgba(255,255,255,.28); } /* THE SEARCH ROW, BACK ON THE SPINE. (1726) ------------------------------------------------------------------ It is a .nav-item and it takes everything a nav row already is — the hover wash, the icon opacity, the collapsed square, the focus ring. Three rules are all it needs on top of that, and each one exists for a reason: 1. IT TAKES THE ACCENT RATHER THAN AN AREA HUE. The rail is coloured five ways by area — now, people, work, media, life — and search belongs to none of them because it reaches all of them. --accent is what .nav-item already falls back to when nothing overrides --c, so this rule is really just the absence of an override, written down so nobody adds one. 2. THE KEYBOARD HINT SITS WHERE A COUNT SITS. margin-left:auto puts it against the right edge on the same line the nav-n counts line up on, so the rail keeps the straight edge those counts were given it for. It is mono and one step quieter than the label, because it is reference rather than news — the same argument as the build stamp in the foot. 3. IT NEVER SURVIVES THE COLLAPSE. It wears .nav-label, so the 70px rail drops it with every other word and the tooltip carries it instead; this rule is what stops the flex row leaving a gap where it was. */ .nav-item.nav-search{ --c:var(--accent); } /* --rail-ink-2, NOT --rail-ink-3, AND THAT IS A MEASUREMENT. The faint rail ink is what .nav-n's counts take, and on a hint it does not carry: pixel contrast against the wash behind it came back between 2.4:1 and 3.1:1 on every dark theme and 3.6 to 4.3 on the papers — under the 4.5 floor everywhere, in all sixteen. Tracked mono capitals at 10px put less ink on the page than their size suggests, which is the same finding the Home labels wrote down four thousand lines below this. One step up clears it. */ .nav-kbd{ margin-left:auto; flex:none; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:.04em; color:var(--rail-ink-2); padding:var(--space-hair) var(--space-2); border-radius:var(--radius-control); border:1px solid var(--glass-border); /* NO FILL, AND THAT IS THE SECOND HALF OF THE MEASUREMENT ABOVE. It was drawn on --wash-soft first, and a wash is ink laid over the ground: on a paper theme it darkens the paper under dark lettering, on a dark theme it lightens the ground under light lettering, and either way it takes contrast off the smallest type in the rail. Dropping it lifted Blush and Mist from 4.44 and 4.47 to over the floor and moved every other theme up with them. A hairline still reads as a key cap; a fill was never what made it one. */ background:transparent; transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .nav-item.nav-search:hover .nav-kbd{ color:var(--c); border-color:color-mix(in srgb, var(--c) 45%, transparent); } /* THE COG SITS ON THE RAIL'S ICON LINE, AND IT DID NOT. 9 October. Matt: "Setting button is not inline with the rest of the buttons in spine. (currently offset) Fix". MEASURED, at his own 1481x690, before anything was changed: every .nav-item icon, and the + on New ....... centre x = 50.0 the Settings cog ............................. centre x = 59.0 collapsed: every icon 51.0, the cog still ..... centre x = 59.0 THE CAUSE IS A BOX, NOT A NUDGE. A rail row is a full-width box (190px at 216) whose 18px .nav-icon sits --space-3 in from the row's own left edge, so every glyph on the rail centres at 29 + 12 + 9 = 50. The cog is not a row: it is a 36px square, and .sidebar-foot lays it flush with the foot's own --space-3, so its centre was its own half-width out — 41 + 18 = 59. Nine pixels, and the number was never written anywhere; it fell out of the two boxes being different sizes and both being flush left. So the foot's icon column IS THE RAIL'S ICON COLUMN — 18px wide, the width of a .nav-icon — and the square centres inside it. Nothing is pushed anywhere: the square is aimed at the column the icons are in instead of at the foot's left edge, and the correction moves on its own if either box is ever resized. COLLAPSED IS THE SAME SENTENCE IN THE OTHER SHAPE. There the icon IS the navigation, and .sidebar.collapsed .nav-item centres it in the whole 70px row, so the column is the whole row too. Both the row's padding and the foot's are symmetric, which is why a full-width column lands on the same centre with no number in it at all. tests/test-the-spine-lines-up.js holds every rail glyph to one centre line within a pixel, open and collapsed, so a future change to either box goes red here rather than crooked on his screen. */ .sidebar-foot-icons{ display:flex; flex-direction:column; gap:var(--space-2); width:18px; align-items:center; } .sidebar.collapsed .sidebar-foot-icons{ width:100%; } .theme-toggle{ width:36px; height:36px; border-radius:var(--radius-card); display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(120,120,140,.10); flex:none; color:var(--text-dim); position:relative; transition:all var(--dur-fast) var(--ease-out); } :root:not([data-mode="light"]) .theme-toggle:hover{ box-shadow:0 0 12px 0 var(--accent-glow); color:var(--text); } .theme-toggle:hover{ color:var(--text); } .theme-toggle svg{ width:15px; height:15px; } /* MAIN */ /* A THIN BAND OF TOP PADDING, WHICH IS WHAT IT WAS BEFORE THE SEARCH BOX AND IS WHAT IT IS AGAIN. Between 2 and 11 September this was 54px, and every pixel of that was reserved space for .top-search-row — a compact search box that sat absolutely positioned in this corner of every page. Row 1726 put search back on the spine and took the box away, so the padding was holding a gap open for a control that had left the building, on every page in the app. It is a hairline rather than nothing because .home-band pulls itself up 4px and still wants room above it at the top of a scroll. .main.main-no-topsearch, the class that used to say this on Home alone, went with the box. 14px is written out rather than taken from the spacing ramp on purpose: the ramp is on a 4px grid and has no 14, and the 11 September rewrite reached for the nearest token (--space-4, 16px) and moved this number two pixels without saying so. Off-grid is the point — this is a hairline above a band that pulls itself up 4px, not a spacing decision on the same ramp as the padding of a dialog. */ /* THE BAND IS RESERVED HERE AND NOWHERE ELSE. Every page in the app is a .view inside .main, so one rule covers all of them and none of them can drift. It was 54px for a search box until 11 September; it holds the thread's corner open now. --lth-band is declared with the thread. */ .main{ flex:1; overflow-y:auto; min-width:0; --main-pad-x: var(--space-8); --main-pad-top: var(--lth-band); --main-pad-bottom: var(--space-3); padding: var(--lth-band) var(--main-pad-x) var(--main-pad-bottom); } .view{ display:none; } .view.active{ display:block; animation:rise var(--dur-base) var(--ease-out); } /* Inbox and Today are the two views meant to FILL the window rather than scroll. They used to size themselves with hardcoded magic numbers (`height: calc(100vh - 176px)` and `- 158px`) that were hand-tuned back when the meeting-banner bug was stealing 53px off the top — so once that was fixed the numbers over-subtracted and left a dead band at the bottom of the screen. Replaced with flex, which measures itself: the view fills .main, the header rows take what they need, and the grid/wrap absorbs whatever is left. No numbers to drift out of sync again. `min-height:0` on both is what actually lets the inner lists scroll instead of overflowing their flex parent. */ /* The Board is the third: a canvas that scrolls itself and must never make the page scroll. Without this it collapses to the height of its content and the dot grid stops halfway down the window — which also made "Fit" frame everything into the top-left quarter, because it was fitting to a box that was not the size it looked. */ #view-inbox.view.active, #view-today.view.active, #view-board.view.active{ display:flex; flex-direction:column; height:100%; min-height:0; } /* Was translateY(6px) scale(.99). During a cross-fade that vertical nudge reads as the page lurching into place. A dissolve should not also move. */ @keyframes rise{ from{opacity:0;} to{opacity:1;} } /* ---- VIEW CHANGES ---- switchView used to be a hard cut: the outgoing view got display:none in a single frame, then the incoming one played `rise`. Nothing eased OUT, so every navigation read as a pop followed by a slide. Now it is a genuine cross-dissolve: the content pane eases out, the swap happens while nothing is visible, and the new view eases back in. Deliberately NOT built on the View Transitions API — that defers its callback until the browser produces a paint frame, and under a throttled or backgrounded tab that leaves navigation looking like it did nothing. Verified in testing: it ran a full click behind. A timed opacity swap is boring, but it is deterministic and it cannot strand the user. */ /* The previous attempt faded the whole content pane to nothing, swapped, then faded back. That is not a cross-fade, it is a blink — for 130ms the app showed an empty rectangle, which reads as "it broke" rather than "it moved". A real cross-fade needs both views on screen at once, so the outgoing view is lifted out of flow and fades out UNDER the incoming one, which fades in over the top. Nothing is ever blank. */ .main{ position:relative; } .view.leaving{ position:absolute; top:0; left:0; right:0; height:100%; opacity:0; pointer-events:none; z-index:0; transition: opacity var(--dur-view) var(--ease-out); } .view.active{ z-index:1; } /* Elements that had no transition at all, so their hover/selected states snapped between frames. Mail rows are the most-touched surface in the whole app and had none. */ .mail-row{ transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .cd-tab{ transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .vt-btn, .more-item, .tb-btn, .modal-x, .mc-day, .list-check, .collapse-btn{ transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* Scroll jumps were instant everywhere. */ html{ scroll-behavior:smooth; } .main, .mail-list, .reading-pane, .agenda-scroll, .sidebar{ scroll-behavior:smooth; } /* Respect the OS setting. If someone has asked for less motion, honour it — this also makes the whole system easy to sanity-check by toggling one system preference. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:var(--dur-none) !important; animation-iteration-count:1 !important; transition-duration:var(--dur-none) !important; scroll-behavior:auto !important; } } .page-title{ font-family:var(--font-display); font-size:var(--type-page); font-weight:600; margin:0 0 var(--space-1); } .page-sub{ color:var(--text-dim); font-size:var(--type-body); margin:0 0 var(--space-3); } /* WHY THIS WENT FROM 660 TO 1240. Matt, 25 Aug: "Fix all the cards (not just these) to be wide like in other areas. (should be site wide for consistency)." .maxw is worn by exactly two views — Projects and Timeline — and it was pinning both to 660px while every other page in Lucid runs to 1240 (.pulse-two, .media-listen, .pj-home-queue, .today-grid). That is why those two screens looked like a phone layout left open on a monitor. One number, and it is the number the rest of the app already uses. */ .maxw{ max-width:1240px; } /* Same reasoning: 11px uppercase at weight 400, with letter-spacing pulling the strokes further apart, rendered at roughly half its nominal contrast. 700 costs nothing and is what makes a small label readable. */ /* --text-faint KEEPS LANDING ON THE FLOOR RATHER THAN UNDER OR OVER IT. Four separate elements measured between 4.40 and 4.50 against a 4.50 requirement on 20 September — this label, .wl-panel-note, .sec-menu and the inbox timestamp — which is not four coincidences, it is one token tuned to exactly the line and then asked to sit on grounds of slightly different brightness. Whether each one passes is decided by the ground, which is the same as deciding it by luck. Lifted one step at the call sites rather than by moving the token, which a great deal that already passes also depends on. --text-faint itself is worth a deliberate look in daylight; it is named here so the next person to meet this has the pattern rather than a single odd reading. */ .section-label{ font-size:var(--type-label); font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-dim); margin:var(--space-5) 0 var(--space-2); } .section-label:first-of-type{ margin-top:0; } /* Below the mobile breakpoint both views go back to normal document flow and scroll, so the fill-the-window behaviour must be switched off. */ @media (max-width:780px){ #view-inbox.view.active, #view-today.view.active{ display:block; height:auto; } } @media (hover:none) and (pointer:coarse) and (max-height:600px){ #view-inbox.view.active, #view-today.view.active{ display:block; height:auto; } .inbox-wrap{ height:auto; } } /* AND THE ORB'S KEEP-OUT ARRIVES WITH THE STACK. (Row 2022.) Above 1100px the agenda is a 288px rail down the LEFT of .today-grid and the sphere cannot reach it. The moment those columns stack — the same 1100px breakpoint, thirty lines up — the rail becomes the full width of the page, and its ⋯ button, 28px pinned to the row's own top-right corner, lands in the sphere's: measured at 1024×768, three quarters of it covered and nine presses out of nine landing on the orb. THE PADDING GOES ON THE SCROLLER RATHER THAN ON .agenda-act, and that is the whole of the trick. The button is absolutely positioned against the row, so moving the button alone would leave 82px of hole inside the row it is the corner of; narrowing the scroller takes the row's right edge with it and the button stays exactly where it belongs. IT IS WRITTEN HERE RATHER THAN BESIDE .today-grid because the base rule above sets `padding` whole. Two declarations of equal specificity, and a media query adds none — so the shorthand would have won wherever it was written later in the file, which is how the first attempt at this quietly did nothing at all. */ /* THE FLAG STOPPED BREATHING. 265 — "any other circus animation of icons." A flag is a fact about a row: somebody marked it, at some point, and it is no more urgent this second than it was an hour ago. It was fading to 35% and back for ever, which is the same signal the overdue alarm uses — so the one mark in the app whose whole job is to be noticed was competing with a bookmark. Same argument as the matte pass (215): the glow came off everything except the one alarm. The blue still says flagged. */ .flag{ color:var(--blue); } .mini-link{ font-size:var(--type-label); color:var(--blue); margin-top:var(--space-1); display:inline-block; cursor:pointer; } .mini-link:hover{ text-decoration:underline; } /* A NAME YOU CAN PRESS — item 521. ------------------------------------------------------------------------ "I hate you cant drill directly into projects or boards, or anything... HATE IT" (Matt.) The rule the item asks for is that a thing named on screen opens THAT THING, and the doors that answer it are spread over a dozen renderers: a project pill in the task drawer, a company on a contact card, a task title in the rail, a sender in the reading pane. Every one of them went out with an inline style="cursor:pointer" because this file belonged to somebody else that night. This is the class they should always have had. WHAT IT DELIBERATELY DOES NOT DO is make them all look like links. These names are already the loudest text in the thing they sit in — a project name IS the pill, a task title IS the row — so a blue underline on every one of them would repaint half the app to say something the layout has already said. It changes the CURSOR always, and shows the underline only under the pointer, which is the affordance a person actually reads: the hand appears, then the line, then they press. The underline is drawn from --text-dim rather than --blue so it inherits whatever colour the name already has in this theme — a door on a done subtask stays dimmed, a door on a pill stays a pill. Nothing here is a hex; every value resolves through the theme's own tokens. */ .lucid-door{ cursor:pointer; } .lucid-door:hover{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--text-dim) 62%, transparent); text-underline-offset:2px; } /* Keyboard reachability is NOT claimed here. These are spans, not buttons, and giving them a focus ring without a tabindex and an Enter handler would be a style that promises something the markup cannot do. The ring is for the ones that DO carry tabindex, so the two never disagree. */ .lucid-door[tabindex]:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-control); } /* On a pill the underline reads as damage — a rounded chip with a line through half its text. The chip itself lifts instead. */ .mini-cal-head{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); } /* THE TWO ARROWS ON THE MINI-CALENDAR, AND WHY THEY ARE HEAVIER THAN THEY LOOK LIKE THEY NEED TO BE. A single ‹ at 13px in --text-dim measures 2.19:1 against the panel behind it in dark and 1.81:1 in linen — under the 4.5:1 floor, at full size, and worse again at the Small interface size where it is rendered at 10.7px. The cause is not the token: a chevron is ONE hairline stroke, thinner than a device pixel, so no pixel of it ever receives the nominal colour and every one is a blend with the paper. Darkening the token alone moves the number in the stylesheet and almost nothing on the glass — the same finding the readability harness recorded about the calendar's weekday letters. What fixes it is more ink: full --text rather than --text-dim, a heavier weight, and a size that survives being scaled to 82%. Found by tests/test-ui-scale.js, which measures both sizes and compares them. */ .mc-nav{ width:20px; height:20px; border-radius:var(--radius-control); display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; font-size:var(--type-lead); font-weight:700; } .mc-nav:hover{ background:rgba(120,120,140,.10); color:var(--text); } .mc-label{ font-size:var(--type-body); font-weight:700; flex:1; } /* NINE PIXELS IS TOO SMALL TO HAVE A COLOUR. After --text-faint was darkened to a proper 4.78:1, these letters still measured 1.4:1 on screen — because at 9px the strokes are thinner than a pixel and every pixel is an antialiased blend of text and paper. The nominal contrast was fine; nothing was rendering at it. Bigger and bolder is the fix, not darker still. Weight is what small text actually needs: it puts more ink in each glyph rather than making the same one-pixel smear darker. */ /* AND THEN THE GROUND MOVED UNDER THEM. Putting the calendar panels on glass — which is what he asked for — raised the surface luminance behind this whole rail, and every "faint" thing sitting on it lost about half a point of contrast: the weekday letters to 4.13:1, the neighbouring month's dates to 4.33:1, the hour labels to 3.72:1 on dark. All of it nominally unchanged, none of it touched, all of it now failing. The fix is the HIERARCHY, not a brighter faint: the in-month dates go up to full text colour (which is what the note below always claimed they were), so the out-of-month ones can sit at dim and still read as another month. One step lighter each, the same three ranks, and everything clears 4.5. */ .mc-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); font-size:var(--type-label); font-weight:700; color:var(--text-dim); text-align:center; margin-bottom:var(--space-1); } /* SEVEN COLUMNS THAT MAY BE NARROWER THAN THEIR CONTENTS. MEASURED, real WebKit at 393 x 852: at 100% nothing on the Today screen hangs over an edge at 115% the month grid hangs 11 points past the right edge, taking the whole Saturday column with it WHY, AND IT IS THE 44x44 WORK ITSELF. The comment further down this file that raised .mc-cell to min-height:44px says, in as many words, that the rail is about 398px wide AT 430. It was measured at 430 and applied everywhere. A cell with aspect-ratio:1 and min-height:44px has a smallest possible width of 44 as well, and 1fr is short for minmax(auto, 1fr) - the auto being a floor at the contents smallest width. Seven 44s and six 1px gaps is a 314px floor for the grid, and at 115 percent there is nowhere near 314px of rail to put it in. minmax(0, 1fr) removes the floor from the COLUMN, not from the cell. min-height:44px is untouched, so the cells are still 44 tall - taller than 44 real points once the 115 percent scale is applied - and they are now as wide as a seventh of whatever rail there is, instead of insisting on 44 and shoving the last column off the phone. Both measurements are in claude/PL3-25-SEPT-THE-SCREENS-ARE-NOT-SLOW-THE-OPENING-IS.md. This is the whole shape of his complaint in one rule: the thing that made the buttons pressable is the thing that crowded the screen. */ .mc-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; } /* 30px was already modest; in a 316px rail the seven columns land near 40px and the aspect-ratio would make them 40px tall, which is a lot of month for a glance. Capped so the rail stays about the agenda. */ /* WEIGHT CARRIES "THIS MONTH", NOT DIMNESS. 20 September. At the Small size the app is drawn at 82%, so these numerals land at 9px, and at 9px antialiasing eats contrast that measures fine at full size. Out-of-month days were --text-dim and came out at 2.64:1 on light and 3.51:1 on dark — the same fault as the .28 opacity they were rescued from in the first place, arriving by a different road. A px floor is no defence here: the size control is a zoom, so a min() in the stylesheet is zoomed along with everything else. So the distinction stops being colour. This month's days are heavier, last month's are plain, and both are legible. The load shading above still goes to 600 and 700, which stays clear of this. */ .mc-cell{ aspect-ratio:1; max-height:34px; display:flex; align-items:center; justify-content:center; font-size:var(--type-label); font-weight:600; border-radius:var(--radius-control); cursor:pointer; position:relative; color:var(--text); } .mc-cell:hover{ background:rgba(120,120,140,.10); } .mc-pad{ color:var(--text); font-weight:500; cursor:default; } /* OPACITY WAS THE WRONG LEVER, in both modes. At .28 the neighbouring month's dates measured 1.34:1 on midnight and 1.4:1 on cream — they were not dimmed, they were gone; and at the ~.9 it would take to pass they no longer read as another month at all. The distinction is now the TOKEN: faint against the in-month cells' full text colour. Readable, and a clearer signal than a wash. */ .mc-today{ background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--text); font-weight:700; box-shadow:0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent); } .mc-selected{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:var(--ink); font-weight:700; box-shadow:0 0 12px var(--green-glow); } /* The selected day is the primary-button recipe in a 30px square, and it fails for the same reason: dark ink over a fill that fades to its pastel. Same inversion — the fill deepens, the numeral becomes the paper colour. */ :root[data-mode="light"] .mc-selected{ background:linear-gradient(135deg,var(--green),color-mix(in srgb, var(--green) 82%, var(--neutral-2))); color:var(--on-accent); } :root[data-mode="light"] .mc-selected .mc-dot{ background:var(--on-accent); } /* HOW BUSY EACH DAY IS, AS SHADE. The month used to be a grid of identical grey numbers with a dot under the days that had anything at all — which told you nothing about the difference between a fifteen-minute call and a day with six hours booked. The level is computed from real hours, see dayLoad(). SPECIFICITY: these are attribute selectors at (0,2,0) and .mc-today is a bare class at (0,1,0), so without the two rules underneath, heat would paint straight over today and over the selected day. Same trap the orb shapes fell into. */ .mc-cell[data-load="1"]{ background:color-mix(in srgb, var(--accent) 9%, transparent); color:var(--text); } .mc-cell[data-load="2"]{ background:color-mix(in srgb, var(--accent) 17%, transparent); color:var(--text); } .mc-cell[data-load="3"]{ background:color-mix(in srgb, var(--accent) 27%, transparent); color:var(--text); font-weight:600; } .mc-cell[data-load="4"]{ background:color-mix(in srgb, var(--accent) 38%, transparent); color:var(--text); font-weight:700; } .mc-cell.mc-today[data-load]{ background:color-mix(in srgb, var(--blue) 16%, transparent); } .mc-cell.mc-selected[data-load]{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:var(--ink); } /* THE SAME INVERSION AS THE RULE TWENTY LINES UP, AND IT WAS MISSING HERE. 5 September, found by tests/test-readability.js while two new light themes were being measured — and it was failing on the four light themes already shipped, not on the new ones. The light-mode fix above deepens the fill AND lightens the numeral. This variant restored the PASTEL fill (same specificity, later in the file, so it wins the tie) and the light-mode line under it only ever put the colour back — which left the paper-coloured numeral sitting on the pastel end of a green gradient at 2.69:1 on Serenity Mist, 2.74 on Light, 2.95 on Blush and 3.86 on Alabaster. It is today's date with something in the diary on it, which is why nobody had seen it: the cell only takes data-load on a day that has events, so the bug is invisible on an empty calendar and unmissable on a real one. */ :root[data-mode="light"] .mc-cell.mc-selected[data-load]{ background:linear-gradient(135deg,var(--green),color-mix(in srgb, var(--green) 82%, var(--neutral-2))); color:var(--on-accent); } .omni-row.omni-ask{ border:1px solid var(--glass-border-hi); border-radius:var(--radius-card); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); margin-bottom:var(--space-2); } .omni-row.omni-ask .omni-t{ font-weight:700; } .mc-dot{ position:absolute; bottom:2px; width:3px; height:3px; border-radius:var(--radius-round); background:var(--blue); } .mc-selected .mc-dot{ background:var(--ink); } /* THE FORECAST, ON THE DAY IT BELONGS TO. See wxDayChipHtml(). Deliberately quiet: it is context for the things on the day, not a thing on the day, so it sits at the faint end of the type scale and never competes with an event title. */ .wx-day{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--type-body); color:var(--text-faint); font-family:var(--font-mono); white-space:nowrap; margin-left:var(--space-2); } .wx-day .wx-ico{ width:13px; height:13px; display:block; opacity:.85; } .wx-day .wx-ico svg{ width:100%; height:100%; display:block; } .wx-day .wx-lo{ opacity:.62; margin-left:var(--space-hair); } .wx-day .wx-rain{ color:var(--blue); margin-left:var(--space-1); } .wx-small{ font-size:var(--type-label); } .wx-small .wx-ico{ width:11px; height:11px; } /* --------------------------------------------------------------------- CALENDARS WORTH SUBSCRIBING TO. Collapsed to one row by default — it is a thing you use twice a year, and a permanently open list of holidays above the feed would be furniture. --------------------------------------------------------------------- */ .cal-picks{ margin-bottom:var(--space-4); } .cal-picks-head{ display:flex; align-items:baseline; gap:var(--space-3); width:100%; text-align:left; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-card); padding:var(--space-3) var(--space-4); cursor:pointer; color:var(--text); font:inherit; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .cal-picks-head:hover{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); } .cal-picks-title{ font-weight:700; font-size:var(--type-body); } .cal-picks-sub{ font-size:var(--type-body); color:var(--text-faint); flex:1; } .cal-picks-chev{ color:var(--text-faint); font-size:var(--type-lead); line-height:1; } .cal-picks-body{ border:1px solid var(--glass-border); border-top:none; border-radius:0 0 var(--radius-card) var(--radius-card); padding:var(--space-1) var(--space-4) var(--space-4); margin-top:calc(var(--space-1) * -1); } .cal-pick-group{ margin-top:var(--space-3); } .cal-pick{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--glass-border); } .cal-pick:last-child{ border-bottom:none; } .cal-pick-body{ flex:1; min-width:0; } .cal-pick-name{ font-size:var(--type-body); font-weight:600; } .cal-pick-why{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-hair); } .cal-pick-btn{ flex:none; font-size:var(--type-body); padding:var(--space-2) var(--space-3); } .cal-pick-btn[disabled]{ opacity:.55; cursor:default; } .cal-how{ padding:var(--space-2) 0; border-bottom:1px solid var(--glass-border); } .cal-how:last-of-type{ border-bottom:none; } .cal-how-what{ font-size:var(--type-body); font-weight:600; margin-bottom:var(--space-1); } .cal-how-txt{ font-size:var(--type-body); color:var(--text-dim); line-height:1.55; } .cal-picks-note{ font-size:var(--type-body); color:var(--text-faint); line-height:1.55; margin:var(--space-3) 0 0; } /* Anyone who has asked their machine to stop moving things gets the colour and none of the motion. The row is still obviously late. */ /* THE COAT LINE. Row 1757, and the note above agendaWeatherLine() in app.js is where the argument for it lives. ------------------------------------------------------------------------ IT IS NOT THE LATE BAR AND MUST NOT LOOK LIKE IT. The bar above this one is pink, tinted, bordered and loud, because it is an accusation — things you meant to have done. This is a courtesy: a sentence about a coat. So it borrows the day's own ink rather than a warning colour, sits on a hairline rule instead of inside a panel, and gives the whole of its weight to one small blue glyph. Two bars in a row both shouting would make neither of them worth reading, and this is the one of the two that appears on a good day. Blue, because --blue is what this app already draws rain and weather in — the day chip on the calendar header, the Home tile, the forecast row — and because a coat sentence in the accent colour would be competing with every other accented thing on the page for the same glance. */ .agenda-wx-bar{ display:flex; align-items:flex-start; gap:var(--space-2); margin:0 0 var(--space-2); padding:0 var(--space-hair) var(--space-2); font-size:var(--type-body); line-height:1.45; color:var(--text-dim); border-bottom:1px solid var(--glass-border); } .agenda-wx-bar .awx-ico{ flex:none; width:16px; height:16px; margin-top:1px; color:var(--blue-2); } .agenda-wx-bar .awx-ico svg{ width:100%; height:100%; display:block; } /* ON PAPER THE GLYPH HAS TO STOP BEING THE LIGHT END OF THE BLUE, and this is the same correction — and the same reason — as the late bar three rules above. --blue-2 is the LIFTED step of the accent, drawn to sit on a dark ground; on the paper themes it is a pale sage against an off-white panel and the icon all but disappears, which was visible the moment the light screenshot was taken beside the dark one. --blue is the full-strength step and is what those themes tint everything else with. */ :root[data-mode="light"] .agenda-wx-bar .awx-ico{ color:var(--blue); } /* The sentence names a real meeting and a real hour, and the two proper nouns in it — what it is and where — are the part he is scanning for. One step up in weight and into full-strength ink does that without a second colour. */ .agenda-wx-bar .awx-said{ min-width:0; } .agenda-wx-bar strong{ color:var(--text); font-weight:600; } @keyframes pulseGlow{ 0%,100%{box-shadow:0 0 14px var(--pulse-lo);} 50%{box-shadow:0 0 24px var(--pulse-hi);} } /* INBOX */ .inbox-wrap{ display:flex; gap:var(--space-4); flex:1; min-height:0; } /* ====================================================================== ROW 2166 — THE FOLDERS ARE A ROW ACROSS THE TOP OF THE TRAY. ====================================================================== "Hate the new spine with the crooked email icons under...looks weird. Need other options. How about we take your email icons (write, mail, sent, draft, archive, snoozed and trach and make the icons a row right above the inbox tray. (we had a couple written out before and I did not like, but love the current icons)" (Matt, 15 September 2026.) THREE SHAPES IN FIVE DAYS, AND THIS IS THE FOURTH WORD ON IT. A dropdown reading "Inbox ▾" at the top of the list column (before row 1725); a 60px vertical rail standing between the spine and the tray (1725); a 24px spine sliver that expanded on hover (2139, removed the same week — it covered the rail it was making room for); the folders folded into the spine on a spur (2147, removed the next day — the sentence above). What every one of those was trying to solve is that two narrow columns of round icons on one left edge do not say which is the application and which is the mailbox. A ROW SOLVES IT BY NOT BEING A COLUMN. There is one vertical rail on the screen again — the spine — and the mailbox's own controls run the other way across the head of the tray. Nothing has to be told apart by size or by glass any more, because nothing is parallel to anything. THE ICONS DID NOT CHANGE. "love the current icons": the same seven controls, the same glyphs, the same order — the pencil, then Inbox, Sent, Drafts, Archive, Snoozed, Trash. Everything below is about direction and distance. Nothing below picks an icon. WHERE IT IS: the first child of .mail-list-col, so it is exactly the tray's width and directly above the first message. It is not a full-width band across .inbox-wrap, which would take fifty pixels of height off the LETTER to carry controls that do nothing to the letter, and it is not above the toolbar, which would put a list of destinations above the page's own search box. It is BELOW the All / Unread / Has-attachments chips because those are page furniture and live in .mail-toolbar-full with search and the bulk actions; a folder is not a filter and is not filed with them. THE SIZES, AND THE ONE PIECE OF ARITHMETIC THAT DECIDES THEM. The tray is clamp(300px, 34vw, 400px), so the narrowest this row is ever asked to be is 300px, and inside --space-3's gutters that is 276px of room. Compose (36) + the hairline and its margins (1 + 16) + six folders (216) is 269. So 36px squares fit at every width the tray has, with seven pixels to spare at the worst of them. 46px — the spine's square, which this borrowed while it stood beside the spine — comes to 339 and does not fit; it is still the number on a phone, where the tray is the whole window and a finger is doing the pressing. AND THE AIR BETWEEN THEM IS SPACE-BETWEEN, NOT A GAP, which is why both gaps here are nought rather than --space-hair. A gap is a floor under the row's width: two pixels between six folders is ten more pixels the row must have before it is allowed not to wrap, and at a 300px tray it does not have them — the row broke onto three lines at an 800px window with a two-pixel gap on it. Written as space-between the six destinations take whatever the pencil and the hairline leave and share it out, which is about eighteen pixels each at a 400px tray and about one at 300, and the row never wraps on a window with a spine in it. flex-wrap is still underneath as the safety valve for a phone at 320px. WHICH FOLDER YOU ARE IN IS A BAR, AND IT IS NEVER A RING. This is row 2147's one surviving idea. The spine says which PAGE with an inset ring round a square; if the current folder also wore a ring, two different statements would be drawn in one shape and the screen would be saying "you are here" twice without saying what either "here" is. So the folder is a 2px bar in the area's colour along the bottom edge of its square, landing on the hairline that closes this row off from the messages below it — the same relationship the spur and the bar had in the spine, turned through ninety degrees with everything else. NO WORDS, NO EXPAND, NO HOVER-ONLY ANYTHING. Row 1725's rules are unchanged: the floating #railTip is the only text and it appears beside the button rather than in it, nothing here grows under the pointer, and every one of the seven is a real