/* ═════════════════════════════════════════════════════════════════════════════ BISBE — the hi-fi lifecycle demo. The surface stylesheet. ═════════════════════════════════════════════════════════════════════════════ WHAT THIS FILE IS. The stylesheet for a STATIC, READ-ONLY walkthrough of the Bisbe app: seven doors plus the screens that are not doors — each workspace landing on its work with one menu button to its own everything-page — and one client story running through them (the ratified C+A pattern, 2026-08-09). It is not a marketing page's stylesheet and it deliberately does not load /styles.css — a demo of an app has to look like the app, and the marketing sheet's page-level claims (hero grounds, section rhythm, its own h1) fight that. WHERE EVERY NUMBER CAME FROM — nothing here is re-derived by eye: · tokens (grounds / ink / gilt / lines / aurora) → AIU-STYLE-GUIDE v1.4.1 §1, transcribed via the shipped app stylesheet platform/src/app/(crm)/crm.css lines 52-136. Same hexes, same alphas. · the glass material → NOT re-implemented. The page links /assets/aiu-glass.css (the public port of the FOUNDER-accepted round-5 material, §10a) and points its --gl-accent at Bisbe's own token. `.gl` / `.gl--bar` / `.gl--sm` / `.gl--still` are that file's classes, used as the guide instructs: "a NEW glass surface adds the CLASS in the component". · type scale + .wrap + spacing → §3 + Appendix A.2/A.3 and crm.css .crm-h1/.crm-lede/.crm-eyebrow/ .crm-mono/.crm-wrap (max-width 1120 · padding 0 28px, 0 18px phone). · masthead geometry → measured off the shipped app render docs/reviews/crm-app-shots/masthead-crm-only.light@1280.png: 56px bar · content column starting at 108px on a 1280 viewport. · buttons / chips / inputs → crm.css .crm-cta-p/.crm-cta-g/.crm-chip + Appendix A.5. THE ACCENT is Bisbe forest --bisbe #123B2E with the gold node #D5A63A, read off the committed brand package (assets/bisbe/bisbe_v2_mark-color.svg). It is an IDENTITY colour and nothing else. FOUNDER is red/green colourblind, so: NOTHING IN THIS FILE ENCODES MEANING BY HUE. Every state cue in the demo is a GLYPH plus a LIGHTNESS step plus a WORD — ✓ done, ◔ waiting, ◇ not yet, ▼ behind, ● live. Read in greyscale the demo loses nothing. Forest green is never a "good" and there is no red "bad" anywhere; the one place a warning appears it is a ▼ glyph, a word, and a lightness step on neutral ground. ONE APP, NOT SIX. The six capabilities do NOT each get their own hue — that was the five-apps-in-a-trenchcoat reading §16 closed. They are told apart by monogram, name and position in the rail. One accent, one app. MOBILE-FIRST, LITERALLY. Every rule below is written for the 375px phone and only RELAXES upward. The phone gets a fixed bottom tab bar (the PWA idiom); the desktop gets the same six destinations as a left rail. Tap targets ≥44px, inputs ≥48px at 16px (below 16px iOS zooms the page on focus), safe-area insets honoured top and bottom. ═════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════ TOKENS — Daylight Aurora. LIGHT IS PRIMARY. ═══════════════ The warm-cream / tan family is banned site-wide (§1) and appears nowhere. */ :root { --g0: #fafbfd; --g1: #ffffff; --g2: #f0f3f8; --g3: #e6ebf2; --ink: #14171d; --mid: #444b59; --dim: #545b68; --gilt-text: #5c4108; --gilt-text-lg: #8a6210; --gilt-line: rgba(111, 78, 8, 0.4); --gilt-dim: rgba(138, 98, 16, 0.18); --line: rgba(20, 23, 29, 0.14); --line-soft: rgba(20, 23, 29, 0.08); --az-text: #1b4f8a; --glow: rgba(42, 102, 168, 0.22); /* BISBE'S OWN COLOUR. Identity, never state. --bisbe the fill (a tile, a primary control) — 12.4:1 under white ink --bisbe-text the same hue as SMALL TEXT — 12.4:1 on the day ground --node the gold signature dot from the mark. Decoration + the story-follow marker. Never text, never a state. */ --bisbe: #123b2e; --bisbe-text: #123b2e; --bisbe-ink: #ffffff; --node: #d5a63a; --accent: #123b2e; /* ONE accent token → ONE focus ring app-wide */ --aur-a: rgba(76, 134, 201, 0.28); --aur-b: rgba(132, 104, 214, 0.22); --aur-c: rgba(201, 165, 90, 0.2); --aur-fade: rgba(250, 251, 253, 0.65); --aur-floor: #fafbfd; /* the fence line (§10c) at the ≥3:1 value, so a withheld edge is genuinely visible rather than a hint */ --fence-line: rgba(20, 23, 29, 0.34); --radius: 14px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* what /assets/aiu-glass.css reads for its hover glow */ --gl-accent: var(--bisbe); --mast-h: 56px; color-scheme: light; } html[data-theme="dark"] { --g0: #0e1116; --g1: #141923; --g2: #1b212c; --g3: #242c38; --ink: #edf1f7; --mid: #b7c0cd; --dim: #97a1b0; --gilt-text: #d8b470; --gilt-text-lg: #d8b470; --gilt-line: rgba(216, 180, 112, 0.42); --gilt-dim: rgba(216, 180, 112, 0.18); --line: rgba(222, 232, 245, 0.13); --line-soft: rgba(222, 232, 245, 0.07); --az-text: #9fc4e8; --glow: rgba(84, 145, 212, 0.16); /* The night pair, by the lockup's own stated rule: a single value that clears WHITE fails on the night ground, so an accent is a PAIR. fill #1B5744 — 8.42:1 under white ink, and a clear lightness step up off the nocturne ground (a #123B2E fill on #0E1116 reads as a hole rather than a control) text #62C7A1 — 9.27:1 on --g0, and it holds up the raised rungs (--g1 8.1:1 · --g2 7.0:1 · --g3 5.9:1), so a flag on the heaviest card ground still clears the AA body floor. That last rung is the one the CRM's own pass found missing. */ --bisbe: #1b5744; --bisbe-text: #62c7a1; --accent: #62c7a1; /* MEASURED CVD NOTE, recorded where the token lives rather than in a report. Run with the gate's own colour science (scripts/cvd-sim.mjs lines 61-86, Vienot-Brettel-Mollon + dE76), this night fill sits at dE 8.2 from the CRM clay --c-cm #824032 under PROTANOPIA — below the dE>=11 floor that governs tokens which must be TOLD APART. It is not a defect on THIS surface: the demo carries ONE accent, the clay appears nowhere on it, and nothing here is distinguished by hue at all. It IS a real finding for the moment Bisbe's monogram lands in the app launcher or the homepage wall NEXT TO the CRM tile, which is a locked-accent ruling (Designer + CXO), not a demo change. Dispatched as such in the PR rather than parked as a note. */ --aur-a: rgba(64, 118, 196, 0.2); --aur-b: rgba(118, 92, 206, 0.16); --aur-c: rgba(201, 165, 90, 0.12); --aur-fade: rgba(14, 17, 22, 0.6); --aur-floor: #0e1116; --fence-line: rgba(222, 232, 245, 0.38); color-scheme: dark; } /* ═══════════════ BASE ═══════════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; min-width: 0; } html { background: var(--g0); -webkit-text-size-adjust: 100%; } body { background: var(--g0); color: var(--ink); font-family: 'Familjen Grotesk', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } img, svg { max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.1; font-weight: 700; } table { border-collapse: collapse; width: 100%; } /* A.1 · the global focus ring. Part of the §19 hard veto — every interactive element in the demo has it, including the rail, the tabs and the ribbon pips. */ :focus-visible { outline: 2px solid var(--gilt-text); outline-offset: 2px; border-radius: 6px; } .bx-skip { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--g1); color: var(--ink); padding: 12px 18px; border: 1px solid var(--gilt-line); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .bx-skip:focus { left: 12px; top: 12px; } .bx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ═══════════════ THE AURORA GROUND (Appendix A.0 · geometry is tuned) ═══════════════ */ .bx-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; } .bx-aurora i { position: absolute; display: block; border-radius: 50%; } .au-a { width: 1600px; height: 1200px; left: -18%; top: -38%; filter: blur(60px); background: radial-gradient(closest-side, var(--aur-a), transparent 75%); } .au-b { width: 1300px; height: 1100px; right: -20%; top: -18%; filter: blur(70px); background: radial-gradient(closest-side, var(--aur-b), transparent 75%); } .au-c { width: 1200px; height: 900px; left: 28%; top: 4%; filter: blur(80px); background: radial-gradient(closest-side, var(--aur-c), transparent 75%); } .au-fade { inset: 0; border-radius: 0; background: linear-gradient(180deg, transparent 0%, var(--aur-fade) 38%, var(--aur-floor) 62%); } /* ═══════════════ TYPE (§3 · Appendix A.3) ═══════════════ */ .bx-h1 { font-size: clamp(27px, 6.6vw, 38px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; } .bx-h2 { font-size: clamp(19px, 3.4vw, 23px); font-weight: 700; letter-spacing: -0.022em; } .bx-lede { font-size: 15.5px; color: var(--mid); line-height: 1.62; max-width: 52ch; } .bx-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; } .bx-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bisbe-text); } /* the section lintel — Cinzel caps between two gilt hairlines (§10) */ .bx-lintel { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; } .bx-lintel > span { font-family: Cinzel, serif; font-weight: 700; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gilt-text); white-space: nowrap; } .bx-lintel::after { content: ''; flex: 1; height: 1px; background: var(--gilt-line); } /* ═══════════════ CONTROLS (crm.css .crm-cta-* · Appendix A.5) ═══════════════ */ .bx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center; transition: background 0.18s var(--ease), border-color 0.18s var(--ease); } .bx-btn--p { background: var(--bisbe); color: var(--bisbe-ink); } .bx-btn--p:hover { background: color-mix(in oklab, var(--bisbe) 84%, black); } .bx-btn--g { background: transparent; color: var(--ink); border-color: var(--line); } .bx-btn--g:hover { background: var(--g2); } /* --sm is a smaller TYPE size, never a smaller TARGET: the 44px floor holds for every standalone control in the demo (checks.mjs rule C). */ .bx-btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; border-radius: 11px; } .bx-btn--wide { width: 100%; } .bx-btn--tall { min-height: 52px; font-size: 16px; border-radius: 14px; } /* the text affordance the app uses for "go deeper here" */ .bx-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--bisbe-text); font-size: 13.5px; font-weight: 600; } .bx-go:hover { text-decoration: underline; text-underline-offset: 3px; } .bx-input { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--g1); border: 1px solid var(--line); border-radius: 12px; } .bx-input::placeholder { color: var(--dim); } .bx-input:focus { border-color: var(--accent); outline: none; } /* ═══════════════ CHIPS + STATE MARKS ═══════════════════════════════════════ FOUR CHANNELS, NONE OF THEM COLOUR: a glyph, a word, a border STYLE and a ground LIGHTNESS. `.is-*` sets only lightness + border style; the glyph and the word are in the markup, so a chip cannot exist without them. */ .bx-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.35; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--g1); color: var(--mid); max-width: 100%; } .bx-chip .gy { font-size: 10px; line-height: 1; flex: none; } .bx-chip.is-done { background: var(--g1); border-color: var(--line); color: var(--ink); } .bx-chip.is-live { background: transparent; border-color: var(--glow); color: var(--az-text); } .bx-chip.is-wait { background: var(--g2); border-color: var(--mid); color: var(--ink); } .bx-chip.is-soon { background: transparent; border-style: dashed; border-color: var(--fence-line); color: var(--dim); } .bx-chip.is-flag { background: var(--g3); border-color: var(--mid); color: var(--ink); font-weight: 700; } /* THE STORY MARKER — the one thing that travels across every screen it is on: a glyph plus the claim number, on a gilt-edged chip. THE GLYPH IS GILT, NOT THE BRAND GOLD, and that was measured rather than chosen: Bisbe's #D5A63A renders at 2.25:1 on the day ground, which fails the 4.5:1 small-text floor AND the 3:1 non-text floor — it would have shipped a sub-AA marker on every screen and nothing on the page would have looked wrong. --gilt-text is the accessible value of the same warm register (9.48:1 light / 8.2:1 dark). The brand gold survives where it can carry a RING: the ribbon's dot and the arrived-at-step node below, both non-text and both given a hairline so their edge, not their fill, does the separating. */ .bx-chip.is-story { border-color: var(--gilt-line); background: var(--g1); color: var(--ink); } .bx-chip.is-story .gy { color: var(--gilt-text); font-size: 11px; } /* a receipt: which written page an answer came from, and when it was confirmed */ .bx-receipt { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--gilt-text); border: 1px solid var(--gilt-line); border-radius: 999px; padding: 5px 11px; background: var(--g1); } .bx-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); } /* ═══════════════ CARDS + LISTS ═══════════════════════════════════════════════ THE INTERIOR CARDS WEAR THE GLASS MATERIAL (§10a · glass ruling F2, 2026-08-09). This block used to argue the opposite, and BOTH of its reasons were wrong — it is worth writing down why, because the reasoning was plausible and it is exactly how a site-wide standard fails a second time. 1 · IT REASONED FROM A STALE GUIDE. It cited the flat-fill-plus-hairline register from a working-tree copy of AIU-STYLE-GUIDE.md at v1.2.1 — a version in which the material does not exist. The CURRENT guide is v1.4.1: §10a makes the material the standard for EVERY raised object, site-wide, and §10d is the measured register of where it has landed. (That stale copy is synced in this same change — glass ruling F8 — so the next builder cannot repeat the mistake.) 2 · IT INVERTED §20d. It said the demo must not move until the PLATFORM shell's §10d row moves, "in step with the app". §20d rules the other way round: the PROTOTYPE IS THE REQUIREMENTS DOCUMENT — it LEADS, and the app is built from it. A prototype that waits for the app to adopt a standard first is a prototype that can never introduce one, which is the opposite of its job. And the instruction it ended on — "do not fix it in isolation" — is the mechanism by which a surface stays off the standard indefinitely: it converts a measurable §10d row into a wait on someone else. §10d's own rule is that there are exactly two states, ON or a row in the backlog with an owner. There is no "waiting for the app". WHAT DOES *NOT* TAKE IT, and each has a rule behind it rather than a preference: · THE FENCE REGISTER (§10c) — `.bx-card--fence`, `.bx-tile.is-fence`, `.bx-tile.is-open`. Dashed means "you cannot have this yet"; the material is for objects that are REAL. A fenced tile wearing glass would read as shipped. · TEXT GROUNDS AND TABLES (F6) — `.bx-card--paper` (the orders table). Type stays on solid paper; the material goes on the container, never under the work. · THE DENSE COUNT LISTS (F6) — `.bx-roomlist`, `.bx-list` rows, `.bx-item` cards inside a glass column (never glass on glass, F3). A count row is type on paper, and a row inside a glass column is a second backdrop-filter compositing over the first, which reads as fog. ★ `.bx-rail` WAS IN THIS LIST AND CAME OUT (2026-08-09). It was filed here because it was excluded in the same pass, not because either reason applied to it: the rail is not inside anything (so F3 cannot bite) and it is not a text ground (its DOORS are, and they keep their solid grounds). It is a top-level CONTAINER, which is precisely what §10a's "every raised object" governs. FOUNDER found the same gap in the shipped app — *"why no visual treatment to the left tab selector? It doesnt fit with the rest of the page."* See the rail's own block below for the full reasoning. HOW IT IS APPLIED: the CLASS goes in the component (`class="bx-card gl"`), which is what §10a's own note requires — the stylesheet's surface list is a migration surface, not the API. Each surface DECLARES its own geometry (`--gl-radius`), because a surface that inherits the canonical radius while rendering a different one wears a corner bloom sized for a corner it does not have. And the flat register is scoped to `:not(.gl)` rather than deleted, because the fence and paper carve-outs above still need it — a surface may not carry BOTH, and this is how that is enforced in the cascade instead of by memory. None of this is claimed: `node scripts/global-style-audit.mjs` paints these surfaces in a real browser and reads the five checkable facts off the computed style, and the `bisbe-demo` rows in docs/design/style-audit/ are the evidence. */ .bx-card { padding: 15px 16px; } .bx-card:not(.gl) { background: var(--g1); border: 1px solid var(--line); border-radius: var(--radius); } /* Per-surface geometry, DECLARED (§10a): the demo's own corner, not the material's canonical one, so the rim mask and both corner terms derive from the real corner. */ .bx-card.gl, .bx-tile.gl, .bx-qcard.gl, .bx-course.gl, .bx-need.gl, .bx-col.gl { --gl-radius: var(--radius); } @media (min-width: 760px) { .bx-card { padding: 18px 20px; } } .bx-card--flat:not(.gl) { background: var(--g2); } .bx-card--fence { border-style: dashed; border-color: var(--fence-line); background: transparent; } /* THE STORY MARKER IS AN INFORMATION CHANNEL, and on the material it moves to the TOP edge. §10a fact 4: the material draws no border, and "the ONLY legal border is an accent TOP-rule, which is an information channel … re-asserted over the material." The gilt rule is exactly that — it says "this card is claim #1042" — so it survives the material by moving from the left edge to the one legal edge, same colour, same 3px, same meaning. Flat cards (the fence + paper carve-outs) keep the left rule. */ .bx-card--story:not(.gl) { border-left: 3px solid var(--gilt-line); } .bx-card--story.gl { border-top: 3px solid var(--gilt-line); } /* ARRIVED-AT-STEP. Set only when the viewer got here by clicking a ribbon pip, so a pip answers "where is step 4?" instead of merely swapping the screen. A ring plus a gold node — geometry and a marker, never a hue-only cue, and it sits OUTSIDE the box so it cannot be clipped by the card it marks. */ .is-lit { position: relative; box-shadow: 0 0 0 2px var(--gilt-line); } .is-lit::before { content: ''; position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--node); border: 2px solid var(--g0); box-shadow: 0 0 0 1px var(--fence-line); } .bx-stack { display: grid; gap: 10px; } .bx-stack--lg { gap: 14px; } /* the workspace row — one shape reused by every list in the app */ .bx-list { display: grid; } .bx-row { display: grid; gap: 5px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); text-align: left; width: 100%; } .bx-row:last-child { border-bottom: 0; } @media (min-width: 640px) { .bx-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; } } .bx-row .t { font-size: 14.5px; line-height: 1.4; color: var(--ink); font-weight: 600; } .bx-row .t small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mid); font-weight: 400; } .bx-row .s { justify-self: start; } @media (min-width: 640px) { .bx-row .s { justify-self: end; } } button.bx-row:hover { background: var(--g2); } /* the stat strip — 2-up on a phone so the numbers stay big enough to read */ .bx-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; } @media (min-width: 700px) { .bx-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bx-kpi > div { background: var(--g1); padding: 11px 13px; min-width: 0; } .bx-kpi b { display: block; font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; } .bx-kpi span { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); line-height: 1.45; } /* an inset note inside a card — the app's "here is the reason" box */ .bx-note { margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--g2); border: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--ink); } .bx-note b { font-weight: 700; } .bx-note .gy { color: var(--ink); } .bx-aside { font-size: 12.5px; line-height: 1.6; color: var(--mid); max-width: 74ch; } .bx-aside b { color: var(--ink); font-weight: 600; } /* THE ONE LINE THAT IS NOT AN ASIDE (Designer ruling 2, 2026-08-10). One sentence on the Training screen carries the product's whole argument — a question answered three times becomes a page written once — and it was wearing the footnote register. It now reads at the screen's own lede size, with the gilt rule the rest of this file uses for a sentence that is the point rather than a note about one. */ .bx-killer { border-left: 2px solid var(--gilt-line); padding: 3px 0 3px 13px; font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: 62ch; } .bx-killer b { font-weight: 600; } /* ═══════════════ THE DEMO FRAME (scrolls away — the honest top strip) ═══════════════ */ .bx-frame { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: var(--g2); padding: 9px 0; padding-top: max(9px, env(safe-area-inset-top)); } .bx-frame-in { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; max-width: 1220px; margin: 0 auto; padding: 0 18px; } @media (min-width: 900px) { .bx-frame-in { padding: 0 28px; } } .bx-frame p { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.55; letter-spacing: 0.02em; color: var(--mid); flex: 1 1 240px; min-width: 0; } .bx-frame p b { color: var(--ink); font-weight: 600; } .bx-frame a.bx-exit { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--g1); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .bx-frame a.bx-exit:hover { background: var(--g2); } /* the no-JS notice — a real statement of what you are seeing, in the page's own register, in the place the app chrome would have told you. Never a blank box and never a "loading" placeholder (§19.4). */ .bx-noscript { position: relative; z-index: 2; margin: 0 auto; max-width: 1220px; padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink); } @media (min-width: 900px) { .bx-noscript { padding: 16px 28px; } } .bx-noscript b { display: block; margin-bottom: 5px; font-weight: 700; } .bx-noscript a { color: var(--az-text); text-decoration: underline; text-underline-offset: 2px; } /* ═══════════════ THE APP MASTHEAD ══════════════════════════════════════════ 56px, measured off the shipped app render at 1280 (see the header note). It wears `.gl--bar` from /assets/aiu-glass.css, which is the variant with the viewport-bounded exceptions already in it (no side edges, no corners, no percent-sized pool) — the "white line / no gradient" class of defect. NO AIU WORDMARK. Bisbe stands alone on its own surfaces (the no-by-AIU binding); the identity zone is the Bisbe lockup and the product label. */ /* THE DRAWN BOTTOM HAIRLINE IS GONE (glass ruling · §10a fact 4). This masthead already wore `.gl .gl--bar`, and the audit measured it at PARTIAL 4/5 with exactly one failing fact: `border: bottom`. "The material never draws one" is not a stylistic preference — a drawn rule under a glass edge is the second line FOUNDER caught by name ("the border still has a white line"). The separation is the ladder's, as it is on the marketing masthead on the page next door, which measures `border: none` · MATERIAL 5/5. */ .bx-mast { position: sticky; top: 0; z-index: 60; height: var(--mast-h); } .bx-mast-in { height: 100%; display: flex; align-items: center; gap: 10px; max-width: 1220px; margin: 0 auto; padding: 0 14px; } @media (min-width: 900px) { .bx-mast-in { padding: 0 28px; } } /* THE LOCKUP. ≥480px: the compact logo at 26px — FOUNDER's chosen mark, and the height the shipped /b-os nav already uses. <480px: the square B mark at 26px, because the wordmark's own lettering falls under 8px of cap height once the compact lockup is squeezed into a phone masthead beside a label and controls. Both files are theme-paired; only one of the four ever renders. TWO INDEPENDENT AXES, and they are kept on two different elements on purpose: the SIZE axis (compact lockup vs square mark) switches the wrapper span, the THEME axis (forest ink vs reversed) switches the img inside it. Driving both from `display` on one element is how one of the four silently wins. */ .bx-lock { display: inline-flex; align-items: center; line-height: 1; flex: none; } .bx-lock img { height: 26px; width: auto; display: block; } .bx-lock .lk-full { display: none; } .bx-lock .lk-mark { display: block; line-height: 1; } @media (min-width: 480px) { .bx-lock .lk-full { display: block; line-height: 1; } .bx-lock .lk-mark { display: none; } } .bx-lock img.d { display: none; } html[data-theme="dark"] .bx-lock img.l { display: none; } html[data-theme="dark"] .bx-lock img.d { display: block; } /* the product label. One entitled app in this demo, so it is a PLAIN LABEL with no caret and no switcher — the shell behaving correctly, not a dead control. */ .bx-prod { display: inline-flex; align-items: center; gap: 8px; padding-left: 11px; margin-left: 3px; border-left: 1px solid var(--line); line-height: 1; flex: 1 1 auto; min-width: 0; } .bx-prod > span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bisbe-text); white-space: nowrap; } .bx-prod > em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; } @media (min-width: 700px) { .bx-prod > em { display: block; } } .bx-mast-utils { display: flex; align-items: center; gap: 8px; flex: none; } .bx-theme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--g1); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } .bx-theme:hover { background: var(--g2); } .bx-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bisbe); color: var(--bisbe-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } /* ═══════════════ THE STORY RIBBON ══════════════════════════════════════════ The one thing that makes many screens one product: a persistent strip naming the claim you are following, eight numbered steps, which of them this screen shows, and where the story goes next. It is a real tablist-adjacent control set — every pip is a button, arrow-key reachable, and each one lands you on the screen where that step is visible. Sticky UNDER the masthead, so it survives every scroll. Phone height is the budget that mattered: masthead 56 + ribbon ~44 = 100px of a 667px screen, which is why the step LABEL renders as one line of text rather than eight labelled pips at phone width. */ /* ══ COLLAPSIBLE BELOW 900, AND ONLY BELOW 900 (Designer ruling 4, 2026-08-10) ══ MEASURED, then ruled: masthead 56 + ribbon ~181 = ~237px of fixed chrome before a phone reader has seen one row of the app they came to look at. On a 480px visible area that is half the screen spent on a bar about the screen. WHAT COLLAPSING TAKES AWAY, and it is only ever these two: the say-line and the eight pips. What it never takes away is the four things a reader needs to know where they are and how to go on — the claim's identity, the step in WORDS, the next control, and the way to open the rest back up. WHY IN WORDS AND NOT PIPS. Eight 34px pips are a map; "Step 6 of 8" is an answer. Collapsed, the row answers; expanded, the map comes back. THE RESTING STATE IS EXPANDED. The markup ships open and JS closes it below 900 on load — the page's own motion law, which is that an enhancement may only ever ADD. A no-JS, print or crawler render gets the whole ribbon, never a bar with its contents display:none'd by a state attribute nothing set. DESKTOP IS UNTOUCHED. At ≥900 the toggle is display:none and the collapse rule is not in scope at all, so the one-row flex layout below is byte-for-byte what it was. */ .bx-ribbon { position: sticky; top: var(--mast-h); z-index: 55; background: var(--g1); border-bottom: 1px solid var(--line); } .bx-ribbon-in { display: grid; gap: 8px; max-width: 1220px; margin: 0 auto; padding: 9px 18px 10px; } /* ── THE COLLAPSED ROW — one 44px line, four things on it ───────────────────── */ @media (max-width: 899px) { .bx-ribbon-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; } .bx-ribbon-head { flex: 1 1 auto; } .bx-pips { flex: 1 0 100%; } .bx-ribbon[data-open="false"] #bx-ribbon-say, .bx-ribbon[data-open="false"] .bx-pips { display: none; } .bx-ribbon[data-open="false"] #bx-next-lb { display: none; } .bx-ribbon[data-open="false"] .bx-next-short { display: inline; } } /* AT 320 THE ROW IS ABOUT 20px TOO WIDE and wraps to two, which is the one width where this had to be measured rather than reasoned about — the worst case is the DEFAULT screen, whose where-line is the longest string the ribbon ever shows ("Steps 1–2 of 8"; every other screen says "Step n of 8"). What gives the width back is deliberately only ever slack: the gold node is decoration and aria-hidden, and the rest is gutter and padding. No word shrinks, nothing is hidden, and both controls stay 44px. Rendered at 320/360/375/390 in both themes — scripts/bisbe-story-375.mjs. */ @media (max-width: 400px) { .bx-ribbon-in { padding-left: 12px; padding-right: 12px; gap: 8px 7px; } .bx-ribbon[data-open="false"] .bx-ribbon-head { gap: 7px; } .bx-ribbon[data-open="false"] .bx-ribbon-head .nd { display: none; } .bx-ribbon[data-open="false"] .bx-ribbon-next { padding: 0 9px; gap: 6px; } .bx-ribbon[data-open="false"] .bx-ribbon-toggle { padding: 0; } } /* where-you-are, IN WORDS. Present in both states — it is the one thing the pips were really carrying, and it survives their absence. */ .bx-ribbon-where { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; } /* the short word the Next control wears when the tail is hidden. The button's own aria-label carries the full sentence either way, so nothing is lost to a reader who cannot see which of the two is rendered. */ .bx-next-short { display: none; font-weight: 600; } .bx-ribbon-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--g1); color: var(--ink); font-size: 13px; line-height: 1; } .bx-ribbon-toggle:hover { background: var(--g2); } .bx-ribbon-toggle .cv { display: inline-block; transition: transform .18s ease; } .bx-ribbon[data-open="false"] .bx-ribbon-toggle .cv { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .bx-ribbon-toggle .cv { transition: none; } } @media (min-width: 900px) { .bx-ribbon-toggle { display: none; } } /* ONE ROW from 900 (found by rendering at 1440): as a 1fr/auto GRID the third child wrapped to a second row and stretched across the whole first column, which read as an empty full-width button. A flex row with the head taking the slack puts the pips and the next-control on the right where they belong. */ @media (min-width: 900px) { .bx-ribbon-in { display: flex; align-items: center; gap: 10px 20px; padding: 9px 28px 10px; } .bx-ribbon-head { flex: 1 1 auto; min-width: 0; } .bx-pips, .bx-ribbon-next { flex: 0 0 auto; } } .bx-ribbon-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; } .bx-ribbon-head .nd { width: 10px; height: 10px; border-radius: 50%; background: var(--node); flex: none; box-shadow: 0 0 0 1px var(--fence-line); } .bx-ribbon-head b { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink); } .bx-ribbon-head span { font-size: 12.5px; color: var(--mid); line-height: 1.4; } .bx-pips { display: flex; align-items: center; gap: 4px; } /* THE ONE DOCUMENTED TAP-TARGET EXCEPTION, and why it is honest. Eight pips at 44 WIDE cannot coexist on a 375 row (352px of pill inside 339px of usable width), so they are 44 TALL and 34 wide with real spacing between them — never overlapping hit areas, which would be worse than a small one. That is legitimate ONLY because the pip row is a REDUNDANT secondary path: every screen it reaches is also reachable from a ≥44×44 control (the phone tab bar, the desktop rail, and the next-in-the-story button). The §18 floor is REACHABILITY, and no destination in this demo depends on a pip. Asserted, not asserted-at: .scratch/checks.mjs rules A and B. */ .bx-pip { width: 34px; height: 44px; border-radius: 9px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: var(--g1); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--dim); } @media (min-width: 700px) { .bx-pip { width: 40px; } } .bx-pip:hover { background: var(--g2); color: var(--ink); } /* DONE — solid ground, ink numeral, full border. */ .bx-pip[data-state="done"] { background: var(--g3); color: var(--ink); border-color: var(--mid); } /* HAPPENING NOW — a solid ink ring on the plain ground. It is not "done" and it is not "not yet", and before this rule existed it fell through to the default and read as the weakest of the three. */ .bx-pip[data-state="here"] { background: var(--g1); border-color: var(--ink); border-width: 1.5px; color: var(--ink); } /* AHEAD — dashed, the withholding register: this has not happened yet. */ .bx-pip[data-state="ahead"] { border-style: dashed; border-color: var(--fence-line); background: transparent; } /* ON THIS SCREEN — the ink fill. Declared LAST because it ties every rule above on specificity and has to win all three. Fill + weight + aria-current, never hue. */ .bx-pip[aria-current="true"] { background: var(--ink); color: var(--g0); border-color: var(--ink); border-style: solid; } .bx-ribbon-next { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid var(--gilt-line); border-radius: 10px; background: var(--g1); font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.3; } .bx-ribbon-next:hover { background: var(--g2); } .bx-ribbon-next .gy { color: var(--gilt-text); font-size: 12px; flex: none; } .bx-ribbon-next em { font-style: normal; color: var(--mid); font-weight: 400; } /* ═══════════════ THE FRAME: rail (desktop) · bottom tabs (phone) ═══════════════ */ .bx-body { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; } @media (min-width: 1000px) { .bx-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0; align-items: start; } } .bx-rail { display: none; } @media (min-width: 1000px) { /* THE RAIL WEARS THE MATERIAL (§10a · glass ruling F6 CORRECTED, 2026-08-09). It carried `class="gl gl--still"` from this change forward; the flat register below is scoped `:not(.gl)` so the fence and paper carve-outs keep it, exactly as `.bx-card` does. WHY THE EARLIER CARVE-OUT WAS WRONG, since this file is where a reader will look: the F6 list read "THE RAIL AND ITS DENSE COUNT LISTS — `.bx-rail`, `.bx-roomlist`, `.bx-list` rows, `.bx-item` cards inside a glass column". The REASONS it gives are the glass-on-glass rule and the text-ground rule, and both are true of the two COUNT LISTS — a count row is type on paper, and a row inside a glass column is a second backdrop-filter compositing over the first, which reads as fog. Neither is true of the RAIL, which is not inside anything and is not a text ground: it is a top-level CONTAINER, the case §10a's "every raised object" and the CXO's "material on CONTAINERS, never a text ground" both govern. A container and two lists were filed under one heading because they were excluded in the same pass, and the heading outlived the reason. FOUNDER found it in the APP first — *"why no visual treatment to the left tab selector? It doesnt fit with the rest of the page."* — and the prototype had the identical gap, so "mirror the demo" would have shipped the defect. §20d: the prototype LEADS, so it moves here in the same change rather than trailing the app. The DOORS inside keep every signal they had; only the container's finish changes. */ .bx-rail { display: block; position: sticky; top: calc(var(--mast-h) + 60px); padding: 22px 14px 22px 28px; } .bx-rail:not(.gl) { border-right: 1px solid var(--line-soft); } /* Per-surface geometry, DECLARED (§10a): the demo's own corner, so the rim mask and both corner terms derive from the corner this surface actually renders. */ .bx-rail.gl { --gl-radius: var(--radius); } .bx-rail-h { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); padding: 0 10px 8px; } .bx-rail nav { display: grid; gap: 2px; } } .bx-railbtn { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; text-align: left; } .bx-railbtn:hover { background: var(--g2); } .bx-railbtn[aria-current="page"] { background: var(--ink); } .bx-railbtn .mg { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--g3); color: var(--ink); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; } .bx-railbtn[aria-current="page"] .mg { background: var(--bisbe); color: var(--bisbe-ink); border-color: transparent; } .bx-railbtn .lb { min-width: 0; } .bx-railbtn .lb b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); } .bx-railbtn[aria-current="page"] .lb b { color: var(--g0); font-weight: 700; } .bx-railbtn .lb i { display: block; font-style: normal; margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .bx-railbtn[aria-current="page"] .lb i { color: var(--g3); } /* the count on a rail item — a real third column, not a negative-margin nudge. The number is decoration; the word ("4 items") lives in the aria-label. */ .bx-railbtn .ct { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--dim); } .bx-railbtn[aria-current="page"] .ct { color: var(--g3); } /* ═══════════ THE PHONE SPINE — IMPORTED FROM THE SHIPPED APP ═══════════════════ WHAT WAS HERE, and why it went. This bar carried SEVEN equal slots with a label step-down from 9.5px to 9px below 400px — a shape invented for this file alone, argued for in forty lines of comment, and shipped on no other surface. Meanwhile the read-only world, which is generated from the product's own components, ships the app's REAL spine: four doors drawn and the rest behind one native "More" sheet, 60px slots, 12px labels, 44px sheet rows. Two surfaces of one product disagreeing about its own navigation is the drift class, and the arithmetic is the proof of which one was right: seven across a 375px screen is 53.6px a slot, so "Customers" had to be shrunk to 9px to fit a box smaller than the 44px touch floor is wide. Four across is 75px. SO THE VARIANT IS DELETED RATHER THAN PARAMETERISED (Designer ruling 3). This block is the world's own, transcribed from public/b-os/demo/world/screens.*.css `.bx-frame .bx-tabs` — same geometry, same class names, same sheet. A parameter would have kept both shapes alive and let them drift again; there is now one shape, and scripts/check-bos-vocab-and-doors.mjs CHECK 7 compares the two surfaces on every commit so the next drift fails loudly. THE THREE DELIBERATE DELTAS, and each is a consequence of the tour being one page rather than seven: 1 · the controls are