) sits above this overlay; a centred 482-570 px card (measured, idle) clears its 72 px edge with room to spare only above ~760 px of height, so below that the card starts at 84 px, below the mast, and the overlay scrolls. Taller screens keep the card dead centre over the ring (§8.5). */ @media (max-height:760px){ main.blogscope .gate{ place-items:start center; padding-top:84px } } main.blogscope .gate .pane{ position:relative; width:min(440px, 100%); padding:clamp(20px, 3vw, 32px); border-radius:26px; text-align:left; background: linear-gradient(180deg, oklch(22% .05 268 / .62), oklch(13% .035 268 / .72)); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); box-shadow: var(--surf-ring), 0 34px 90px -40px oklch(3% .02 270 / .95); border: var(--surf-border); } main.blogscope[data-ink="paper"] .gate .pane{ background: var(--leaf); backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:4px; box-shadow: var(--surf-shadow); } main.blogscope .gate .seal{ width:64px; height:64px; margin:0 0 22px } main.blogscope .gate h2{ margin:10px 0 0; font-family:var(--f-ui); font-size:34px; line-height:1.06; letter-spacing:-.028em; font-weight:380; color:var(--ink); } /* not the eyebrow or the message line: at (0,2,2) this outranked their own 9 / 9.5 px mono rules (0,2,1) and drew both as 17 px Literata (visual_spec §8.5) */ main.blogscope .gate p:not(.eyebrow):not(.fmsg){ margin:16px 0 0; max-width:44ch; font-family:var(--f-book); font-size:17px; line-height:1.6; color:var(--ink2); } main.blogscope .gate .afield{ margin-top:26px } main.blogscope .gate .afield > span{ letter-spacing:.28em; font-size:8.5px; color:var(--ink3) } main.blogscope .gate .key{ /* the derivation, in one place */ --kgi: 2px; /* in-group gap */ --ks: 3px; /* what a boundary cell gives up on one side */ /* 🚨 100vw INCLUDES the scrollbar and the pane's 100% does not, so a gate derived from the viewport is a few pixels too wide and the twelfth cell falls off the right edge on a phone. The container query unit is the pane's own content box, exactly; the vw form below it is the fallback for an engine without container queries, and is the reason the @supports block exists rather than a bare cqw. */ --kw0: calc(min(440px, 100vw - 44px) - 2 * clamp(20px, 3vw, 32px)); --kp: min(30px, calc((var(--kw0) + var(--kgi)) / 12)); --kc: calc(var(--kp) - var(--kgi)); --kfs: max(12.5px, calc(var(--kc) * .717)); --kadv: calc(var(--kfs) * .6); /* JetBrains Mono, measured 0.600 em */ --kch: calc(var(--kfs) * 2.1); /* cell height */ --kw: calc(12 * var(--kp) - var(--kgi)); /* the field's own width */ --kbg: var(--desk); /* the carve paints in the field's own ground */ --kcell: var(--rail); box-sizing:content-box; width: var(--kw); max-width:100%; padding: calc((var(--kch) - var(--kfs) * 1.32) / 2) 0; font-family: var(--mono); font-size: var(--kfs); font-weight:500; line-height:1.32; letter-spacing: calc(var(--kp) - var(--kadv)); text-indent: calc((var(--kc) - var(--kadv)) / 2); text-transform: uppercase; color: var(--ink); caret-color: var(--cyan); border:0; border-radius:10px; background-color: var(--kbg); box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 oklch(100% 0 0 / .06); transition: box-shadow .3s var(--glide), --kokw .26s var(--glide); background-image: /* the two hyphens — a 4 x 1.5 px rule, never a dot */ linear-gradient(var(--edge), var(--edge)), linear-gradient(var(--edge), var(--edge)), /* the two carves that widen the group gaps from 2 px to 8 px */ linear-gradient(var(--kbg), var(--kbg)), linear-gradient(var(--kbg), var(--kbg)), /* the accepted wash, revealed left to right over 260 ms */ repeating-linear-gradient(90deg, color-mix(in oklch, var(--cyan) 22%, var(--kcell)) 0 var(--kc), transparent var(--kc) var(--kp)), /* the twelve cells */ repeating-linear-gradient(90deg, var(--kcell) 0 var(--kc), transparent var(--kc) var(--kp)); background-repeat: no-repeat; background-size: 4px 1.5px, 4px 1.5px, calc(var(--kgi) + 2 * var(--ks)) var(--kch), calc(var(--kgi) + 2 * var(--ks)) var(--kch), var(--kokw) var(--kch), var(--kw) var(--kch); background-position: calc(4 * var(--kp) - var(--ks) - var(--kgi) + 2px) center, calc(8 * var(--kp) - var(--ks) - var(--kgi) + 2px) center, calc(4 * var(--kp) - var(--ks) - var(--kgi)) center, calc(8 * var(--kp) - var(--ks) - var(--kgi)) center, 0 center, 0 center; } @supports (width: 1cqw){ main.blogscope .gate .pane{ container-type: inline-size } main.blogscope .gate .key{ --kw0: 100cqw } } main.blogscope .gate .key::placeholder{ color:var(--edge); letter-spacing:inherit } main.blogscope .gate .key:focus-visible{ box-shadow: 0 0 0 1px var(--cyan), inset 0 1px 0 oklch(100% 0 0 / .06); outline:2px solid var(--focus); outline-offset:3px; } /* G3 — `.ok` is the SERVER'S verdict. `.full` is only "twelve characters are in the field", which is worth a quiet ring and nothing more: the accepted wash on the twelfth keystroke made the gate flash accepted -> checking -> accepted. */ main.blogscope .gate .key.ok{ --kokw: var(--kw); box-shadow: 0 0 0 1px var(--cyan) } main.blogscope .gate .key.full{ box-shadow: 0 0 0 1px oklch(72% .16 250 / .38) } main.blogscope .gate .key.err{ box-shadow: 0 0 0 1px var(--err) } main.blogscope[data-ink="paper"] .gate .key{ --kbg: var(--leaf); --kcell: var(--sunk) } main.blogscope .gate .fmsg{ margin-top:14px; min-height:14px; font-variant-numeric: tabular-nums } /* gate.js sets data-tone on every message (editor_spec §17.4); nothing read it */ main.blogscope .fmsg[data-tone="cyan"]{ color:var(--cyan) } main.blogscope .fmsg[data-tone="err"]{ color:var(--err) } main.blogscope .fmsg[data-tone="amber"]{ color:var(--amber) } /* G4 — the ticking digits, beside the live region and out of it. */ main.blogscope .gate .fmsg.clock{ margin-top:4px; color:var(--ink3) } main.blogscope .gate .acts{ display:flex; align-items:center; gap:18px; margin-top:24px; flex-wrap:wrap } main.blogscope .gate .acts .link{ font-size:13px } /* the gate dissolves; the desk fades up from blur(8px) */ main.blogscope .gate{ transition: opacity .42s var(--glide) } main.blogscope .gate .pane{ transition: opacity .42s var(--glide), transform .42s var(--glide) } main.blogscope .gate.gone{ opacity:0; pointer-events:none } main.blogscope .gate.gone .pane{ opacity:0; transform:scale(1.01) } main.blogscope .desk.arriving{ animation: deskUp .5s var(--glide) both } @keyframes deskUp{ from{ opacity:0; filter:blur(8px) } to{ opacity:1; filter:none } } @media (prefers-reduced-motion: reduce){ main.blogscope .gate, main.blogscope .gate .pane{ transition:none } main.blogscope .desk.arriving{ animation:none } } /* ───────────────────────────────────────────────────────────────────────────── 2. THE DESK One surface. The writing column inside it is 53ch — exactly the published measure — and the desk is wider on purpose: that margin is where the grip and the + live, and it is what makes the surface feel like a page rather than a form field. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .desk{ position:relative; width:min(880px, 100% - 2 * var(--pad)); margin:0 auto; min-height:78svh; padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 64px) clamp(80px, 10vw, 120px); background: var(--desk); border-radius: var(--r-desk); border: var(--surf-border); box-shadow: var(--surf-ring), var(--surf-shadow); isolation:isolate; } main.blogscope .desk::before{ content:''; position:absolute; inset:0 0 auto 0; height:58%; z-index:-1; pointer-events:none; border-radius:inherit; opacity:1; transition:opacity .4s var(--glide); background: radial-gradient(130% 58% at 50% -10%, var(--wash), transparent 60%); } main.blogscope.kb .desk::before{ opacity:.4 } /* keyboard open: the lit area follows the caret */ main.blogscope .desk .title{ display:block; width:100%; max-width:53ch; border:0; background:none; outline-offset:6px; font-family:var(--f-ui); font-size:clamp(28px, 3.4vw, 44px); line-height:1.06; letter-spacing:-.03em; font-weight:380; color:var(--ink); resize:none; } main.blogscope .desk .title:empty::before, main.blogscope .desk .title[data-empty="1"]::before{ content:attr(data-ph); color:var(--edge) } /* the standfirst label sat on the title's last line with no gap */ main.blogscope .desk > .afield{ margin-top:18px } main.blogscope .desk .counters{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:16px; font:500 10.5px/1.6 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); font-variant-numeric: lining-nums tabular-nums; } main.blogscope .desk .counters span{ position:relative } /* trailing, not leading — a wrapped row must not start with a stray dash */ main.blogscope .desk .counters span:not(:last-child)::after{ content:''; position:absolute; right:-13px; top:50%; width:4px; height:1px; background:currentColor; opacity:.75; } /* `SAVED 14:02` ends this line (§9.1, editor_spec §16.5); it stays its own live

. The dash is the counters' own trailing one, so a wrapped save line never starts with it */ main.blogscope .desk .counters{ margin-right:22px } main.blogscope .desk .counters + .saveline{ display:inline-block } main.blogscope .desk .counters:has(+ .saveline:not(:empty)) > span:last-child::after{ content:''; position:absolute; right:-13px; top:50%; width:4px; height:1px; background:currentColor; opacity:.75; } main.blogscope .desk .counters .warn{ color:var(--amber) } main.blogscope .desk .counters .bad{ color:var(--err) } main.blogscope .desk .body{ display:block; margin-top:clamp(26px, 3.4vw, 40px); max-width:53ch } main.blogscope .desk .body > [data-b]{ position:relative; outline-offset:6px; caret-color:var(--cyan); } main.blogscope .desk .body > p, main.blogscope .desk .body > ul, main.blogscope .desk .body > ol, main.blogscope .desk .body > blockquote{ font-family:var(--f-book); font-size:clamp(17px, .95rem + .35vw, 20px); line-height:1.62; color:var(--ink-read); } main.blogscope .desk .body > * + *{ margin-top:1.15em } main.blogscope .desk .body > h2{ font-family:var(--f-ui); font-size:clamp(24px, 2.9vw, 34px); line-height:1.12; letter-spacing:-.024em; font-weight:450; color:var(--ink); margin-top:1.9em; } main.blogscope .desk .body > h3{ font-family:var(--f-ui); font-size:clamp(19px, 2vw, 23px); line-height:1.25; letter-spacing:-.015em; font-weight:500; color:var(--ink); margin-top:1.7em; } main.blogscope .desk .body > li, main.blogscope .desk .body li{ margin:.4em 0 } main.blogscope .desk .body li::marker{ color:var(--cyan) } main.blogscope .desk .body > blockquote{ padding-inline-start:1em; border-inline-start:2px solid color-mix(in oklch, var(--mor) 55%, transparent); color:var(--ink2); } main.blogscope .desk .body > .pull{ padding-left:22px; max-width:30ch; border-left:1.5px solid color-mix(in oklch, var(--mor) 60%, transparent); font-family:var(--f-book); font-size:clamp(22px, 2.3vw, 30px); line-height:1.32; font-weight:300; color:var(--ink2); } main.blogscope .desk .body > hr.hair{ margin:1.6em 0 } /* the placeholder is a data attribute the patcher sets — never inserted text */ main.blogscope .desk .body > [data-b][data-empty="1"]:first-child::before{ content:attr(data-ph); color:var(--edge); pointer-events:none; } /* ───────────────────────────────────────────────────────────────────────────── 3. THE RAIL — the one machinery surface (graft G3, the anodised rim) Capped at two such surfaces per screen: the rail and the bubble. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .rail{ /* the flow position has to clear the mast as well as the stuck position: the mast is a fixed pill whose bottom edge is at ~72 px and its z-index is 60, so a rail that starts at y=0 is simply hidden behind it at scroll 0 */ position:sticky; top:88px; z-index:40; /* D1 — `flex-direction` and `min-height` are DECLARED, not inherited. `aurora.css` ships a bare, unscoped `.rail{display:flex;flex-direction:column;…}` (the Studio's generation rail) and it is bundled into `/kit/blog.css` BEFORE this file, which `/creators/write` links after it. Equal specificity, later wins — but only for the properties this rule names, and this one did not name `flex-direction`. Measured at 1440x900: computed `column`, scrollHeight 347 px inside a 48 px box, and ELEVEN of the twelve formatting controls outside the rail's box. A creator on a laptop had no formatting surface at all. (The <=900 px tray is a different rule and was never affected.) */ display:flex; flex-direction:row; align-items:center; gap:6px; height:48px; min-height:auto; padding:0 8px; margin:96px auto 22px; width:var(--wrap); max-width:100%; border-radius:999px; overflow-x:auto; scrollbar-width:none; background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46)); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 oklch(100% 0 0 / .07), 0 14px 40px -20px oklch(4% .02 270 / .65); transition: transform .3s var(--glide), opacity .3s var(--glide); } main.blogscope .rail::-webkit-scrollbar{ height:0 } main.blogscope .rail::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background: linear-gradient(135deg, oklch(87% .13 205 / .20) 0%, transparent 48%, oklch(63% .21 295 / .16) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } main.blogscope[data-ink="paper"] .rail{ background: var(--rail); backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid var(--hair); box-shadow:none; } main.blogscope[data-ink="paper"] .rail::after{ content:none } /* no rim on paper */ main.blogscope .rail .sep{ flex:none; width:1px; height:40%; margin:0 6px; background:var(--hair); /* never a dot, never a pipe glyph */ } main.blogscope .rail .abtn.sm{ height:36px; min-width:36px; padding:0 10px; border-radius:999px; color:var(--ink2); background:none; box-shadow:none; flex:none; } main.blogscope .rail .abtn.sm:hover{ color:var(--ink); background: oklch(60% .12 270 / .12) } main.blogscope .rail .abtn.sm[aria-pressed="true"]{ color:var(--ink); box-shadow: inset 0 0 0 1px transparent; background: linear-gradient(var(--rail), var(--rail)) padding-box, var(--ramp-ink) border-box; border:1px solid transparent; } main.blogscope .rail .grow{ margin-left:auto; flex:none } main.blogscope .rail .counters{ margin:0; flex:none } main.blogscope .rail .seg button{ font-family:var(--f-ui); font-size:12px; font-weight:450; letter-spacing:0 } main.blogscope .rail .seg .puck{ background: color-mix(in oklch, var(--rail) 60%, transparent); box-shadow: inset 0 0 0 1px var(--edge) } /* ───────────────────────────────────────────────────────────────────────────── 4. THE PHONE TRAY — six targets, every one ≥ 44 px Positioned from visualViewport by toolbar.js; `position:fixed;bottom:0` sits BEHIND the keyboard on both platforms. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .tray{ position:fixed; left:0; right:0; top:0; z-index:70; display:none; align-items:center; justify-content:space-between; gap:2px; height:56px; padding:0 6px calc(env(safe-area-inset-bottom) * 0); /* the un-scripted default is the BOTTOM of the viewport. toolbar.js overrides --trayY with vv.offsetTop + vv.height - barHeight on every visualViewport resize; until it does, a tray pinned at y=0 would sit behind the mast, which is what a fixture without JS shows. */ background: linear-gradient(180deg, oklch(20% .05 268 / .86), oklch(13% .035 268 / .94)); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 oklch(100% 0 0 / .07); transform: translateY(var(--trayY, calc(100svh - 56px))); } main.blogscope[data-ink="paper"] .tray{ background: var(--rail); backdrop-filter:none; -webkit-backdrop-filter:none } main.blogscope .tray .abtn{ flex:1; min-width:44px; height:44px; padding:0; border-radius:12px; background:none; box-shadow:none; color:var(--ink2); } main.blogscope .tray .abtn[aria-pressed="true"]{ color:var(--ink); box-shadow: inset 0 0 0 1px var(--edge) } main.blogscope .tray .sep{ flex:none; width:1px; height:40%; background:var(--hair) } @media (max-width:900px){ main.blogscope .rail{ display:none } main.blogscope .tray{ display:flex } /* the rail carries the mast clearance on desktop; with no rail the desk has to carry it itself, or the title is cut in half by the fixed mast */ main.blogscope .desk{ padding-bottom:96px; margin-top:96px } } /* ───────────────────────────────────────────────────────────────────────────── 5. THE SELECTION BUBBLE — the second machinery surface, and the last ───────────────────────────────────────────────────────────────────────── */ main.blogscope .bubble{ position:fixed; z-index:75; display:flex; align-items:center; gap:4px; height:40px; padding:0 6px; border-radius:999px; opacity:0; transform:translateY(6px); pointer-events:none; background: linear-gradient(180deg, oklch(24% .055 268 / .92), oklch(15% .04 268 / .95)); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 oklch(100% 0 0 / .07), 0 18px 44px -22px oklch(4% .02 270 / .9); transition: opacity .16s var(--glide), transform .16s var(--glide); } main.blogscope .bubble.on{ opacity:1; transform:none; pointer-events:auto } main.blogscope .bubble .abtn{ height:32px; min-width:32px; padding:0 8px; background:none; box-shadow:none; color:var(--ink2) } main.blogscope .bubble .abtn[aria-pressed="true"], main.blogscope .bubble .abtn:hover{ color:var(--ink) } @media (prefers-reduced-motion: reduce){ main.blogscope .bubble{ transition:none } } /* ───────────────────────────────────────────────────────────────────────────── 6. THE GRIP AND THE + (graft G4) A line, not a six-dot grip. Visual 3 x 18 px; hit area 28 x 40 px. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .desk .body > [data-b]:hover > .grip, main.blogscope .desk .body > [data-b]:focus-within > .grip{ opacity:.55 } main.blogscope .grip{ position:absolute; left:-28px; top:.28em; width:28px; height:40px; padding:11px 12px; border:0; background:none; cursor:grab; opacity:0; transition:opacity .25s var(--glide); } main.blogscope .grip::before{ content:''; display:block; width:3px; height:18px; border-radius:2px; background:var(--ramp-ink); } main.blogscope .grip:focus-visible{ opacity:1 } main.blogscope .addb{ position:absolute; left:-28px; width:28px; height:28px; display:grid; place-items:center; border:0; background:none; color:var(--edge); cursor:pointer; opacity:0; transition:opacity .25s var(--glide); font:400 18px/1 var(--f-ui); } main.blogscope .desk .body > [data-b]:hover > .addb, main.blogscope .addb:focus-visible{ opacity:1; color:var(--ink3) } main.blogscope .desk .body > [data-b].dragging{ background: var(--leaf); border-radius:10px; box-shadow: 0 -1px 0 0 var(--cyan) inset, var(--surf-ring); } @media (max-width:900px){ main.blogscope .grip, main.blogscope .addb{ left:-22px; width:22px } } /* ───────────────────────────────────────────────────────────────────────────── 7. THE IMAGE CARD — a card in the flow, never a floating dialog. The bar is the ONLY element in the editor allowed to animate its width. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .imgcard{ position:relative; margin:1.8em 0; border-radius:var(--r-slab); overflow:hidden; background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46)); box-shadow: var(--surf-ring), var(--surf-shadow); border: var(--surf-border); } main.blogscope[data-ink="paper"] .imgcard{ background: var(--rail) } /* imagecard.js emits `.shot > img` and `.cardbody`, not the fixture's `> img` and `.meta`: the preview drew at its 1000 px attribute width, cropped, and the controls had no padding */ main.blogscope .imgcard > img, main.blogscope .imgcard .shot > img{ display:block; width:100%; height:auto } main.blogscope .imgcard .meta, main.blogscope .imgcard .cardbody{ padding:14px 16px 16px; display:grid; gap:12px } /* WIDTH / PLACEMENT are a .seg (§9.6) of .abtn.sm: no §0 button face inside it (the :not()s match that rule's weight), and the chosen one is a rim, never a fill (G5) */ main.blogscope .imgcard .seg{ justify-self:start; flex-wrap:wrap } main.blogscope .imgcard .seg button.abtn.sm:not(.pri):not(.link){ height:30px; padding:0 12px; background:none; box-shadow:none; color:var(--ink3); } main.blogscope .imgcard .seg button.abtn.sm[aria-pressed="true"]:not(.pri){ color:var(--ink); box-shadow: inset 0 0 0 1px var(--edge); } /* The determinate bar is a real . It is the only element in the editor allowed to animate its width, and it must carry a number — which does natively, for the screen reader as well as the eye. 🚨 It is also the CSP answer: `style-src` has no 'unsafe-inline', so a bar whose width is an inline style attribute in the markup simply does not render. `value` is an attribute, not a style. */ main.blogscope progress{ appearance:none; -webkit-appearance:none; display:block; width:100%; height:2px; border:0; border-radius:2px; background:var(--hair); overflow:hidden; color:var(--cyan); } main.blogscope progress::-webkit-progress-bar{ background:var(--hair) } main.blogscope progress::-webkit-progress-value{ background-image: var(--ramp-ink); background-size:22em 100%; border-radius:2px; transition: width .25s var(--glide); } main.blogscope progress::-moz-progress-bar{ background-image: var(--ramp-ink); background-size:22em 100%; border-radius:2px; } main.blogscope .imgcard .up{ height:2px } main.blogscope .imgcard .upline{ display:flex; align-items:center; gap:14px; font:500 10px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); font-variant-numeric: lining-nums tabular-nums; } main.blogscope .imgcard .upline .pct{ margin-left:auto; color:var(--ink2) } main.blogscope .imgcard .afield > span{ font-size:8.5px } main.blogscope .imgcard.needalt{ box-shadow: 0 0 0 1px var(--amber), var(--surf-shadow) } main.blogscope .imgcard .altwarn{ color:var(--amber); font:500 10px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase } main.blogscope .imgcard .fail{ color:var(--err); font-family:var(--f-book); font-size:14px; line-height:1.55 } /* ───────────────────────────────────────────────────────────────────────────── 8. THE METER — a number and a determinate bar. No dot, no tick, no ring. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .meter{ display:grid; gap:8px; margin-top:18px; max-width:53ch } main.blogscope .meter .num{ text-align:right; font:500 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); font-variant-numeric: lining-nums tabular-nums; } main.blogscope .meter .bar{ height:2px } main.blogscope .meter.done .num{ color:var(--ink2) } @media (prefers-reduced-motion: reduce){ main.blogscope progress::-webkit-progress-value{ transition:none } } /* the autosave line — one role="status" line, in words */ main.blogscope .saveline{ font:500 10.5px/1.6 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); font-variant-numeric: lining-nums tabular-nums; } main.blogscope .saveline.warn{ color:var(--amber) } main.blogscope .saveline.err{ color:var(--err) } /* ───────────────────────────────────────────────────────────────────────────── 9. THE LADDER — 01..05, decimal-leading-zero, amber, horizontal on desktop and stacked on phone. A step number is state-bearing text and is never --ink4. ───────────────────────────────────────────────────────────────────────── */ main.blogscope .ladder{ counter-reset: rung; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; margin:clamp(22px,3vw,34px) 0; } main.blogscope .ladder .rung{ counter-increment: rung; position:relative; padding:14px 16px 14px 0; border-top:1px solid var(--hair); } main.blogscope .ladder .rung::before{ content: counter(rung, decimal-leading-zero); display:block; margin-bottom:8px; font:500 10px/1 var(--mono); letter-spacing:.3em; color:var(--ink3); font-variant-numeric: lining-nums tabular-nums; } main.blogscope .ladder .rung b{ display:block; font:500 10px/1.5 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); font-weight:500; } main.blogscope .ladder .rung.done::before{ color:var(--cyan) } main.blogscope .ladder .rung.now{ border-top-color:transparent } main.blogscope .ladder .rung.now::after{ content:''; position:absolute; left:0; right:16px; top:-1px; height:2px; border-radius:2px; background:var(--ramp-ink); } main.blogscope .ladder .rung.now::before, main.blogscope .ladder .rung.now b{ color:var(--ink) } main.blogscope .ladder .chip{ margin-top:10px; height:28px; padding:0 10px 0 8px; cursor:default } main.blogscope .ladder .fmsg{ margin-top:10px } @media (max-width:900px){ main.blogscope .ladder{ grid-auto-flow:row; grid-auto-columns:auto } main.blogscope .ladder .rung{ padding:12px 0 } } /* ───────────────────────────────────────────────────────────────────────────── 10. THE PREVIEW — the real post shell, not an approximation ───────────────────────────────────────────────────────────────────────── */ main.blogscope .preview{ padding:0 } main.blogscope .preview .leaf{ margin-top:0; width:100% } main.blogscope .previewbar{ display:flex; align-items:center; gap:14px; width:min(880px, 100% - 2 * var(--pad)); margin:0 auto 18px; } main.blogscope .previewbar .seg{ margin-left:auto } /* ───────────────────────────────────────────────────────────────────────────── 11. PAPER DESK — every override the light theme needs on this surface. Shipped behind FLAGS.paper=false; turning it on adds no new CSS. ───────────────────────────────────────────────────────────────────────── */ main.blogscope[data-ink="paper"] :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; /* --focus is --p-focus here: 6.25:1 */ } main.blogscope[data-ink="paper"] .desk::before{ opacity:.7 } main.blogscope[data-ink="paper"] .grip::before{ background:var(--ramp-ink) }