@layer reset{:root{--bg:#0d0f0d;--ink:#e9e7e1;--dim:#98a09a;--line:#2a302a;--card:#161a15;--panel:#121512;--chip:#1b201a;--btn:#20261f;--docket:#181d18;--gap:#1b1710;--riskbg:#1a1610;--barbg:#262c24;--edge:#343d33;--accent:#e2c07a;--quiet:#cfe3da;--warn:#d9b46a;--auth:#a89c88;--code:#8cae9a;--leg:#c3cac3;--changed:#f2ead8;--badge:#c79a55;--badgeink:#12100a;--griz:#c1583e;--lens:#4c9a52;--lensedge:#1f5e2a;--lensroad:#b5d334;--on:#54897d;--onink:#04100c;--sel:#e2c07a;--selink:#12100a;--ring:#0b0d0c;--ringhalo:#dfe3dd;--scrim:#0d0f0d;--serif:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;--sans:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--md-sys-color-primary:#e2c07a;--md-sys-color-on-primary:#12100a;--md-sys-color-primary-container:#54897d;--md-sys-color-on-primary-container:#04100c;--md-sys-color-secondary:#cfe3da;--md-sys-color-on-secondary:#0d0f0d;--md-sys-color-secondary-container:#1b201a;--md-sys-color-on-secondary-container:#e9e7e1;--md-sys-color-tertiary:#c79a55;--md-sys-color-on-tertiary:#12100a;--md-sys-color-tertiary-container:#20261f;--md-sys-color-on-tertiary-container:#e9e7e1;--md-sys-color-error:#c1583e;--md-sys-color-on-error:#12100a;--md-sys-color-error-container:#1a1610;--md-sys-color-on-error-container:#e9e7e1;--md-sys-color-background:#0d0f0d;--md-sys-color-on-background:#e9e7e1;--md-sys-color-surface:#121512;--md-sys-color-on-surface:#e9e7e1;--md-sys-color-surface-dim:#0d0f0d;--md-sys-color-surface-bright:#161a15;--md-sys-color-surface-container-lowest:#0d0f0d;--md-sys-color-surface-container-low:#121512;--md-sys-color-surface-container:#1b201a;--md-sys-color-surface-container-high:#20261f;--md-sys-color-surface-container-highest:#262c24;--md-sys-color-surface-variant:#20261f;--md-sys-color-on-surface-variant:#98a09a;--md-sys-color-inverse-surface:#e9e7e1;--md-sys-color-inverse-on-surface:#0d0f0d;--md-sys-color-inverse-primary:#e2c07a;--md-sys-color-outline:#343d33;--md-sys-color-outline-variant:#2a302a;--md-sys-color-shadow:#0d0f0d;--md-sys-color-scrim:#0d0f0d;--md-sys-color-surface-tint:#e2c07a;color-scheme:dark light} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%;background:var(--bg);color:var(--ink); font:15px/1.5 var(--sans)} button,input,select,textarea{font-family:inherit} :root{ --md-icon-button-state-layer-width:32px; --md-icon-button-state-layer-height:32px; --md-icon-button-icon-size:20px; --md-slider-handle-width:16px; --md-slider-handle-height:16px; --md-slider-active-track-height:3px; --md-slider-inactive-track-height:3px; } button,md-icon-button,md-switch,md-slider,md-fab,summary,select{ touch-action:manipulation} h2{margin:.1rem 0 .1rem;font-size:1.1rem;color:var(--ink); font-family:var(--serif);font-weight:600;letter-spacing:.01em}} @layer family{ /* ★ FORM CONTROLS DO NOT INHERIT A FAMILY, AND THE FIRST READ CAUGHT IT. With the type pair in tokens, the bar's buttons computed to `Arial` - the browser's own default - while the body computed to the sans, because a `button` element takes the user-agent font unless it is told otherwise. The recipe says a plain sans for controls and labels; that is the whole set of things this line is for. */ #map{position:absolute;inset:0} /* ** THE POINTER'S COORDINATES, ON THE MAP AND NOT IN A BOX (office edition 375 §111.56(1), the founder on the deployed site: *"it displays over top of map controls, it should just be on a single horizontal line in the bottom middle of the map just above the date slider with no box, text only."*) TWO DEFECTS IN ONE PLACEMENT, and only one of them was a choice. THE BOX said nothing - chrome around a fact, which is what §34 strikes from a caption, wearing a border instead of words. THE SECOND LINE was never asked for: the element was appended INTO the bottom-right control column, so it wrapped at that column's width rather than at its own. A surface takes the shape of the box it is put in, and this one was put in a box built for buttons. IT SITS ABOVE THE DATE SLIDER'S TRACK - `2.9rem` is the bar's own offset and `26px` its track's height, both read from the rules below rather than guessed, so the readout moves if the bar ever does. THE HALO IS NOT A BOX. Text on a satellite basemap has no contrast it can count on, and a halo is part of the glyph rather than a panel behind it - the same treatment the district labels already wear on this map. */ .llread{position:absolute;transform:translateX(-50%); bottom:calc(100% + .25rem); z-index:9;font-size:.68rem;color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none; text-shadow:0 0 2px var(--bg),0 0 4px var(--bg),0 0 6px var(--bg)} /* ** THE BOX HUGS THE TEXT, AND THE FIRST READ IS WHY (office edition 375 §111.56(1)). Written `left:0;right:0;text-align:center` the element is the full width of the map, so its RECTANGLE overlaps the zoom control at every width while the ink does not - and an overlap test on that box can only ever report a collision. A measurement that cannot come back clean is not a measurement. Centred by translation, the box IS the text, and the read below is about the pixels the reader sees. */ /* ★★★ THE PAGE COVERS THE SCREEN AND THE CHROME KEEPS OFF THE HARDWARE (office edition 375 §111.168 §4(b), the founder on his phone: *"On mobile the edges of the page and ui are cut off."*). WHAT IT IS NOT, MEASURED FIRST AND AT FOUR WIDTHS. The document is not wider than the viewport: at 320, 375, 390 and 430, at rest and with the layers, Activities, Settings and lens sheets open, `documentElement .scrollWidth` equals `innerWidth` exactly and no element crosses either edge. The eleven-button filter row the office suspected is not the cause and nothing else is either - there is no sideways page to find. WHAT IT IS. The page declares `viewport-fit=cover`, which is right: the map should reach the corners of the screen rather than sit in a letterbox. On an iPhone that puts the LAYOUT VIEWPORT under the display cutout and the rounded corners, and this stylesheet used `env(safe-area-inset-*)` in exactly ZERO places - so every control pinned to an edge sat under the hardware and was clipped. The document was never too wide; the viewport was wider than the part of it a person can see. THE CURE KEEPS THE COVER AND MOVES THE FURNITURE. The map canvas still fills the screen; every pinned control and every sheet takes the insets, so nothing a reader must touch or read is under the corners. `max()` rather than a bare `env()`, because the inset is zero on a desktop and the existing spacing has to survive there. */ .corner{position:absolute;z-index:8;display:flex;flex-direction:column;gap:.3rem} /* ★ THE CORNER IS THE RIGHT EDGE'S ONE COLUMN (office edition 375 §106.2). Menu, the Quartermaster, the on-layers strip and the two destinations are one stack now, so "under Menu" is the flex order and not a number somebody has to keep true. `align-items:flex-end` is what keeps the buttons their own size: a column STRETCHES its children by default and the strip is the widest child, so without it Menu and the Quartermaster would grow to the strip's width. AND THE COLUMN IS NOT A SURFACE. Its box is now as wide as the strip and as tall as the stack, and that is map the reader still has to be able to drag; the pointer goes to the controls and the box itself is transparent to it. Same shape as the lane's own rule below, for the same reason. */ .corner.tr{top:max(.5rem,env(safe-area-inset-top)); right:max(.5rem,env(safe-area-inset-right)); align-items:flex-end;pointer-events:none} .corner.tr > button{pointer-events:auto} .corner button{background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:9px;padding:.32rem .55rem; font-size:.72rem;cursor:pointer} .corner button[aria-pressed=true]{background:var(--chip)} .brand{padding:.2rem 0 .35rem;font-size:.9rem;font-weight:600; font-family:var(--serif);letter-spacing:.01em} .brand small{display:block;font-weight:400;font-size:.68rem;color:var(--dim)} /* ★★ THE TWO DESTINATIONS, PLAIN ON THE RIGHT EDGE (office edition 375 §106.1, §106.2(a), §106.4, the founder: *"no box or rail"*, and his done-test: *"nothing on the map has a box except Menu, Quartermaster and the map button"*). THIS RULE REPLACES `.bar`. The four-word bottom bar and the rail were the same two destinations in two postures, both below Material's own floor for the forms they were wearing, and §106 rules one posture for both tiers. Neither class is emitted any more and neither has a rule. THE 32-PIXEL STEP IS THE FAMILY'S (§106.1). The standard icon button is a 32 px target with a 24 px glyph inside it and NO container - the container is what the founder struck - so the button carries no background, no border, no radius and no shadow at rest. THE PRESSED STATE IS AN INDICATOR, NOT A BOX, and it is the rail's own treatment carried over rather than a new invention: a filled shape behind the glyph while the destination's pane is open, gone the moment it closes. A state that appears only while a surface is open is not a box on the map. THE GLYPH WEARS A HALO AND NOT A GROUND. Unframed ink over an aerial photograph disappears over snow; the halo is the treatment the district labels, the coordinate readout and the walk-time glyph already use, and it frames nothing. SPECIFICITY IS DELIBERATE. These buttons live inside `.corner.tr` now, and `.corner button` gives every child of that corner a panel, a border and a radius - the box. `.edge .eb` outranks it; written as `.eb` alone it would lose, and the founder's own done-test is what would have failed. */ .edge.er{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem; pointer-events:none} /* ★ THE BOX IS THE COMPONENT'S AGAIN, AND THE TARGET GROWS BEHIND IT (office edition 375 §111.172 §3, correcting §111.168 §4(e)'s cure rather than its rule). At 44 the pressed state drew a bigger tile and the corner these buttons live in moved twelve pixels, measured against set a8c13f5981b5. 32 is what the component ships and what the founder had; the 44-pixel target is the transparent pseudo-element below. */ .edge .eb{width:32px;height:32px;padding:0;background:none;border:0; border-radius:16px;color:var(--ink);cursor:pointer;display:flex; align-items:center;justify-content:center;pointer-events:auto; box-shadow:none} .edge .eb .msym{font-size:24px;font-variation-settings:'opsz' 24;color:var(--ink); text-shadow:0 0 2px var(--bg),0 0 4px var(--bg),0 0 6px var(--bg)} .edge .eb[aria-pressed=true]{background:var(--edge)} .edge .eb[aria-pressed=true] .msym{text-shadow:none} .edge .eb:focus-visible{outline:2px solid var(--ink);outline-offset:1px} /* `.rail` and `.palist` both stood here and are gone with §106.2(a) - nothing emits either, so nothing styles either. */ .badge{display:inline-block;min-width:1.05rem;padding:0 .25rem;margin-left:.2rem; border-radius:999px;background:var(--badge);color:var(--badgeink); font-size:.62rem;font-weight:700;vertical-align:top} /* RULING 2. ONE SURFACE, not a panel and a sheet. At rest the map is full-bleed and nothing covers it; a pill or a corner summons this, one at a time, and a tap on the map dismisses it. On a phone it rises from the bottom; past 900px it is the shared left pane every popover and every tap sheet renders into, so there is one place to look rather than two. */ /* ★★ THE PANE IS FIXED, AND THAT IS THE WHOLE OF §111.136 §2 (office edition 375 §111.136 §2, the founder on his phone: *"I am able to accidentally zoom the entire ui in slightly somehow which puts some of the ui buttons out of reach ... It wants to scroll horizontally and shouldn't."*). READ FIRST, AS THE RULING REQUIRED, AND IT IS ONE ELEMENT AT BOTH WIDTHS. Hiding each body child in turn and re-measuring the document named `#pane` alone: at a 1,400 frame it carries `scrollWidth` 1,659 against a 1,400 client - 259 px of sideways room - and at 430 it carries `scrollHeight` 1,018 against 900 - 118 px of downward room. One element, two axes, three of the founder's four symptoms: the sheets drift sideways, the page pans, and the interface zooms because there is somewhere for it to go. WHY AN ABSOLUTE BOX DID IT. The sheet is parked off-screen when closed by `transform:translateY(calc(100% + 24px))` - and a transformed absolutely positioned box still contributes to its scroll container's overflow, so the closed sheet was adding its own height (or, at the wide tier, its own width) to the document on every page the reader ever opened. `position:fixed` IS THE CURE AT THE ELEMENT, which is what the ruling asked for - *never by hiding the symptom on the body*. A fixed box is laid out against the viewport and takes no part in the document's scrollable overflow, parked or not. It changes nothing about where the sheet appears: its offsets are already viewport-relative, because its containing block was the initial one. */ .pane{position:fixed;left:0;right:0;bottom:0;z-index:12; background:var(--panel);border-top:1px solid var(--edge); border-radius:14px 14px 0 0;max-height:76vh; /* The sheet still reaches the bottom of the screen - its ground is meant to - and its CONTENT keeps clear of the corners and the home indicator (office edition 375 §111.168 §4(b)). */ padding:.1rem max(.8rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left)); /* ★★ ONE AXIS, NAMED ON BOTH (office edition 375 §111.136 §3, the founder: *"The menus are now able to drift and be dragged horizontally when scrolling vertically, this shouldn't happen only vertical scroll I think"*). `overflow-y:auto` ALONE LEAVES `overflow-x` AT `visible`, and the specification computes a `visible` paired with a non-`visible` on the other axis to `auto` - so naming one axis gave the sheet a horizontal scroller by a route the declaration does not show. This is the third time that rule has bitten this stylesheet in two days; it is named at the lane as well, and it is why both axes are always written out here. `overscroll-behavior` KEEPS THE SHEET'S SCROLL TO THE SHEET: a drag that runs past the end of the list does not hand itself to the page beneath, which is the other way a reader gets the whole frame moving. */ overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain; /* ★ A CLOSED SHEET IS HIDDEN BY A DISTANCE, NOT BY A PERCENTAGE (office edition 365 §10.4, the founder: *"The layers and info pop up from bottom is open by default, should be closed, and it often randomly opens itself ... it happens every time I reload the page."*). MEASURED, phone frame, every condition driven - bare, his own address, a seeded store, and after the viewport shortens under it: the pane reads CLOSED and its box sits at y 846 in an 844-high viewport. TWO PIXELS. The old hide was `translateY(102%)` - two per cent of the pane's OWN height, which is 94 to 116 pixels here - so the whole concealment was a 2 px margin measured from the containing block's bottom. A MARGIN THAT SMALL IS NOT A DESIGN, IT IS AN ACCIDENT OF ARITHMETIC. On Safari the containing block's bottom and the visible bottom are not the same edge while the address bar is collapsing, and any disagreement of three pixels puts a closed sheet on screen. It also leaves a closed control in the hit-test, one swipe from the edge. SO: the pane's own height PLUS a fixed distance no viewport arithmetic can close, and `visibility` withdrawn when shut - held through the close transition so the sheet still slides rather than vanishing. THE SYMPTOM IS NOT REPRODUCED HERE and this is not claimed as its cure: the shop's WebKit reads the pane closed in all four conditions (`data/enumeration/sheet-at-load.txt`). What is cured is a measured 2-pixel concealment, which is worth curing whether or not it is his. */ transform:translateY(calc(100% + 24px));visibility:hidden; transition:transform .18s ease, visibility 0s linear .18s; box-shadow:0 -12px 32px rgba(0,0,0,.35)} .pane.open{transform:translateY(0);visibility:visible; transition:transform .18s ease, visibility 0s} .pane .grip{padding:.45rem 0 .2rem;width:100%;background:none;border:0; cursor:pointer} .pane .grip i{display:block;width:38px;height:4px;background:var(--edge); border-radius:2px;margin:0 auto} /* THE SECOND TIER. A popover is anchored to the pill that opened it, sits above the bar, and leaves the map visible - which is the entire reason it exists, because effort and date are adjusted BY WATCHING the ground move. It carries a tail so there is never a question which pill it belongs to. */ .pop{position:absolute;bottom:3.15rem;z-index:13;display:none; width:min(23rem,calc(100vw - 1rem));background:var(--panel); border:1px solid var(--edge);border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.42)} .pop.open{display:block} .pop .ctl{border-bottom:0;padding:.5rem .8rem .65rem} .pop .readout{padding-top:.35rem} .poptail{position:absolute;bottom:-7px;left:var(--tail,50%); margin-left:-7px;width:12px;height:12px;padding:0;background:var(--panel); border:1px solid var(--edge);border-top:0;border-left:0; transform:rotate(45deg);pointer-events:none} /* A10. FIXED LANE: the tray reserves its height whether or not it holds anything, so switching a layer never moves the map under a reader's finger. A row that appeared and pushed the canvas down would make every toggle cost a re-orientation. */ a.q.nav{display:block;text-decoration:none;text-align:inherit} .tray{position:relative; /* ★ THE BOUND IS THE BOX, NOT A CAP ON A SHRUNKEN ONE (office edition 375 §33.3a). `left:50%;transform:translateX(-50%)` with `width` auto is shrink-to-fit, and a `max-width` only caps a box that is already sized: measured at a 500 px viewport, the lane was 107 px holding 594 px of chips, with no chip clipped inside. Setting `width` on the same rule did not take either - the used width stayed 107 - so the lane is bounded the way the arithmetic above always described it: four rem clear of each corner, and `margin:auto` centres it between them, which is what an absolutely positioned box with both offsets set does. ★ AND THE AUTO MARGINS CAME STRAIGHT BACK OFF, MEASURED. With `left`, `right` AND `margin:auto`, the box solved width as shrink-to-fit and gave the slack to the margins: 101.5 + 107 + 101.5 = 310 at a 430 px frame, so the lane was still 107 px and now centred in its own emptiness. The offsets alone define the box; there is nothing left to centre. The `max-width:40rem` cap went with them - with both offsets set it makes the box over-constrained again, and a lane that spans between the two corner buttons IS the ruled bound at every width. */ /* ★ THE STRIP LIVES ON THE MAP, NOT OVER THE PANE (office edition 375 §48.3b and §48.3c). Its left edge is the MAP's left edge whatever the pane is doing, and its right edge stops clear of the Quartermaster / Menu column - so on the phone the lane runs the whole width it has, which is what §48.3c asks for, and on the wide window it starts right of the rail and the sheet instead of lying across them. THE THREE OFFSETS MIRROR `#map`'s OWN, below and at the same breakpoint. One fact in two places is how they would drift, so they are written together: the map's inset IS the lane's inset. */ /* ★★ THE LANE IS IN THE COLUMN NOW (office edition 375 §106.2(b), the founder: *"shift the top left of map layers glyphs from the left to the right so everything is in one area and nothing has a box"*). IT WAS `position:absolute;left:0;right:3.5rem;top:.5rem` - a lane pinned across the top of the map, bounded away from a corner button it had to know the width of. It is a child of that corner now, so its right edge IS the column's and the arithmetic above is retired rather than re-derived: nothing can slide under Menu, because the lane starts where Menu ends. THE BOUND IS A MAX-WIDTH BECAUSE A FLEX ITEM IS SIZED BY ITS CONTENT. An empty lane is a few pixels wide and takes no space beside the column; a full one grows leftward across the map until the cap, and then scrolls inside itself exactly as it did before. The cap leaves the map's left half clear at every width the product supports. */ /* ★★ THE LANE RUNS TO THE LEFT GUTTER, AND THEN IT WRAPS (office edition 375 §111.136 §1, the founder on his phone: *"the glyphs start getting cut off after 9 glyphs on the map despite there being more room to the left of the screen"*). THE 22rem CAP WAS THE NINE. At a 430 frame it bound the lane to 352 px - nine chips and their gaps - while the lane's right edge sat at 422 and seventy pixels of map stood empty to its left. The cap was the office's number and it answered nothing: the column's own gutter is what decides where the lane may end, and that is `.corner.tr`'s `.5rem` at each side. AND THE SECOND ROW IS THE RULING (§111.136 §1, *"second row is fine"*). Fifteen layers will outrun any single row at phone width, and the page has fifteen; `flex-wrap` continues them beneath, and `justify-content` right-aligns every row the way `.corner.tr` right-aligns the column, so the rows line up on the edge the reader's thumb is nearest. NO CHIP IS EVER CLIPPED, which is §10.24's promise kept by a means that finally suits it: a wrapped row has nowhere to hide a chip. IT CANNOT COLLIDE WITH THE MENU COLUMN OR WITH WHAT IS BELOW IT. The lane is a CHILD of that column, laid out in its flow beneath the Menu button - so a second row lengthens the column and moves the destinations down rather than drawing over anything. Nothing here is positioned. AND IT FOLLOWS THE COLUMN WHEN A SHEET OPENS. `body.paneon` slides the column left by the sheet's width, so the lane's room shrinks by the same amount; without the second rule the lane would keep its full-screen bound and grow left off the screen. */ max-width:calc(100vw - 1rem); /* THE LANE CONTAINS ITS CHIPS RATHER THAN CLIPPING THEM. This was a fixed `height:1.6rem`, sized when the marks were 13px. The marks were ruled to 20 and the lane did not follow, so 28px chips sat in a 24px lane - measured, not guessed. A min-height keeps the old floor for an empty or one-chip lane and lets a taller mark push it, which is the only direction that cannot make the ruled size a lie. HORIZONTAL OVERFLOW STILL SCROLLS INSIDE, per the note below: the lane may grow to fit the HEIGHT of its contents and never to fit their WIDTH, because width is what would slide it under a corner button. */ /* ★ THE LANE'S HEIGHT IS ITS BUTTONS' HEIGHT (office edition 375 §57.4). `min-height:1.6rem` was 24 px, set when the marks were smaller; the standard's icon button is 32 and the content was taller than the box, so the lane had a pixel of vertical give even with `overflow-y:hidden`. The height follows the control, which is the only number that cannot be stale the next time a token moves. */ z-index:8;min-height:32px;display:flex;gap:.3rem;align-items:center; flex-wrap:wrap;justify-content:flex-end; /* SHORT OF THE CORNERS. Layers sits left, Settings and Yours sit right, and they are always there - so the lane is bounded away from both and a full tray can never slide under a button. Overflow scrolls INSIDE the lane; it never grows it. */ /* ★ THE LANE WAS RESERVING A CORNER THAT NO LONGER EXISTS (office edition 365 §10.24, the founder on the phone with six layers on: *"the active layers chips at the top of the screen get cut off in mobile view"* - the sixth chip reading "Pri..." under the Menu button). 16rem reserved BOTH top corners. The top-left corner was retired with §18.1 - nothing emits it - so on a 390 px phone the lane was 134 px wide while 262 were free. Half the reserve was for a button that is not there. THE BOUND STILL CANNOT SLIDE UNDER MENU, and the arithmetic is written down rather than trusted: the lane is centred, so its right edge sits at 50vw + (50vw - 4rem) = 100vw - 64 px, and the Menu button's left edge is at 100vw - 54 px. Ten pixels of clearance, at every width. */ /* ★ THE LANE TAKES ITS BOUND, IT DOES NOT SHRINK TO ITS CHIPS (office edition 375 §33.3a, the founder with four rows on: one chip, clipped mid-word - "Roads and ga..." - at the strip's edge). MEASURED BEFORE IT WAS CHANGED: at a 500 px viewport the lane's own box was 107 px holding 594 px of chips, and no chip was clipped INSIDE - the labels' scrollWidth equalled their width. The chips were whole and the lane was small. `max-width` bounds a box that is already sized, and an absolutely positioned flex box with `left` set and `right` auto is shrink-to-fit: its width came from the available space beside its own offset, not from the arithmetic written above. SO IT IS `width`, WHICH IS WHAT THAT ARITHMETIC ALWAYS MEANT. The lane spans its ruled bound at every viewport and the overflow scrolls inside it, which is the behaviour the note above describes and the box did not have. The clearance from Menu is unchanged - same expression, same ten pixels. */ /* ★ AND NO CHIP IS EVER CUT. Scrolling alone leaves a chip sliced at the lane's edge, which is what a reader calls "cut off"; snapping means a scroll comes to rest on a chip boundary, so a partial chip is a thing in motion rather than a thing on the screen. */ /* §57.4's ONE-AXIS RULE IS SPENT (office edition 375 §111.133 §2). It read: the founder's *"they are able to be moved a bit up and down vertically, which makes the row feel sloppy"*, cured by pinning `overflow-y` because `overflow-x:auto` alone left the other axis at `auto` and the lane was a scroller in BOTH directions. The lane is a scroller in NEITHER direction now, so there is no axis to pin and the vertical travel has no mechanism left to arrive by. Recorded rather than deleted: the next reader who wonders why the row cannot be nudged vertically should find the answer, not a gap. */ /* ★ §57.4's `overflow-y:hidden` GOES, AND IT HAS TO GO (office edition 375 §111.133 §2). Two reasons, and the second is a trap worth writing down. Written above `overflow:visible` it would be silently reset by the shorthand, which is a rule cancelling a rule - the cascade collision this file has a law about. Written the other way as `overflow-x:visible; overflow-y:hidden` it is WORSE: the specification says a `visible` that is paired with a non-`visible` on the other axis computes to `auto`, so the lane would come back as a horizontal scroller by a route nobody reading the declaration would see. AND ITS CAUSE IS GONE ANYWAY. §57.4's vertical slop - *"they are able to be moved a bit up and down vertically, which makes the row feel sloppy"* - was travel inside a SCROLL CONTAINER, which is what the lane stopped being one line below. An element that scrolls on no axis cannot be dragged on either. */ /* THE SNAP AND THE OVERSCROLL RULES WENT WITH THE SCROLLER (office edition 375 §111.133 §2): snapping settles a scroll on a chip boundary and there is no scroll to settle, and `overscroll-behavior` governs a scroll chain this lane is no longer part of. `overflow-y:hidden` above stays - §57.4's vertical slop was a property of the box, not of the scroller, and the founder's *"sloppy"* row is not invited back by removing the horizontal half. ★ WHAT TOOK THE FOUNDER'S SWIPE: `pointer-events` (office edition 375 §43.2a, his phone: *a swipe moves nothing*). The lane is `pointer-events:none` so the map beneath stays draggable across the strip's empty width, and `.tray > *` puts the pointer back on the chips alone. That reading is unchanged and is now the whole of it: §43.2a lifted the lane to `auto` whenever it had something to scroll, and it has nothing to scroll ever again. A swipe that starts on a gap goes to the map, and a swipe that starts on a control is that control's press. */ /* ★★ NO SCROLL, NO FADE, NO WRAP (office edition 375 §111.133 §2, the founder: *"lets just let them sit there without that carousel effect"* and *"let's just let them stack up for now and see if it's even an issue"*). WHAT WENT AND WHY IT ALL WENT TOGETHER. `overflow-x:auto` made the lane a scroller; the scroller needed `data-more` to know which end had more; `data-more` drove three mask gradients; the masks were the carousel. One element's worth of machinery serving one effect the founder does not want, so it is removed at the root rather than disabled at the surface - a rule that outlives its element is furniture nobody can see. `clip` RATHER THAN `visible`, AND THE FLOOR IS WHY (office edition 375 §111.133 §2, found by `build_deploy` refusing the set: *430: the frame did not take - innerWidth 431*). `visible` LET THE LANE EXTEND THE DOCUMENT. Measured at a 430 frame: at boot, with ONE chip whose right edge is 423, `documentElement.scrollWidth` read 431 against a 430 client - the icon button's own ripple ink, which the old `overflow-x:auto` had been containing all along. With fifteen layers on it read **636 against 430**: the whole page pans 206 px sideways, which is a defect a reader meets by dragging the map and finding the interface slide off. `clip` IS NOT A SCROLLER AND IS NOT THE CAROUSEL. It creates no scroll container, so there is no scroll to fade, nothing to snap, and no gesture hiding a control - every clause of the ruling stands. The shorthand sets both axes, which also sidesteps the `auto` trap below by never pairing `visible` with anything. Measured with it: 430 at boot and 430 with a full strip, at the same frame. THE CHIPS STILL RUN ON IN THEIR ROW - `display:flex` does not wrap unless told to, and nothing here tells it to. What changes is where the row ENDS: at the lane's own edge rather than somewhere off the side of the document. ★ AND THE CONSEQUENCE IS MEASURED AND OWED TO THE FOUNDER, not hidden. The lane is 330 px at a 430 frame, which holds about seven chips; past that the extra chips are clipped and there is no gesture to reach them, because the ruling removed both the scroll and the count chip that used to. *"Let's just let them stack up for now and see if it's even an issue"* invited exactly this reading, and this is the issue, stated with its number rather than designed around a second time. THE POINTER RULE STAYS AND IS NOW UNCONDITIONAL. The lane is `pointer-events:none` so the map beneath stays draggable across its empty width, and `.tray > *` puts the pointer back on the chips alone. It used to be lifted to `auto` whenever `data-more` said the lane was a scroller; with nothing to scroll there is no case where the lane itself needs the pointer. */ overflow:clip;overflow-clip-margin:2px;pointer-events:none} .tray > *{pointer-events:auto} /* ★ THE STRIP'S CONTROL IS THE STANDARD'S TOGGLE ICON BUTTON (office edition 375 §43.2b). The pill, its hand-drawn selected state and its hand-drawn dashed off were three inventions of a control the standard publishes; what stays ours is WHICH layers are on the strip and what a press means. The host keeps `class=chip`, `data-off` and `aria-pressed` - the strip's own contract with the gate - and the component brings the anatomy, the states and the ripple. NO SIZE IS SET HERE. The icon button ships at the standard's size and the §37.3 rule about the switch applies to it for the same reason: what was disproportionate was the container, not the control. */ .tray .chip{flex:0 0 auto;scroll-snap-align:start;cursor:pointer} /* A layer with no symbol falls back to its word rather than to a blank button, and the word is set small enough to sit in the button's box. */ .tray .chip .tlab{font-size:.6rem;line-height:1;padding:0 .2rem} /* `data-named` went with the pill (Ed 375 §43.2b): the button is one size whether it carries a symbol or a word, and a rule for an attribute nothing emits is furniture nobody can see - this page's own law, inverted. */ /* ★★ THE LENS'S CHIP (office edition 375 §111.104 §4a, built with slice 2). It sits in the strip beside the layer chips and is deliberately NOT one: it carries words rather than a mark - a tag IS its number, and §111.24's ruling is that a thing whose identity is textual wears a text chip - and it has no switch, because its tap opens the lens rather than toggling ground. It takes the strip's own height and type so it reads as a member of the row, and the accent border is what says an active lens is not a layer. */ /* ★★ THE TAG FIELD (office edition 375 §111.123 §2(a)). The GOV.UK text-input pattern: a label above, the field, and the answer beneath it. Full width because a number the reader knows is typed, not hunted for; the tabular figures because a district number is a number and digits that shift width as they are typed read as the field arguing with the finger. `.lenssheet` is an empty marker the tap door reads - it draws nothing. */ .lenssheet{display:none} /* The field is a target before it is a field, and 44 is the minimum a thumb gets (office edition 375 §111.168 §4(e)): measured at 40 on the emulated iPhone before this line. */ input.tagq{width:100%;box-sizing:border-box;font:inherit;font-size:1rem; font-variant-numeric:tabular-nums;letter-spacing:.04em;min-height:44px; padding:.45rem .6rem;border:2px solid var(--ink);border-radius:4px; background:var(--panel);color:var(--ink)} /* THE FOCUS RING IS THE PALETTE'S ACCENT, NOT A LITERAL. A colour written here is a colour outside the declared pair and invisible to the contrast test that reads them - the theme law's own specimen. */ input.tagq:focus{outline:3px solid var(--accent);outline-offset:0} /* THE COUNT CHIP'S RULES ARE RETIRED with the chip (office edition 375 §111.133 §2). Nothing emits `.traycount` any more, and a rule for a class the page never writes is furniture nobody can see - this file's own law, and the reason the pill's `data-named` rule went at §43.2b. */ /* ★★ THE SAVED LENSES, IN THE ACTIVITIES SHEET (office edition 375 §111.131 §1). The strip's own lens chip is gone with §111.104 §4a - its rules go with it, because a rule that outlives its element is furniture nobody can see, which is this page's own law. These are its replacement, and they live where a reader CHOOSES between things rather than where the things that are on are listed. A row is the chip and its delete together, so removing one is never a mode the reader has to enter. */ /* ★★★ A PACK IS A DISCLOSURE (office edition 375 §111.160 §2a). The platform's own `
`, which is what the lens list beneath it already uses - the standard component with the keyboard and screen-reader behaviour already in it, rather than a hand-written one. Its header carries the pack's pictograph, its name and how many of its items are on. */ /* A group's heading in the layers menu (office edition 375 §111.162 §2). It is drawn only where a group has members; the Access group has none yet. */ .grouphead{font-size:.72rem;color:var(--dim);letter-spacing:.04em; text-transform:uppercase;padding:.6rem .1rem .2rem} .packbox{margin:.2rem 0 .6rem;border:1px solid var(--line); border-radius:10px;padding:.2rem .6rem .4rem} .packbox>summary{display:flex;align-items:center;gap:.5rem; cursor:pointer;list-style:none;padding:.45rem 0;font-size:.9rem} .packbox>summary::-webkit-details-marker{display:none} .packbox>summary .pn{flex:1 1 auto} .packbox>summary .val{color:var(--dim);font-size:.74rem} /* A named mark sits inline at the text's size and inherits its colour (§111.161 §2d), so it themes with light and dark and adds no ink. */ .gn{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0} .lensbox{margin:.2rem 0 .4rem} /* The disclosure is a target too - measured at 31 high before this line. */ .lensbox>summary{font-size:.74rem;color:var(--dim);cursor:pointer; list-style:none;padding:.25rem 0;min-height:44px; display:flex;align-items:center} .lensbox>summary::-webkit-details-marker{display:none} .lensbox>summary .val{color:var(--ink);margin-left:.3rem} /* ★★★ A LENS ROW IS A COMPACT LIST ITEM, AND EVERY TARGET IS 44 BY 44 (office edition 375 §111.168 §4(e)). The row is the lens's switch; the two icon buttons on the right do their own thing. 44 is Apple's minimum and the number the founder's thumb was missing - the old Edit was eleven-pixel text. */ .lensrow{display:flex;align-items:center;gap:.2rem;margin:.1rem 0; min-height:44px;border-radius:10px} .lensrow.on{background:var(--chip)} .lensname{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.5rem; min-height:44px;padding:.2rem .5rem;background:none;border:0; font:inherit;font-size:.78rem;color:var(--ink);text-align:left; cursor:pointer;border-radius:10px} .lensrow.on .lensname{font-weight:600} /* The row's left mark became a BUTTON of its own (office edition 375 §111.172 §4a), so the rules that styled a glyph inside the name are struck rather than left: a rule for a class nobody emits is furniture nobody can see, which is this page's own law pointed at its stylesheet. */ .lnt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word} .lensact{flex:0 0 auto;--md-icon-button-icon-size:20px; width:44px;height:44px;color:var(--dim)} .lensact .msym{font-size:20px;font-variation-settings:'opsz' 20} .lensadd{display:inline-flex;align-items:center;gap:.4rem;min-height:44px} .lensadd .msym{font-size:18px} /* The species the transcription has not reached, folded (office edition 375 §111.168 §4(g)): the count on the row, the names one tap in. */ .notrans{display:inline} .notrans>summary{display:inline;cursor:pointer;list-style:none; text-decoration:underline;text-underline-offset:2px} .notrans>summary::-webkit-details-marker{display:none} /* THE EDIT CONTROL RIDES THE DELETE'S SHAPE (office edition 375 §111.149 §3): same lane, same weight, same quiet ink, so neither of the two controls beside a chip outranks the other. It is set in the page's own type rather than drawn, which is this project's rule for a control whose identity is a word. */ /* `.lensedit` and `.lensdel` are retired with the text controls they styled (office edition 375 §111.168 §4(e)): the row carries two icon buttons now, and a rule for a class nothing emits is a rule the next reader deletes. */ .tray .chip:hover{border-color:var(--ink)} /* OFF IS A GHOST. The chip stays in the lane at reduced weight with a dashed edge - the reader sees WHICH layer is off, not a gap where one used to be. An absence carries no information. ★ AND A HIDDEN CHIP IS OUTLINE ONLY (office edition 373 §6.2c, the founder's own words: "greyed-out outline"). In his screenshots the hidden Ownership blocks chip and the shown Private land chip beside it looked the same, which is how a hide survived two days unnoticed and cost four reports of a parcel that would not answer. The hidden chip loses its FILL as well as its weight: no panel behind it, a dashed dim edge, dim ink, and its mark at 40%. Two states a glance can tell apart, which is the whole job of a chip. */ /* OFF IS THE COMPONENT'S OWN UNSELECTED STATE, not a dashed pill of ours. What is kept is the family's ink: an unselected button reads dim, a selected one reads in the accent the tokens carry. */ .tray .chip[data-off]{opacity:.55} .tray .chip[data-off]:hover{opacity:.85} .tray .chip:focus-visible{outline:2px solid var(--ink);outline-offset:1px} .tray .chip .gl{display:block;flex:0 0 auto} .tray .chip .x{color:var(--dim);font-size:.7rem;margin-left:.1rem} .tray .chip:hover .x{color:var(--ink)} .nots{margin:.2rem 0 0;padding-left:1rem;font-size:.74rem;line-height:1.55; color:var(--dim)} .nots li{margin:.1rem 0} /* ** ONE-LINE ROWS, AND THE KEY IS THE VALUE'S FIRST SEGMENT (office edition 375 §102.4, the founder: *"Agree on your second option for the spacing"* - ruled for EVERY card, not only the road's). WHAT THIS REPLACED: `display:flex` with `justify-content:space-between`, so a key sat hard left and its value hard right and any value longer than the gap WRAPPED. A card's rows were therefore whatever height their longest value made them - `The record` beside a full OpenStreetMap citation ran three lines while `Kind` ran one - and a reader scanning down a card had no rhythm to scan by. NOW: one line each, the key leading its own value rather than facing it across a gutter, and anything too long for the width ends in an ellipsis rather than pushing the row taller. **A card is the same height throughout**, which is the whole of the ruling. The full text stays reachable - the row is still the door it always was, and `title` carries it for a hover. */ .recipe{font-size:.78rem;line-height:1.5} /* ★★★ NOTHING ON A CARD IS TRUNCATED, AND A POINTER MEANS A CLICK ACTS (office edition 375 §111.157 §2 and §3, the founder: *"The card cuts off the info instead of wrapping it so it can be read. ... The hand pointer acts like it can click on lines in the card but clicking does nothing."*). ONE RULE CARRIED BOTH DEFECTS. `white-space:nowrap` with an ellipsis gave every card in the product a row that ends in `...` rather than wrapping - *Not transcribed · Bighorn Sheep, Bison, B...* - so a fact was shown as a fragment. And `cursor:pointer` on EVERY row gave the hand to rows that do nothing, which is the scrim's family again: an element that looks like a control and is not. THE RULING THAT STOOD HERE IS SUPERSEDED, NOT FORGOTTEN. It read *a card is the same height throughout*, and bought that rhythm with the ellipsis and with a `title` a hover could reach. A hover is not available on a phone, and a fact a reader cannot read is not a fact; §111.157 §2 rules for every card on the site that a value too long for the width WRAPS. AND THE POINTER IS EARNED BY THE ATTRIBUTE THAT MAKES IT TRUE: a row with a handler shows the hand, a row without shows the default. Written as a rule on `[onclick]` rather than as a second class, because a class is a thing to remember and an attribute selector cannot drift from the handler. */ .recipe .row{display:block;padding:.34rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere;word-break:break-word} .recipe .row[onclick]{cursor:pointer} .recipe .row:last-child{border-bottom:0} .recipe .k{color:var(--dim)} /* ★★ THE BACKSLASHES ARE DOUBLED AND THE REASON IS THE WHOLE DEFECT (office edition 375 §111.90, the founder: *"a bunch of gibberish in the cards"*). WHAT HE SAW: every ` · ` between a card's key and its value rendered as `?a0?b7?a0` - a replacement character followed by the hex digits of the very bytes it stands for. WHAT IT WAS. This stylesheet lives inside a NON-RAW Python triple-quoted string, and `\00` is a valid OCTAL escape there. **Python's own parser ate it at import time**: `\00a0` became NUL + "a0", the built CSS carried three NUL bytes, and a browser draws a NUL as U+FFFD. Nothing downstream was wrong - not the font, not the charset, not the courier, not Windows. The emitter handed the browser a NUL and the browser said so. IT IS SILENT BY CONSTRUCTION, which is why it lived two days. `\d` and `\s` raise a SyntaxWarning because Python does not know them; `\0` is a character Python DOES know, so there is no warning to miss - the string simply is not the string that was typed. SWEPT: this is the only backslash in this file whose next character Python claims (three of them, one rule). A CSS escape written in a Python literal is doubled or the literal is raw. */ .recipe .k::after{content:"\00a0\00b7\00a0"} /* the key leads the value */ /* ★ THE LAYER ROW'S SLOTLESS CONTROLS, BEHIND ITS DOOR (office edition 375 §37.3). `md-list-item` publishes six slots and none of them is for a reorder handle or a slider, so they sit in the row's own disclosure rather than in a slot this shop invented. */ /* ★ SMALLER BY THE STANDARD'S OWN TOKENS, NEVER BY A HAND SCALE (office edition 375 §57.5h, the founder: *"the glyphs and sliders, including the ones on the map, can be about 25 % smaller or so"*). THE COMPONENTS EXPOSE THEIR SIZES AS CUSTOM PROPERTIES, and these are the names, read from the vendored bundle rather than from a memory of a page: --md-icon-button-state-layer-width / -height shipped default 40px --md-icon-button-icon-size shipped default 24px --md-slider-handle-width / -height shipped default 20px --md-slider-active-track-height shipped default 4px --md-slider-inactive-track-height shipped default 4px ★ AND THE SMALLER STEP IS NOT PUBLISHED IN WHAT THIS FAMILY VENDORED, so it is not quoted as though it were. `_md-comp-icon-button.scss` carries two pixel values and only two - 40px and 24px - and `_md-comp-slider.scss` carries one handle size and one track height. The office's "a 32 px container with a 20 px icon is the spec's small step" is not in either file. So the values below are THE FAMILY'S, set through the standard's own tokens at the founder's own ratio; what is quoted is the token NAMES and the shipped defaults they replace. A number claimed from a file that does not carry it is the fabricated-citation defect, and this shop has paid for that once already. ONE DECLARATION FOR BOTH SURFACES - the strip and the pane are one control in one dress (§56.4), so the tokens are set at the root and not per place. */ /* ★ THE LAYER ROW: THE GLYPH AND THE SLIDER, NOTHING ELSE (office edition 375 §56.2). No list item, because there is no headline and no supporting text for one to slot - a `md-list-item` holding one control in `start` and one in `end` would be the component carrying two empty slots and a row height neither control needs. ★ AND EVERY CONTROL FITS INSIDE THE PANE'S CONTENT BOX (§57.5g, the frame showing the slider's handle running past the pane's edge). The row is a grid of a fixed glyph and a slider that takes what is left: `minmax(0,1fr)` is what stops a flex child from refusing to shrink below its content, which is how a slider with an intrinsic width overflows its parent. */ /* Glyph, slider, pin - three columns, and only the slider grows (Ed 375 §63.2c). `minmax(0,1fr)` is still what stops it refusing to shrink. */ .lrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:.5rem;padding:.15rem 0;max-width:100%} .lrow md-slider{width:100%;min-width:0} /* A NOTE ON THE LAST FOUR PIXELS (office edition 375 §111.136 §3), written here because this is where the next reader will come looking. WHAT IS CURED: a sheet takes no horizontal travel from any gesture. `overflow-x:hidden` on `.pane` means the browser never treats the x axis as scrollable for input, and `overscroll-behavior:contain` stops a drag past the end of the list handing itself to the page. WHAT REMAINS, MEASURED AND UNEXPLAINED: a programmatic `scrollLeft=200` still reports 4 px on a 256 px sheet. It is NOT the rows' icon buttons (their touch targets are absolutely positioned and were ruled out by making the row a containing block, by clipping the row, and by shrinking the target - none moved the number), NOT the sheet's padding (removing it made the number worse), and no element's box passes the padding edge. No input path reaches it, so it is not the founder's defect; it is left named rather than papered over with a rule whose reason is not known to be true. */ .lrow .tlab{font-size:.6rem;line-height:1} /* ★ THE PLAIN VARIANT: NO BOX (office edition 375 §56.2 and §56.4, the founder: *"remove the box surrounding the glyphs on the map, so they look the same and have a minimalistic look"*). `md-icon-button` with no `filled`, `filled-tonal` or `outlined` attribute IS the standard's plain variant; what drew a box was this family's own pill, and it is gone from both surfaces. The selected state is the component's own. */ /* ★ THE ROW'S TWO LOOKS, AND THEY ARE NOT THE TRAY'S (office edition 375 §69.7). `.tray .chip[data-off]{opacity:.55}` is scoped to the lane, so in the PANE nothing faded an unselected control at all - the colour token was the only difference, and under a disabled button it was no difference. The fade is stated for the row's own controls, in the same words the lane uses, so a pinned pin reads full and an unpinned one reads faded WHATEVER the layer is doing. */ .lrow md-icon-button[data-off]{opacity:.45} .lrow md-icon-button[data-off]:hover{opacity:.8} .lrow md-icon-button,.tray .chip{--md-icon-button-icon-color:var(--dim); --md-icon-button-selected-icon-color:var(--accent)} /* ★ THE OPACITY ITEM, NESTED UNDER ITS LAYER (office edition 375 §48.3d). The indent is the standard's own leading space - 16 px, quoted in the rubric from `_md-comp-list.scss` - applied a second time, which is how a list nests: the child's text starts where the parent's leading icon ends. No new number. */ /* The opacity item's rules went with the item (Ed 375 §56.2): the slider is in the layer's own row now, and the door row went with the sheet. */ md-list-item .door,md-list-item [slot=supporting-text] .door{ font-size:.7rem;color:var(--dim)} /* ★ THE WALK-TIME SLIDER FILLS ITS ROW (office edition 375 §31.3a). `.orow` gave the opacity sliders a floor to grow from; the walk-time slider is not in an `.orow` - it is a block in `#ctl-effort` - so it took `md-slider`'s own intrinsic 200 px and sat short in a row twice that. A custom element has no intrinsic width until it is given one, which is the same sentence §6.4 wrote about the opacity control, in a second place. */ #ctl-effort md-slider{display:block;width:100%} /* The layer row's state, beside its switch (office edition 373 §7.4): the word left the control when the control became a real one. */ .tgv{font-size:.7rem;color:var(--dim);min-width:2.6rem;text-align:right} /* A species the season table cannot answer for: pressed, named, and not counted into the lens (office edition 375 §6.8c). */ .mode[data-nolens]{border-style:dashed;color:var(--dim)} /* The summary list's own Change link (office edition 372 §6.6, draft): the walkthrough's pattern is a row that carries its value and a way back to the question that set it. */ .recipe .chg{background:none;border:0;padding:0 0 0 .6rem;font:inherit; color:var(--ink);text-decoration:underline;cursor:pointer} /* ★ A URL WRAPS INSIDE THE CARD (office edition 365 §10.18, the founder's Stuckey Road frame: `https://apps.fs.usda.gov/arcx/rest/services/EDW/EDW` cut at the card's edge). A flex item's default `min-width` is `auto`, which for an unbreakable run of characters is the run's own width - so the value pushed the row wider than the card and the card clipped it. Two lines fix it and they are the component's own: let the item shrink below its content, and let a long token break. Nothing is truncated: the fourth fact is a citation, and half a citation is the thing this shop refuses everywhere else. */ .recipe .v{font-weight:600;text-align:right;min-width:0; overflow-wrap:anywhere;word-break:break-word} .recipe .v a{color:inherit} /* A ROW THAT IS ONE FACT RATHER THAN A KEY AND A VALUE (office edition 375 §111.157 §2). The district card's rows label themselves - a licence reads as a licence - so there is no key to lead and nothing to align against. */ .recipe .f{font-weight:600;min-width:0; overflow-wrap:anywhere;word-break:break-word} /* The key's own mark, at the size of the text it sits beside (§111.151 §3d). Inline, so it wraps with the row rather than holding a column open. */ .recipe .cmark{display:inline-block;vertical-align:-1px; height:.62em;width:1.1em;border-radius:2px;margin-right:.4rem} /* ★★ THE CITATION ON A ROW (office edition 375 §111.159 §1). It is a button, so it earns its pointer under §111.157 §3 - the only thing on a card row that a click acts on, and it looks like the only one. Quiet, because a page number is not the fact; it is where the fact came from. */ .srcp .msym,.recipe .f .msym{font-size:1em;vertical-align:-2px; margin-right:.15rem} .srcp{background:none;border:0;padding:0 0 0 .35rem;font:inherit; font-size:.72rem;color:var(--quiet);cursor:pointer; text-decoration:underline;text-underline-offset:2px; white-space:nowrap} .srcp:hover,.srcp:focus-visible{color:var(--ink)} /* The authority's own page, at the width the sheet gives it. A scroller of its own, so a tall page never makes the sheet scroll sideways. */ .srcpage{margin:.4rem 0;overflow:auto;max-height:70vh; background:#fff;border:1px solid var(--edge);border-radius:8px} .srcpage canvas{display:block;max-width:100%} .recipe .go{color:var(--quiet);font-size:.68rem;white-space:nowrap} /* ★ THE QUARTERMASTER'S PAGE (office edition 365 §12.4). A full surface at its own route, the same on a phone and on a desktop - the sheet grammar the map uses is for things that happen ON the map, and a person's papers are not one of those. It covers the map rather than insetting it, because a page is somewhere you went, not something laid over where you are. */ .qm{position:absolute;inset:0;z-index:20;background:var(--bg);color:var(--ink); overflow-y:auto;-webkit-overflow-scrolling:touch} .qm .head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem; border-bottom:1px solid var(--line);position:sticky;top:0; background:var(--bg);z-index:1} .qm .back{background:var(--panel);color:var(--ink);border:1px solid var(--edge); border-radius:9px;padding:.32rem .6rem;font-size:.78rem;cursor:pointer} /* THE MASTHEAD IS THE THEME'S SERIF, which is the register edition 364 §1 named for headings and mastheads. The mark rides beside it at the type's own size. */ .qm .mast{font-family:var(--serif);font-size:1.15rem;font-weight:600; display:flex;align-items:center;gap:.45rem;margin-left:auto; margin-right:auto;padding-right:2.6rem} .qm .mast svg{display:block;flex:0 0 auto} /* ★ THE GOV.UK PAGE LAYOUT AND TYPE SCALE, IN OUR TOKENS (office edition 366 §8.2(b), the founder: *"The first screen feels vacuous; the screen should make better use of the real estate."*). Ed 365 §12.5 adopted the PATTERNS whole - a start page, one question per page, check-your-answers - and the shop built their SEQUENCE at the map's type scale, in a narrow column of thin rows. The pattern is also its MEASURE: a two-thirds column, body text at 19px, headings at 36-48, a lead paragraph, and a Start button a person cannot miss. A grammar adopted by the step and not by the page is half an adoption. */ .qm .body{max-width:44rem;margin:0 auto;padding:1.4rem 1.2rem 3rem; font-size:19px;line-height:1.55} .qm .qh{font-family:var(--serif);font-size:2.25rem;line-height:1.15; font-weight:600;margin:.2rem 0 .6rem} .qm .lead{font-size:1.16rem;line-height:1.5;color:var(--ink); margin:0 0 1.4rem;max-width:34rem} .qm .step{font-size:.95rem;color:var(--dim);margin:0 0 1.2rem} /* THE START BUTTON IN THE SERVICE'S COLOUR, at the pattern's own size. */ .qm .start{display:inline-block;background:var(--on);color:var(--onink); border:0;border-radius:10px;padding:.75rem 1.6rem;font-size:1.18rem; font-weight:600;cursor:pointer;margin:.4rem 0 1.6rem} .qm .start:hover{filter:brightness(1.08)} .qm .need{margin:.2rem 0 1.4rem;padding-left:1.2rem;font-size:1.02rem; line-height:1.7} /* ★ THE BACK LINK AND THE SKIP/CANCEL LINKS (office edition 367 §1.3a and §2.1). Continue is the primary button; Skip and Cancel are links beside it, because a page with three equal buttons asks the reader to choose between them and only one of them is the way on. Back sits at the head, where the pattern puts it, so no page here is a dead end. */ .qm .backlink{background:none;border:0;color:var(--dim);font:inherit; font-size:.95rem;cursor:pointer;padding:.2rem 0 .6rem;text-decoration:underline} .qm .backlink:hover{color:var(--ink)} .qm .links{display:flex;gap:1.2rem;margin:.2rem 0 1rem} .qm .linky{background:none;border:0;color:var(--dim);font:inherit; font-size:.98rem;cursor:pointer;padding:0;text-decoration:underline} .qm .linky:hover{color:var(--ink)} /* A field on the page, at the page's own type scale - the interview asks every question here now (367 §2.2). */ /* The interview's own field, for a question made of more than one input - the date span asks for a first day and a last, and each carries its own label. */ .qm .field{margin:.2rem 0 .6rem} .qm .qlab{display:block;font-size:.78rem;color:var(--dim);padding:0 0 .2rem} .qm .qin{font:inherit;font-size:1.1rem;padding:.5rem .6rem;border-radius:9px; border:1px solid var(--edge);background:var(--panel);color:var(--ink); min-width:12rem} /* THE SPINE. One row per section, and a section that is not built is GREY - never a placeholder sentence promising it. Unbuilt features get zero chrome; what they get here is their name, unpressable, so a reader can see the shape of the place without being sold anything. */ .qm .spine{display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0 1.4rem} /* A SECTION IS A CARD WITH A LINE, not a thin row. "Never a placeholder sentence" stands (office edition 366 §8.2): a greyed card saying what a section holds and that it is not built is a section reporting its state, which is the opposite of a promise. */ .qm .sec{display:block;background:var(--panel);border:1px solid var(--edge); border-radius:12px;padding:.85rem 1rem;font-size:1.15rem;cursor:pointer; color:var(--ink);text-align:left;width:100%;font-family:var(--serif); font-weight:600} .qm .sec .d{display:block;font-family:var(--sans);font-weight:400; font-size:.95rem;color:var(--dim);margin-top:.2rem} .qm .sec:hover{border-color:var(--ink)} .qm .sec[disabled]{color:var(--dim);border-style:dashed;cursor:default; background:none} .qm .sec[disabled]:hover{border-color:var(--edge)} .qm .sec .n{font-size:.72rem;color:var(--dim);font-family:var(--sans)} .mapkey{font-size:.7rem;color:var(--leg);display:flex;flex-direction:column; gap:.25rem;padding:.3rem 0} .mapkey span{display:flex;align-items:center;gap:.4rem} .mapkey i{display:inline-block;flex:0 0 auto;width:18px;height:3px; border-radius:2px} /* ★ THE PUBLISHER'S OWN LEGEND, INDENTED UNDER ITS ROW (office edition 362 §1.2q). It wraps rather than stacking: a published overlay can carry twenty-five classes, and twenty-five lines under one key row would bury the road grammar the key exists for. The swatches are the publisher's images at the size the publisher renders them. */ .mapkey .legwrap{display:flex;flex-wrap:wrap;gap:.2rem .7rem; padding-left:1.4rem} .mapkey .leg{display:flex;align-items:center;gap:.3rem;font-size:.66rem; color:var(--dim)} .mapkey .leg img{flex:0 0 auto;image-rendering:pixelated} .ctl{padding:.5rem 0 .4rem;border-bottom:1px solid var(--line)} .ctl:last-child{border-bottom:0} .ctl .lab{display:flex;justify-content:space-between;align-items:baseline; gap:.5rem;font-size:.76rem;color:var(--dim)} .ctl .val{font-size:1.05rem;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap} input[type=range]{width:100%;margin:.35rem 0 .1rem;accent-color:var(--sel)} /* THE SWITCH LOOKS LIKE A SWITCH, NOT LIKE A BUTTON THAT DOES SOMETHING. Small, quiet when on - the on state is the resting state and does not need to argue for itself - and outlined when off, where it is the reason the mask is gone and has to be findable. */ .ctl .ctloff{font:500 .64rem/1 inherit;letter-spacing:.06em; text-transform:uppercase;border:1px solid var(--edge);background:transparent; color:var(--dim);border-radius:999px;padding:.15rem .45rem;cursor:pointer; margin-left:auto;margin-right:.5rem} .ctl .ctloff:hover{border-color:var(--ink);color:var(--ink)} .ctl .ctloff[aria-pressed=false]{border-color:var(--ink);color:var(--ink)} /* The value dims with the control, so the remembered setting is visibly a memory rather than a live reading. */ .ctl .val[data-off]{opacity:.45} input[type=search]{width:100%;background:var(--chip); border:1px solid var(--edge);color:var(--ink);border-radius:9px; padding:.5rem .65rem;font-size:.92rem} /* D1. The year as a track. Ticks are the access-epoch boundaries the data enumerated - never hand-chosen dates - and the highlighted span is the epoch the dragged day falls in. The map only ever uses an EPOCH; the thumb keeps the day, so a person can say "the twentieth" and still be told which legal period that lands in. Nothing is interpolated between two epochs, because there is no such thing as half a legal status. */ .track{position:relative;height:17px;margin:.45rem 0 -.5rem;border-radius:4px; background:var(--chip);border:1px solid var(--edge);overflow:hidden} .track .trip{position:absolute;top:-2px;bottom:-2px;display:none; border:1px solid var(--ink);border-radius:3px;pointer-events:none} .endwrap{padding-top:.15rem} .endbtn{background:none;border:1px solid var(--edge);border-radius:999px; color:var(--ink);font:inherit;font-size:.7rem;padding:.15rem .55rem; cursor:pointer;margin-right:.4rem} .endbtn[aria-pressed=true]{background:var(--chip)} .gates{font-size:.72rem;padding-top:.25rem} .seasons{font-size:.72rem;padding-top:.2rem} .seasons .info{text-align:left} .gates .info{color:var(--warn);text-align:left} .track .season{position:absolute;top:0;bottom:0;background:var(--on); opacity:.22} .track .span{position:absolute;top:0;bottom:0;background:var(--sel); opacity:.34;transition:left .12s,width .12s} .track i{position:absolute;top:0;bottom:0;width:1px;background:var(--edge)} .track b{position:absolute;top:2px;font-size:.55rem;font-weight:400; color:var(--dim);transform:translateX(2px);line-height:1} /* F12. A pill is a door, and a door that opens onto something already on screen has to SAY it opened. Without this the Date pill was indistinguishable from a dead control: scrollIntoView does nothing when the target is already visible, which on the docked desktop is always. */ .ctl.lit{animation:lit 1.1s ease-out} @keyframes lit{from{background:var(--chip)}to{background:transparent}} .chip{border:1px solid var(--edge);background:var(--chip);color:var(--dim); border-radius:8px;padding:.3rem .55rem;font-size:.74rem;cursor:pointer; /* ★ 44 BY 44, RULED PRODUCT-WIDE (office edition 375 §111.168 §4(e)). The chip's own ink and padding are unchanged; what changes is the box a thumb has to hit, which is the thing the ruling is about. */ min-height:44px} .chip[aria-pressed=true]{background:var(--sel);color:var(--selink); border-color:transparent} .modes{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 0 .1rem} .mode{border:1px solid var(--edge);background:var(--chip);color:var(--dim); border-radius:999px;padding:.26rem .7rem;font-size:.76rem;cursor:pointer; font-weight:600} .mode[aria-pressed=true]{background:var(--sel);color:var(--selink); border-color:transparent} .mode .st{font-weight:400;font-size:.62rem;opacity:.85} .kind{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em; border:1px solid var(--edge);border-radius:3px;padding:0 .25rem; color:var(--dim);margin-left:.35rem;vertical-align:1px} .famhead{font-size:.7rem;color:var(--dim);padding:.5rem 0 .1rem; border-top:1px solid var(--line);margin-top:.4rem} .frow{display:flex;align-items:flex-start;gap:.5rem;padding:.45rem 0; border-bottom:1px solid var(--line)} .frow:last-child{border-bottom:0} .frow .body{flex:1;min-width:0} /* ★ THE OPACITY SLIDER SITS UNDER ITS ROW (office edition 365 §10.12). Full width beneath the row it belongs to, not squeezed beside the switch: a control that shares a line with a toggle is a control nobody's thumb can find on a phone. */ .orow{display:flex;align-items:center;gap:.5rem;width:100%; padding:.15rem 0 .45rem;font-size:.72rem;color:var(--dim)} /* ★ THE OPACITY CONTROL DRAWS (office edition 375 §6.4, the founder's frame: every row ends "Opacity 70 %" and NO CONTROL BENEATH IT). The row is a flex line and the slider was the only child with no width of its own: a range input takes an intrinsic width, and `md-slider` - which this row carries since Ed 373 §7.4 - is a custom element, which has NONE until it is given one. `flex:1` on a box whose content width is zero resolves to zero, so the control was present, enabled and one pixel wide. The rule names both spellings and gives the component a floor to grow from. */ .orow input[type=range],.orow md-slider{flex:1 1 auto;min-width:8rem} /* ★ AND IT GETS THE ROW, NOT 8REM OF IT (office edition 375 §46). The slider WORKS - measured on the served site by keyboard and by pointer drag, with the map's own paint read back: 0.95 -> 0.285 on a real layer - so it does not go from the row. What it had was a 120 px track (the `min-width` floor §6.4 gave it, which `flex` never grew past in a cramped row) and a 20 px handle: a small target where a short drag moves a long way and a mis-grab moves nothing, which is a fair reading of "does nothing" that is about the size rather than the wiring. It fills its row now, like the walk-time slider, and its row is the one the §37.3 door gives it. */ .orow md-slider{display:block;width:100%;--md-slider-active-track-height:4px} .orow .val{font-variant-numeric:tabular-nums;min-width:2.6rem; text-align:right} .frow .name{font-size:.86rem;font-weight:600;color:var(--ink)} .frow .why{font-size:.7rem;color:var(--dim);line-height:1.35} /* THE PROVENANCE DOOR. A source line that has a Guidebook entry becomes the way in to it. It is not a floating help button - the F13 ban holds - it is the line that was already there, made to open. */ /* ★ AND A DOOR THAT LEAVES THE PAGE IS AN ANCHOR (office edition 362 §1.2m). The district card carries FWP's own link, which is a navigation and not a panel - a button that navigates would be a link wearing a costume. Same rule, one more selector, because a class the page emits and never styles is a rendering bug no assertion is watching. */ button.door,a.door{display:block;width:100%;text-align:left;background:none; border:0;padding:0;font:inherit;font-size:.7rem;color:var(--dim); line-height:1.35;cursor:pointer;text-decoration:underline; text-decoration-style:dotted;text-underline-offset:2px} button.door:hover,button.door:focus-visible,a.door:hover,a.door:focus-visible{color:var(--ink)} /* A7: one row per risk. Grid rather than flex so the marks, names and statuses line up down the column - a panel a reader scans for the one row that is different only works if the columns are columns. */ .rrow{display:grid;grid-template-columns:1.1rem auto 1fr auto; align-items:center;gap:.45rem;width:100%;text-align:left;background:none; border:0;border-bottom:1px solid var(--edge);padding:.5rem 0; font:inherit;color:var(--ink);cursor:pointer} .rrow:hover,.rrow:focus-visible{background:var(--chip)} .rmark{font-size:.85rem;text-align:center;color:var(--dim)} /* AMBER IS FIRE'S CHANNEL IN THE LEDGER, and a risk that is in force is the same kind of claim. GREEN IS BANNED FROM STATUS - there is no all-clear to render, so the none-found dot stays the dim ink every other quiet thing uses. */ .rrow[data-state=active] .rmark{color:var(--fire)} .rrow[data-state=thin] .rmark{color:var(--fire)} .rglyph{display:flex;align-items:center;color:var(--dim)} .rname{font-size:.82rem} .rstat{font-size:.78rem;color:var(--dim);text-align:right} .rrow[data-state=active] .rstat{color:var(--ink)} .rfresh{font-size:.68rem;color:var(--dim);font-variant-numeric:tabular-nums} /* THE PACK'S SECTION, and it is a container and nothing else (office edition 375 §111.93, slice 1). No border, no fill, no heading: the rows beneath it are the Guidebook's own and already carry their rule. A class the page emits must have a rule, which is what this is - and a rule that drew a box would be the pack inventing chrome. */ .packsec{margin-top:.35rem} .grow{padding:.55rem 0;border-bottom:1px solid var(--edge)} .grow button.q{display:block;width:100%;text-align:left;background:none; border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer} .grow .gsub{font-size:.7rem;color:var(--dim);line-height:1.35;margin-top:.15rem} .gbody{font-size:.8rem;line-height:1.5;margin:.5rem 0 .9rem} .frow .st{font-size:.62rem;color:var(--warn);text-transform:uppercase; letter-spacing:.06em} .tg{flex:0 0 auto;border:1px solid var(--edge);background:var(--chip); color:var(--dim);border-radius:999px;padding:.24rem .6rem;font-size:.72rem; cursor:pointer} .tg[aria-pressed=true]{background:var(--on);color:var(--onink); border-color:transparent} .pin{flex:0 0 auto;background:none;border:0;color:var(--dim);cursor:pointer; font-size:.95rem;padding:.1rem .2rem;line-height:1} .pin[aria-pressed=true]{color:var(--sel)} /* The Layers sheet's own search field (office edition 360 §1.7b). Same type and the same box as the Find field it replaces, so a reader meets one search in one place. */ /* THE MAP-TYPE PICKER (office edition 361 §2e). It sits in the engine's own bottom-right control stack, above the zoom buttons, and its menu is a native `popover` - so the light dismiss, the Escape key and the top layer come from the platform rather than from four handlers of ours. */ /* ★ THE PICKER WAS NOT CLICKABLE, AND THE CAUSE WAS ONE INHERITED PROPERTY (office edition 364 §6, the founder on his iPhone: *"I cannot change the map layers, the satellite button on the map is not clickable."*). MapLibre's control CORNER carries `pointer-events:none` so the map can be dragged through the empty space around its buttons, and each of its own controls re-enables it. This picker is mounted as a sibling INSIDE that corner (Ed 361 §2e put it at the zoom stack), so it inherited the `none` and never turned it back on: `document.elementFromPoint` at the button's own centre returns the map canvas, and every tap went to the map. A CONTROL THAT LOOKS PRESSABLE AND IS NOT is worse than one that is absent, because a reader tries it twice and concludes the product is broken. This is the scrim's family - present, named, inert - reached through a property nobody wrote. */ /* ★ THE WALK-TIME TRACK, UP THE MAP'S RIGHT EDGE (office edition 375 §100.3, §100.5, the founder: *"the walk time slider is out of the left menu and runs up the right side of the map between the map buttons"*). IT IS THE HTML STANDARD'S OWN RANGE INPUT IN ITS VERTICAL WRITING MODE, and nothing is invented - the same argument as the date's exact entry being the standard's date input. `writing-mode: vertical-lr` is what the HTML rendering specification says makes a range vertical; `direction: rtl` is what puts the MINIMUM at the foot, so more minutes is higher, which is the only orientation a person reading a walk-time axis will guess. WHERE IT SITS, AND THE NUMBER THAT DECIDED IT. §100.3 asked the shop to measure the right edge's run on the 430 tier before building, because a track under about 140 pixels is a track a finger cannot set. Measured on the served page at 430x932: the base button 713-736, the scale bar 740-762, the zoom pair 772-830 - THE GAP BETWEEN THE BASE BUTTON AND THE ZOOM PAIR IS 36 PIXELS, and the scale bar is inside it. That is not the ruling being wrong; it is the corner being EMPTY. MapLibre's bottom-right corner is anchored at its foot and grows upward, so a tall child inserted between them does not fit into 36 pixels - it makes the corner 36 pixels taller plus its own height, and the base button rises. The track is therefore inserted exactly where the ruling puts it, after the base wrapper and before the scale and the zoom group, and it takes the height it is given. THE TEXT IS UNSELECTABLE AND THE TRACK OWNS THE POINTER (§99.10a, carried forward rather than re-learned): a drag along a control must not leave a selection behind, and the two statements that say so are the same two the year bar carries. */ /* ★ NO BOX (office edition 375 §100.7, the founder on the deployed set: *"I don't like that box around the slider on the map, I'd like it to just be the walk time slider on its own without the box framing it."*). WHAT CAME OFF: the container's background, its border, its rounded corners and its shadow. What is left is the three things he named - the glyph, the rail and the handle's label - standing on the map, which is how the year bar stands: `.yearbar` is a transparent row and only the parts that must be read against imagery carry any ground of their own. THE GLYPH KEEPS A SHADOW AND NOT A BOX, and the distinction is the ruling's. Unframed text over an aerial photograph is text that disappears over snow; a shadow is the treatment every map label in this product already uses to stay legible, and it frames nothing. The handle's label keeps the same small chip the year bar's date wears - the one he has looked at and approved - because a value that cannot be read is not a value. */ /* ★ THE SEARCH BAR, TOP CENTRE ON THE LAPTOP (office edition 375 §103.4). Centred with `left:50%` and a translate rather than by margins, because the map's own chrome is not symmetrical - the glyph button sits left and the Quartermaster and Menu stack sits right - and a centred box is centred on the MAP, which is what he asked for. Its width is capped so it never reaches either, and the cap is what keeps the clause true at every window between the breakpoint and a wide desktop. IT IS HIDDEN ON THE PHONE and the magnifier is hidden on the laptop; one of the two is drawn at every width, never both, never neither. */ .topsearch{display:none} /* The phone's full-screen search view (office edition 375 §103.3): the input at its head, the results beneath, and the sheet's own four exits. A class the page emits must have a rule, which is what this is. */ .searchview{display:block} .searchview>.ctl{display:block;margin:0} .searchbtn{position:absolute;top:max(.5rem,env(safe-area-inset-top)); left:50%;transform:translateX(-50%); z-index:8;background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:999px; width:40px;height:40px;display:flex;align-items:center; justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)} .searchbtn .msym{font-size:22px;font-variation-settings:'opsz' 22} /* ★ THE SEARCH RESULTS (office edition 375 §87.5). List items with the standard's slots - the name, its kind, its county - and nothing else. Facts only: no snippet, no score, no distance the index cannot honestly compute. One line per row, which is §102.4's rule for every card in this product, applied to a list at its birth rather than retrofitted. */ /* ★ THE MAGNIFIER, DRAWN RATHER THAN FETCHED (office edition 375 §104.6a). THE FIRST CUT PUT AN INLINE SVG IN A `data:` URI and the host allowlist went red on it: an SVG's own XML NAMESPACE declaration is a w3.org address, which is a URL in the stylesheet, and the guard reads URLs. It was right to fire - and it fired a SECOND time on this very comment, because a comment explaining the defect still contained the address that caused it. The same shape as the identity law catching the batch's own record: a note ABOUT a thing is still a file with the thing in it. Named here, not quoted. A namespace is never fetched, but teaching a security guard to tell a namespace from a host is weakening it to fit one glyph, and the glyph did not need a URL in the first place. So the ring and its handle are two pseudo-elements on a wrapper: a bordered circle and a rotated bar. An `input` cannot carry children or pseudo- elements of its own, which is why the wrapper exists - the CONTROL is still the standard's search input alone, with nothing inside it. IT ALSO DROPS A FONT DEPENDENCY the field did not otherwise have: Material Symbols is a font, a font cannot be a background, and a glyph that has not loaded is a blank where the mark should be. */ .qwrap{position:relative;display:block} .qwrap::before{content:'';position:absolute;left:.55rem;top:50%; width:.62rem;height:.62rem;margin-top:-.42rem;border-radius:50%; border:2px solid var(--dim);pointer-events:none} .qwrap::after{content:'';position:absolute;left:1.12rem;top:50%; width:2px;height:.42rem;margin-top:.1rem;background:var(--dim); transform:rotate(-45deg);transform-origin:top center;pointer-events:none} #ctl-find input[type=search]{width:100%;box-sizing:border-box; padding:.5rem .6rem .5rem 2rem;border:1px solid var(--edge); border-radius:8px;background:var(--panel);color:var(--ink);font:inherit} .gaz{margin:.3rem 0 0 0;max-height:46vh;overflow:auto} .gaz button{display:flex;width:100%;gap:.5rem;align-items:baseline; background:none;border:0;border-bottom:1px solid var(--edge); padding:.42rem .2rem;font:inherit;color:var(--ink);cursor:pointer; text-align:left} .gaz button:hover,.gaz button:focus-visible{background:var(--chip)} /* Swept with the card's own truncation (office edition 375 §111.157 §2): a place name cut to `Bitterroot Nat...` is a result a reader cannot tell from its neighbour. The row is a button and may grow. */ .gaz .gn{flex:1 1 auto;min-width:0; overflow-wrap:anywhere;word-break:break-word} .gaz .gk{flex:0 0 auto;font-size:.7rem;color:var(--dim)} .gaz .gc{flex:0 0 auto;font-size:.7rem;color:var(--dim)} /* The way's class, last in the tail and set like its neighbours - a fourth fact on the row, not a fourth kind of thing. Every class the page can emit must have a rule (the 2026-08-22 legend defect), so it is declared here beside the three it joins rather than inheriting by luck. */ .gaz .gw{flex:0 0 auto;font-size:.7rem;color:var(--dim)} /* The count and the state of the fetch, one line, in the hint's own grammar. */ .gazsaid{font-size:.72rem;color:var(--dim);padding:.2rem 0} /* ★★ THE TRACK IS ANCHORED TO THE RIGHT, BECAUSE THE SCALE'S WIDTH IS A MAP FACT AND THIS CONTROL'S POSITION MAY NOT BE (office edition 375 §111.95 §2, the founder: *"the walk time slider button slides itself to the left and right as you zoom in and out of the map. It should be anchored to its far right position."*). MEASURED BEFORE IT WAS CHANGED, six zooms at both tiers, same centre: zoom 6 scale 95 px "50 mi" track x 1337 zoom 9 scale 76 px "5 mi" track x 1346 zoom 11 scale 61 px "1 mi" track x 1354 zoom 13 scale 92 px "2000 ft" track x 1338 zoom 17 scale 73 px "100 ft" track x 1347 **SEVENTEEN PIXELS OF TRAVEL, AND THE SCALE IS THE WHOLE CAUSE.** The base button and the zoom pair never move - they are right-anchored - and the scale's own left edge moves BY DESIGN, because a scale bar measures the map and its label changes with the zoom. The library's bottom-right corner is shrink-to-fit around its widest child, this wrapper filled that corner, and the input was centred inside it: so the track, its glyph and its readout all inherited a width that is a map fact. THE TRACK'S LENGTH WAS NEVER THE PROBLEM, and the office's reading of the two captures said it was: `clamp(160px,38vh,340px)` measured 340 at every zoom in this frame - vh is the viewport, which zooming does not change. It is the LEFT EDGE that moved, which is what "slides to the left and right" says. THE CURE IS THE FOUNDER'S OWN WORD: the wrapper shrinks to its content and sits at the corner's right edge, ten pixels in - the library's own margin, read off the zoom pair rather than chosen - so the track lines up with the controls above and below it and its position is a function of the layout alone. The scale goes on measuring the map beside it, which is its job. */ .efftrack{pointer-events:auto;clear:both;display:flex;flex-direction:column; align-items:center;gap:.25rem;margin:0 0 .3rem 0;padding:0; width:fit-content;margin-left:auto;margin-right:10px; position:relative;background:none;border:0;box-shadow:none; -webkit-user-select:none;user-select:none} /* ★ AND THE TRACK'S OWN GLYPH, WHICH THE STYLESHEET COULD NOT HAVE TOLD ME ABOUT. It carries `.msym` and sets only a size, so it INHERITED the base rule's `opsz 18` at 20 px - found by reading the computed value off the rendered element rather than off the rule, which is the same half of *drawing the data is a test* that caught a class with no CSS. */ .efftrack .effglyph{font-size:20px;font-variation-settings:'opsz' 20; line-height:1;color:var(--ink); background:none;border:0;padding:0;cursor:pointer; text-shadow:0 0 3px var(--panel),0 0 6px var(--panel)} /* OFF IS A STATE THE GLYPH WEARS, not a word beside it: the head of the track is also its on/off, because taking Walk time off the rail took the only door its engaged/value pair had (§25's law - engaged and value are distinct, and turning it off must not move the slider). */ .efftrack .effglyph[aria-pressed=false]{color:var(--dim);opacity:.55} /* ★ AND THE WIDTH IS TAKEN BACK FROM THE GENERIC RULE (measured: the input shipped 98 px wide instead of 22). `input[type=range]{width:100%}` is written for a slider lying in a panel row, and it reaches this one too - a vertical track 98 px wide is a 98 px-wide dead zone over the map. The cure is specificity, not `!important`: an element selector plus the class beats an attribute selector alone, and the generic rule stays true for every horizontal slider that wants it. */ input.effvert{writing-mode:vertical-lr;direction:rtl; width:22px;height:clamp(160px,38vh,340px);margin:0; accent-color:var(--ink);cursor:pointer;touch-action:none; -webkit-user-select:none;user-select:none} /* THE VALUE RIDES THE HANDLE, as the year bar's date rides its own: an absolutely placed label whose position is computed from the value, because a native range handle has no inside to write in. It is to the LEFT of the track so it sits over the map rather than off the edge of the window. */ .effvalue{position:absolute;right:calc(100% - .1rem); background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:4px;padding:.1rem .3rem; font-size:.68rem;font-variant-numeric:tabular-nums;white-space:nowrap; pointer-events:none;transform:translateY(-50%)} .effvalue[data-off]{color:var(--dim)} .fw-basewrap{margin:0 0 .3rem 0;display:flex;justify-content:flex-end; pointer-events:auto; /* ★ ITS OWN LINE, ABOVE THE SCALE AND THE ZOOM (office edition 365 §10.2, the founder: *"The maps menu is stacked horizontally with the map scale icon, it should be stacked vertically above it."*). MapLibre floats every control in a corner to the right, so a sibling inserted there lines up BESIDE them - measured on the phone: the picker at x 255 y 652 and the scale at x 311 y 652, the same row, because a block box does not clear a float, it lets the float sit on top of its own line. `clear` is what takes a row of its own; WHICH row is then the DOM order, and the first `clear` put the picker UNDERNEATH the scale at y 657 against y 625. The mount was moved to the corner's first child in the same breath. */ clear:both} /* ★ THE MAP BUTTON IS MENU'S SIZE (office edition 375 §106.2(c), the founder's done-test: *"the map button is the same size as Menu"*). It was `.28rem .5rem` at a radius of 8 against the corner's `.32rem .55rem` at 9 - near enough to look like a mistake and far enough to be one. The three boxes his test allows on the map are one size now. THE SHADOW STAYS AND IT IS NOT SIZE. Menu carries none; this one sits over imagery with no panel behind it. The ruling names size, so size is what changed - a shop that also took the shadow would be ruling on a thing the founder did not put to it. */ /* ★★ AND NO LABEL MAY TAKE HALF THE MAP (office edition 375 §111.98 §2a against §106.2(c)). The button is a READOUT of the base that is on, so its width follows whatever that base is called - and §2a names the new row *Montana 2025 · 30 cm · state service*, which measures **197 px: 46 % of a 430-pixel phone**, against `Satellite`'s 57. §106.2(c) rules this button to Menu's and the Quartermaster's SIZE, and a button that is three and a half times Menu is not that. The two rulings meet in one element; the cap is the reading that keeps both as far as they can both be kept - the row's full name stays in the picker and in the attribution, where there is room for it, and the button says as much of it as fits on one line. **Whether the button should instead carry a short form of the name is the office's to rule, and it is asked.** THE ELLIPSIS IS THE FAMILY'S OWN TREATMENT for a value that outgrows its slot; it was already on the retired rail's readouts and on the pane's section values, for the same reason. */ .fw-basebtn{background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:9px;padding:.32rem .55rem; font-size:.72rem;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3); max-width:min(9rem,40vw);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .basemenu{position:fixed;inset:auto;margin:0;border:1px solid var(--edge); border-radius:10px;background:var(--panel);color:var(--ink); padding:.4rem;box-shadow:0 10px 30px rgba(0,0,0,.42); /* ★ A DEFINITE WIDTH, BECAUSE SHRINK-TO-FIT ASKS ITS OWN POSITION (office edition 365 §10.5). With `inset:auto` a fixed popover takes its STATIC position, which here is inside a corner container 87 pixels from the right edge - so shrink-to-fit offered it 87 pixels, the menu wrapped to 87 by 450, and the anchor then placed it against a width the anchor itself had just caused. Measured: 87 wide and 450 tall on the phone, against 214 by 238 before it was touched. A CONTROL WHOSE MEASUREMENT DEPENDS ON WHERE IT ALREADY IS CANNOT BE PLACED - the second pass reads the answer the first pass invented. The cure is to stop asking: `max-content` under a ceiling makes the box the same size wherever it stands, so the anchor reads a width that is a fact about the menu rather than about the corner. */ width:max-content;max-width:min(15rem,calc(100vw - 1rem))} .basemenu::backdrop{background:rgba(0,0,0,.18)} .basemenu .chip{display:block;width:100%;text-align:left;margin:.1rem 0} #layerq{width:100%;box-sizing:border-box;background:var(--chip); border:1px solid var(--edge);border-radius:9px;color:var(--ink); padding:.4rem .55rem;font-size:.82rem;margin:.1rem 0 .3rem} /* The visible-range override of 349 s1b. Same weight as the panel's pin, its own glyph, and its own pressed colour - two controls in one row must not look like one control twice. */ .zpin{flex:0 0 auto;background:none;border:0;color:var(--dim);cursor:pointer; font-size:.95rem;padding:.1rem .2rem;line-height:1} .zpin[aria-pressed=true]{color:var(--sel)} /* The key's disclosure. A native
, so the platform supplies the keyboard and the screen-reader behaviour; the styling only removes the default marker's indent and matches the panel's own type. */ .keybox{margin:.2rem 0 .1rem} .keybox>summary{font-size:.72rem;color:var(--dim);cursor:pointer; padding:.25rem 0;list-style:none} .keybox>summary::-webkit-details-marker{display:none} /* THE CHARACTERS THEMSELVES, NOT CSS ESCAPES. A CSS escape of U+25B8 rendered as a tofu box followed by "B8" on the built page - a hex escape whose terminating space did not survive the way the stylesheet is assembled, so the parser read three digits and a literal. A glyph that is in the file is a glyph nothing can mis-parse. */ .keybox>summary::before{content:'▸ ';color:var(--dim)} .keybox[open]>summary::before{content:'▾ '} .hint{font-size:.72rem;color:var(--dim);padding:.4rem 0 .1rem;line-height:1.4} .sheet{position:absolute;left:0;right:0;bottom:0;z-index:20; background:var(--card);border-top:1px solid var(--edge); border-radius:13px 13px 0 0;padding:.4rem .9rem 1.2rem; transform:translateY(106%);transition:transform .18s ease; box-shadow:0 -12px 32px rgba(0,0,0,.4);max-height:78vh;overflow-y:auto} .sheet.open{transform:translateY(0)} /* ★★ THE MODAL SHEET'S SCRIM (office edition 375 §111.104 §4c). It went at §51.2 with its element - the standard's non-modal sheet has none, and an element that does nothing is an orphan - and §4c rules the phone tier's sheet MODAL, which is the form that carries one. THE COLOUR IS FIXED IN BOTH THEMES AND IT IS NOT THE GROUND. The standard's `scrim` role is one colour in every scheme - a scrim recedes what is behind it, and receding is a direction rather than a hue - so `--scrim` is the family's dark ground in both, at the 32 % the specification gives a modal sheet. `_MD_ROLES` maps `scrim` onto `bg`, which in the light theme is a near-WHITE: the first thing ever to use that role dimmed the map toward white, measured at `rgb(246, 244, 238)` before this line existed. IT SITS UNDER THE PANE AND OVER EVERYTHING ELSE: z-index 11 against the pane's 12, the year bar's 9 and the corner's 8 - so the doors under it are unreachable while it is up, which is what *modal* means and what §4c says in those words. THE VISIBILITY IS A CLASS, NOT A STYLE WRITTEN BY HAND, and it transitions with the sheet it belongs to. `visibility` steps at the end of the fade on the way out and at the start on the way in, so a scrim at zero opacity never eats a press. */ .scrim{position:absolute;inset:0;z-index:11; background:var(--scrim);opacity:0;visibility:hidden; pointer-events:none;transition:opacity .18s ease,visibility 0s .18s} body.modalpane .scrim{opacity:.32;visibility:visible;pointer-events:auto; transition:opacity .18s ease,visibility 0s} .handle{padding:.45rem 0 .3rem;width:100%;background:none;border:0;cursor:grab} .handle i{display:block;width:38px;height:4px;background:var(--edge); border-radius:2px;margin:0 auto} /* THE CLOSE SITS IN THE PANE'S TOP TRAILING CORNER AT THE FAMILY'S 32/20 STEP, above the content and inside the padding, so it never lands on a title and never scrolls away with the body. A plain icon button: no box, no text, which is the same treatment the row controls take. */ /* ★ THE YEAR BAR (office edition 375 §85.2, §97.5, §98.5). A thin full-year axis along the bottom edge of the map: 1 January at the far left, 31 December at the far right, month ticks and their names, the handle at the chosen date. ITS FORM IS NASA WORLDVIEW'S BOTTOM TIMELINE, which is the mature pattern for a date axis under a map and is named as the form rather than quoted: nothing of its geometry is copied, because the office's §85.2 says Material publishes no timeline component and this is the family's own control built from the standard's slider tokens, as Emphasis was. ABOVE THE BOTTOM BAR ON THE PHONE, flush to the map's bottom edge on the laptop where there is no bar. */ /* ★ A SLIDER IS NOT TEXT, AND A DRAG ACROSS IT SELECTS NOTHING (office edition 375 §99.9, the founder's frame: dragging the handle lit May and Jun as the pointer crossed them). The month names are real text in the track, so a press-and-move over them is a text selection as far as the browser is concerned - it has no way to know the element is a control unless the element says so. Three statements say it, and they are three because they answer three different mechanisms: the bar's text is not selectable (`user-select`), the track owns the pointer rather than handing the gesture to the browser's scroll and zoom (`touch-action`), and the press claims the gesture at its first instant (`preventDefault` in `pointerdown`, in app.js). This is what the standard's slider does; a control that leaves a blue smear behind the finger is one a reader has to clean up after. */ /* ★★ THE FULL WIDTH OF THE MAP, AND THE GROUND SHOWS THROUGH IT (office edition 375 §106.3, the founder's done-test: *"the date bar runs the full width of the map and is see-through"*). `bottom:2.9rem` WAS THE BOTTOM BAR'S HEIGHT. The bar is gone at both tiers with §106.2(a), so the bar's clearance goes with it and the year bar takes the map's own bottom edge - one rule, no tier override, which is what deleting the phone's second posture is for. `padding:0 .5rem` WAS THE OTHER HALF OF "not full width": it inset the track eight pixels from each edge. The track meets both edges now and gives up its side borders and its corner radius to do it, because a border floating in from nowhere is what a reader sees when a full-bleed bar keeps a rounded end. */ .yearbar{position:absolute;left:0;right:0;bottom:0;z-index:9; display:flex;align-items:center;gap:.4rem; /* The date bar is the lowest thing on the screen and the home indicator sits under it (office edition 375 §111.168 §4(b)). */ padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); pointer-events:none;-webkit-user-select:none;user-select:none} .yearbar>*{pointer-events:auto} /* ★ THE GROUND IS 75% OPAQUE, THE MARKS ARE NOT (§106.3, *"about 25% transparent"*). The translucency belongs to the bar's GROUND: written as `opacity` on the element it would fade the month rules, the month names and the handle with it, and a date a reader cannot read is not a date. `color-mix` takes the panel token itself to 75%, so the bar follows the theme it is in and there is no second colour to keep in step. */ .ybtrack{position:relative;flex:1 1 auto;height:26px;cursor:pointer; background:var(--panel); background:color-mix(in srgb,var(--panel) 75%,transparent); border:1px solid var(--edge);border-left:0;border-right:0;border-radius:0; overflow:hidden;outline:none;touch-action:none} .ybtrack:focus-visible{border-color:var(--ink)} .ybmonths{position:absolute;inset:0} .ybmonths i{position:absolute;top:0;bottom:0;width:1px; background:var(--edge)} /* ★★ THE MONTH NAMES TAKE `--ink`, AND THE TRANSLUCENCY IS WHY (office edition 375 §106.2(e), MEASURED at the ruled value rather than near it). ELEVEN FRAMES - satellite and lidar, both themes, the Highwood Mountains, the Chinese Wall and the edge of Great Falls - composited through `price_bar_dim.py`, worst pixel, against the 4.5:1 WCAG normal-text floor this product already refuses to ship under (`tests/test_summon.py`): the bar's ground at 0.75 `--dim` 3.17:1 FAILS the bar's ground at 0.75 `--ink` 6.88:1 passes the bar's ground at 1.00 `--dim` 6.93:1 (what it used to stand on) A 25-PERCENT TRANSPARENT BAR CANNOT CARRY DIM WRITING. The names stood on an opaque panel when they were set in `--dim`, and the founder's 25% takes a quarter of that panel away - so the token that was legible on it is not legible through it. His transparency is the ruling; the floor is the product's; the token is the shop's, and it is the only one of the three that may move. THE HANDLE IS ALREADY `--ink` (6.88:1) and its date label is an opaque chip, so neither moves. */ .ybmonths b{position:absolute;bottom:1px;font-size:.58rem;font-weight:600; color:var(--ink);transform:translateX(2px);letter-spacing:.02em} /* The span a two-tap range shades. Drawn under the handles. */ .ybspan{position:absolute;top:0;bottom:0;background:var(--chip);opacity:.55} .ybhandle{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)} .ybhandle::after{content:'';position:absolute;left:-4px;right:-4px;top:0; height:6px;background:var(--ink);border-radius:2px} /* THE RANGE'S END HANDLE WEARS ITS CAP AT THE FOOT, so the two are told apart at a glance: the start is capped at the top, the end at the bottom. Two handles drawn identically are two handles a reader cannot tell apart, and the class guard is what asked the question - `ybend` was emitted with no rule of its own, which is the class-with-no-CSS defect (F2) exactly. */ .ybend::after{top:auto;bottom:0} /* ★ THE LABEL MAY NOT SIZE THE TRACK (office edition 375 §99.6, MEASURED on the served page while driving the drag). THE DEFECT: the bar was one flex row - track, then label - so the track's width was whatever the label left over, and the label prints the date. It reads `--` before a date is set, `17 September` after one, and `19 March – 7 July` once there is a range. Every one of those is a different width, so THE SCALE OF THE CONTROL CHANGED AS THE READER DRAGGED IT: the day under the pointer was computed against a track that had just been resized by the readout of the day before it. Measured: a drag released over day 200 landed on 195, and over day 300 on 298 - about seventeen pixels of drift at the right-hand end, the handle trailing the finger. Nothing was wrong with the drag. The ruler was moving. So the label leaves the flow and sits above the track's right-hand end. The track is then the full width of the bar at every date, which is what makes a pixel mean a fixed day - the property a slider is. It is still in the bar's own stacking context and still takes its own presses. */ /* Reserved space, so the row does not reflow when the button appears. The button is hidden with `visibility` rather than removed, because `hidden` would collapse the space the reservation exists to hold. */ /* ** THE TIME ROW'S RIGHT-HAND GROUP (office edition 375 §111.63). Today and the date label sit here side by side. They used to be two absolutely positioned elements at the same right edge, with Today clearing the label by `translateX(calc(-100% - .4rem))` - its OWN width, 43 px, against a label 83 px wide - so they overlapped by 34 px at 320 the moment Today appeared. Nobody saw it because Today is hidden while the date is today. RESET TO TODAY (§111.42) keeps its reserved space, and keeps it BETTER: the flex slot is held by `visibility` so the label does not shift when the date moves, which is what the reservation was for and what the transform could not deliver. */ .ybright{position:absolute;right:.5rem;bottom:calc(100% + .25rem); display:flex;align-items:center;gap:.4rem;z-index:9} .ybtoday{font:inherit;font-size:.72rem;background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:8px;padding:.12rem .42rem; cursor:pointer} .ybtoday[hidden]{display:inline-block !important;visibility:hidden} .yblabel{background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:4px;padding:.18rem .45rem; font-size:.72rem;font-variant-numeric:tabular-nums;cursor:pointer; white-space:nowrap} /* The exact-entry control sits behind its label: it is opened by the label and never shown as a second field. */ .ybpick{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; right:.5rem;bottom:0} /* ★ THE DATE SHEET (office edition 375 §99.4). The field is the head and the Date cell's own surfaces sit beneath it, borrowed whole - so this rule styles the container and lets the exact-entry input out of the corner it hides in while it is parked on the bar. */ .ybdate{display:flex;flex-direction:column;gap:.5rem} .ybdate .ybpick{position:static;width:100%;height:auto;opacity:1; pointer-events:auto;background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:4px;padding:.35rem .45rem; font:inherit} .ybdate #ctl-date{display:block;position:static} /* ★★ A DRAG ANYWHERE IN A SHEET SCROLLS THE SHEET (office edition 375 §111.136 §3, the founder: *"I can't scroll in the layers menu if I drag up or down on top of the layers themselves only on the space above the layers"*). MEASURED BEFORE IT WAS CURED, because the obvious suspect was wrong. Nothing in the sheet declares `touch-action:none` - every element inside a layer row reads `auto`, `md-slider` included - so no stylesheet was taking the gesture. The capture is the COMPONENT'S: `md-slider` claims the pointer on pointerdown, and a captured pointer delivers every later move to the slider and none to the scroller. A drag that begins on a row with a slider in it was the slider's drag from its first instant, whichever way the finger went. `touch-action` IS THE CURE BECAUSE IT DECIDES BEFORE THE COMPONENT SEES ANYTHING. It is not a style the component can ignore: it tells the browser which gestures it may handle itself, and a vertical pan the browser handles is never delivered as a pointer stream at all - so `setPointerCapture` is not reached, and the sheet scrolls. `pan-y` leaves the horizontal drag to the slider, which is the gesture that actually sets its value, and a TAP is untouched by any of this. THE CHROME'S OWN CONTROLS TAKE `manipulation` (§111.136 §2): every gesture a control needs, minus the double-tap zoom that was putting the founder's buttons out of reach. THE MAP IS NOT IN THIS LIST AND KEEPS ITS PINCH; the two rail controls that must own their whole gesture - the walk-time rail and the year bar's track - already declare `touch-action:none` on a heavier selector and are not touched by it. */ .chip,.mode,.door,input[type=search],input[type=text]{ touch-action:manipulation} .pane md-slider,.pane input[type=range]{touch-action:pan-y} /* ★★ THE BACK CONTROL (office edition 375 §111.135 §2). The close's mirror: same size, same ink, the LEADING edge instead of the trailing one, which is where the side sheet puts it. `[hidden]` is honoured explicitly because the shell sets `display` on this family elsewhere and a hidden attribute that loses to a display rule is a control the page emits and never hides - this file's own class-with-no-rule law, inverted. */ .pane>.back{position:absolute;top:.25rem;left:.25rem;z-index:3; --md-icon-button-state-layer-width:32px; --md-icon-button-state-layer-height:32px; --md-icon-button-icon-size:20px} .pane>.back[hidden]{display:none} /* ★★ ONE HEADER ROW - BACK, TITLE, CLOSE (office edition 375 §111.138 §2, the founder: *"The back arrow in the activities menu should probably be next to the X so I can see it easier."*). MEASURED BEFORE THE CURE, at 1,400 on the deployed page: the back and the close are 32x32 with their centres at y 19.8, and the title's box runs 19.5 to 44.3 with its centre at 31.9. Both controls OVERLAP the title's box and both sit twelve pixels above its centre - which is the arrow drawn over the *H* of *Hunting* in his screenshot. They were already the same size and the same 20px glyph; what was wrong was the row. THE TITLE RESERVES THE GUTTERS RATHER THAN THE CONTROLS MOVING INTO IT. The two controls are in the pane's chrome for the four-exits reason and must stay there, while the title is emitted by each sheet's own body - so the row is made by giving the title a left gutter for the back and a right gutter for the close, and by lining all three up on one centre line. That is the side sheet's header as shipped: leading control, headline, trailing control, nothing stacked. THE NUMBERS ARE THE CONTROLS' OWN. A control is 32 px wide at .25rem from its edge, so the gutter is 2.25rem; the title takes the controls' 32 px min-height and centres its line inside it, and the controls drop to the pane's own content top so all three share a centre. THE LAYERS SHEET CARRIES A RESET one step leading of the close, so its title needs a second control's width on that side - named by the class the sheet already emits rather than by a selector that guesses. */ #panebody h2{margin:0;min-height:32px;display:flex;align-items:center; padding-left:2.25rem;padding-right:2.25rem} #panebody:has(.reset) h2{padding-right:4.25rem} /* ★ THE ROW'S VERTICAL CENTRE, MEASURED RATHER THAN GUESSED, AND WRITTEN WHERE IT CANNOT LOSE A CASCADE. The controls are positioned against `.pane`, the title flows inside `#panebody`, and the gap between those two origins is the grip - shown at the phone tier and `display:none` at the wide one. So the offset differs by tier and nothing in CSS can read it. WHAT IS CONSTANT, AND IT IS WHY TWO NUMBERS ARE ENOUGH: from `#panebody`'s own top to the title's centre measures 22.6 px at BOTH tiers - the body's 7.5 px of padding plus half the 32 px row. Only `#panebody`'s top moves: 25 px inside the pane at 430, 10.5 px at 1,400. The two values below are those, and a change to the grip is the one thing that moves them. ★★ AND THIS RULE SITS AFTER `.pane>.close`, DELIBERATELY. The first cut put it beside `.pane>.back`, which is ABOVE the close's own rule - equal specificity, so the later rule won and the close kept `.25rem` while the back took `.1rem`. Measured: the two controls' centres 2.3 px apart, in the very edit that was meant to put them on one row. A rule cancelling a rule, which is the cascade collision this stylesheet has now paid for three times in three days. */ .pane>.back .msym{font-size:20px;color:var(--ink);font-variation-settings:'opsz' 20} .pane>.close{position:absolute;top:.25rem;right:.25rem;z-index:3; --md-icon-button-state-layer-width:32px; --md-icon-button-state-layer-height:32px; --md-icon-button-icon-size:20px} .pane>.close .msym{font-size:20px;color:var(--ink);font-variation-settings:'opsz' 20} /* ★ THE HEADER ROW'S CENTRE, PLACED AFTER EVERY RULE IT MUST BEAT (office edition 375 §111.138 §2). Measured twice and wrong the first time: written beside `.pane>.back` it sat ABOVE `.pane>.close`, equal specificity, so the close kept `.25rem` and the two controls ended 28.7 px apart at the phone tier while reading correct at the wide one - a rule cancelling a rule, and the third cascade collision this stylesheet has paid for in three days. It belongs where source order settles it, and that is here. THE NUMBER IS `#panebody`'s OWN TOP INSIDE THE PANE. The controls are positioned against `.pane` and the title flows inside `#panebody`; the gap between those origins is the grip, shown here and hidden at the wide tier, so no expression in CSS can read it. What IS constant is the 22.6 px from `#panebody`'s top to the title's centre - 7.5 px of body padding plus half the 32 px row - at both tiers. Only the body's own top moves. */ .pane>.back,.pane>.close,.pane .reset{top:32.5px} /* THE RESET SITS BESIDE THE CLOSE IN THE SAME ROW, one step to its leading side, at the same 32/20 as every other control in this family's chrome (office edition 375 §79). Two icon buttons, one row, no text between them. */ /* ★ THE OFFSET IS DERIVED FROM THE CLOSE'S OWN BOX, NOT GUESSED. The first cut used a round `2.1rem` and the two buttons OVERLAPPED - the close sits at right .25rem and is 32 px wide, so it reaches 35.75 px in from the trailing edge and a reset at 31.5 px sat on top of it. Measured by the driver, which asks whether the reset's trailing edge clears the close's leading edge rather than whether a number looks right. `calc` keeps them apart if the 32 px step ever changes. */ .pane .reset{position:absolute;top:.25rem;right:calc(.25rem + 32px);z-index:3; --md-icon-button-state-layer-width:32px; --md-icon-button-state-layer-height:32px; --md-icon-button-icon-size:20px} .pane .reset .msym{font-size:20px;color:var(--ink);font-variation-settings:'opsz' 20} /* ★ THE SERIF IS FOR HEADINGS AND MASTHEADS ONLY (office edition 364 §1). Every sheet's title and the brand line take the heading register; controls, labels and readouts stay in the sans, because a control set in a serif reads as prose and a reader stops looking for it. Two faces, two jobs. */ .sub{color:var(--dim);font-size:.75rem} .big{font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:700; color:var(--accent);line-height:1.1} /* The icon face, from this origin, addressed by its own digest (Ed 375 §23.7). `82b1c4b196d4` is substituted at build time by the same hand that writes the file, so the name and the bytes cannot drift apart. ★ THE ADDRESS IS ROOT-RELATIVE, AND THE FIRST CUT WAS NOT (office edition 375 §28.4). A url() in a stylesheet resolves against THE STYLESHEET, not against the document - and this stylesheet is served from /shell/ - so `url('shell/…')` asked the origin for `/shell/shell/symbols-….woff2`. The served page's own violation report carried the doubled path verbatim, which is the only reason it was found rather than reasoned about. IT IS THE SAME STRING THE PAGE'S JAVASCRIPT USES FOR THE GLYPHS AND THE STRING IS CORRECT THERE, which is what made it invisible: that one is read by the map library and resolves against the DOCUMENT, at the origin root. One spelling, two resolution rules, and only one of them has to be wrong. */ @font-face{font-family:'Material Symbols Outlined';font-style:normal; font-weight:400;font-display:block; src:url('/shell/symbols-82b1c4b196d4.woff2') format('woff2')} /* ★★ A GLYPH'S OPTICAL SIZE EQUALS ITS RENDERED SIZE (office edition 375 §111.116 §5, A1h; ruled on the shop's own question). The vendored face is VARIABLE - `FILL 0..1`, `GRAD -50..200`, `opsz 20..48` default 24, `wght 100..700` default 400 - and `opsz` is the axis a type designer uses to keep a mark readable at its size: strokes thicken and counters open as the glyph gets smaller. Drawing an 18 px chip at the face's default 24 asks for a mark drawn for a larger size and then shrinks it, which is exactly the muddiness the founder can see and nobody can name. IT IS SET WHEREVER A `.msym` RULE NAMES A SIZE, not only on the two the ruling used as its example - 16, 18, 20, 22 and 24 all appear in this stylesheet, and *a rule applied only where the example that prompted it is a rule half-applied.* The axis clamps at its own floor of 20, so the 16 and 18 px rules ask for the smallest optical size the face actually carries; asking is still right, because the day the face gains a lower floor the page is already correct. `wght` IS NOT NAMED HERE AND THAT IS DELIBERATE: an axis a low-level setting does not mention keeps the value the high-level property gives it, so `font-weight:400` still governs weight and there is one place that decides it. */ .msym{font-family:'Material Symbols Outlined';font-weight:400; font-size:18px;font-variation-settings:'opsz' 18; line-height:1;letter-spacing:normal;text-transform:none; display:inline-block;white-space:nowrap;direction:ltr; -webkit-font-feature-settings:'liga';font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;color:var(--dim);flex:0 0 auto; /* ★★★ A GLYPH NEVER DRAWS ITS OWN NAME (office edition 375 §111.167 §1, from the founder's own screen: *"The glyphs appear to have failed render all of the examples?"*). WHAT HE SAW, AND WHY. `.msym` carries a LIGATURE - the letters `badge` become one mark when the face is there, and stay the word `badge` when it is not. `font-display:block` blocks the text for about three seconds and then draws the FALLBACK, which for a ligature font is the word. MEASURED on the live site with the connection held at 500 kB/s: the face is 3,980,092 bytes and took 8,097 ms to arrive. The block period lapses at three, so between three seconds and eight every Material Symbol on the page is a word. THE CURE IS THAT THE WORD IS NEVER AN OPTION. The text is transparent until the face is ready and `html.msymready` turns it on, so a slow face shows an empty box of the glyph's size - an icon not yet there, which is true - instead of a word, which is not. Every one of these marks has a label or an accessible name beside it, so nothing is lost while it waits. `color:transparent` RATHER THAN `visibility:hidden`, because the element must keep its box: a mark that collapses and then appears moves the row under the reader's finger. THE ROOT COST IS NAMED AND NOT CURED HERE: 3.98 MB of font to draw a few dozen marks. Subsetting the face to the ligatures this product uses is the real fix and it needs a tool this box does not carry; it is recorded for the hardening lane rather than done inside a page-only draft. */ visibility:hidden} html.msymready .msym{visibility:visible} /* `visibility` RATHER THAN `color`, AND THE REASON IS THE CASCADE. Several rules below set `color` on a `.msym` at higher specificity - `.edge .eb .msym`, `.pane>.back .msym` - so a transparent colour on the base rule would lose to them and those marks would draw their names anyway. Nothing sets `visibility` on these elements, so this is decided by source order and needs no `!important`; and `visibility:hidden` keeps the element's box, so nothing moves under the reader's finger when the face arrives. */ .facts{display:flex;flex-wrap:wrap;gap:.3rem;margin:.55rem 0} /* ★ A CARD STATES FACTS IN LINES (office edition 375 §21.6). On the parcel card each fact is its own line rather than a chip in a row, and the prose the card used to print at everybody sits behind one disclosure. */ .pane .facts{flex-direction:column;gap:.18rem} .pane .facts .fact{background:none;border:0;padding:0;font-size:.82rem; color:var(--ink)} details.door{margin-top:.7rem} details.door>summary{font-size:.74rem;color:var(--dim);cursor:pointer; list-style:none;padding:.2rem 0} details.door>summary::-webkit-details-marker{display:none} /* ★ THE MARKER IS THE CHARACTER, NOT AN ESCAPE OF IT (office edition 375 §23.5; the founder saw a hollow box and the letters "b8"). THE ESCAPE NEVER REACHED THE STYLESHEET. This was written as a CSS escape inside a PYTHON string, where a backslash and 25 is an OCTAL escape: the built file carried byte 0x15 followed by "b8 ". The stylesheet was never wrong - it never received the escape. Two escaping languages in one literal, and the inner one lost. The character itself cannot be misread by either. */ /* The disclosure names itself with the face's own symbol now, so the marker is not a character this shop has to escape at all (Ed 375 §23.7). */ details.door>summary .msym{font-size:16px;vertical-align:-3px;margin-right:.2rem;font-variation-settings:'opsz' 16} md-list.card{--md-list-container-color:transparent;padding:0} md-list.card md-list-item{--md-list-item-top-space:2px; --md-list-item-bottom-space:2px;--md-list-item-one-line-container-height:30px; --md-list-item-label-text-size:.82rem; --md-list-item-leading-space:0px;--md-list-item-trailing-space:0px} /* ★ THE SYMBOL SITS BESIDE ITS FACT, ON ONE ROW (office edition 375 §28.4). The face is applied to the element that carries the ligature - a slotted light-DOM child, which the page's own stylesheet reaches - and the ligature feature is what turns the NAME into the mark. Without the feature the element prints "directions_walk" in whatever face it inherits, which is exactly what a missing font looks like from the reader's seat. */ md-list.card .msym{margin-right:.5rem} details.door>summary::before{content:'';color:var(--dim)} details.door[open]>summary::before{content:'▾ '} .fact{background:var(--btn);border:1px solid var(--line);border-radius:4px; padding:.22rem .5rem;font-size:.75rem;color:var(--ink); font-variant-numeric:tabular-nums} /* A8: a fact chip that goes somewhere LOOKS like it goes somewhere. What is interactive must read as interactive, or it is a button nobody presses. */ button.fact{font-family:inherit;cursor:pointer} button.fact.go{border-color:var(--accent)} button.fact.go:hover,button.fact.go:focus-visible{background:var(--chip)} .gap{border-left:3px solid var(--warn);background:var(--gap); padding:.45rem .6rem;font-size:.8rem;margin:.5rem 0;border-radius:4px; color:var(--ink)} .docket{border-left:3px solid var(--on);background:var(--docket); padding:.45rem .6rem;font-size:.8rem;margin:.5rem 0;border-radius:4px; color:var(--ink)} .docket code{display:block;font:.7rem/1.4 ui-monospace,Menlo,monospace; color:var(--code);padding-top:.2rem;word-break:break-all} .risk{border-left:3px solid var(--warn);background:var(--riskbg); padding:.5rem .65rem;font-size:.8rem;margin:.5rem 0;border-radius:4px; color:var(--ink)} .risk b{color:var(--ink)} .risk .auth{font-size:.68rem;color:var(--auth);display:block;padding-top:.25rem} .risk .thin{font-size:.72rem;color:var(--warn);display:block;padding-top:.3rem} .risk a{color:var(--accent)} /* F2, and the reason there is now a test for it: the v2 rewrite restored the legend MARKUP and dropped its rules, so every swatch was a zero-width and the items ran together into one unreadable sentence. A legend that cannot be parsed fails no-mystery-pixels exactly as hard as no legend. */ .legend{margin:.45rem 0 .1rem;font-size:.68rem;color:var(--leg);display:flex; flex-direction:column;gap:.22rem} .legend span{display:flex;align-items:center;gap:.4rem} .legend i{display:inline-block;flex:0 0 auto;width:16px;height:3px; border-radius:2px} /* F5. The changed line is the most valuable sentence on the screen - it is the whole of ruling 1b in one sentence - and it was rendering grey on grey. */ .bears{margin-top:.35rem} .bears .info{color:var(--griz);font-weight:600} .changed{margin-top:.4rem;font-size:.92rem;line-height:1.35; color:var(--changed);font-weight:600;border-left:3px solid var(--sel); padding-left:.5rem} .power{margin-top:.35rem} .info{background:none;border:0;padding:0;font:inherit;font-size:.72rem; color:var(--quiet);text-decoration:underline;text-underline-offset:2px; cursor:pointer} .readout{margin-top:.3rem;font-size:.72rem;color:var(--quiet);line-height:1.35} .readout b{font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums} .readout .scope{display:block;color:var(--dim);font-size:.66rem} .srcs{font-size:.72rem;line-height:1.45} .srcs dt{font-weight:600;margin-top:.5rem;color:var(--ink)} .srcs dd{margin:0;color:var(--dim)} .stub{font-size:.72rem;color:var(--dim);border-left:3px solid var(--edge); padding-left:.5rem;margin:.4rem 0} .share{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap} .share button{background:var(--btn);color:var(--ink); border:1px solid var(--edge);border-radius:8px;padding:.3rem .6rem; font-size:.74rem;cursor:pointer} .share span{font-size:.68rem;color:var(--dim);flex:1;min-width:9rem} /* A PAGE THAT DIES MUST SAY SO ON ITS OWN FACE (F8). The three silences apply to the application itself: a fatal error that is only visible in a console nobody opened is the quiet failure this project keeps outlawing. */ /* F10: the bar owns the bottom edge; the map's own controls sit above it. */ /* ★★ THE LIBRARY'S CONTROLS CLEAR THE YEAR BAR - AND ON THE RIGHT, ITS DATE (office edition 375 §106.3). `3.2rem` was the bottom bar's height plus the year bar above it, and the laptop tier overrode it to `.6rem` because neither was drawn there. The bar is gone and the year bar runs the FULL width at both tiers, so the tier override goes and the clearance is one piece of arithmetic in one place. THE TWO CORNERS CLEAR DIFFERENT THINGS, AND THE FIRST CUT DID NOT. MEASURED at 430 x 932 with one offset for both: the attribution button at y 866..890 and the year bar's date label at y 882..901, x 396..420 against x 339..423 - **overlapping by eighteen pixels**, at both tiers. The label and `Today` ride ABOVE the bar at its right end (`.ybright`), in the same column the library stacks its controls in; the left corner has nothing above the bar at all. SO THE RIGHT CORNER CLEARS THE BAR PLUS THAT ROW: the track's 26 px and its two borders, then the label's own 19 px and the quarter-rem it floats by, then a quarter-rem of air. Written as the sum of the parts rather than as 55, so it moves when any of them does. */ /* ★★ THE ATTRIBUTION SITS QUIET IN THE BOTTOM-LEFT CORNER (office edition 375 §111.110 §3, the founder: *"could that button be in the bottom left side of the screen and be partially transparent and collapsed? This isn't something most people will ever click on."*). TRANSLUCENT UNTIL IT IS WANTED, and the number is the family's own: the idle search bar was measured to 0.65 over photographed ground (§111.29 item 3b) and this is the same question about the same kind of chrome, so it takes the same value rather than a second one chosen by eye. Full strength on hover, on focus and while it is open - the three ways a reader says they want it. THE TRANSITION IS ON OPACITY ALONE, so nothing about the control's box moves; §111.110 §3's own clause is that the zoom pair and the scale never move for it, and the surest way to keep that true is that this corner and theirs are different corners. */ .maplibregl-ctrl-bottom-left{bottom:calc(28px + .25rem)} .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib{ opacity:.65;transition:opacity .15s ease} .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib:hover,.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib:focus-within,.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact-show{ opacity:1} .maplibregl-ctrl-bottom-right{bottom:calc(28px + .25rem + 19px + .25rem)} #fatal{display:none;position:absolute;top:0;left:0;right:0;z-index:99; background:#7f1d1d;color:#fff;font:600 .78rem/1.4 ui-sans-serif,sans-serif; padding:.5rem .7rem;box-shadow:0 4px 18px rgba(0,0,0,.5)} #fatal.open{display:block} #fatal code{display:block;font:.68rem/1.35 ui-monospace,Menlo,monospace; font-weight:400;opacity:.92;padding-top:.2rem;word-break:break-word} /* DESKTOP DOCKS (2e, F1). One responsive app, one set of URLs. A full-width slab eating half a monitor is the phone posture worn on a desk; past ~900px the panel becomes a persistent sidebar that never covers the map, and the sheets become right-side cards. The phone is the consumer surface and the dock is the agency surface, but they are the same build. */ @media (min-width:900px){ /* ★ THE WIDE TIER'S SHEET IS THE DOCKED ONE, SO IT HAS NO SCRIM (office edition 375 §111.104 §4c). The standard's two side sheets differ in exactly this pair: the docked sheet displaces content by its own width and leaves the page live; the modal sheet overlays, dims and blocks. The column and the library's corners move here - which is the displacement - so dimming the map as well would be both postures at once. */ .scrim{display:none} /* THE DOCKED SHEET'S WIDTH, ONCE. It is the standard's published `sheet-side/docked-container-width` and it is now read by three rules - the sheet itself and the two things it must not cover - so it is a token rather than three copies of 256 that drift the first time it moves. */ :root{--panew:256px} /* ★★ THE TIER'S OWN POSTURE IS GONE, NOT OVERRIDDEN (office edition 375 §106.2(a), §106.3). Four rules stood here: the bar hidden, the year bar lifted and inset past the rail, and the same inset again while a pane was open. All four described a rail and a bar that are not emitted any more, and a rule that survives its element is the furniture nobody can see. The year bar's one base rule now serves both tiers, which is the whole of "the date bar runs the full width of the map". */ /* ★ THE TIER SWAP, ONE RULE EACH WAY (office edition 375 §103.3). Past the breakpoint the bar is drawn and the magnifier is not; below it the magnifier is drawn and the bar is not. Written as a pair so neither state can be reached by forgetting the other. */ .searchbtn{display:none} .topsearch{display:block;position:absolute;top:.5rem;left:50%; transform:translateX(-50%);z-index:8; width:min(34rem,calc(100vw - 30rem));min-width:16rem} /* * THE BAR IDLES DIM AND THE WRITING DOES NOT (office edition 375 §111.29 item 3b, the founder: always present, dims when idle, full on hover, full while in use). THE DIMMING IS THE CONTAINER'S - its fill, its border and its shadow - and it is done by giving them their own layer. Fading the whole bar takes the magnifier and the reader's own typing with it, and dim text over satellite imagery cannot be read at any opacity: the text's contrast falls as the fill behind it thins AND as the glyph itself fades, which is two reductions multiplied rather than one. Here the children sit above the fill at full strength and only the fill moves. NO color-mix AND NO SECOND COLOUR. An unsupported function would compute to nothing and leave a transparent bar over imagery - a failure in the illegible direction, which is the one this shop refuses. An opacity on a pseudo-element degrades to a solid bar instead. */ .topsearch>.ctl{display:block;margin:0;background:none;border:0; border-radius:10px;padding:.4rem .5rem;max-height:80vh;overflow:auto; position:relative;transition:none} /* ** ONE RING, AND THE PARTS DIM BY THEIR JOB (office edition 375 §111.31, item 2, the founder's answer: *the nested outlines are the defect*). WHAT HE SAW: the container's rounded rectangle and the field's own frame are two rings about two pixels apart, and at 0.65 they separate into a box inside a box - which is the treatment he refused on the walk slider at §101. The field's frame is struck IN THE BAR ONLY; inside the phone's search sheet there is no container ring, so the field keeps its own. AND THE TWO LAYERS DO DIFFERENT WORK, so they do not fade together. The shop's own standing measurement forbids one number for both: over light lidar at town scale the ground is 242,242,242 and this panel 251,249,244, so THE FILL IS 1.06:1 AT FULL OPACITY and was never what made the bar findable there - its border and its shadow are. Fading the border with the fill would dim the only part carrying findability in order to soften the part carrying none. **The fill recedes; the edge holds.** */ .topsearch>.ctl::before{content:"";position:absolute;inset:0; border-radius:10px;background:var(--panel); opacity:var(--barfill,1);pointer-events:none;z-index:0} /* ** THE SHADOW RIDES WITH THE BORDER, NOT WITH THE FILL, and it moved here on the office's own reasoning rather than on a preference: the founder's sentence is *the bar is findable there by its border AND SHADOW alone*, so the shadow's job is findability and it dims by its job. It began on the fill layer, which means it faded with the part that was measured at 1.06:1 and does no finding at all. NOT SEPARATELY RE-PHOTOGRAPHED - the border sweep below was taken with the shadow still on the fill, so this change can only help and its size is unmeasured. */ .topsearch>.ctl::after{content:"";position:absolute;inset:0; border-radius:10px;border:1px solid var(--ring); box-shadow:0 0 0 1px var(--ringhalo),0 2px 10px rgba(0,0,0,.28); opacity:var(--baredge,1);pointer-events:none;z-index:0} .topsearch>.ctl>*{position:relative;z-index:1} /* THE BAR'S ONLY EDGE IS THE CONTAINER'S. ** WRITTEN WITH AN ID BECAUSE THE RULE IT MUST BEAT HAS ONE. The first draft was `.topsearch input[type=search]`, and the rule it was overriding is `#ctl-find input[type=search]` - an id outranks a class however late it is declared, so the field kept its frame and the nested ring the founder refused would have SHIPPED. Caught by photographing the pixels: a second dark line at eight pixels inside the first. *A cure is verified on the artifact, not on the source that intended it.* */ /* ** THE FIELD'S HEIGHT FOLLOWS THE POINTER, NOT THE SCREEN (office edition 375 §111.43, the founder: *"it's just kind of fat"* - and his own correction one minute later that the axis is VERTICAL, not the horizontal one his first phrasing described). The bar reads 510 x 50 (§111.38), so two thirds is about 33 px of field. **AND THAT MEETS A PUBLISHED FLOOR RATHER THAN A TASTE:** 33 px is comfortable under a mouse and BELOW the touch minimum both major guidelines set - about 44 px in Apple's Human Interface Guidelines, 48 dp in Material. So a coarse pointer keeps the standard's minimum and a fine pointer gets the slimmer field he asked for. *A control's size follows the pointer that will press it.* What does NOT change: the bar's length, the result rows' width, the ring, the idle dim at 0.65 and every contrast number behind them - a shorter box is the same box against the same ground. */ #topsearch #ctl-find input[type=search]{border:0;border-radius:0; background:none;padding-left:2rem; padding-top:.28rem;padding-bottom:.28rem;font-size:.88rem} @media (pointer: coarse){ #topsearch #ctl-find input[type=search]{ padding-top:.5rem;padding-bottom:.5rem;font-size:.92rem} } /* ** 0.65, AND IT WAS READ RATHER THAN CHOSEN (office edition 375 §111.29 item 3b(ii); the founder wrote "50%?" as a question). MEASURED by `scripts/read_bar_dim.mjs` and priced by `scripts/price_bar_dim.py`: nine frames - satellite and lidar, both themes, over the Highwood Mountains, the Chinese Wall and the edge of Great Falls - composited per pixel at thirteen opacities, worst pixel first. Three further frames were REFUSED because their tiles never arrived, and an empty canvas is the easiest ground in Montana. THE INK AGAINST THE GROUND SHOWING THROUGH, worst pixel of every frame: 1.00 15.25:1 0.70 5.73:1 0.60 4.01:1 <- under the floor 0.80 8.32:1 0.65 4.78:1 0.50 2.88:1 The floor is 4.5:1, WCAG for normal text and the number `tests/test_summon.py` already refuses to ship under. 0.65 clears it at 4.78 and 0.60 fails at 4.01, so 0.65 is the dimmest honest value - set from the case that failed and checked across a range (§111.20c), not picked. His 50% reads at 2.88:1 over satellite, which is why it is a question and not the answer. THE READING THAT CHANGED THE DESIGN: over lidar at town scale in the light theme the ground photographs at 242,242,242 and this panel is 251,249,244 - the fill is 1.06:1 against it AT FULL OPACITY. The container's fill was never what made the bar findable there; the field's own frame is, and that is a child, so it stays at full strength at every value. Constraint (i) is not a nicety here - it is the whole reason the bar survives dimming at all. */ .topsearch.idle>.ctl::before{opacity:.65} .topsearch>.ctl::before{transition:opacity .18s linear} /* ★ THE MAP IS FULL-BLEED BESIDE THE RAIL, AND THE SIDE SHEET DISPLACES IT (office edition 366 §17 and §17e - *the map filling the rest*, *the map's canvas resizing around it*, and "displaces nothing" amended for the large window by the same ruling). This is the one place in the shell where a surface moves the map on purpose: chrome still moves for nothing, and the phone is untouched. The library is told to re-measure when the class changes, because a canvas that is not asked keeps drawing the old box. */ /* ★ THE RAIL AND THE SIDE SHEET ARE CUT TO THE SPECIFICATION'S OWN NUMBERS (office edition 373 §7.4, and Ed 374 §3). `material-web` ships most of this product's controls and does NOT ship these two, so they are the smallest surface the family makes itself - and they are made to the published measurements rather than to an eye. WHERE THE NUMBERS COME FROM, AND WHERE THEY DO NOT. m3.material.io serves an application shell: the seven specification pages fetched 2026-09-12 and stored under vendor/m3-spec carry ZERO occurrences of "dp" between them, so a number "quoted" from those bytes would be a fabricated citation - the custody law's own case. The same numbers are published as CODE in the design tokens inside @material/web 2.5.0, pinned by integrity in vendor/PROVENANCE.json, and those files are vendored beside the pages they are quoted from: vendor/m3-spec/tokens/_md-comp-navigation-rail.scss line 68 'container-width': ... 80px line 73 'icon-size': ... 24px line 41 'active-indicator-width': ... 56px line 39 'active-indicator-height': ... 32px vendor/m3-spec/tokens/_md-comp-sheet-side.scss line 58 'docked-container-width': ... 256px line 56 'docked-container-height': ... 100% vendor/m3-spec/tokens/_md-comp-divider.scss line 26 'thickness': ... 1px data/enumeration/m3-rubric.json carries every one of those lines quoted verbatim with its file, line and digest, so the rubric can be checked against the file rather than against a memory of a web page. */ /* ★★ THE MAP IS FULL-BLEED AT BOTH TIERS NOW (office edition 375 §106.2(a)). `#map{left:80px}` was the rail's column - permanent chrome the map was inset around - and `.tray{left:80px}` with its open-pane twin was the lane matching that inset. The rail is gone, so the inset is gone, and the lane is inside the corner's own column rather than being told where the rail ends. WHAT §111.57-58 SETTLED STANDS AND IS UNCHANGED: the canvas is never resized for furniture. The camera carries PADDING while a panel is open and the ground beneath the panel is drawn rather than clipped - the side the padding is on moves to the right with the panel, which is the only part of that ruling §106 touches. §77.3b's band measurement stood beside these rules and is retired with them: it measured the empty strip above the rail and the pane, and neither element exists. `top:0` on the pane survives on its own merits below, where the reason is now simply that there is nothing above it. */ /* ★★ THE RAIL'S TWELVE RULES ARE GONE (office edition 375 §106.2(a)). They styled a column, its four cells, their icons, their words, their values and the 56x32 pill behind a pressed one. Nothing emits `rail`, so nothing here can draw - and a stylesheet that keeps rules for a retired element is the same defect as a class the page emits and never styles, pointed the other way. THE PILL SURVIVES AS AN IDEA AND NOT AS A RULE: the edge button's pressed state is a filled circle behind the glyph, written with the button rather than here, because the button is 32 px square and the rail's cell was 80 wide. §75.16's close button is unaffected - it was hidden by a rule that is not in this block, and the pane still carries its own exit. */ /* The expandable list's five rules went with the list (§106.2(a)): `.palist`, `.psec` and its `:has` reveal, `.psh` with its two spans, and `.psb`. Nothing emits any of them. */ /* ★ ONE OFFSET FOR THE LIBRARY'S CONTROLS, AT BOTH TIERS (office edition 375 §106.3). This read `.6rem` because the year bar was lifted clear of a bottom bar here and sat above these controls rather than beside them; with the bar retired the year bar runs the map's full width at BOTH tiers, so the controls clear the same 28 px everywhere and the base rule is the only rule. Written as two numbers they would disagree the first time the bar's height changed. */ /* The shared left pane. It does not inset the map, because at rest there is nothing there to inset around - the map is full-bleed until something is summoned, and then the pane slides over its left edge. */ /* ★ INSET BETWEEN THE STRIPS, AND IT DISPLACES NOTHING (office edition 356 §3d, the founder: *both should slide out between the top strip and the bottom strip and displace nothing*). The sheet used to run the full height of the window, over the corner buttons at the top and the bar at the bottom - so the control that opened it was underneath it, which is the same defect as the pane covering the pill that summoned it. It sits in the content region between the two strips now, which is the side sheet's own definition, and the map is untouched behind it. LEFT IS THE MAP'S, RIGHT IS THE PRODUCT'S. Layers comes from the left; the Menu and everything reached through it come from the right. */ /* ★ BESIDE THE RAIL, NOT OVER IT (office edition 366 §17). `left` and `bottom` are set HERE rather than in a second `.pane` rule below: the first draft put the override at the head of this block, where the rule it meant to beat comes after it and wins - and the pane opened over the rail it was summoned from, which is the door-under-its-own-panel defect the pill and the grip both had. The bar is not drawn at this width, so the bottom edge is the window's. */ /* DOCKED, FULL HEIGHT, FLUSH TO THE RAIL, A DIVIDER AND NOT A SHADOW. A docked side sheet is 256px wide and 100% tall by the token file above; it sits against the rail with no gap and no rounded outer corner, and the seam between them is a 1px divider - the divider token's own thickness - rather than an elevation the standard does not give a docked sheet. */ /* ★★ THE SIDE SHEET DOCKS RIGHT (office edition 375 §106.2(a), *"opening their panes as the side sheet does"*). It docked LEFT because it was summoned from the rail and had to sit beside it rather than over it - the door-under-its-own-panel defect. The doors are on the right edge now, so the sheet arrives from the right, under them, and `.pane.right` below is no longer a different posture: both destinations and the Menu come from the same side. The note that used to stand here - *left is the map's, right is the product's* - is retired with the rail that made the left side the map's. Top of the viewport, with the corner's column and for the same reason: there is nothing above it. */ .pane{left:auto;right:0;width:var(--panew);top:0;bottom:0;max-height:none; border:0;border-left:1px solid var(--edge);border-right:0; border-radius:0;box-shadow:none; transform:translateX(101%);padding:.7rem 1rem 1rem} .pane.open{transform:translateX(0);visibility:visible; transition:transform .18s ease, visibility 0s} /* ★★ A SURFACE THAT SLIDES OVER CHROME MUST MOVE THAT CHROME (office edition 375 §106.2(a), against this page's own law and §111.58's own note: *the pane does not inset the map - imagery is not chrome - but it DOES move the controls it would otherwise cover*). MEASURED, AND IT IS THE DOOR-UNDER-ITS-OWN-PANEL DEFECT AGAIN. With the sheet open at 1400, hit-testing each control at its own centre - which is what a finger does - every one of the five answered with something inside the sheet: Menu's centre hit `#layerq`, the Quartermaster's hit the sheet's reset, the strip's hit `#panebody`, and **the Layers icon's own centre hit a chip in the sheet it had just opened**. The gate's toggle passed throughout, because a driver that calls `.click()` on an element reaches it through the DOM and never through the pixels. WHY IT IS NEW HERE AND WAS NOT BEFORE. The sheet docked LEFT against the rail, which was permanent chrome beside it; the doors are floating controls over the map now and the sheet arrives on top of them. The Menu has covered this corner all along and nobody could press it back open either - that is the same defect, carried in, and one rule cures both because it is keyed on a docked pane rather than on which pane. THE MAP IS UNTOUCHED. The canvas stays full-bleed and the camera carries the padding (§111.57-58); what moves is chrome, which is exactly the line this project already draws between imagery and controls. */ /* TWO MECHANISMS, AND THE REASON IS OWNERSHIP RATHER THAN TASTE. The corner's own offset is ours, so it is written as the offset; the library's corners set their own `right` and a second one here would fight it, so those are translated instead. Both read the same token. */ body.paneon .corner.tr{right:calc(.5rem + var(--panew))} /* The lane's room shrinks with the column it rides in (§111.136 §1). */ body.paneon .tray{max-width:calc(100vw - 1rem - var(--panew))} /* The grip is hidden at this tier, so `#panebody` starts 14.5 px higher and the header row rises with it (§111.138 §2, measured). */ .pane>.back,.pane>.close,.pane .reset{top:18px} body.paneon .maplibregl-ctrl-top-right, body.paneon .maplibregl-ctrl-bottom-right{ transform:translateX(calc(-1 * var(--panew)))} /* The walk-time track rides in the library's bottom-right corner and moves with it; the year bar spans the map by ruling and does not move, because a bar that shortened for a panel would be stating a different year. */ .pane.right{left:auto;right:0;border-right:0; border-left:1px solid var(--edge);border-radius:0;box-shadow:none; transform:translateX(101%)} .pane.right.open{transform:translateX(0)} .pane .grip{display:none} /* The pane does not inset the map - imagery is not chrome - but it DOES move the controls it would otherwise cover. Measured on a 1400px shot: the Effort pill sat under the pane, pressed, invisible. ★ THE BAR IS NO LONGER ONE OF THEM (office edition 365 §10.14(b), the founder: *"the resulting pop-out menus push the bottom menu over instead of sliding in above it"*). That rule was written when the pane ran the full height of the window; Ed 356 §3d moved it BETWEEN THE STRIPS - `top:2.7rem;bottom:2.9rem` - so its bottom edge now clears the bar entirely and there is nothing left to uncover. The inset was residue, and residue with a reason attached is the hardest kind to see. (Ed 375 §77.3b later took the TOP offset to 0 - the band was measured empty at both tiers. The sentence above is left as it was written, because it is a true account of what §3d did and a record rewritten to agree with the present lies about what it said. Only the bottom half of that geometry is still live.) MEASURED, one variable, WebKit at 1400x900: bar closed [0,861,1400,39], sheet open [345,861,1055,39] - pushed 345 pixels for an overlap that no longer exists. On the phone it was already unmoved, which is why only the desktop half of the founder's sentence was true. ★ AND THE SAME RESIDUE WAS STILL ON THE TRAY, WHICH IS §18.1 (office edition 365, the founder: *"The bottom menu pop-outs still push the top menu of layer chips."*). The note above said the tray STAYS inset because "the pane genuinely covers them" - and that sentence was written from the layout the pane used to have. Measured now, one variable, WebKit at 1400x900: the tray at [631, 8, 138, 28] and the pane, open, at [0, 41, 345, 816]. The pane's top edge is 41 and the tray's bottom is 36. IT DOES NOT COVER IT. The inset moved the chip strip 173 px sideways to clear something that is not there, on every sheet. THE INSTRUMENT IS THE FINDING'S OTHER HALF. §10.14(b) measured the BAR, cured the bar, and reported that a sheet displaces nothing - a receipt for the one element the founder had named. `scripts/read_chrome_displacement` reads every fixed element in both frames now, which is what a receipt for "nothing moved" has to enumerate. `.corner.tl` GOES WITH IT, AND IT WAS NEVER DRAWN. Nothing in this shell emits `corner tl` - the only corner is `tr`, holding the Menu button - so both its rules were styling an element that does not exist. The page's own law inverted: a class the page emits and never styles is a rendering bug; a rule for a class nobody emits is furniture nobody can see. */ } /* ★★★ FORTY-FOUR BY FORTY-FOUR, RULED PRODUCT-WIDE (office edition 375 §111.168 §4(e): *"Every tappable element is at least 44×44 CSS pixels"* - Apple's minimum; Material's is 48 dp). EVERY RULE BELOW NAMES A CONTROL THE READ MEASURED, and nothing else. read_control_inventory.mjs enumerates what the page draws - on the emulated iPhone, after opening every surface it has - and reported 96 of 119 controls under the minimum in at least one axis. A rule written from memory of which controls look small would have cured the four the founder's thumb happened to find; the four were the evidence, not the scope. IT IS A LIST OF FAMILIES, NEVER A UNIVERSAL SELECTOR. a universal min-height grows every inline span on the page and is a layout change wearing an accessibility rule's name. THE TARGET GROWS AND THE INK DOES NOT: where a control is deliberately small to look at - a 20px glyph, a switch's track - the box around it grows and the drawn thing stays the size it was. */ .lrow .chip{min-width:44px} .lrow md-slider,.ctl md-slider{min-height:44px} md-switch.tg{min-height:44px} .grow button.q{min-height:44px} .modes .mode{min-height:44px;min-width:44px} .ctl .rrow{min-height:44px} .ctl .door,.recipe .door{min-height:44px} .keybox>summary,.packbox>summary{min-height:44px;display:flex; align-items:center} /* The sheets' own controls keep the VISIBLE minimum: a list row's box is what a reader aims at, and growing it is the design rather than a defect. The map's controls left this rule at §111.172 §3 - see the block below. */ .head .back,.pane .close,.pane .back,.ctl .reset,.share button,.qm .start{min-width:44px;min-height:44px} .pane .grip{min-height:44px} /* The slider drawn as a thin line across a sheet, dragged by a thumb that has to find it. The effort track's own slider is NOT here: it is map chrome, and a 44px rail drawn over the map is the tile the founder reported (§111.172 §3). */ .ctl input[type=range]{min-height:44px} /* A text field is a target before it is a field - in a sheet. The map's own search field is not here for the same reason: its tile is its visual. */ .pane input[type=search]{min-height:44px} /* ★★★ THE MAP'S OWN CONTROLS GROW THEIR TARGET AND NOT THEIR TILE (office edition 375 §111.172 §3, the founder on set 022985bf4096: *"the glyphs on the map seem to have a larger tile behind them now along with the search bar has a larger tile behind it."*). WRONG CURE FOR A RIGHT RULE, and the office named it: Material separates the TOUCH TARGET (48 dp) from the VISUAL (a 24 dp icon in a 40 dp button), and §111.168's minimum was written against the visible box, so every control on the map surface grew a tile a reader can see. The minimum stands; what changes is which box carries it. A TRANSPARENT PSEUDO-ELEMENT IS PART OF ITS ELEMENT FOR HIT-TESTING and paints nothing, takes no space, and cannot move a neighbour: the control renders exactly as it did on set a8c13f5981b5 and answers a thumb 44 CSS pixels wide. Centred on the control, so the target grows evenly rather than off to one side. */ /* ★ A CONTROL THAT IS ALREADY POSITIONED KEEPS ITS OWN POSITIONING. The search summoner is `absolute` in this sheet and MapLibre's attribution toggle is `absolute` in the vendor's; writing `relative` over either one MOVES it - measured against set a8c13f5981b5, the attribution button changed scheme and its container's width with it. A positioned element is already a containing block, so the target below works without touching it. */ /* ★ AND THE TRAY'S CHIPS GIVE BACK THE VISIBLE MINIMUM `.chip` GRANTS THEM. `.chip{min-height:44px}` is right in a sheet, where the chip's box is what a reader aims at - and it is the tile the founder reported on the map, because the tray draws the same class over imagery. The map surface is the one place the visible box goes back to what the component ships. */ .tray .chip,.basemenu .chip{min-height:auto;min-width:auto} /* ★ A CLIPPED PSEUDO-ELEMENT IS NO TARGET AT ALL, MEASURED. The base button carries `overflow:hidden`, which clips its own transparent expander to the 42x24 box it is meant to grow past - the read found its 44-pixel square reaching it at one point of five. Nothing of the button overflows, so letting it show costs no pixel and buys the target. */ .fw-basebtn{overflow:visible} .edge .eb,.tray .chip,.basemenu .chip,.fw-basebtn,.efftrack .effglyph,.ybright .yblabel,.ybright .ybtoday,.maplibregl-ctrl button{position:relative} .edge .eb::after,.tray .chip::after,.basemenu .chip::after,.fw-basebtn::after,.searchbtn::after,.efftrack .effglyph::after,.ybright .yblabel::after,.ybright .ybtoday::after,.maplibregl-ctrl button::after,.maplibregl-ctrl summary::after{content:'';position:absolute; top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%);pointer-events:auto} /* The document reference inside a fact line (§111.168 §4(f)): it draws a 16px glyph and it is pressed like anything else, so the button grows around the glyph and the line grows with it. */ .srcp{min-width:44px;min-height:44px;display:inline-flex; align-items:center;justify-content:center} /* ★★ THE SNACKBAR (office edition 375 §111.172 §4c). Material Web ships no snackbar component, so this family draws it to the spec's shape: one line, one action, bottom centre, and gone on its own. It sits above the map and below nothing - a message that covered a control would be a message that cost the reader the act it is reporting on. THE SAFE AREA IS HONOURED (§111.168 §4(b)): on a phone the bottom inset is where the home indicator lives. */ .snack{position:fixed;left:50%;transform:translateX(-50%) translateY(140%); bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:60;display:flex;align-items:center;gap:.5rem; max-width:min(92vw,560px);padding:.35rem .6rem;border-radius:6px; background:var(--ink);color:var(--bg);font-size:.82rem; box-shadow:0 3px 12px rgba(0,0,0,.34); transition:transform .18s ease-out;pointer-events:none} .snack.on{transform:translateX(-50%) translateY(0);pointer-events:auto} /* A reader who has asked their device for less motion has already answered this question; the message still arrives, it just does not slide. */ @media (prefers-reduced-motion:reduce){.snack{transition:none}} .snacktext{flex:1 1 auto;min-width:0} .snackdo{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 .6rem; background:none;border:0;font:inherit;font-weight:600; color:var(--bg);text-decoration:underline;cursor:pointer} .snackdo:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* The name field a rename opens in the row itself (§111.172 §4b). It takes the row's own type so the name does not jump as it becomes editable. */ .lensrn{width:100%;box-sizing:border-box;font:inherit;font-size:.78rem; padding:.2rem .3rem;border:2px solid var(--ink);border-radius:4px; background:var(--panel);color:var(--ink)} .lensrn:focus{outline:3px solid var(--accent);outline-offset:0} /* A date and a date range never break inside (office edition 375 §111.172 §5c). Only the dates: a row still wraps at its separators, and a nowrap on the whole row is what made cards overflow sideways. */ .nobr{white-space:nowrap} @media (prefers-color-scheme:light){:root{--bg:#f6f4ee;--ink:#181c19;--dim:#535c55;--line:#d9d3c4;--card:#fdfbf7;--panel:#fbf9f4;--chip:#ece8dd;--btn:#e6e1d4;--docket:#eef1e9;--gap:#f7eeda;--riskbg:#f7edd9;--barbg:#e0dacb;--edge:#c6bfad;--accent:#6b4f13;--quiet:#1d3e32;--warn:#7a5a10;--auth:#575043;--code:#245743;--leg:#3d443e;--changed:#241d0c;--badge:#8a6a3c;--badgeink:#fffaf0;--griz:#8f3019;--lens:#3d7f43;--lensedge:#174a21;--lensroad:#8a9e22;--on:#215f52;--onink:#ffffff;--sel:#6b4f13;--selink:#fffaf0;--ring:#181c19;--ringhalo:#f4f4ef;--scrim:#0d0f0d;--serif:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;--sans:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--md-sys-color-primary:#6b4f13;--md-sys-color-on-primary:#fffaf0;--md-sys-color-primary-container:#215f52;--md-sys-color-on-primary-container:#ffffff;--md-sys-color-secondary:#1d3e32;--md-sys-color-on-secondary:#f6f4ee;--md-sys-color-secondary-container:#ece8dd;--md-sys-color-on-secondary-container:#181c19;--md-sys-color-tertiary:#8a6a3c;--md-sys-color-on-tertiary:#fffaf0;--md-sys-color-tertiary-container:#e6e1d4;--md-sys-color-on-tertiary-container:#181c19;--md-sys-color-error:#8f3019;--md-sys-color-on-error:#fffaf0;--md-sys-color-error-container:#f7edd9;--md-sys-color-on-error-container:#181c19;--md-sys-color-background:#f6f4ee;--md-sys-color-on-background:#181c19;--md-sys-color-surface:#fbf9f4;--md-sys-color-on-surface:#181c19;--md-sys-color-surface-dim:#f6f4ee;--md-sys-color-surface-bright:#fdfbf7;--md-sys-color-surface-container-lowest:#f6f4ee;--md-sys-color-surface-container-low:#fbf9f4;--md-sys-color-surface-container:#ece8dd;--md-sys-color-surface-container-high:#e6e1d4;--md-sys-color-surface-container-highest:#e0dacb;--md-sys-color-surface-variant:#e6e1d4;--md-sys-color-on-surface-variant:#535c55;--md-sys-color-inverse-surface:#181c19;--md-sys-color-inverse-on-surface:#f6f4ee;--md-sys-color-inverse-primary:#6b4f13;--md-sys-color-outline:#c6bfad;--md-sys-color-outline-variant:#d9d3c4;--md-sys-color-shadow:#f6f4ee;--md-sys-color-scrim:#f6f4ee;--md-sys-color-surface-tint:#6b4f13;color-scheme:dark light}}[data-theme="light"]{--bg:#f6f4ee;--ink:#181c19;--dim:#535c55;--line:#d9d3c4;--card:#fdfbf7;--panel:#fbf9f4;--chip:#ece8dd;--btn:#e6e1d4;--docket:#eef1e9;--gap:#f7eeda;--riskbg:#f7edd9;--barbg:#e0dacb;--edge:#c6bfad;--accent:#6b4f13;--quiet:#1d3e32;--warn:#7a5a10;--auth:#575043;--code:#245743;--leg:#3d443e;--changed:#241d0c;--badge:#8a6a3c;--badgeink:#fffaf0;--griz:#8f3019;--lens:#3d7f43;--lensedge:#174a21;--lensroad:#8a9e22;--on:#215f52;--onink:#ffffff;--sel:#6b4f13;--selink:#fffaf0;--ring:#181c19;--ringhalo:#f4f4ef;--serif:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;--sans:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--md-sys-color-primary:#6b4f13;--md-sys-color-on-primary:#fffaf0;--md-sys-color-primary-container:#215f52;--md-sys-color-on-primary-container:#ffffff;--md-sys-color-secondary:#1d3e32;--md-sys-color-on-secondary:#f6f4ee;--md-sys-color-secondary-container:#ece8dd;--md-sys-color-on-secondary-container:#181c19;--md-sys-color-tertiary:#8a6a3c;--md-sys-color-on-tertiary:#fffaf0;--md-sys-color-tertiary-container:#e6e1d4;--md-sys-color-on-tertiary-container:#181c19;--md-sys-color-error:#8f3019;--md-sys-color-on-error:#fffaf0;--md-sys-color-error-container:#f7edd9;--md-sys-color-on-error-container:#181c19;--md-sys-color-background:#f6f4ee;--md-sys-color-on-background:#181c19;--md-sys-color-surface:#fbf9f4;--md-sys-color-on-surface:#181c19;--md-sys-color-surface-dim:#f6f4ee;--md-sys-color-surface-bright:#fdfbf7;--md-sys-color-surface-container-lowest:#f6f4ee;--md-sys-color-surface-container-low:#fbf9f4;--md-sys-color-surface-container:#ece8dd;--md-sys-color-surface-container-high:#e6e1d4;--md-sys-color-surface-container-highest:#e0dacb;--md-sys-color-surface-variant:#e6e1d4;--md-sys-color-on-surface-variant:#535c55;--md-sys-color-inverse-surface:#181c19;--md-sys-color-inverse-on-surface:#f6f4ee;--md-sys-color-inverse-primary:#6b4f13;--md-sys-color-outline:#c6bfad;--md-sys-color-outline-variant:#d9d3c4;--md-sys-color-shadow:#f6f4ee;--md-sys-color-scrim:#f6f4ee;--md-sys-color-surface-tint:#6b4f13;color-scheme:light}[data-theme="dark"]{--bg:#0d0f0d;--ink:#e9e7e1;--dim:#98a09a;--line:#2a302a;--card:#161a15;--panel:#121512;--chip:#1b201a;--btn:#20261f;--docket:#181d18;--gap:#1b1710;--riskbg:#1a1610;--barbg:#262c24;--edge:#343d33;--accent:#e2c07a;--quiet:#cfe3da;--warn:#d9b46a;--auth:#a89c88;--code:#8cae9a;--leg:#c3cac3;--changed:#f2ead8;--badge:#c79a55;--badgeink:#12100a;--griz:#c1583e;--lens:#4c9a52;--lensedge:#1f5e2a;--lensroad:#b5d334;--on:#54897d;--onink:#04100c;--sel:#e2c07a;--selink:#12100a;--ring:#0b0d0c;--ringhalo:#dfe3dd;--serif:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;--sans:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--md-sys-color-primary:#e2c07a;--md-sys-color-on-primary:#12100a;--md-sys-color-primary-container:#54897d;--md-sys-color-on-primary-container:#04100c;--md-sys-color-secondary:#cfe3da;--md-sys-color-on-secondary:#0d0f0d;--md-sys-color-secondary-container:#1b201a;--md-sys-color-on-secondary-container:#e9e7e1;--md-sys-color-tertiary:#c79a55;--md-sys-color-on-tertiary:#12100a;--md-sys-color-tertiary-container:#20261f;--md-sys-color-on-tertiary-container:#e9e7e1;--md-sys-color-error:#c1583e;--md-sys-color-on-error:#12100a;--md-sys-color-error-container:#1a1610;--md-sys-color-on-error-container:#e9e7e1;--md-sys-color-background:#0d0f0d;--md-sys-color-on-background:#e9e7e1;--md-sys-color-surface:#121512;--md-sys-color-on-surface:#e9e7e1;--md-sys-color-surface-dim:#0d0f0d;--md-sys-color-surface-bright:#161a15;--md-sys-color-surface-container-lowest:#0d0f0d;--md-sys-color-surface-container-low:#121512;--md-sys-color-surface-container:#1b201a;--md-sys-color-surface-container-high:#20261f;--md-sys-color-surface-container-highest:#262c24;--md-sys-color-surface-variant:#20261f;--md-sys-color-on-surface-variant:#98a09a;--md-sys-color-inverse-surface:#e9e7e1;--md-sys-color-inverse-on-surface:#0d0f0d;--md-sys-color-inverse-primary:#e2c07a;--md-sys-color-outline:#343d33;--md-sys-color-outline-variant:#2a302a;--md-sys-color-shadow:#0d0f0d;--md-sys-color-scrim:#0d0f0d;--md-sys-color-surface-tint:#e2c07a;color-scheme:dark}}