/* ROUTE 6 · THE ELEVATION THEME. Ported from design/STYLE_TILE.html. THE TILE IS THE TEMPLATE (Design Fidelity Law 2). The :root block below is copied VERBATIM out of that file rather than retyped, and scripts/designgate.mjs compares the SERVED ARTIFACT against it, never this source. That is the lesson the reskin paid for when the minifier stripped the separators out of backdrop-filter and the glass died while both gates stayed green. THIS REPLACES THE CRYSTAL THEME. The previous theme was faithful to its mockup and still failed the Owner: too bland, everything blended, no contrast, no section breaks, the orb faded into its ground, nothing visibly worked. The cure is contrast, section identity, and a state grammar readable from two meters. Namespaced --e- so a superseded token can never win a collision (Fidelity Law 3). */ :root { /* GROUNDS AND SURFACES. The page ground is NEVER white. */ --e-ground: #F4F7FA; --e-band: #E9EEF5; --e-card: #FFFFFF; --e-inset: #F6F8FB; --e-card-radius: 12px; --e-card-border: rgba(16, 24, 40, .08); --e-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); --e-card-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10); /* INK. Nothing lighter than ink-400 is readable text. */ --e-ink-900: #0F1B2D; --e-ink-700: #33415C; --e-ink-500: #5C6B84; --e-ink-400: #8A97AB; --e-glance-floor: #475569; /* ACCENT. ONE brand indigo, at most one filled indigo element per region. */ --e-accent: #4F5DE8; /* SEMANTIC LOCKDOWN. Each pair means exactly one thing. */ --e-good: #05690D; --e-good-bg: #D7F7C2; --e-warn: #7A4D0B; --e-warn-bg: #FCEDB9; --e-bad: #B3093C; --e-bad-bg: #FFE7E3; --e-neutral: #414D5C; --e-neutral-bg: #EBEEF1; /* THE DARK CHAMBER, the orb's stage. */ --e-chamber-top: #0B1220; --e-chamber-bottom: #101826; --e-chamber-radius: 24px; --e-chamber-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 24px 48px -16px rgba(15, 23, 42, .35); --e-chamber-rim: rgba(255, 255, 255, .07); --e-chamber-ink: #E2E8F0; --e-chamber-ink-dim: #94A3B8; /* BUBBLES. */ --e-bubble-out: #2563EB; --e-bubble-in: #EDF0F4; --e-bubble-radius: 18px; --e-bubble-pinch: 5px; /* SKELETON. */ --e-skeleton: #E8EDF4; /* RHYTHM. 8px base. */ --e-s1: 8px; --e-s2: 16px; --e-s3: 24px; --e-s6: 48px; /* MOTION. The two ambient tempos are never equal: live 2000ms, breathe 6000ms. */ --e-t-hover: 100ms; --e-t-standard: 200ms; --e-t-entry: 250ms; --e-t-live: 2000ms; --e-t-breathe: 6000ms; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { min-width: 1180px; background: var(--e-ground); color: var(--e-ink-700); /* CARD G2, 2026-09-06. INTER WAS REMOVED FROM THE FRONT OF THIS STACK, AND THE REASON IS THE OPPOSITE OF THE OBVIOUS ONE. The design gate's used face probe reported that this stylesheet declared Inter and the browser resolved something else, with the probe width and the monospace sentinel identical to the pixel, 1733.91 against 1733.91. document.fonts.check answered true, which is why that probe exists and why the check is not asked: check() answers whether the LIST can be displayed, and a list ending in a generic always can. THE OBVIOUS FIX WAS THE WRONG ONE. Shipping Inter would have CHANGED every surface the Owner has already approved. Measured: no font file exists anywhere in this repository, no @font-face is declared anywhere in it, Inter is not installed on this machine, and the DESIGN OF RECORD, design/CRYSTAL_MASTER_Aug4_2026.html line 28, declares exactly system-ui, -apple-system, "Segoe UI", Roboto, sans-serif with no Inter in it at all. So the face that has been rendering all along is the face the design of record asks for, and every approved screenshot is correct. What was wrong was the DECLARATION: this file named a face it does not ship, does not install and never rendered. It was a loaded gun rather than a live defect. Anyone installing Inter on their machine, or any later seat adding it to the bundle in good faith, would have silently moved every surface away from the approved design, and nothing would have announced it. DO NOT RE-ADD INTER HERE. If the typeface is ever to change, the design of record changes first, by the Owner's word, and this stack follows it. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 450; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- TYPE */ /* THE EYEBROW SITS AT THE GLANCE FLOOR, NOT AT ink-400. The design law says two things that collide on this element: eyebrows are ink-400, and nothing the Owner glances at from distance may be lighter than #475569. A section eyebrow is exactly what he scans to find a section, so the stricter rule wins. Measured: ink-400 on the page ground is 2.75:1, which fails at 11px; the floor is 7.05:1. ink-400 remains the label colour inside cards where it is read at arm's length, not scanned from across a room. */ .e-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--e-glance-floor); display: block; } .e-title { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .e-kpi { font-size: 32px; font-weight: 650; color: var(--e-ink-900); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.1; } .e-hero { font-size: 56px; font-weight: 700; color: var(--e-ink-900); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.05; } .e-body { font-size: 14px; font-weight: 450; color: var(--e-ink-700); } .e-glance { font-size: 18px; font-weight: 600; color: var(--e-ink-900); } .e-num { font-variant-numeric: tabular-nums; } h1 { font-size: 20px; font-weight: 650; color: var(--e-ink-900); margin: 0; letter-spacing: -0.3px; } /* ---------------------------------------------------------------- SHELL */ /* HEIGHT, NOT MIN-HEIGHT, AND THE DIFFERENCE WAS A FATAL DEFECT. This shipped as min-height:100vh. The parent theme bounded its shell with height:100vh, and dropping that bound made every `flex:1; min-height:0` beneath it INERT: no descendant ever became a scroll container, so the document simply grew. Measured on the live app: the Conversations composer, the only way to say anything in that tab, sat 13,650px below the fold on a 14,626px document, and it got 64px worse for every conversation the floor opened. All three gates were green over it, because none of them measured geometry. Found by the adversarial commission rendering the page and reading getBoundingClientRect. */ .e-app { height: 100vh; min-height: 720px; display: flex; flex-direction: column; background: var(--e-ground); overflow: hidden; } /* EVERY TAB SCROLLS EXCEPT THE ONE THAT OWNS ITS OWN PANES, and getting this backwards was a real defect on five surfaces. It shipped as: Today scrolls, and EVERY OTHER TAB gets inline `overflow: hidden` from the shell. Those tabs are ordinary documents whose cards are as tall as their content, so on a 950px viewport the bottom of Brain, Money, Customers and Settings was CLIPPED and there was no way to reach it: no scrollbar, no wheel, nothing. It is the same family as the composer that sat 13,650px below the fold, and like that one it was invisible to all three gates because none of them measured geometry. scripts/geometrygate.mjs now does, per tab. Conversations is the only tab that legitimately bounds itself, because its three cards scroll internally, so it is the only one that opts into `paned`. */ .e-scrollpage { flex: 1; min-height: 0; overflow-y: auto; } .e-scrollpage.paned { overflow: hidden; display: flex; flex-direction: column; } /* THE DOCKED FRAME. Today mounts the command dock, and a floating panel over a money-bearing card is a defect. Run `node scripts/dockprobe.mjs` for the current number rather than trusting this comment: it reads 0 percent coverage and 0 stolen clicks now, and 58.5 percent with 1 stolen click when the dock is restored to position:fixed. So Today is a FRAME in the master's grammar: the page is a bounded column, .e-pagescroll is the row that scrolls, and the dock is a row of its own beneath it. Nothing can be underneath the dock because the dock is not on top of anything. */ .e-scrollpage.docked { overflow: hidden; display: flex; flex-direction: column; } .e-pagescroll { flex: 1; min-height: 0; overflow-y: auto; } /* The nav is a real bar on its own ground, not a floating pill that blends into the page. */ .e-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--e-s2); padding: 0 var(--e-s3); height: 56px; background: var(--e-card); border-bottom: 1px solid var(--e-card-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); } .e-logo { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--e-ink-900); margin-right: var(--e-s1); } .e-logo em { font-style: normal; color: var(--e-accent); } .e-tabs { display: flex; align-items: center; gap: 2px; } .e-tabs button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--e-ink-500); padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: background var(--e-t-hover) ease, color var(--e-t-hover) ease; } .e-tabs button:hover { color: var(--e-ink-900); background: var(--e-inset); } .e-tabs button.on { background: var(--e-accent); color: #fff; } .e-navright { margin-left: auto; display: flex; align-items: center; gap: var(--e-s2); } .e-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--e-good); } .e-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--e-good); animation: e-live var(--e-t-live) ease-in-out infinite; } /* CARD F1 · THE STOP IN THE NAV. Smaller than a page button because it sits in the chrome, and it wears the BAD colour only once it has been thrown, so a running cockpit does not carry a red button in its top right corner all day. Before it is thrown it is the ghost button the rest of the product uses for a second action, with the bad colour on its word alone. */ .e-stop { font-size: 12px; padding: 6px 12px; } .e-btn.ghost.e-stop { color: var(--e-bad); } .e-btn.e-stop:not(.ghost) { background: var(--e-bad); } .e-live.dead { color: var(--e-bad); } .e-live.dead i { background: var(--e-bad); } /* CARD FX3, WAVE R6j · THE PILL ON A SIMULATED ACCOUNT. The walk of record read LIVE in this pill on a walk account (WALK 3 RED). A simulated account now reads SIMULATED in the pill's own form: the neutral ink of the SIMULATED chip, and a still dot, because nothing live is pulsing. The chip itself was tried here first and measured 94px at 1180, which wrapped Stop everything and Sign out onto two lines; this form measures 79px and keeps both on one. */ .e-live.sim { color: var(--e-neutral); } .e-live.sim i { background: var(--e-neutral); animation: none; } /* CARD SIMCHIP1 fix round: a really connected account that is READY, in SHADOW or PAUSED wears a still form in the good ink, in its own word, never the SIMULATED grey. */ .e-live.sim.real { color: var(--e-good); } .e-live.sim.real i { background: var(--e-good); animation: none; } /* fix round, MINOR: a real connected account never wears the SIMULATED grey; still dot, because nothing pulses until live */ @keyframes e-live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ---------------------------------------------------------------- SECTIONS */ .e-section { padding: var(--e-s3) var(--e-s3) var(--e-s6); } .e-section.band { background: var(--e-band); } .e-section > .e-eyebrow { margin-bottom: var(--e-s2); } .e-grid { display: grid; gap: var(--e-s3); } .e-row { display: flex; gap: var(--e-s2); align-items: center; flex-wrap: wrap; } /* FOUR CLASSES THE TILE DEFINES THAT THE APP HAD NEVER PORTED. Copied out of design/STYLE_TILE.html rather than retyped, per fidelity law 2. They were approved design vocabulary sitting unused while surfaces invented one-off inline grids instead, which is how a design system quietly stops being one. */ .e-g3 { grid-template-columns: repeat(3, 1fr); } .e-g4 { grid-template-columns: repeat(4, 1fr); } .e-chip { font-size: 11px; font-weight: 600; } .e-link { color: var(--e-accent); font-weight: 600; text-decoration: none; } /* ---------------------------------------------------------------- CARDS */ .e-card { background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: var(--e-card-radius); box-shadow: var(--e-card-shadow); padding: var(--e-s2); transition: box-shadow var(--e-t-hover) ease; } .e-card:hover { box-shadow: var(--e-card-shadow-hover); } .e-inset { background: var(--e-inset); border-radius: var(--e-card-radius); padding: var(--e-s2); } /* 3px section identity rails, one hue per section. */ .e-rail { border-left: 3px solid var(--e-neutral); } .e-rail.accent { border-left-color: var(--e-accent); } .e-rail.good { border-left-color: var(--e-good); } .e-rail.warn { border-left-color: var(--e-warn); } .e-rail.bad { border-left-color: var(--e-bad); } /* ---------------------------------------------------------------- CHIPS AND BUTTONS */ .e-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .e-pill.good { background: var(--e-good-bg); color: var(--e-good); } .e-pill.warn { background: var(--e-warn-bg); color: var(--e-warn); } .e-pill.bad { background: var(--e-bad-bg); color: var(--e-bad); } .e-pill.neutral { background: var(--e-neutral-bg); color: var(--e-neutral); } .e-btn { border: 0; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; background: var(--e-accent); color: #fff; transition: filter var(--e-t-hover) ease; } .e-btn:hover { filter: brightness(1.08); } .e-btn.ghost { background: var(--e-card); color: var(--e-ink-700); border: 1px solid var(--e-card-border); } .e-btn:disabled { opacity: .45; cursor: default; } .e-btn:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; } /* ---------------------------------------------------------------- STATE GRAMMAR */ .e-dots { display: inline-flex; gap: 4px; align-items: center; } .e-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--e-warn); animation: e-pulse 900ms ease-in-out infinite; } .e-dots i:nth-child(2) { animation-delay: 150ms; } .e-dots i:nth-child(3) { animation-delay: 300ms; } @keyframes e-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } } .e-staterow { display: flex; align-items: center; justify-content: space-between; gap: var(--e-s2); padding: 10px 12px; border-radius: 8px; background: var(--e-inset); } .e-staterow.pending { border-left: 3px solid var(--e-warn); } .e-staterow.confirmed { border-left: 3px solid var(--e-good); animation: e-flash 1500ms ease-out 1; } @keyframes e-flash { 0%, 33% { background: var(--e-good-bg); } 100% { background: var(--e-inset); } } .e-check { width: 16px; height: 16px; border-radius: 50%; background: var(--e-good); position: relative; flex: none; } .e-check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } .e-skel { height: 12px; border-radius: 6px; background: var(--e-skeleton); position: relative; overflow: hidden; } .e-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: e-shimmer 833ms linear infinite; } /* THE METER FILL, WHICH DID NOT EXIST. Brain rendered `` inside .e-skel to draw the spend bar, and NOTHING IN THIS STYLESHEET EVER MATCHED IT: an inline element with a width, no height, no background, drawing precisely nothing. The bar had been showing the Owner a shimmering empty track and calling it a meter since the migration. It is a class now, so it is visible to the stranded-class sweep that a bare element selector hides from, and the shimmer is suppressed under a real fill because a meter is not a skeleton. */ .e-skel:has(.e-skelfill)::after { animation: none; opacity: 0; } .e-skelfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--e-accent); transition: width var(--e-t-standard) ease; } @keyframes e-shimmer { to { transform: translateX(100%); } } .e-enter { animation: e-enter var(--e-t-entry) ease-out both; } @keyframes e-enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* Value change flash: hold 500ms then fade 1000ms. Green for money up, accent otherwise. */ .e-flash-money { animation: e-flash-money 1500ms ease-out 1; } @keyframes e-flash-money { 0%, 33% { background: var(--e-good-bg); } 100% { background: transparent; } } .e-flash-accent { animation: e-flash-accent 1500ms ease-out 1; } @keyframes e-flash-accent { 0%, 33% { background: rgba(79, 93, 232, .16); } 100% { background: transparent; } } /* ---------------------------------------------------------------- THE DARK CHAMBER */ .e-chamber { position: relative; background: linear-gradient(180deg, var(--e-chamber-top), var(--e-chamber-bottom)); border-radius: var(--e-chamber-radius); box-shadow: var(--e-chamber-shadow); overflow: hidden; color: var(--e-chamber-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--e-s3); } .e-chamber::before { content: ""; position: absolute; inset: 0; border-radius: var(--e-chamber-radius); box-shadow: inset 0 1px 0 var(--e-chamber-rim); pointer-events: none; z-index: 3; } .e-halo { position: absolute; left: 50%; top: 46%; width: 320px; height: 320px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--e-accent), transparent 68%); opacity: .30; pointer-events: none; z-index: 0; } .e-orbbox { position: relative; z-index: 1; width: 300px; height: 300px; flex: none; cursor: grab; } .e-orbbox:active { cursor: grabbing; } .e-orbbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .e-chamber-state { position: relative; z-index: 2; font-size: 20px; font-weight: 650; color: var(--e-chamber-ink); margin-top: 4px; letter-spacing: -0.2px; } .e-chamber-sub { position: relative; z-index: 2; font-size: 13px; color: var(--e-chamber-ink-dim); margin-top: 2px; } .e-chamber-thought { position: relative; z-index: 2; font-size: 14px; font-style: italic; color: var(--e-chamber-ink-dim); margin-top: 10px; max-width: 46ch; text-align: center; min-height: 21px; } /* THE HINT SITS BELOW THE TEXT, NOT ON IT. At bottom:12px it overlapped the thought line, which is the layout-collision class the Owner counts as a defect rather than polish. The chamber reserves room for it instead. */ .e-draghint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 10px; letter-spacing: .1em; color: #64748B; } .e-chamber { padding-bottom: 34px; } /* ---------------------------------------------------------------- BUBBLES */ .e-thread { display: flex; flex-direction: column; gap: 3px; } .e-bub { max-width: 72%; padding: 9px 13px; border-radius: var(--e-bubble-radius); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; } .e-bub.out { align-self: flex-end; background: var(--e-bubble-out); color: #fff; } .e-bub.in { align-self: flex-start; background: var(--e-bubble-in); color: var(--e-ink-900); } .e-bub.out.end { border-bottom-right-radius: var(--e-bubble-pinch); } .e-bub.in.end { border-bottom-left-radius: var(--e-bubble-pinch); } .e-runbreak { height: 9px; } /* THE LETTER-SPACING CAME OFF, because the tile does not have it. This rule carried `letter-spacing: .06em` that design/STYLE_TILE.html never declares, and the drift survived because .e-daysep had never been sampled by the design gate. Adding the sample found it in one run. The tile is the template; where they disagree, the tile wins. */ /* CARD S10, WAVE R6e. MEASURED AND LEFT ALONE ON PURPOSE. ink-400 on the thread's white card is 2.96:1, below the 4.5:1 this real word (TODAY, YESTERDAY, a date) owes at 11px. tests/u044's own "ONE INHERITED CONFLICT" test already found and pinned this exact number against design/STYLE_TILE.html, which declares the identical rule byte for byte: raising it here alone would diverge from the approved tile the design gate compares against, and lowering the tile is not a call this card gets to make alone. Left untouched; see docs/reports/R6E_S10_READABILITY_Sep7_2026.md for the disclosure rather than a silent skip. */ .e-daysep { text-align: center; font-size: 11px; font-weight: 600; color: var(--e-ink-400); padding: var(--e-s1) 0; } .e-delivered { align-self: flex-end; font-size: 11px; color: var(--e-ink-500); } /* Inside the blue bubble the same ink measured 1.75:1. On blue, the text is near-white. */ /* CARD S10, WAVE R6e. RAISED FROM .82 OPACITY. White text at .82 over the outgoing bubble (--e-bubble-out, #2563EB) blends to an effective 4.01:1, under the 4.5:1 normal text floor: an 11px "Delivered" line and message timestamps that failed his own eyes before they failed a measurement. .92 measures 4.63:1 against the same bubble, and reads the same to the eye. */ .e-bub.out .e-delivered, .e-bub.out .e-mmeta { color: rgba(255, 255, 255, .92); } .e-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 14px; border-radius: var(--e-bubble-radius); background: var(--e-bubble-in); } .e-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--e-ink-400); animation: e-pulse 900ms ease-in-out infinite; } .e-typing i:nth-child(2) { animation-delay: 150ms; } .e-typing i:nth-child(3) { animation-delay: 300ms; } /* ---------------------------------------------------------------- LANES */ .e-lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-s3); } .e-lane { display: flex; flex-direction: column; gap: var(--e-s1); } .e-lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-s1); padding-bottom: 2px; } .e-lane-count { font-size: 18px; font-weight: 700; color: var(--e-ink-900); font-variant-numeric: tabular-nums; } .e-lit { display: flex; align-items: center; justify-content: space-between; gap: var(--e-s1); padding: 10px 12px; background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: 10px; box-shadow: var(--e-card-shadow); } .e-lit .who { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .e-lit .sub { font-size: 12px; color: var(--e-ink-500); } /* ---------------------------------------------------------------- COMPOSER AND LISTS */ .e-composer { display: flex; align-items: center; gap: var(--e-s1); padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow); } .e-composer input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--e-ink-900); padding: 8px 0; } .e-composer input::placeholder { color: var(--e-ink-400); } /* CARD FL1, WAVE R6k: the line under the composer that says a typed line is a rehearsal (Conversations, COMPOSER_FLOOR_LINE). */ .e-composer-line { font-size: 12px; color: var(--e-ink-500); padding: 6px var(--e-s2) 0; } .e-send { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--e-bubble-out); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; } .e-send:disabled { opacity: .4; cursor: default; } .e-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; } .e-listrow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--e-ink-700); transition: background var(--e-t-hover) ease; } /* WAVE R6j, CARD FX4, 2026-09-25. A FLOOR ROW NEVER SHRINKS BELOW ITS CONTENT. .e-list is a column flex container that scrolls, a flex item shrinks by default, and the explicit min-height above replaces the automatic minimum that would have held a row at its content. Measured in Chrome at 1512 by 950 over fourteen conversations: every row squeezed to 64px and 13 tag chips painted over the next row's name. With flex none the list scrolls instead; a short floor is unchanged. */ .e-listrow { flex: none; } .e-listrow:hover { background: var(--e-inset); } .e-listrow.on { background: var(--e-inset); border-color: var(--e-card-border); box-shadow: inset 3px 0 0 var(--e-accent); } .e-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; } .e-listrow .nm { font-size: 14px; font-weight: 600; color: var(--e-ink-900); } .e-listrow .pv { font-size: 12px; color: var(--e-ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .e-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--e-ink-500); } .e-kv b { color: var(--e-ink-900); font-weight: 650; font-variant-numeric: tabular-nums; } /* RAISED OFF ink-400 BY THE COMMISSION. .e-empty is the honest empty state on every new tab, and at ink-400 it measured 2.78:1 on an inset: the palest text in the product was the text explaining why a panel is empty, which is precisely the sentence somebody squints at. u044 claimed this surface used ink-500 and it never did; the suite was corrected first so it went red, and then this rule was fixed. */ .e-empty { color: var(--e-glance-floor); font-size: 13px; padding: 10px 2px; } .e-notice { padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--e-warn-bg); color: var(--e-warn); } .e-notice.bad { background: var(--e-bad-bg); color: var(--e-bad); } /* Switches, built from the accent rather than a new colour. */ .e-sw { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; } .e-swb { flex: none; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--e-card-border); background: var(--e-neutral-bg); position: relative; cursor: pointer; transition: background var(--e-t-standard) ease; } .e-swb.on { background: var(--e-accent); border-color: transparent; } .e-swb i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform var(--e-t-standard) ease; } .e-swb.on i { transform: translateX(16px); } .e-swt { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .e-swh { font-size: 12px; color: var(--e-ink-500); margin-top: 1px; } .e-input { border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--e-ink-900); width: 84px; font-variant-numeric: tabular-nums; } /* CARD F1. THE PASTE BOX IS A MODIFIER, NOT A NEW FAMILY. The Brain screen's five prompt slots need a full width multi line box, and the cheapest honest way to have one is the input family this file already carries, widened. A new class family here would be a seventeenth element the design of record cannot be compared against, which is the exact deviation card G1 is standing in front of. Tabular numbers are dropped on purpose: this box holds prose, and lining figures are for money. */ .e-input.paste { width: 100%; box-sizing: border-box; min-height: 108px; resize: vertical; line-height: 1.5; font-variant-numeric: normal; margin-top: 10px; } .e-input.paste::placeholder { color: var(--e-ink-400); } .e-input.paste:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 1px; } /* ---------------------------------------------------------------- THE COMMAND DOCK, TODAY ONLY */ /* THE DOCK OWNS ITS OWN SURFACES AND NOTHING ELSE. P3d. MEASURED BEFORE THE FIX by scripts/dockprobe.mjs, on the served build with elementFromPoint rather than by eye: the dock covered a CLOSING lane card reading "$32.00 on the table" by 58.5 percent, and document.elementFromPoint at that card's centre returned the dock's input rather than the card, so the card could not be clicked where it was drawn. The design-reviewer measured 86.2 percent on a busier floor. A money-bearing card that looks available and is not is the costume class in its most expensive form. ONE NUMBER, AND IT IS REPRODUCIBLE. Earlier drafts of these comments carried three different percentages for this one measurement, left over from two rejected attempts and from a probe that measured unclipped rectangles. They are gone. Run the probe. TWO CHANGES, and the SECOND is the one that fixed it. pointer-events none on the container with auto on its own children means the dock takes exactly the clicks that land on the log, the confirm card or the bar; that is real and it is kept, but it moved the coverage number by nothing, because the card sat under the BAR and a bar drawn there is entitled to the clicks that land on it. What fixed it is the FLOW PLACEMENT: this rule is `flex: none` inside a bounded column, so the dock is a row of the frame rather than a panel over it. There is no reserved band and no sticky positioning; both were tried and both were wrong. */ .e-dock { flex: none; z-index: 45; width: min(720px, calc(100vw - 60px)); margin: 0 auto var(--e-s2); display: flex; flex-direction: column; gap: 9px; pointer-events: none; } .e-dock > * { pointer-events: auto; } .e-docklog { padding: 12px 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 5px; max-height: 28vh; overflow-y: auto; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow-hover); } .e-dockline { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; color: var(--e-ink-700); } .e-dockline.said { color: var(--e-ink-900); font-weight: 600; } /* CARD S10, WAVE R6e. RAISED OFF ink-400 for the same reason as .e-daysep: this word sits on .e-docklog's white card at 13px, ink-400 measures 2.96:1 against it, and normal text owes 4.5:1. ink-500 measures 5.40:1. */ .e-dockline.said::before { content: "You: "; color: var(--e-ink-500); } .e-dockline.receipt::before { content: "Done: "; color: var(--e-good); font-weight: 700; } .e-dockline.refused::before { content: "No: "; color: var(--e-bad); font-weight: 700; } .e-dockconfirm { padding: 14px 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow-hover); border-left: 3px solid var(--e-warn); } .e-payload { margin: 0; display: flex; flex-direction: column; gap: 5px; } .e-prow { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; } .e-prow dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e-glance-floor); } .e-prow dd { margin: 0; font-size: 13px; color: var(--e-ink-900); overflow-wrap: anywhere; } .e-dockbar { display: flex; align-items: center; gap: var(--e-s1); padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow-hover); } .e-dockbar input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--e-ink-900); padding: 8px 0; } .e-dockbar input::placeholder { color: var(--e-ink-400); } .e-mic { flex: none; display: flex; align-items: center; gap: 7px; border: 0; font: inherit; font-size: 12px; font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer; background: var(--e-neutral-bg); color: var(--e-neutral); } .e-mic i { width: 7px; height: 7px; border-radius: 50%; background: var(--e-ink-400); } .e-mic.on { background: var(--e-accent); color: #fff; } .e-mic.on i { background: #fff; animation: e-pulse 900ms ease-in-out infinite; } /* ---------------------------------------------------------------- THE OUTBOX */ .e-outbox { position: fixed; right: var(--e-s3); bottom: 20px; z-index: 44; width: 340px; max-height: 44vh; overflow-y: auto; padding: 14px 16px; border-radius: 12px; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow-hover); display: flex; flex-direction: column; gap: var(--e-s1); } .e-outbox .e-staterow.ob-failed { border-left: 3px solid var(--e-bad); } .e-outbox .e-staterow.ob-confirmed { border-left: 3px solid var(--e-good); } .e-outbox .e-staterow.ob-queued, .e-outbox .e-staterow.ob-sending, .e-outbox .e-staterow.ob-sent { border-left: 3px solid var(--e-warn); } .e-outbox .e-staterow { display: block; } .e-ob-cause { font-size: 12px; color: var(--e-ink-500); margin-top: 3px; } .e-ob-notdone { font-size: 12px; color: var(--e-bad); font-weight: 600; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .e-dots i, .e-live i, .e-skel::after, .e-typing i, .e-mic.on i { animation: none !important; } .e-staterow.confirmed, .e-flash-money, .e-flash-accent { animation: none !important; } .e-enter { animation-duration: 1ms; } } /* ---------------------------------------------------------------- TAB LAYOUTS */ .e-tabbody { flex: 1; display: flex; flex-direction: column; min-height: 0; } .e-convgrid { display: grid; grid-template-columns: 350px minmax(0, 1fr) 310px; grid-template-rows: minmax(0, 1fr); gap: var(--e-s3); min-height: 0; flex: 1; } .e-convgrid > .e-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .e-threadwrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .e-thread.scroll { flex: 1 1 0; overflow-y: auto; padding: 4px 2px; min-height: 0; } .e-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-s3); } .e-three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-s3); } .e-fence { padding: 10px 0; border-bottom: 1px solid var(--e-card-border); } .e-fence:last-child { border: 0; } .e-fencerow { display: flex; gap: var(--e-s1); align-items: flex-end; flex-wrap: wrap; margin-top: 8px; } .e-fencerow label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e-glance-floor); display: flex; flex-direction: column; gap: 4px; } /* ================================================================ THE COMPLETION RUN T2 through T6. Everything below is built from the tile's own tokens: no new colour, no new radius, no new tempo. Where a surface needed a shape the tile does not draw, it is assembled out of shapes the tile does draw. ================================================================ */ /* ---------------------------------------------------------------- HONEST PRESENTATION */ /* THE SIMULATED CHIP. Neutral on purpose. It is a statement of fact, not a warning, and a warning colour here would train the Owner to read a healthy demo as a problem. It rides on every tile whose number is derived from seeded engine data while the demo floor is running. */ .e-sim { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; background: var(--e-neutral-bg); color: var(--e-neutral); white-space: nowrap; } .e-sim i { width: 5px; height: 5px; border-radius: 50%; background: var(--e-ink-400); flex: none; } /* A card head: eyebrow on the left, chip or count hard right, baselines aligned. */ .e-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-s1); margin-bottom: 10px; } .e-head .e-eyebrow { margin: 0; } /* THE HONEST EMPTY STATE. Bordered and dashed so an empty panel reads as DELIBERATELY empty rather than as a panel that failed to load. The Owner asked for the difference. */ .e-none { border: 1px dashed var(--e-card-border); border-radius: 10px; padding: 14px; color: var(--e-ink-500); font-size: 13px; line-height: 1.5; background: var(--e-inset); } .e-none b { display: block; color: var(--e-glance-floor); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } /* ---------------------------------------------------------------- T2, CONVERSATIONS */ /* THE RAIL COLUMN IS A GRID CELL, NOT A DIV THAT ESCAPED IT. The previous build put the rail cards inside an unclassed wrapper, so `.e-convgrid > .e-card`'s containment rule did not reach them and the column grew past the pane instead of scrolling inside it. Named as a hazard in the completion plan and fixed by giving the column a class that bounds itself. */ .e-railcol { display: flex; flex-direction: column; gap: var(--e-s2); min-height: 0; overflow-y: auto; padding-right: 2px; } .e-listcol { display: flex; flex-direction: column; min-height: 0; } /* Unread grammar: the name goes heavy, the preview goes dark, and a dot appears. */ .e-listrow .rowtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .e-listrow .rowbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .e-listrow .when { font-size: 11px; color: var(--e-glance-floor); font-variant-numeric: tabular-nums; white-space: nowrap; } .e-listrow.unread .nm { font-weight: 700; } .e-listrow.unread .pv { color: var(--e-ink-700); font-weight: 500; } .e-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--e-accent); } .e-avatar.muted { background: var(--e-neutral-bg) !important; color: var(--e-neutral); } /* The thread head: who this is, and what the channel is doing, on one baseline. */ .e-threadhead { display: flex; align-items: center; justify-content: space-between; gap: var(--e-s2); padding-bottom: 10px; border-bottom: 1px solid var(--e-card-border); margin-bottom: 10px; } .e-threadwho { display: flex; align-items: center; gap: 10px; min-width: 0; } .e-threadwho .nm { font-size: 14px; font-weight: 650; color: var(--e-ink-900); } .e-threadwho .sub { font-size: 12px; color: var(--e-ink-500); } /* THE COMPOSER'S ICON ACTIONS. Each one writes to the simulator; none is a costume. */ .e-cicon { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--e-ink-500); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background var(--e-t-hover) ease, color var(--e-t-hover) ease; } .e-cicon:hover { background: var(--e-inset); color: var(--e-ink-900); } .e-cicon.on { background: var(--e-accent); color: #fff; } .e-cicon:disabled { opacity: .4; cursor: default; } .e-snippets { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; } .e-snip { border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--e-ink-700); cursor: pointer; } .e-snip:hover { border-color: var(--e-accent); color: var(--e-accent); } /* THE RAIL'S IDENTITY BLOCK AND ITS TILES. */ .e-idhead { display: flex; align-items: center; gap: 12px; } .e-idhead .e-avatar { width: 44px; height: 44px; font-size: 15px; } .e-idname { font-size: 16px; font-weight: 650; color: var(--e-ink-900); line-height: 1.2; } .e-idsub { font-size: 12px; color: var(--e-ink-500); margin-top: 2px; } .e-tel { color: var(--e-accent); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; } .e-tel:hover { text-decoration: underline; } .e-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-s1); margin-top: 12px; } .e-tile { background: var(--e-inset); border-radius: 10px; padding: 10px 12px; } .e-tile .lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--e-glance-floor); } /* Money and statuses read at 18px/600 minimum. The glance floor is a rule, not a preference. */ .e-tile .val { font-size: 18px; font-weight: 600; color: var(--e-ink-900); font-variant-numeric: tabular-nums; margin-top: 2px; } .e-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* RX SELLER is the one tag that means money, so it is the one tag that is filled. */ .e-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--e-neutral-bg); color: var(--e-neutral); } .e-tag.rx { background: var(--e-warn-bg); color: var(--e-warn); } .e-tag button { border: 0; background: none; padding: 0; margin: 0 -2px 0 1px; font: inherit; font-size: 12px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; } .e-tag button:hover { opacity: 1; } .e-addtag { display: flex; gap: 6px; margin-top: 8px; } .e-addtag input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; color: var(--e-ink-900); } .e-addtag input::placeholder { color: var(--e-ink-400); } .e-addtag button { border: 0; background: var(--e-inset); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--e-ink-700); cursor: pointer; } /* CARD S3, WAVE R6e. THE SAME TAGS, READ WHERE HE ACTUALLY LOOKS: the list row and the thread header, beside the person's name, never a second editing surface. The rail (.e-tags above) stays the only place a tag is added or removed; these are read only chips, smaller since a row and a header have less room than a full rail card. */ .e-rowtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .e-rowtags .e-tag { padding: 1px 7px; font-size: 10px; font-weight: 600; } /* CARD S7, WAVE R6e. THE FIELDS SECTION: a plain key/value list, one row per field Route 6 holds, reusing .e-kv's own row shape so a blank reads as "Not on record" in the same voice as every other blank state on this rail. */ .e-fields { display: flex; flex-direction: column; } .e-fields .e-kv:not(:last-child) { border-bottom: 1px solid var(--e-card-border); } /* CARD S2, WAVE R6e. THE CHANNEL CHIP: which channel this conversation is on, right now. Reuses the neutral pill palette so it reads as a fact, not an alert. */ .e-chan { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--e-neutral-bg); color: var(--e-neutral); } /* CARD S6, WAVE R6e. PAUSE, WITH A WAKE TIME. The header control and its menu of his own four choices; the menu sits over the header rather than pushing it taller, since it opens and closes on a click rather than staying part of the page's permanent height. */ .e-pausectl .e-btn { padding: 7px 14px; font-size: 12px; } .e-pausemenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; min-width: 200px; } .e-pausechoice { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--e-ink-700); text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .e-pausechoice:hover { background: var(--e-neutral-bg); color: var(--e-ink-900); } .e-addtag button:hover { background: var(--e-neutral-bg); } .e-addr { font-size: 12px; color: var(--e-ink-700); line-height: 1.5; margin-top: 4px; } .e-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .e-quick button { border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 8px; padding: 8px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--e-ink-700); cursor: pointer; transition: border-color var(--e-t-hover) ease, color var(--e-t-hover) ease; } .e-quick button:hover { border-color: var(--e-accent); color: var(--e-accent); } .e-quick button:disabled { opacity: .45; cursor: default; } /* ---------------------------------------------------------------- T3, CUSTOMERS */ .e-search { display: flex; align-items: center; gap: 10px; background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: 999px; padding: 9px 18px; box-shadow: var(--e-card-shadow); } .e-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--e-ink-900); } .e-search input::placeholder { color: var(--e-ink-400); } .e-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e-s2); } .e-ccard { background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: var(--e-card-radius); box-shadow: var(--e-card-shadow); padding: var(--e-s2); cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--e-t-hover) ease, border-color var(--e-t-hover) ease; } .e-ccard:hover { box-shadow: var(--e-card-shadow-hover); border-color: var(--e-accent); } .e-ccard.on { border-color: var(--e-accent); box-shadow: var(--e-card-shadow-hover); } .e-cmoney { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-s1); } .e-cnote { font-size: 12px; color: var(--e-ink-500); line-height: 1.5; border-top: 1px solid var(--e-card-border); padding-top: 9px; } /* CARD SHADOWVIEW1, WAVE R6k (2026-10-26). WHAT ROUTE 6 WOULD HAVE SAID: one block per message, newest first, in the rail's own card. Each block is three short labelled parts divided by the card's own 1px border; the reply Route 6 would have sent is the only part with a tint (the inset), the same one the rail uses for a held value. Plain sans text on the rail's tokens; no table, no monospace. */ .e-shadow { display: flex; flex-direction: column; } .e-shadow-row { padding: 10px 0; display: flex; flex-direction: column; gap: 8px; } .e-shadow-row:not(:last-child) { border-bottom: 1px solid var(--e-card-border); } .e-shadow-when { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--e-ink-500); } .e-shadow-part .k { display: block; font-size: 11px; font-weight: 600; color: var(--e-glance-floor); margin-bottom: 3px; } .e-shadow-part .t { font-size: 13px; line-height: 1.45; color: var(--e-ink-900); white-space: pre-wrap; overflow-wrap: anywhere; } .e-shadow-part.said .t { background: var(--e-inset); border-radius: 8px; padding: 8px 10px; } .e-shadow-part .n { font-size: 12px; line-height: 1.45; color: var(--e-ink-500); overflow-wrap: anywhere; } /* ---------------------------------------------------------------- T4, THE EMPLOYEE FILE */ .e-file { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--e-s3); align-items: start; } .e-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: var(--e-s2) 0 var(--e-s1); } .e-badge .ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--e-chamber-top), var(--e-chamber-bottom)); color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; box-shadow: var(--e-chamber-shadow); } .e-badge .who { font-size: 17px; font-weight: 650; color: var(--e-ink-900); margin-top: 8px; } .e-badge .role { font-size: 12px; color: var(--e-ink-500); } .e-rules { display: flex; flex-direction: column; gap: 8px; } .e-rule { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; color: var(--e-ink-700); line-height: 1.5; } .e-rule .mk { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; } .e-rule.never .mk { background: var(--e-bad-bg); color: var(--e-bad); } .e-rule.hand .mk { background: var(--e-warn-bg); color: var(--e-warn); } .e-rule.know .mk { background: var(--e-good-bg); color: var(--e-good); } .e-lesson { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--e-inset); } .e-lesson + .e-lesson { margin-top: 8px; } .e-lesson .hd { font-size: 13px; font-weight: 650; color: var(--e-ink-900); } .e-lesson .dt { font-size: 12px; color: var(--e-ink-500); margin-top: 3px; line-height: 1.45; } .e-lesson .sr { font-size: 10px; color: var(--e-ink-500); margin-top: 5px; font-variant-numeric: tabular-nums; } .e-example { border-left: 3px solid var(--e-good); background: var(--e-inset); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--e-ink-900); line-height: 1.5; } .e-example + .e-example { margin-top: 8px; } .e-example .mt { display: block; font-size: 11px; color: var(--e-ink-500); margin-top: 5px; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- CARD B4, WAVE R6k. THE DESK, FIRST ON THE BRAIN TAB */ /* 2026-09-28, card B4 of wave R6k (the builder seat, for the mentor's landing). THE LAYOUT of the prompt desk (ui/crystal/Brain.tsx, Desk), in the Elevation tokens only, so the desk keeps its shape on any root; its glass, inks and chips are the Crystal skin at the end of the Crystal section, qualified by .c-crystal, which the Brain tab's root carries from this card (ui/main.tsx). THE EDITOR'S HEIGHT is bounded (clamp, 40 percent of the viewport) so its whole box and the size strip sit inside the first viewport at 1440x900 and 1180x900, the two selectors the geometry gate's brain row pins (scripts/geometrygate.mjs); the whole prompt scrolls inside the one box, never split. NO TRANSITION: tests/u046_motion_contract.test.ts counts every consumer of a duration token against design/MOTION_CONTRACT.md, and the desk's press is an instant state, never a timed one. */ .e-desk { display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--e-s3); } .e-desk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .e-desk-title { margin: 2px 0 0; font-size: 24px; line-height: 1.2; font-weight: 650; } .e-desk-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 22px; background: var(--e-card); border: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow); } .e-desk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .e-desk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .e-desk-label { font-size: 13px; font-weight: 700; } .e-desk-select { min-height: 38px; font: inherit; font-size: 14px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--e-card-border); background: var(--e-card); cursor: pointer; } .e-desk-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; letter-spacing: .05em; line-height: 1; padding: 6px 11px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; } .e-desk-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; } .e-desk-chip.good { background: var(--e-good-bg); } .e-desk-chip.muted { background: var(--e-neutral-bg); } .e-desk-size { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .e-desk-size span { white-space: nowrap; } .e-desk-job, .e-desk-note { margin: 0; font-size: 13px; line-height: 1.5; } .e-desk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .e-desk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 99px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; border: 1px solid var(--e-card-border); background: var(--e-card); } .e-desk-btn[disabled] { opacity: .55; cursor: default; } .e-desk-notice { font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--e-card-border); border-left-width: 3px; } .e-desk-notice .e-desk-row { margin-top: 8px; } .e-desk-editor { display: block; width: 100%; box-sizing: border-box; height: clamp(240px, 40vh, 420px); font: inherit; font-size: 14px; line-height: 1.6; padding: 16px 18px; border-radius: 16px; resize: none; border: 1px solid var(--e-card-border); } .e-desk-view { display: flex; flex-direction: column; gap: 10px; } .e-desk-viewhead { justify-content: space-between; } .e-desk-diff { font-size: 14px; line-height: 1.55; border-radius: 16px; border: 1px solid var(--e-card-border); max-height: clamp(240px, 40vh, 420px); overflow: auto; } .e-desk-diff .h { padding: 8px 16px; font-size: 13px; font-weight: 800; letter-spacing: .08em; } .e-desk-diff .l { display: flex; gap: 12px; padding: 3px 16px; } .e-desk-diff .l.gap span { font-style: italic; } /* Round 2 (the sealed review's MINOR 3): a blank line the diff adds or takes out is drawn, in words. */ .e-desk-diff .l.blank span { font-style: italic; } .e-desk-diff .l i { font-style: normal; width: 52px; flex: none; text-align: right; font-size: 13px; } .e-desk-diff .l span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .e-desk-diff .l.add { background: var(--e-good-bg); } .e-desk-diff .l.del { background: var(--e-warn-bg); } .e-desk-diff .l.del span { text-decoration: line-through; } .e-desk-hist { display: flex; flex-direction: column; max-height: clamp(240px, 40vh, 420px); overflow: auto; } .e-desk-hist .r { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--e-card-border); } .e-desk-hist .v { font-weight: 750; width: 44px; flex: none; } .e-desk-hist .w { flex: 1; min-width: 0; font-size: 14px; } .e-desk-receives { margin: 0; font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--e-card-border); } /* ---------------------------------------------------------------- T5, PRICES AND MONEY */ .e-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .e-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--e-glance-floor); padding: 0 10px 8px 0; border-bottom: 1px solid var(--e-card-border); white-space: nowrap; } .e-table th.num, .e-table td.num { text-align: right; padding-right: 0; } .e-table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--e-card-border); font-size: 13px; color: var(--e-ink-700); vertical-align: middle; } .e-table tr:last-child td { border-bottom: 0; } .e-table td.nm { color: var(--e-ink-900); font-weight: 600; } .e-table tr.changed td { animation: e-flash-accent 1500ms ease-out 1; } .e-cell { width: 82px; border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; color: var(--e-ink-900); text-align: right; font-variant-numeric: tabular-nums; } .e-cell:focus { outline: 2px solid var(--e-accent); outline-offset: 1px; } .e-cell.dirty { border-color: var(--e-warn); background: var(--e-warn-bg); } .e-kpirow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-s2); } .e-kpicard { background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: var(--e-card-radius); box-shadow: var(--e-card-shadow); padding: var(--e-s2); } .e-kpicard .lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--e-glance-floor); } .e-kpicard .sub { font-size: 12px; color: var(--e-ink-500); margin-top: 6px; line-height: 1.45; } /* The crown. One number bigger than everything else on the screen, because it is the point. */ .e-crown { background: linear-gradient(180deg, var(--e-chamber-top), var(--e-chamber-bottom)); border-radius: var(--e-card-radius); box-shadow: var(--e-chamber-shadow); color: var(--e-chamber-ink); padding: var(--e-s3); } .e-crown .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--e-chamber-ink-dim); } .e-crown .big { font-size: 56px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.05; font-variant-numeric: tabular-nums; color: #fff; margin-top: 6px; } .e-crown .note { font-size: 12px; color: var(--e-chamber-ink-dim); line-height: 1.55; margin-top: 10px; } .e-crown .note b { color: var(--e-chamber-ink); font-weight: 600; } /* The shipping board: one column per stage, counts at a glance. */ .e-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-s2); } .e-stage { display: flex; flex-direction: column; gap: 6px; } .e-stagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-bottom: 4px; border-bottom: 2px solid var(--e-card-border); } .e-stagehead .n { font-size: 18px; font-weight: 700; color: var(--e-ink-900); font-variant-numeric: tabular-nums; } .e-stage.done .e-stagehead { border-bottom-color: var(--e-good); } .e-stage.moving .e-stagehead { border-bottom-color: var(--e-accent); } .e-stage.waiting .e-stagehead { border-bottom-color: var(--e-warn); } .e-dealrow { background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: 10px; box-shadow: var(--e-card-shadow); padding: 9px 11px; } .e-dealrow .who { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .e-dealrow .what { font-size: 11px; color: var(--e-ink-500); margin-top: 2px; } .e-dealrow .amt { font-size: 13px; font-weight: 650; color: var(--e-ink-900); font-variant-numeric: tabular-nums; margin-top: 4px; } .e-watch { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--e-inset); border-left: 3px solid var(--e-warn); } .e-watch + .e-watch { margin-top: 8px; } .e-aged { font-size: 12px; font-weight: 600; color: var(--e-warn); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------------------------------------------------------------- T6, SETTINGS */ .e-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .e-choice { border: 1px solid var(--e-card-border); background: var(--e-card); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--e-ink-700); cursor: pointer; transition: border-color var(--e-t-hover) ease, color var(--e-t-hover) ease; } .e-choice:hover { border-color: var(--e-accent); } .e-choice.on { border-color: var(--e-accent); color: var(--e-accent); background: var(--e-inset); } .e-swatches { display: flex; gap: 10px; margin-top: 10px; } .e-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: var(--e-card-shadow); } .e-swatch.on { border-color: var(--e-ink-900); } .e-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-s2); } .e-conn { background: var(--e-inset); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .e-conn .nm { font-size: 13px; font-weight: 650; color: var(--e-ink-900); } .e-conn .st { font-size: 12px; color: var(--e-ink-500); } .e-seats { display: flex; flex-direction: column; gap: 8px; } .e-seat { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--e-card-border); } .e-seat:last-child { border-bottom: 0; } .e-seat .e-avatar { width: 32px; height: 32px; font-size: 12px; } .e-seat .nm { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .e-seat .rl { font-size: 12px; color: var(--e-ink-500); } @media (prefers-reduced-motion: reduce) { .e-table tr.changed td { animation: none !important; } } /* AMENDED 2026-09-24 21:58:48 MDT by the mentor seat (ROUND 6 class m, the E2 stylesheet placement): this block sits BEFORE the Crystal pilot marker because these are Settings surfaces in the estate tokens (--e-), and the glance floor (u054) reads every rule between the Crystal marker and the phone marker as a Crystal text rule; the three density classes of the fold cure name Crystal classes and are scoped .c-crystal (u053), which their Today host always carries. */ /* CARD E2, WAVE R6j, THE CONNECTIONS, ACCOUNTS AND OPS SURFACES. Appended 2026-09-24 21:52:58 MDT by the mentor seat from ui/crystal/r6j_settings.css.txt (the builder's text of record, byte for byte below), placed ABOVE the phone edition marker so the phone ink floor (u076) never reads it, and after the E1 door block. */ /* ROUTE 6. WAVE R6j, CARD E2. CONNECTIONS AND ACCOUNTS, IN THE CRYSTAL TOKENS ONLY. THIS IS A PLAIN TEXT FILE ON PURPOSE, per the mentor's amendment to card E2: the battery lock tests/u040_design_tokens.test.ts refuses any import of a stylesheet other than ./crystal.css anywhere under ui/, and requires exactly one stylesheet in ui/dist/assets. So this body is never imported by a component; the mentor appends it to the END of crystal.css at merge, after card E1's own block, and no component in this card names this path in an import. WHY A SEPARATE BLOCK AT ALL. The two floors the decision record sets for these four surfaces (field 9: a 13px type floor and a 7:1 contrast floor on the CONNECTED and NOT CONNECTED pills) are stricter than two rules crystal.css already ships (.e-eyebrow at 11px, .e-swh and .e-conn .st at 12px). Rather than loosen or touch those existing rules, every class below is new, scoped to r6j- so it can never collide with a crystal.css class of the same name, and every rule reads at 13px or larger. THE PILL COLOURS ARE THE CRYSTAL TOKENS' OWN HUES, DEEPENED, NEVER A NEW COLOUR. Measured by the WCAG contrast formula: --e-good (#05690D) on --e-good-bg (#D7F7C2) reads 5.93 to 1 and --e-bad (#B3093C) on --e-bad-bg (#FFE7E3) reads 5.89 to 1, both under the 7 to 1 the decision record sets for a pill read at a glance. The two colours below (#045A0B and #8E0730) are the same green and the same red family, deepened until the ratio clears 7 to 1 (measured 7.27 and 8.00), painted on the SAME background token so the palette itself never changes, only the text weight of it. */ /* CARD DS2, THE MENTOR'S METHOD REPAIR (SESSION C, 2026-10-09): each Connections card ends at its own content, so the capped answer rooms of the GOHIGHLEVEL card never stretch its grid neighbours into blank (U166-BLANK). */ .r6j-card { align-self: start; } .r6j-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .r6j-field label { font-size: 13px; font-weight: 600; color: var(--e-ink-900); } .r6j-field input, .r6j-field select { font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--e-card-border); background: var(--e-inset); color: var(--e-ink-900); min-height: 36px; box-sizing: border-box; } .r6j-field input:focus-visible, .r6j-field select:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; } .r6j-hint { font-size: 13px; color: var(--e-ink-500); } /* CARD C3, WAVE R6k, dated 2026-09-28 by the mentor seat at the C3 merge (tests/u040 NO COMPONENT REFERENCES A CLASS THE THEME DOES NOT DEFINE read the three classes stranded): the scope verdict's words and the test contact hint sit 6px below the row above them in the hint's own type, and the Go live scope blocker is one of the list's blockers in the list's colour. */ .r6j-scope { margin-top: 6px; } .r6j-test-contact { margin-top: 6px; } .r6j-golive-scope { color: inherit; } /* THE CONTROL FLOOR. Every clickable control on these four surfaces is at least 36px tall, field 9's number, with a visible focus ring inherited from .e-btn plus this file's own inputs and switches above. */ .r6j-btnrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .r6j-btnrow .e-btn { min-height: 36px; } /* THE PILLS. r6j-pill-good and r6j-pill-bad are the ONLY pills this card paints for CONNECTED and NOT CONNECTED, because those two are read at a glance (field 9). Every other status on these screens (SIMULATED, ACTIVE, WALK ACCOUNT) reads through crystal.css's own .e-pill classes, which field 9's 7 to 1 floor does not name. */ .r6j-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; } .r6j-pill-good { background: var(--e-good-bg); color: #045A0B; } .r6j-pill-bad { background: var(--e-bad-bg); color: #8E0730; } /* THE RESERVED ANSWER LINE. Field 9: zero layout shift when a Test answer lands. This line's height is reserved whether or not it holds words, so the card never grows or shrinks the moment a Test click resolves. */ .r6j-answer { min-height: 20px; font-size: 13px; color: var(--e-ink-700); margin-top: 4px; } .r6j-answer.r6j-answer-bad { color: #8E0730; } /* THE MASKED KEY. A tabular figure so the four kept characters read as a fixed width block, never a monospace face (field 10's standing kill: no monospace market screen). */ .r6j-masked { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--e-ink-900); font-size: 14px; } /* THE ONE TIME REVEAL BOX. Rotate and Invite both show a value exactly once; this is the box that holds it, visually distinct so a person notices it will not be shown again. */ .r6j-revealbox { background: var(--e-inset); border: 1px dashed var(--e-card-border); border-radius: 10px; padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; } .r6j-revealbox .r6j-revealnote { font-size: 13px; color: var(--e-ink-500); } .r6j-revealbox .r6j-revealvalue { font-size: 14px; font-weight: 600; color: var(--e-ink-900); word-break: break-all; } /* THE ACCOUNTS TABLE. Long names wrap rather than push the row taller in a way that breaks the column (field 12, the loaded floor's 64 character business name and 80 character email). */ .r6j-table { width: 100%; border-collapse: collapse; } .r6j-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--e-glance-floor); padding: 8px 10px; border-bottom: 1px solid var(--e-card-border); white-space: nowrap; } .r6j-table td { font-size: 13px; color: var(--e-ink-700); padding: 10px; border-bottom: 1px solid var(--e-card-border); vertical-align: top; } .r6j-table td.r6j-biz { max-width: 260px; overflow-wrap: break-word; word-break: break-word; font-weight: 600; color: var(--e-ink-900); } .r6j-table td.r6j-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r6j-connpills { display: flex; gap: 6px; flex-wrap: wrap; } /* THE OPERATIONS BAND. A row of small fact tiles under the orb, plain words over a value, never a control. */ .r6j-opsband { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; width: 100%; } .r6j-opstile { background: var(--e-inset); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .r6j-opstile .r6j-opslabel { font-size: 13px; font-weight: 600; color: var(--e-glance-floor); } .r6j-opstile .r6j-opsvalue { font-size: 14px; color: var(--e-ink-900); } .r6j-opstile .r6j-opsvalue.r6j-stale { color: #8E0730; font-weight: 650; } .r6j-blockers { font-size: 13px; color: #8E0730; margin-top: 8px; } .r6j-blockers ul { margin: 4px 0 0 18px; padding: 0; } /* CARD E2, WAVE R6j. THE FOLD CURE, the mentor's second amendment to this card, three measured rounds against the builder's own harness (never u056 itself, which only the mentor runs), at 1512x950 with the notice banner up, matching u056's own shape and its own comment in ui/crystal/Today.tsx naming 739px as the column's client bottom. ROUND 1 (base): queue depth 1 the workflows head ran 758px to 774px against a client box of 149px to 739px, 35px past the fold. ROUND 2 (r6j-densecard added, TODAY SO FAR's own card padding 14px to 6px and its eight rows' padding 4px to 0px): depth 1 cured (head 656 to 672, inside), but depth 2 and up still ran 768px to 800px, because WAITING ON YOUR OK grows 107px once its own overflow row draws (one drawn card plus the counted remainder line), a growth the round 1 measurement never exercised. ROUND 3 (r6j-densewait added, WAITING ON YOUR OK's own card padding 14px to 6px, each drawn row's padding 9px to 6px, its inter row margin 8px to 4px, both dense cards' own head margin 8px to 4px, and r6j-densegap at -8px closing part of the flex gap above WAITING ON YOUR OK and above the workflows card): depth 1 and 2 cured, but depth 3 and up still ran 729 to 744, 5px past the 739px client bottom. ROUND 4 (r6j-densegap deepened from -8px to -12px, closing the .c-rcol flex gap in full rather than partially): every depth from 1 to 40 now measures the workflows head inside the client box (head bottom 640, 716, 736, 736, 736, 736, 736 at depths 1, 2, 3, 4, 8, 12, 40, all at or under the 739px client bottom). NOT ONE ROW OR CARD IS REMOVED at any round: every number stays on screen, in the same order, naming the same fact; every class below tightens ONLY its own named card's own padding, its own rows' padding or its own gap, inside crystal.css's cascade (this block is appended after it), never touching .c-gcard, .c-row, .c-okc or .c-rcol's gap for any other card on the page. Verified at depths 1, 2, 3, 4, 8, 12 and 40, all seven "inside": true; the mentor's run of u056 after merge is the verdict of record. */ .c-crystal .r6j-densecard.c-gcard { padding-top: 6px; padding-bottom: 6px; } .c-crystal .r6j-densecard .c-row { padding: 0; } .c-crystal .r6j-densecard .c-h6 { margin-bottom: 4px; } /* CARD u056 STUDIO FOLD, 2026-10-15. THE FIGURE'S LEADING IS A NUMBER, NOT THE FACE'S. The serif figures of TODAY SO FAR (1.32rem, ui-serif) inherited the body's unitless 1.5, and in a flex row aligned on the baseline the row is as tall as its tallest line box, so each of the five single line rows cost 1.5 x 21.1px = 31.7px and the card's height followed whatever ascent and descent the system serif carries: on macOS 27 the column grew 17px and the workflows head count ran 12px past the fold at queue 4 and deeper. A leading of 1.2 fixes the row at font-size x 1.2 = 25.3px for any face (the master's own .money .row b declares no leading; the e-kpi and e-hero figures here use 1.1 and 1.05), which returns about 31px to the column: more than the 17px the new face added, so the head count clears the fold by construction and by margin, not by a nudge. Type size, face, colour and every row and word are unchanged. */ .c-crystal .r6j-densecard .c-figure { line-height: 1.2; } .c-crystal .r6j-densewait.c-gcard { padding-top: 6px; padding-bottom: 6px; } .c-crystal .r6j-densewait .c-h6 { margin-bottom: 4px; } .c-crystal .r6j-densewait .c-okc { padding: 6px 11px; } .c-crystal .r6j-densewait .c-okc + .c-okc { margin-top: 4px; } /* CARD E4, WAVE R6j. ROUND 5 CONTINUED: r6j-densecard and r6j-densewait sit ABOVE the workflows card, so it is their own padding, head margin and row spacing that moves the workflows card's OWN TOP, and therefore its head count, which is what the lock measures. The workflows card's own internal tightening (r6j-densewf, above) moves only its own bottom edge and its own remainder line, never its top. .r6j-densewait2 and .r6j-densecard2 stack a second, deeper pass on the SAME two cards without touching the rows or their own text: card padding 6px to 2px (measured in two steps, 4px then 2px, against the lock each time), head margin 4px to 2px, the approval row's own padding 6px to 4px and its inter row margin 4px to 2px. Not one row, card or remainder line moves or is removed. */ .c-crystal .r6j-densecard2.c-gcard { padding-top: 2px; padding-bottom: 2px; } .c-crystal .r6j-densecard2.c-gcard .c-h6 { margin-bottom: 2px; } .c-crystal .r6j-densewait2.c-gcard { padding-top: 2px; padding-bottom: 2px; } .c-crystal .r6j-densewait2.c-gcard .c-h6 { margin-bottom: 2px; } .c-crystal .r6j-densewait2.c-gcard .c-okc { padding: 4px 11px; } .c-crystal .r6j-densewait2.c-gcard .c-okc + .c-okc { margin-top: 2px; } /* THE OVERFLOW ROW'S OWN TOP PADDING, closed for this card only. Only the depths past PENDING_SHOWN draw this line, which is exactly the shape still measuring over; its own words, its own number and its own money stay exactly as drawn. */ .c-crystal .r6j-densewait2.c-gcard .c-more { padding-top: 0; } /* r6j-densegap sits on the card AFTER the one whose gap it closes (the .c-rcol flex gap is a property of the column, not of either child, so it is closed here with a negative margin on the following card, never by touching .c-rcol itself). -12px closes the full 12px flex gap; round 3 first tried -8px (partial) and measured depth 3 and up still 5px over the fold, so this is the fourth pass, closing the gap in full rather than partially. */ .c-crystal .r6j-densegap { margin-top: -12px; } /* CARD E4, WAVE R6j. ROUND 5, MEASURED BY THE LOCK ITSELF rather than the mentor's own harness, which is the one thing card E2 was refused: running tests/u056_crystal_counted_remainder.test.ts, the measurement of record. BASELINE ON THE LOCK: the workflows head count ran 15px past the client box's own bottom at queue depths 2, 3, 4 and 8, and 35px past it at 12 and 40 (the column holds two shapes only: one with two approval rows drawn and no overflow row, one with the overflow row added, 20px taller, which is exactly the 20px difference between the 15px and 35px overages measured). FIRST PASS (r6j-densewf, below): tightens the workflows card's OWN padding, head margin, row-to-row gap and rows' own padding. Measured: it moved the card's own bottom and its own remainder line, never its top, because a card's internal spacing cannot move where the card itself starts; the head count only moved by the card's own top padding (14px to 6px, saving 8px), leaving 7px and 27px still over. SECOND PASS (r6j-densecard2 and r6j-densewait2, above, on the two cards ABOVE the workflows card, the ones whose own height decides where it starts): card padding 6px to 4px to 2px, head margin 4px to 2px, the approval row's own padding 6px to 5px to 4px, its inter-row margin 4px to 2px, and the overflow row's own top padding closed to 0. Measured on this suite after each step; the lock reads every depth ON SCREEN at the final shape (see this card's report for the pasted table). NOT ONE ROW, CARD OR REMAINDER LINE IS REMOVED OR MOVED at any pass; every class here tightens only its own named card's own padding, its own rows' padding, its own row gap or its own head margin. */ .c-crystal .r6j-densewf.c-gcard { padding-top: 6px; padding-bottom: 6px; } .c-crystal .r6j-densewf.c-gcard .c-h6 { margin-bottom: 4px; } .c-crystal .r6j-densewf.c-gcard .c-wf { gap: 4px; } .c-crystal .r6j-densewf.c-gcard .c-wfrow { padding: 4px 10px; } /* END CARD E2 */ /* ================================================================ THE CRYSTAL PILOT. P6. TODAY ONLY, AND THE SCOPE IS THE POINT. Everything below is transplanted from design/CRYSTAL_MASTER_Aug4_2026.html, the design of record named in CLAUDE.md section 2. It is a SCOPED SKIN: every rule is qualified by .c-crystal, which ui/main.tsx puts on the page root ONLY while Today is the open tab, so none of it can reach Conversations, Customers, Brain, Prices, Money or Settings. That scoping is not a convention, it is pinned: tests/u053_crystal_scope.test.ts fails on any c- rule that escapes the scope and on any component outside Today that names a c- class. NAMESPACE, Fidelity Law 3. New tokens are --c-, new classes are c-. No name is shared with the --e- set, so a superseded token can never win a collision. THE VALUES ARE COPIED, NOT RETYPED. The token block below is the master's own token block with its keys prefixed; every value is the master's, byte for byte, plus one addition named and justified in place. WHAT IS DELIBERATELY NOT TRANSPLANTED: the master is a mockup carrying a 40 second choreography, invented people and invented money. None of that is here. This file carries the GRAMMAR, and every fact Today renders still comes from GET /api/state. ================================================================================== */ :root { /* THE RECORD'S PALETTE, copied out of design/CRYSTAL_MASTER_Aug4_2026.html. */ --c-bg: #F3F7FB; --c-ink: #0E1B2C; --c-muted: #5C6B7E; --c-faint: #8896A8; --c-glass: rgba(255,255,255,.55); --c-glassbrd: rgba(255,255,255,.65); --c-glasshi: inset 0 1px 0 rgba(255,255,255,.8); --c-shadow: 0 1px 2px rgba(20,40,80,.06), 0 8px 24px rgba(20,40,80,.08), 0 24px 64px rgba(20,40,80,.08); --c-pill: #D6E7FF; --c-pilltext: #17335C; --c-eyebrow: #E0715C; --c-good: #4E7D62; --c-goodsoft: rgba(120,190,150,.2); --c-warn: #B98A2E; --c-warnsoft: rgba(233,196,120,.24); --c-holo: #4E8FD0; --c-holosoft: rgba(120,170,230,.18); --c-blue: #3C77B8; /* THE ONE ADDITION, AND IT IS NOT AN INVENTED COLOUR. #17335C is the value the master gives its own pill text, promoted to a second job: the ink for anything read at two meters. (The retired name is not written here on purpose: unit 40 greps this file for the dead theme's token names and a comment quoting one is indistinguishable from a survivor.) WHY IT IS OWED. design/STYLE_TILE.html is demoted to TEACHER but its earned floors BIND on this edition (CLAUDE.md section 2), and glass makes them harder rather than optional: text here sits on a composited backdrop, so it has to clear the floor against the LIGHTEST and the DARKEST pixel underneath it. Measured against the darkest, which is the blue aurora blob under 55 percent white glass, the master's own label inks do not: --c-faint 2.70:1, --c-eyebrow 2.82:1, --c-blue 4.16:1. Every one of those fails the 4.5:1 floor for ordinary text and is nowhere near the 7:1 a section label is scanned at. This value measures 11.32:1 on the same backdrop. The identical collision was already settled the same way one theme ago: see the note on .e-eyebrow above, where ink-400 at 2.75:1 lost to the glance floor. The stricter rule wins, and the numbers are re-derived by tests/u054_crystal_glance_floor.test.ts rather than trusted from this comment. --c-faint, --c-eyebrow and --c-blue are still carried, because they are the record's palette and the six-tab restoration will want them. In this edition --c-faint and --c-eyebrow are consumed ONLY as rings, rails and marks, which the contrast floor does not govern, and --c-blue is not consumed at all. */ --c-glance: #17335C; /* THE AURORA'S PERIOD, as a token rather than a literal, because design/MOTION_CONTRACT.md PART I.2 forbids a duration this stylesheet cannot resolve through a name. 46s is the master's own figure at line 35. D-M6 in the contract is the row that owed it. */ --c-t-drift: 46s; } /* ---------------------------------------------------------------- THE SCOPE ROOT */ /* .c-crystal IS .e-app while Today is open, and nothing else ever carries it. The ground and the ink move to the record's; the shell's own geometry (height:100vh, the flex column, the overflow bound) is untouched, because that geometry IS the master's .frame rule already and it is what keeps the document from growing. */ /* CARD F3, Sep 7 2026: font-weight 400 IS THE RECORD'S, and it was the last real deviation on this surface. The Elevation shell sets 450 on body, the crystal surface inherited it, and every string on Today that does not name its own weight rendered half a step heavier than the file it is supposed to be. The record's own body is 400. It is set HERE rather than on body so the six tabs still on Elevation are not moved by a change made for the pilot. */ .c-crystal { background: var(--c-bg); color: var(--c-ink); font-weight: 400; } /* THE AURORA UNDERLAYER. Master lines 34 to 40. Fixed to the viewport, behind everything, taking no clicks. It is inside Today's tree, so it leaves with Today. IT CANNOT GROW THE DOCUMENT because it is position:fixed, which is the same property that makes .fly below safe. Both facts are measured by the geometry gate rather than assumed. */ .c-crystal .c-wash { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .c-crystal .c-wash i { position: absolute; border-radius: 50%; filter: blur(100px); animation: c-drift var(--c-t-drift) ease-in-out infinite alternate; } .c-crystal .c-wash i:nth-child(1) { width: 540px; height: 540px; left: -130px; top: -90px; background: rgba(255,205,215,.5); } .c-crystal .c-wash i:nth-child(2) { width: 640px; height: 640px; right: -170px; top: 8%; background: rgba(190,215,255,.58); animation-delay: -12s; } .c-crystal .c-wash i:nth-child(3) { width: 500px; height: 500px; left: 20%; bottom: -190px; background: rgba(205,240,220,.48); animation-delay: -24s; } .c-crystal .c-wash i:nth-child(4) { width: 440px; height: 440px; right: 24%; bottom: -130px; background: rgba(235,220,255,.48); animation-delay: -34s; } @keyframes c-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,-50px) scale(1.12); } } /* EVERYTHING THAT IS NOT THE WASH SITS ABOVE IT. A positioned element with z-index 0 paints over in-flow blocks, so the three surfaces on Today that are in normal flow are lifted explicitly rather than left to luck: the frame, the command dock, and the notice banner. The nav is already sticky at z-index 40 and the outbox already fixed at 44. */ .c-crystal .c-frame { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 22px; gap: 12px; } .c-crystal .e-dock { position: relative; } /* AMENDED 2026-09-26 05:07:02 MDT, card GV1-F1 of wave R6k (the ledger row ROW 2026-09-26 04:57:18, class A). The Outbox and Bots tabs joined the scope, and the shell renders the wash for them. Their sections are in normal flow inside .e-scrollpage, which is not positioned (the shell rule above, .e-scrollpage), so .c-crystal .c-wash (fixed, z-index 0) would paint over every one of them, the same fact this section's comment states for Today. The scroll page is lifted the way .e-dock is: position relative, no z-index, so it paints after the wash in tree order and makes no stacking context (the pause menu's z-index 5 still competes where it did). :not(.docked) keeps Today's frame, the one docked scroll page, untouched. No token, no colour, no offset. */ .c-crystal .e-scrollpage:not(.docked) { position: relative; } /* AMENDED 2026-09-26 09:31:06 MDT, card GV1-F4 of wave R6k (the design reviewer's sitting over card GV1-F1's frames, docs/shots/r6k/GV1F1, 2026-09-26 09:26). THE INKS THAT SIT ON THE WASH CLEAR THEIR FLOORS. Card GV1-F1 put the Outbox and Bots tabs on the record's wash, and two inks that cleared their floors on the flat ground read under them on the wash (lane rule 4: 7:1 for anything read at two meters, 4.5:1 for ordinary text). Measured on the F1 frames: the Outbox subtitle (.e-swh, ink-500) at 4.30:1 on the wash pixel rgb(246, 224, 232), and the section eyebrows (.e-eyebrow, the glance floor) at 6.09:1 at 1512x950 and 5.80:1 on the darkest wash pixel rgb(240, 220, 228). On these two tabs only (the lifted scroll page above; Today's docked frame and the five tabs outside the scope are untouched), an eyebrow in a section head takes the record's own ink, the --c-ink token (13.26:1 on the darkest wash pixel), and a subtitle that is a direct child of a section takes the glance floor (5.80:1 there, 6.04:1 on the subtitle's own pixel). No new token, no new colour. Re derived by tests/u225_wash_inks.test.ts against this source and against the built artifact. */ .c-crystal .e-scrollpage:not(.docked) .e-head .e-eyebrow { color: var(--c-ink); } .c-crystal .e-scrollpage:not(.docked) .e-section > .e-swh { color: var(--e-glance-floor); } /* AMENDED 2026-09-26 10:30:30 MDT, card GV1-F6 of wave R6k (the design judge's sealed sitting over card GV1-F4's frames, docs/shots/r6k/GV1F4, 2026-09-26 10:2x, DO NOT SHIP for the P1 deploy of record). THE TWO TABS' CONTROLS TAKE THE RECORD'S OWN COLOURS INSIDE THE CRYSTAL CHROME. Inside the lifted scroll page the Outbox and Bots components still painted the superseded tile's filled indigo button and its green quote bar, so beside Today the whole read as two design systems. Under the same scope as the block above (Today's docked frame and the five tabs outside the scope are untouched), with ONLY the record's tokens: THE FILLED BUTTON IS THE RECORD'S APPROVE PILL. The first rule below mirrors .c-crystal .c-btn declaration for declaration and in its order (master line 140): the pale pill fill --c-pill, the record's pill ink --c-pilltext (the same #17335C as --c-glance; the record's own button names the pill ink token, so this one does too), weight 700, size .78rem, padding 7px 14px, radius 99px. The disabled pointer and the keyboard ring mirror the two rules the record's button carries (the ring in --c-glance, 2px solid, offset 2px). The hover is the tile's brightness lift, which the record's button keeps as well, so no hover rule is written. :not(.ghost) leaves every outline button as it was, and the Bots pause control joins the outline buttons by its ghost class in ui/crystal/Bots.tsx. Measured: the pill ink on the pill 10.05:1 (the floor is 4.5:1 for the 12.48px label, and it clears the 7:1 glance bar too); the outline button's ink, ink-700 on the white card, 10.24:1, unchanged by this block. THE QUOTE BARS TAKE THE RECORD'S GOOD. The reply quote (.e-example) and a good rail (.e-rail.good) draw their 3px bar in --c-good. A bar is a mark, not text: it measures 4.45:1 on the quote's own inset ground and 4.74:1 on the white card beside it, over the 3:1 a non text mark owes. THE CARDS STAND APART BY THE RECORD'S GAP. The record separates its cards by 12px (master line 67, the two columns; .c-crystal .c-rcol in this file). Two sibling cards in a section here touched with no gap (the judge's finding 7, a seam every 98px at 1512x950), so each card after the first stands 12px off. THE GOOD CHIP IS NOT MOVED, AND THAT IS A MEASUREMENT RATHER THAN AN OMISSION. The record's green on the record's good soft ground reads 4.10:1 on these white cards (4.05:1 on the tile's own chip ground), under the 4.5:1 floor for an 11px label: the same finding tests/u054_crystal_glance_floor.test.ts pins for Today. The card's brief orders a stop on a pair under its floor, so .e-pill.good keeps the tile's pair here until the mentor rules. AMENDED 2026-09-26 10:54 MDT, the mentor's ruling on the stopped pair (round 2 of card GV1-F6): the good chip under this scope takes the pair tests/u054_crystal_glance_floor.test.ts already rules for Today's LIVE chip, the record's good soft ground --c-goodsoft with the lane's settled green ink --e-good. It reads 6.00:1 on these white cards and 5.69:1 on the inset ground of a settled row, over the 4.5:1 floor. The record's own pair (the --c-good ink on that ground) stays REFUSED BY FLOOR at the 4.10:1 and 4.05:1 measured above, and the lime chip ground of the tile leaves both tabs. AMENDED 2026-09-26 10:54 MDT, the mentor's ruling on the outline ring (round 2 of card GV1-F6): the outline buttons keep their ink, ground and border, and only their keyboard ring leaves the tile's indigo accent for the record's glance ink, 2px solid, offset 2px, the ring the filled pill carries: 12.62:1 against the white card it is drawn on and 9.65:1 on the darkest wash pixel tests/u225_wash_inks.test.ts names, rgb(240, 220, 228), where an outline button outside a card sits, over the 3:1 a non text mark owes. No new token, no literal colour. Re derived by tests/u227_record_colours.test.ts against this source and against the built artifact. */ .c-crystal .e-scrollpage:not(.docked) .e-btn:not(.ghost) { border: 0; font: inherit; font-weight: 700; font-size: .78rem; padding: 7px 14px; border-radius: 99px; cursor: pointer; background: var(--c-pill); color: var(--c-pilltext); } .c-crystal .e-scrollpage:not(.docked) .e-btn:not(.ghost):disabled { cursor: default; } .c-crystal .e-scrollpage:not(.docked) .e-btn:not(.ghost):focus-visible { outline: 2px solid var(--c-glance); outline-offset: 2px; } .c-crystal .e-scrollpage:not(.docked) .e-example { border-left-color: var(--c-good); } .c-crystal .e-scrollpage:not(.docked) .e-rail.good { border-left-color: var(--c-good); } .c-crystal .e-scrollpage:not(.docked) .e-section > .e-card + .e-card { margin-top: 12px; } .c-crystal .e-scrollpage:not(.docked) .e-pill.good { background: var(--c-goodsoft); color: var(--e-good); } .c-crystal .e-scrollpage:not(.docked) .e-btn.ghost:focus-visible { outline: 2px solid var(--c-glance); outline-offset: 2px; } /* AMENDED 2026-09-26 21:03:47 MDT, card GV1-F7 of wave R6k, THE MENTOR'S OWN HAND (the review and fix loop's third round was spent on card GV1-F6, so the method changed: this one declaration is the mentor's, locked by tests/u228_fence_baseline.test.ts, and the design judge sits sealed over the frames it produces). THE REVIEWER'S THIRD SITTING (2026-09-26 20:51 MDT over docs/shots/r6k/GV1F6) found the one regression the colour cure introduced: the record's pill is 33px tall and the tile's outline buttons beside it are 39px, and .e-fencerow (line 534) bottom aligns its children, so the labels of Send it and Do not send sat 2 to 3px off one baseline in every Outbox card at every width (label bottom rows 311 against 309 at 1512x950; design/DESIGN_RUBRIC.md 0.5). Under the same lift scope as the two blocks above, the fence row aligns its children on their text baseline instead, so every label in the row shares one baseline whatever the box heights. No token, no colour, no size. The scope reaches every scroll page that is not Today's docked frame (the Outbox, Bots, and the Conversations pane's approval rows, which carry the same fence row). */ .c-crystal .e-scrollpage:not(.docked) .e-fencerow { align-items: baseline; } /* ------------------------------------------------- THE ACKNOWLEDGEMENT, IN THE RECORD'S GLASS THE MOMENT THE OWNER ACTS IS THE MOMENT THIS SURFACE WAS STILL DRAWING THE SUPERSEDED SKIN. Two elements appear only after a click, so the restoration walked past both: the notice banner and the outbox strip. Measured on the Crystal surface before this rule, at the instant Approve is pressed: the banner rgb(252,237,185) flat amber, radius 10px, backdrop-filter none, and it reflows the whole surface down 63px the outbox rgb(255,255,255) fully opaque, radius 12px, backdrop-filter none Both are Elevation rectangles standing on a glass surface. Only `position` and `z-index` had ever been given Crystal treatment here. They now carry the record's own card grammar: the 55 percent glass, the 22px radius, the inset highlight over the three-stage shadow, and the multi-part filter, which must reach the browser with every separator intact and is held to that by tests/u052_glass_survives_build.test.ts against the BUILT artifact. AND THE SEMANTIC LOCKDOWN IS RESTORED, which is the half of this that is not decoration. The success message rendered in rgb(122,77,11) on the warn amber: THE SAME PAIR .c-okc uses for "waiting on you". Success and needs-you wore one colour, so the one rule this product's state grammar rests on, that a pair means exactly one thing, was broken at the exact moment the Owner needs to know his click landed. The acknowledgement now takes the house's own semantic green, 6.20:1 on the worst glass this surface can put behind it, with the green rail the confirmed state row already uses. A FAILURE takes the semantic red at 6.23:1, which it never did either: ui/main.tsx set the notice text from result.error and never once wrote the `bad` class, so a refusal and a success were the same amber too. Both numbers are re-derived by tests/u054_crystal_glance_floor.test.ts against the composited backdrop, not typed here. */ .c-crystal .e-notice { position: relative; z-index: 2; border-radius: 22px; background: var(--c-glass); border: 1px solid var(--c-glassbrd); border-left: 3px solid var(--e-good); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); color: var(--e-good); } .c-crystal .e-notice.bad { background: var(--c-glass); border-left-color: var(--e-bad); color: var(--e-bad); } .c-crystal .e-outbox { border-radius: 22px; background: var(--c-glass); border: 1px solid var(--c-glassbrd); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); } /* TODAY IS A BOUNDED FRAME, WHICH IS THE CURE THE GEOMETRY GATE ASKED FOR. .e-pagescroll keeps its overflow-y:auto from the shell rule, and becomes a flex column so the frame can bound itself inside it. Nothing here scrolls the page: the three columns scroll inside themselves, every list is capped, and every remainder is counted on screen. */ .c-crystal .e-pagescroll { display: flex; flex-direction: column; } .c-crystal .c-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr 352px; gap: 16px; } .c-crystal .c-lcol, .c-crystal .c-rcol { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; } /* A card in a scrolling column must keep its own height. Left to shrink, the flex default squashes the last card into an unreadable band instead of letting the column scroll. */ .c-crystal .c-lcol > *, .c-crystal .c-rcol > * { flex: none; } /* THE SCROLL IS DECLARED, NOT DISCOVERED. The right column scrolls by design and always has. What it did not do was SAY SO: measured on the served build, offsetWidth minus clientWidth was 0, so no gutter was reserved and no scrollbar was drawn at rest. The column simply ended mid line of type and the Owner had to find the rest by guessing there was more. This reserves the space the bar occupies, so the bar's arrival never reflows the type beside it and the overflow is a property of the layout rather than a discovery. AND WHAT IT DOES NOT DO IS MEASURED AND SAID, not assumed. On a machine drawing OVERLAY scrollbars, which is this one, there is no gutter to reserve: after this declaration shipped, offsetWidth minus clientWidth on .c-rcol still measures 0. The property is correct and it binds wherever the platform draws classic scrollbars; here it buys nothing on its own. The thing that actually keeps this column honest on THIS machine is that every list in it is capped and counts its remainder, and that the workflows card carries its count in the HEAD, where the fold cannot take it. See ui/crystal/Today.tsx. */ .c-crystal .c-rcol { scrollbar-gutter: stable; } .c-crystal .c-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; overflow-y: auto; } /* ---------------------------------------------------------------- THE FLOATING GLASS NAV */ /* Master lines 45 to 55. The nav keeps its .e-nav class, because the geometry gate pins that selector and the shot gate looks for it; c-gnav is the Today-only modifier ui/main.tsx adds beside it. .c-crystal .c-gnav is a two-class selector, so it wins over .e-nav without any need to touch the .e-nav rule itself. */ .c-crystal .c-gnav { width: fit-content; margin: 14px auto 0; height: auto; gap: 4px; padding: 7px 10px; border-radius: 99px; background: var(--c-glass); border: 1px solid var(--c-glassbrd); border-bottom: 1px solid var(--c-glassbrd); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); } /* CARD DS3, WAVE R6k. THE HEADER IS ITS OWN LAYER ON EVERY TAB, SO ITS WORDS RASTERIZE ONE WAY ON EVERY TAB. The centred header sits at a fractional x at 1440 (40.89 px). On Today the browser composited it as a layer of its own (the orb's canvas and the docked frame beside it) and on the other tabs it painted it into the page, so the same words landed on a different sub pixel and the wordmark and every closed pill differed from Today's by up to 215 of 255 on a channel (tools/r6k/ds3_frames.mjs, the header compare, before this rule). Promoting the header on every tab makes the two one render: measured after it, no pixel of the header differs from Today's outside the two pills whose state differs. No token, no colour, no geometry. */ .c-crystal .c-gnav { will-change: transform; } .c-crystal .c-gnav .e-logo { font-weight: 800; letter-spacing: .05em; font-size: .92rem; padding: 0 12px 0 8px; margin: 0; color: var(--c-ink); } /* THE WORDMARK'S MARK IS NOT PAINTED IN THE CORAL. The master puts --eyebrow on it; measured on this glass it is 2.82:1, and a wordmark is still text. The coral keeps its section identity job below, where it is a mark rather than a word. */ .c-crystal .c-gnav .e-logo em { color: var(--c-glance); } .c-crystal .c-gnav .e-tabs { gap: 0; } .c-crystal .c-gnav .e-tabs button { padding: 7px 14px; border-radius: 99px; font-size: .86rem; font-weight: 600; color: var(--c-muted); } .c-crystal .c-gnav .e-tabs button:hover { background: rgba(255,255,255,.55); color: var(--c-ink); } .c-crystal .c-gnav .e-tabs button.on { background: var(--c-pill); color: var(--c-pilltext); font-weight: 700; } /* CARD DS3, WAVE R6k. ONE HEADER WIDTH ON EVERY TAB, SO THE CHIP HAS ONE POSITION. The open pill is set in 700 and the others in 600, so a pill grew when it opened, the centred header widened with it, and the SIMULATED chip at its right end moved with every tab. Each pill carries its label in data-label (ui/crystal/TabHeader.tsx), and this zero height, hidden copy of it in the open weight holds every pill at its open width, open or not. Nothing is painted and nothing is read aloud (visibility hidden). No token, no colour. */ .c-crystal .c-gnav .e-tabs button::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; } /* CARD DS3 REPAIR, CLOUD ROUND C2. THE HEADER FITS THE 1180 MINIMUM ON ONE LINE. The design sitting (docs/reports/r6k_reviews/C-TRAIN-1_design_review.md, SERIOUS 1 and MINOR 4) measured the glass header 32.34 px wider than the window at 1180: Stop everything and Sign out wrapped to two lines, the pill grew to 75 px and ran edge to edge. Below 1440 each pill gives 3 px a side and the two buttons never wrap, so the header holds one line, 55.5 px, with window margins. Above 1439 nothing changes. No token, no colour. */ @media (max-width: 1439px) { .c-crystal .c-gnav .e-tabs button { padding-left: 11px; padding-right: 11px; } .c-crystal .c-gnav .e-navright .e-btn { white-space: nowrap; } } /* THE KEYBOARD IS VISIBLE ON THE NAV TOO. Nothing authored a focus style here, so a tab focused from the keyboard fell back to Chrome's own ring, computed `auto 1px rgb(0, 95, 204)`: a blue that appears in no token in this product, drawn at the browser's width on the record's floating glass pill. The ring is now the record's own glance ink, at the same 2px and 2px offset the primary action uses, so one focus grammar covers the whole surface. */ .c-crystal .c-gnav .e-tabs button:focus-visible { outline: 2px solid var(--c-glance); outline-offset: 2px; } .c-crystal .c-gnav .e-navright { margin-left: 10px; } /* THE LIVE CHIP KEEPS ITS BLINK, and the blink keeps its meaning: the connection is up, or the kill switch is thrown. D-M8 in the motion contract resolves the master's 2.2s status blink as the tile's e-live at 2000ms, one claim and one tempo, so no new keyframe is added here. The ink is the tile's semantic green, not the master's --c-good, which measures 3.83:1 on this chip against the 4.5:1 floor; the tile's state grammar binds on this edition. */ .c-crystal .c-gnav .e-live { gap: 7px; padding: 6px 13px; border-radius: 99px; font-size: .72rem; font-weight: 750; background: var(--c-goodsoft); } .c-crystal .c-gnav .e-live.dead { background: var(--c-warnsoft); } .c-crystal .c-gnav .e-live.sim { background: var(--e-neutral-bg); } /* ---------------------------------------------------------------- GLASS CARDS */ /* Master lines 59 to 64. THE SURVIVAL RULE LIVES ON THIS DECLARATION: a multi-part backdrop-filter has to reach the browser with every separator intact, because a minifier once stripped them and the glass died while every gate stayed green. Nothing in this source can prove that. tests/u052_glass_survives_build.test.ts reads the BUILT artifact under ui/dist/assets and is the thing that holds it. */ .c-crystal .c-gcard { position: relative; background: var(--c-glass); border: 1px solid var(--c-glassbrd); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); border-radius: 22px; padding: 14px 16px; transition: box-shadow var(--e-t-standard) ease; } /* The ring the action flight leaves behind. ui/crystal/orb.ts adds .hit to what it lands on. */ .c-crystal .c-gcard.hit, .c-crystal .c-lit.hit { box-shadow: 0 0 0 2px var(--c-holo), var(--c-shadow); } /* THE CARD EYEBROW. Master line 63 sets --faint here; that measures 2.70:1 on this glass and a card eyebrow is exactly what the Owner scans from across the room, so it takes the glance ink at 11.32:1. The coral survives as the mark to its left, which is section identity doing its job without asking anyone to read it. */ .c-crystal .c-h6 { margin: 0 0 8px; font-size: .64rem; letter-spacing: .12em; color: var(--c-glance); font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .c-crystal .c-h6 b { color: var(--c-glance); font-weight: 800; } .c-crystal .c-mark { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c-eyebrow); margin-right: 7px; flex: none; } /* ---------------------------------------------------------------- TYPE AND MONEY */ /* Master lines 30 and 31, plus the lining figures CLAUDE.md section 2 names explicitly: "Serif money numbers return with LINING FIGURES required". The master writes tabular-nums alone; lining-nums is added by that law, and it is the one place this file adds to the record's own declaration rather than copying it. */ .c-crystal .c-serif { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-weight: 400; } .c-crystal .c-num { font-variant-numeric: lining-nums tabular-nums; } .c-crystal .c-figure { color: var(--c-ink); font-size: 1.32rem; font-weight: 400; } .c-crystal .c-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; gap: 12px; } .c-crystal .c-row span { color: var(--c-muted); font-size: .82rem; } /* ---------------------------------------------------------------- LEFT, THE FLOOR */ .c-crystal .c-who { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--c-ink); } /* Master line 69. The tag's ink is the glance ink; --c-blue on this chip measures 3.74:1. */ .c-crystal .c-tag { font-size: .62rem; font-weight: 800; letter-spacing: .05em; padding: 2px 9px; border-radius: 99px; background: var(--c-holosoft); color: var(--c-glance); white-space: nowrap; } .c-crystal .c-tag.c-w { background: var(--c-warnsoft); } .c-crystal .c-tag.c-g { background: var(--c-goodsoft); } .c-crystal .c-mini { display: flex; flex-direction: column; gap: 6px; } .c-crystal .c-mb { max-width: 88%; padding: 7px 11px; border-radius: 13px; font-size: .82rem; overflow-wrap: anywhere; } .c-crystal .c-mb.c-in { align-self: flex-start; background: rgba(140,160,185,.16); border-bottom-left-radius: 5px; } .c-crystal .c-mb.c-out { align-self: flex-end; background: var(--c-pill); color: var(--c-pilltext); border-bottom-right-radius: 5px; } /* The counted remainder appears both inside a card and on the bare column, so it takes the ink that clears the floor on either: 6.80:1 on glass, 5.89:1 on the aurora. */ .c-crystal .c-more { font-size: .74rem; color: var(--e-glance-floor); padding: 2px 2px 0; } .c-crystal .c-more b { color: var(--c-ink); font-weight: 700; } /* ---------------------------------------------------------------- CENTRE, THE PRESENCE */ /* THE ORB ON A LIGHT WELL, NOT THE DARK CHAMBER. Master lines 92 to 101. The box keeps its .e-orbbox class because scripts/shot.mjs reads that rectangle to mask the live canvas out of the pixel comparison, and because the geometry gate pins it. The ENGINE is untouched: ui/crystal/orb.ts and ui/crystal/orbMath.ts are the master's own maths and are already pinned by tests/u037_orb_math.test.ts. NO FACE, by the Owner's word. */ .c-crystal .c-orbbox { width: 520px; height: 520px; max-width: 100%; flex: none; } /* 430 to 520 Aug 7 2026, the Owner's live-demo order: the orb bigger */ .c-crystal .c-orbbox canvas { z-index: 2; } .c-crystal .c-well { position: absolute; inset: 26px; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.8), rgba(214,231,250,.4) 58%, rgba(180,208,238,.2)); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -26px 50px rgba(110,155,205,.2), 0 18px 50px rgba(60,90,130,.16); } .c-crystal .c-well::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -26px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(120,170,230,.28), transparent 70%); filter: blur(6px); } /* THE STAGE'S TEXT IS THE ONE PLACE CRYSTAL TEXT SITS ON NO GLASS AT ALL, and that changes which ink it may use. Measured: --c-muted clears the 4.5:1 floor on GLASS at 4.86:1, and fails it at 4.24:1 on the bare page ground under the blue aurora blob, because the glass is what was lifting it. So the four surfaces with nothing but the aurora behind them take the teacher's own glance-floor token, which is the token that exists for exactly this rule and measures 5.89:1 on the same backdrop. Both numbers are re-derived by tests/u054_crystal_glance_floor.test.ts, which measures each ink against the ground it is actually on rather than against one flat colour. */ .c-crystal .c-draghint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: .64rem; color: var(--e-glance-floor); letter-spacing: .1em; z-index: 3; } .c-crystal .c-sname { font-weight: 800; letter-spacing: .32em; font-size: .8rem; color: var(--c-glance); margin-top: 8px; } .c-crystal .c-sstate { font-weight: 700; font-size: 1.02rem; margin-top: 2px; color: var(--c-ink); } .c-crystal .c-sdetail { color: var(--e-glance-floor); font-size: .85rem; min-height: 20px; text-align: center; } .c-crystal .c-thought { max-width: 470px; text-align: center; margin-top: 6px; min-height: 42px; color: var(--e-glance-floor); font-size: .92rem; font-style: italic; } /* ---------------------------------------------------------------- RIGHT, THE THINKING */ .c-crystal .c-wf { display: flex; flex-direction: column; gap: 9px; } .c-crystal .c-wfrow { padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); } .c-crystal .c-wfrow .c-t { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; font-weight: 650; color: var(--c-ink); } .c-crystal .c-wfrow .c-s { color: var(--c-muted); font-size: .74rem; margin-top: 1px; } /* Master line 137. The amber rail is the record's own signal that this one is waiting on him. */ .c-crystal .c-okc { border-left: 3px solid var(--c-warn); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 14px; background: rgba(255,255,255,.5); } .c-crystal .c-okc + .c-okc { margin-top: 8px; } /* The who-and-how-much line and the words are two lines, not one run of text. They shipped as inline spans and rendered as "demo-1 $0.00Happy to explain", which is a layout collision and this operation counts those as defects rather than as polish. */ .c-crystal .c-okcbody { display: flex; flex-direction: column; min-width: 0; } .c-crystal .c-okc .c-t { display: block; font-weight: 700; font-size: .85rem; color: var(--c-ink); } .c-crystal .c-okc .c-r { display: block; color: var(--c-muted); font-size: .78rem; margin-top: 3px; overflow-wrap: anywhere; } /* THE ONE CONTROL THE OWNER MUST TOUCH ON THIS SURFACE, IN THE RECORD'S OWN GRAMMAR. Master line 140, `.btn`, copied declaration for declaration and in the record's own order, with only the token namespace changed as Fidelity Law 3 requires (--pill becomes --c-pill, and both resolve to the same #D6E7FF). The record draws a PALE PILL. The build drew the superseded Elevation rectangle, because the button carried .e-btn and nothing else, and all six sampled properties disagreed with the record: background rgb(214,231,255) against rgb(79,93,232), ink rgb(23,51,92) against white, radius 99px against 8px, weight 700 against 600, size 12.48px against 13px, padding 7px 14px against 9px 16px. IT IS A MODIFIER, NOT A RENAME. The button keeps .e-btn beside .c-btn, so the tile's hover and disabled machinery still applies and no gate that pins the .e-btn selector loses its element; .c-crystal .c-btn is a two-class selector and wins the paint on this surface alone. The other six tabs' .e-btn is not touched by any rule here, which the scope suite holds. `font: inherit` comes FIRST, as it does in the record, because it is a shorthand: written after the weight and the size it would reset both to the inherited font and silently undo two of the six properties this rule exists to set. */ .c-crystal .c-btn { border: 0; font: inherit; font-weight: 700; font-size: .78rem; padding: 7px 14px; border-radius: 99px; cursor: pointer; background: var(--c-pill); color: var(--c-pilltext); } /* AND IT SAYS WHERE THE KEYBOARD IS. The tile's ring is the indigo accent, which is the paint this surface just stopped using, and it measured 5.03:1 against the button it drew. The glance ink measures 10.05:1 against the record's pill and 9.84:1 against the worst backdrop the ring can land on, so the ring is legible against the control AND against the ground beside it. Both numbers are re-derived by tests/u054_crystal_glance_floor.test.ts. */ /* AND A DISABLED CONTROL SAYS SO WITH THE POINTER TOO. `.c-crystal .c-btn` and `.e-btn:disabled` are both specificity (0,2,0) and this file's rule is later, so it won the cascade over the tile's disabled machinery: a disabled Approve correctly dimmed to opacity .45 and still offered a pointing hand, which tells the hand it can click what the eye is told it cannot. Latent rather than live, because nothing disables this button on this surface today, and repaired at (0,3,0) so the tile's rule is restored rather than duplicated. */ .c-crystal .c-btn:disabled { cursor: default; } .c-crystal .c-btn:focus-visible { outline: 2px solid var(--c-glance); outline-offset: 2px; } .c-crystal .c-okc .c-btn { flex: none; } /* ---------------------------------------------------------------- BOTTOM, THE LANES */ /* Master lines 148 to 156, minus the spinner. D-M9 in the motion contract files the master's rot keyframe as NOT ADOPTED: this build has no spinner, and a ring that turns while nothing turns is a costume. The dots that mean "a draft is genuinely in flight" are the tile's .e-dots, which is the state grammar this edition inherits. THE LANE CAP IS THE MASTER'S OWN. Its laneAdd keeps two items per lane, and this box is the master's 116px, so two is what fits. The head carries the TRUE count, so the overflow is counted on screen rather than silently dropped. */ .c-crystal .c-lanes { gap: 12px; height: 116px; flex: none; } .c-crystal .c-lane { overflow: hidden; } .c-crystal .c-lane .c-n { color: var(--c-glance); font-weight: 800; } .c-crystal .c-lit { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; font-size: .78rem; color: var(--c-muted); padding: 3px 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .c-crystal .c-lit b { color: var(--c-ink); font-weight: 650; } .c-crystal .c-litbody { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-crystal .c-ld { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-faint); flex: none; margin-top: 3px; position: relative; } .c-crystal .c-ld.c-done { border-color: var(--c-good); background: var(--c-good); } .c-crystal .c-ld.c-done::after { content: ""; position: absolute; left: 2px; top: -1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); } .c-crystal .c-ld.c-wait { border-color: var(--c-warn); background: var(--c-warnsoft); } /* ---------------------------------------------------------------- THE ACTION FLIGHT */ /* Master lines 159 and 160, AND THIS RULE IS A REPAIR, not decoration. ui/crystal/orb.ts appends
to document.body on every real send and this stylesheet never defined the class, so the dot rendered as an unstyled in-flow block at the end of the document. Measured on the real built bundle with a loaded floor: a body-level div.fly at bottom 1243px on an 863px viewport, with document.documentElement.scrollHeight reading exactly 1243px at the same instant. That is the geometry gate's standing today failure, and it is intermittent for the obvious reason: the dot exists for 620ms at a time. position:fixed takes it out of flow and out of the document's scrollable overflow. IT IS THE ONE CRYSTAL RULE THAT CANNOT BE SCOPED, and that is disclosed rather than hidden. The element is appended to document.body, OUTSIDE the scope root, so no descendant selector could ever match it, and orb.ts writes the literal class name and is not this unit's to edit. The orb mounts on Today and nowhere else, so nothing on another tab can carry it. tests/u053_crystal_scope.test.ts names this carve-out explicitly and asserts it is the only one, so a second unscoped rule cannot arrive quietly beside it. */ .fly { position: fixed; z-index: 90; width: 10px; height: 10px; border-radius: 50%; background: var(--c-holo); box-shadow: 0 0 14px 3px var(--c-holosoft), 0 0 4px var(--c-holo); pointer-events: none; } /* THE ONE RULE WITH NO EXCEPTIONS AND NO FILING ROUTE (MOTION_CONTRACT PART I.3): every infinite loop is silenced. c-drift is the only loop this pilot adds. */ @media (prefers-reduced-motion: reduce) { .c-crystal .c-wash i { animation: none !important; } } /* AMENDED 2026-09-24 21:36:34 MDT by the mentor seat (ROUND 4 cures by class, wave R6j): (f) every rule of this block is scoped .c-crystal.r6j-auth and the three auth roots carry both classes, because these are Crystal surfaces and u053 admits no Crystal rule outside the scope; (g) the block sits ABOVE the phone edition, whose ink floor (u076) slices the stylesheet from its own marker to the end of file; (h) the drift reuses c-drift (u046). */ /* CARD E1, WAVE R6j, THE AUTH SURFACES Sign in, Claim (the owner setup) and Join (the invite form). These rules are scoped under .c-crystal.r6j-auth, never under .c-crystal and never with a c- prefix, on purpose: u053's own leg refuses any Crystal class outside Today.tsx and main.tsx, and these three screens are neither. The palette below is not a new one: every colour is one of the --c-* custom properties the :root block above already declares for the Crystal record, read here rather than restated, so KEEP the palette (field 10) is true by construction and not by promise. No new type face: font-family is inherited from body. The mentor's amendment of tonight moved this block here rather than into a second stylesheet, so that the built artifact still ships as the one file u040 counts. */ .c-crystal.r6j-auth .r6j-door { position: relative; z-index: 1; width: 100%; display: grid; place-items: center; } .c-crystal.r6j-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--c-bg); color: var(--c-ink); font-weight: 400; position: relative; overflow: hidden; } /* the door wash is the Crystal wash (.c-wash, the Crystal section above), rendered by the shell; no wash rule of its own (u053, one c-drift start) */ /* the wash drift reuses the Crystal keyframe c-drift (the same from and to); a second keyframe with the same motion was an unfiled surplus under u046 */ @media (prefers-reduced-motion: reduce) { } /* THE CARD. Same recipe as .c-gcard (glass on the wash), a fixed width so the form reads as a single deliberate object rather than stretching edge to edge on a wide desktop window. */ .c-crystal.r6j-auth .r6j-card { position: relative; z-index: 1; width: 380px; max-width: calc(100vw - 48px); background: var(--c-glass); border: 1px solid var(--c-glassbrd); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); border-radius: 22px; padding: 28px 26px; } .c-crystal.r6j-auth .r6j-mark { font-weight: 800; letter-spacing: .05em; font-size: 1rem; color: var(--c-ink); margin: 0 0 4px; } .c-crystal.r6j-auth .r6j-mark em { color: var(--c-glance); font-style: normal; } .c-crystal.r6j-auth .r6j-title { font-size: 1.28rem; font-weight: 700; color: var(--c-ink); margin: 14px 0 4px; } .c-crystal.r6j-auth .r6j-sub { font-size: 13px; color: var(--c-muted); margin: 0 0 18px; line-height: 1.45; } /* CARD D1, WAVE R6k (2026-09-26 02:44 MDT, run route6-r6k). THE ONE ANCHOR RULE: the door's link to the other screen (Sign in to #/claim, Claim and Join back to #/signin), inside the .r6j-foot paragraph below. The ink is --c-glance, the record's two meter ink (held at 7:1 or more on glass and on the ground by u054; the :root note gives 11.32:1 on the darkest glass ground), so the 4.5:1 floor of lane rule 4 is cleared with room; tests/u154_door_link.test.ts measures it from the rendered pixels at 1440 and 1180. The underline says link without a hover; the 2 px focus ring is .r6j-foot a:focus-visible, below. */ .c-crystal.r6j-auth .r6j-foot .r6j-link { color: var(--c-glance); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* THE FIELDS. Field 9's floors, mechanically: every control at least 36px tall, every label at least 13px, a visible focus ring, no monospace. */ .c-crystal.r6j-auth .r6j-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .c-crystal.r6j-auth .r6j-label { font-size: 13px; font-weight: 600; color: var(--c-ink); } .c-crystal.r6j-auth .r6j-hint { font-size: 13px; color: var(--c-muted); margin-top: -2px; } .c-crystal.r6j-auth .r6j-input { height: 36px; box-sizing: border-box; /* CARD FX6, WAVE R6j, 2026-09-25, the design reviewer's BLOCKER at the deploy gate: the glass border token on the white card measured 1.002:1, so the sign in and claim fields could not be seen; the muted ink token reads 5.44:1 on white (WCAG 1.4.11 asks 3:1 for a control's boundary; lane rule 4). */ border: 1px solid var(--c-muted); background: rgba(255,255,255,.72); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--c-ink); } .c-crystal.r6j-auth .r6j-input:focus-visible { outline: 2px solid var(--c-holo); outline-offset: 2px; } /* THE BUTTON. Reuses .e-btn's own recipe rather than inventing a second button grammar; this selector only raises its minimum height to the 36px floor these four surfaces carry. */ .c-crystal.r6j-auth .e-btn { width: 100%; min-height: 36px; box-sizing: border-box; margin-top: 4px; } .c-crystal.r6j-auth .e-btn:focus-visible { outline: 2px solid var(--c-holo); outline-offset: 2px; } /* CARD DS2, WAVE R6k, round C4 (2026-10-11, the mentor's ruling on the train's adversarial sitting). THE CLAIM BUTTONS' ROW: Create my account is drawn in every state and Request a new setup link stands beside it in the same row; at rest its place is held by a hidden stand in of the same size (visibility hidden: no Tab stop, nothing read aloud), so nothing below the row moves when the button appears. Both are one 36 px line (the control floor), the row's height never depends on which of the two is drawn. */ /* ROUND C5 (2026-10-11, DS2_ruling_c5.md ruling 2, the confirming design sitting's NIT 2): each control takes a FIXED SHARE of the row, sized to its LONGER label (busy or idle), never to the label it shows: a flex basis of 0 and grows of 4 (Create my account, its longer label Creating your account) and 5 (Request a new setup link, its longer label Requesting a new setup link), about the ratio of those two words' widths, so the two buttons' edges stand where they stood whether the idle or the busy words are drawn and the row still ends flush with the fields. The share is a ratio, not a pixel width typed here, so a font that sets the words wider moves both alike. The two longer labels at the card's 13 px type together need 315 of the row's 320 px (a first try at that size left the busy words 0.5 px past their box), so the row's two buttons take 12.5 px type: the busy words then stand 4 px clear of their box on each side (tools/r6k/ds2_frames.mjs, receipt claimEdges clearancePx). */ .c-crystal.r6j-auth .r6k-claim-row { display: flex; gap: 6px; margin-top: 4px; } .c-crystal.r6j-auth .r6k-claim-row .e-btn { flex: 5 1 0%; width: auto; height: 36px; margin-top: 0; padding-inline: 2px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; white-space: nowrap; text-align: center; font-size: 12.5px; } .c-crystal.r6j-auth .r6k-claim-row .r6k-claim-go { flex-grow: 4; } .c-crystal.r6j-auth .r6k-claim-row .r6k-claim-held { visibility: hidden; } /* THE RESERVED ANSWER LINE. Field 9: zero layout shift when a Test or a sign in answer lands. The line's height is reserved whether or not it carries a word, so the card never grows or shrinks the instant the server replies. */ .c-crystal.r6j-auth .r6j-answer { min-height: 18px; font-size: 13px; line-height: 18px; margin-top: 10px; /* AMENDED 2026-09-24 21:54:20 MDT (ROUND 5 class l): the answer line paints in the two inks the glance floor cleared (u054), --e-good and --e-bad, never --c-good or --c-warn which measure below the floor as text */ color: var(--e-good); } .c-crystal.r6j-auth .r6j-answer.bad { color: var(--e-bad); } .c-crystal.r6j-auth .r6j-foot { margin-top: 16px; font-size: 13px; color: var(--c-muted); text-align: center; } .c-crystal.r6j-auth .r6j-foot a { color: var(--c-glance); text-decoration: none; font-weight: 600; } .c-crystal.r6j-auth .r6j-foot a:focus-visible { outline: 2px solid var(--c-holo); outline-offset: 2px; } /* END CARD E1 */ /* 2026-09-28, card B4 of wave R6k (the builder seat, for the mentor's landing). THE DESK'S GLASS: the design of record is the brain route's entry in design/DESIGN_ROUTE_MAP.json, the PROVISIONAL desk whole the mentor seat commits with it (card B4's sealed review round 1, SERIOUS 4), under CRYSTAL_MASTER's tokens, on the Brain tab, which joins the scope at this card. Every text ink is one tests/u054_crystal_glance_floor.test.ts measures (--c-ink and --c-glance at 7:1 on glass and ground, --c-muted at 4.5:1 on glass, and only inside the glass card); the chips are the state grammar's families (PUBLISHED good, DRAFT muted), the word in the ink and the family in the dot and tint. The press moves one pixel and nothing moves under reduced motion. No transition, no keyframe, no --c-blue (links only, and the desk has none). */ .c-crystal .e-desk-head .e-eyebrow { color: var(--c-glance); font-size: 13px; font-weight: 800; letter-spacing: .12em; } .c-crystal .e-desk-title { color: var(--c-ink); } .c-crystal .e-lessons-eyebrow { color: var(--c-ink); } .c-crystal .e-desk-card { background: var(--c-glass); border-color: var(--c-glassbrd); box-shadow: var(--c-glasshi), var(--c-shadow); backdrop-filter: blur(16px) saturate(150%) brightness(108%); -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(108%); } .c-crystal .e-desk-label, .c-crystal .e-desk-size b, .c-crystal .e-desk-hist .v, .c-crystal .e-desk-hist .w b { color: var(--c-ink); } .c-crystal .e-desk-size, .c-crystal .e-desk-job, .c-crystal .e-desk-note, .c-crystal .e-desk-hist .w, .c-crystal .e-desk-diff .l i, .c-crystal .e-desk-receives { color: var(--c-muted); } .c-crystal .e-desk-select { background: rgba(255,255,255,.8); border-color: rgba(23,51,92,.18); color: var(--c-ink); } .c-crystal .e-desk-select:hover { border-color: rgba(23,51,92,.34); } .c-crystal .e-desk-chip { color: var(--c-ink); } .c-crystal .e-desk-chip.good { background: var(--c-goodsoft); border-color: rgba(78,125,98,.35); } .c-crystal .e-desk-chip.good::before { background: var(--c-good); } .c-crystal .e-desk-chip.muted { background: rgba(255,255,255,.6); border-color: rgba(92,107,126,.3); } .c-crystal .e-desk-chip.muted::before { background: var(--c-muted); } .c-crystal .e-desk-btn { border-color: var(--c-glassbrd); background: rgba(255,255,255,.6); color: var(--c-ink); } .c-crystal .e-desk-btn:hover { background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(20,40,80,.1); } .c-crystal .e-desk-btn:active { background: var(--c-holosoft); box-shadow: none; transform: translateY(1px); } .c-crystal .e-desk-btn.on { background: var(--c-pill); color: var(--c-pilltext); border-color: transparent; } .c-crystal .e-desk-btn.primary { background: var(--c-glance); border-color: var(--c-glance); color: #FFFFFF; } .c-crystal .e-desk-btn.primary:hover { background: var(--c-ink); border-color: var(--c-ink); box-shadow: 0 4px 14px rgba(20,40,80,.28); } .c-crystal .e-desk-btn.primary:active { background: var(--c-pilltext); border-color: var(--c-holo); box-shadow: none; transform: translateY(1px); } .c-crystal .e-desk-btn.quiet { background: transparent; border-color: transparent; color: var(--c-glance); } .c-crystal .e-desk-btn.quiet:hover { background: rgba(255,255,255,.72); } .c-crystal .e-desk-btn.quiet:active { background: var(--c-holosoft); transform: translateY(1px); } .c-crystal .e-desk-btn[disabled], .c-crystal .e-desk-btn[disabled]:hover, .c-crystal .e-desk-btn[disabled]:active { box-shadow: none; transform: none; } .c-crystal .e-desk-btn:focus-visible, .c-crystal .e-desk-select:focus-visible, .c-crystal .e-desk-editor:focus-visible { outline: 2px solid var(--c-glance); outline-offset: 2px; } .c-crystal .e-desk-notice { background: rgba(255,255,255,.7); border-color: var(--c-glassbrd); border-left-color: var(--c-holo); color: var(--c-ink); } .c-crystal .e-desk-notice.warn { border-left-color: var(--c-warn); } .c-crystal .e-desk-notice.good { border-left-color: var(--c-good); } .c-crystal .e-desk-editor { color: var(--c-ink); background: rgba(255,255,255,.74); border-color: rgba(23,51,92,.16); } .c-crystal .e-desk-editor:hover { border-color: rgba(23,51,92,.3); } .c-crystal .e-desk-diff { background: rgba(255,255,255,.74); border-color: rgba(23,51,92,.16); color: var(--c-ink); } .c-crystal .e-desk-diff .h { color: var(--c-glance); background: rgba(255,255,255,.6); } .c-crystal .e-desk-diff .l.add { background: var(--c-goodsoft); } .c-crystal .e-desk-diff .l.del { background: var(--c-warnsoft); } .c-crystal .e-desk-hist .r { border-bottom-color: var(--c-glassbrd); } .c-crystal .e-desk-receives { background: rgba(255,255,255,.45); border-color: var(--c-glassbrd); } @media (prefers-reduced-motion: reduce) { .c-crystal .e-desk-btn:active, .c-crystal .e-desk-btn.primary:active, .c-crystal .e-desk-btn.quiet:active { transform: none; } } /* END CARD B4 */ /* ===================================================================================== THE PHONE EDITION. CARD F2, wave R6c, Sep 7 2026. ITS OWN DESIGN PASS, WHICH IS WHAT LANE RULE 11 ASKS FOR: "Nothing pretends to be mobile before the phone edition wave runs with its own design pass." The row card names the killed shape in its own words, "a shrunk desktop is the killed shape", so nothing below is a narrowed copy of a desktop rule. There is no nav, no tab bar, no dock, no table and no orb. IT INTRODUCES NO COLOUR, NO RADIUS AND NO SHADOW OF ITS OWN. Every value below is a --e- token from design/CRYSTAL_MASTER_Aug4_2026.html by way of the :root block at the top of this file, which is the design of record reaching this surface unchanged. The Owner ruled on that palette at 14:58 MDT on 2026-09-07, verbatim: "I like the colors ... It looks very premium, high-end ... I think it's a really nice color scheme and theme and just design." A KEEP is held, not reinterpreted. WHAT DOES CHANGE IS THE SCALE, and that is the other half of the same verdict: "the fonts, maybe, you know, if we can make them a little more readable, I guess that's the word, and still maintaining the high-end quality that you have built." The desktop's caption grammar (.e-swh 13px, .e-eyebrow 11px) does not cross on to this surface at all. Nothing here renders below 15px, the reply body sits at 18px, and both floors are read off the RENDERED page by scripts/shot.mjs with a negative control that forges them back down. MONEY IS SANS HERE, DELIBERATELY. Lane rule 5 binds serif money numbers to lining figures, and it binds because a minifier once stripped a multi part value and the glass died green. The money on this surface is a supporting fact beside a reply, not the record's hero money figure, so it is set in the same sans as everything around it with tabular lining figures asked for explicitly. The rule is not dodged; it is not reached, and this line says which. ===================================================================================== */ /* THE DESKTOP MINIMUM IS RELEASED HERE AND NOWHERE ELSE. body carries min-width: 1180px (lane rule 10, "Desktop first: the 1180px minimum stands"). Left in place at a phone width it produces the exact thing that rule forbids: a broken layout a person drags sideways. The phone edition IS the deliberate surface rule 10 asks for below that floor, so the floor is lifted for it, one pixel under 1180 and down. THE NUMBER EXISTS TWICE, in this query and in PHONE_MAX_WIDTH_PX at ui/crystal/phone.ts, because a stylesheet cannot import a module. tests/u076_phone_edition.test.ts parses the query below and refuses if the two ever disagree. Two copies with a lock between them is a fact; two copies with a comment between them is drift. */ @media (max-width: 1179px) { body { min-width: 0; } } .p-phone { min-height: 100%; background: var(--e-ground); color: var(--e-ink-700); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; } /* THE FRAME. The two things that must never scroll away: what it is doing, and how to stop it. */ .p-top { position: sticky; top: 0; z-index: 2; background: var(--e-card); border-bottom: 1px solid var(--e-card-border); box-shadow: var(--e-card-shadow); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; } .p-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .p-mark { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--e-ink-900); } .p-mark em { font-style: normal; color: var(--e-accent); } .p-state { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--e-good); } /* e-live is the record's own keyframe, the one lane rule 6 keeps by name; this surface adds none. */ .p-state i { width: 9px; height: 9px; border-radius: 999px; background: var(--e-good); animation: e-live var(--e-t-live) ease-in-out infinite; } .p-state.off { color: var(--e-bad); } .p-state.off i { background: var(--e-bad); animation: none; } /* THE STOP. 52px tall, full width, and it is the only control in the frame. It reads as a bordered control while the agent is running (stopping is the rarer, heavier move) and as the one filled control on the screen once everything IS stopped, because at that moment starting again is the only thing he came for. */ .p-stop { min-height: 52px; width: 100%; border-radius: var(--e-card-radius); border: 1px solid var(--e-bad); background: var(--e-card); color: var(--e-bad); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background var(--e-t-hover) ease; } .p-stop:active { background: var(--e-bad-bg); } .p-stop.on { background: var(--e-accent); border-color: var(--e-accent); color: #FFFFFF; } /* THE MEASURE IS CAPPED, AND THIS IS THE OTHER HALF OF THE KILLED SHAPE. The row card names "a shrunk desktop" as the killed shape and this surface is not one. Its mirror image is just as bad and nothing was stopping it: a STRETCHED PHONE. The breakpoint claims every width below 1180px, so a small laptop window and a tablet in portrait both land here, and MEASURED at 834px before this rule existed the card ran 802px wide, the reply set a 768px line of about ninety characters, and "Send it" was a 768px wide button. Ninety characters is roughly twice the measure a person reads comfortably, and a button that wide stops reading as a thing you press. So the frame stays edge to edge, because a frame should, and the CONTENT column stops at 560px and centres. At 390px this rule binds nothing at all, which is deliberate: the phone frames and their committed baselines do not move by one pixel because of it. */ .p-top > *, .p-scroll { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } .p-scroll { flex: 1 1 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; } .p-heading { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .p-heading h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--e-ink-900); } .p-count { font-size: 24px; font-weight: 700; color: var(--e-accent); font-variant-numeric: tabular-nums lining-nums; } .p-lead { margin: 0; font-size: 16px; color: var(--e-glance-floor); } .p-lead .e-sim { margin-right: 8px; vertical-align: baseline; } /* THE SIMULATED CHIP, RAISED FOR THIS SURFACE, and it is a law collision resolved rather than a preference. Lane rule 21 requires the chip on demo data and the shot gate pins it as a rendered fact. It ships at 10px, which is the desktop's caption grammar and is exactly what the Owner's 14:58 word of Sep 7 called not readable. MEASURED on the first drive of this surface: minimum rendered type 10px, the chip. Neither law yields: the chip stays and it comes up to this surface's floor. Its dot comes up with it so the mark still reads as one object. */ .p-phone .e-sim { font-size: 15px; padding: 4px 10px; } .p-phone .e-sim i { width: 7px; height: 7px; } .p-card { background: var(--e-card); border: 1px solid var(--e-card-border); border-radius: var(--e-card-radius); box-shadow: var(--e-card-shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .p-cardtop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .p-who { font-size: 17px; font-weight: 600; color: var(--e-ink-900); } .p-who.small { font-size: 15px; } .p-money { font-size: 18px; font-weight: 700; color: var(--e-ink-900); font-variant-numeric: tabular-nums lining-nums; } /* THE DELETION ELEMENT of this surface, and therefore the largest string on it. */ .p-said { font-size: 18px; line-height: 1.55; color: var(--e-ink-900); white-space: pre-wrap; } .p-edit { width: 100%; font: inherit; font-size: 18px; line-height: 1.55; color: var(--e-ink-900); background: var(--e-inset); border: 1px solid var(--e-card-border); border-radius: var(--e-card-radius); padding: 12px; resize: vertical; } .p-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .p-tag { font-size: 15px; font-weight: 600; padding: 5px 11px; border-radius: 999px; } .p-tag.good { color: var(--e-good); background: var(--e-good-bg); } .p-tag.warn { color: var(--e-warn); background: var(--e-warn-bg); } .p-tag.bad { color: var(--e-bad); background: var(--e-bad-bg); } .p-when { font-size: 15px; color: var(--e-glance-floor); } .p-why { margin: 0; font-size: 15px; color: var(--e-glance-floor); } /* ONE ACTION A STEP, stacked. Three buttons in a row on a phone is three targets a thumb misses. */ .p-acts { display: flex; flex-direction: column; gap: 10px; } .p-btn { min-height: 52px; width: 100%; border-radius: var(--e-card-radius); border: 1px solid var(--e-card-border); background: var(--e-card); color: var(--e-ink-900); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background var(--e-t-hover) ease; } .p-btn:active { background: var(--e-inset); } .p-btn.go { background: var(--e-accent); border-color: var(--e-accent); color: #FFFFFF; } /* THE ONE LITERAL ON THIS SURFACE, DECLARED RATHER THAN SLIPPED IN. The section header above says this edition introduces no colour of its own, and a design review caught this line contradicting it: #4450CE is the pressed tint of the accent and it is not a token, because the design of record carries no pressed state for a filled button on a touch surface. It is the accent darkened, it is used in exactly one place, and it is named here so the claim above is true as written rather than true except for one line nobody mentioned. */ .p-btn.go:active { background: #4450CE; } /* THE REFUSAL NO LONGER WEARS THE DISABLED GRAMMAR. It was set in the muted glance ink, measuring 7.58:1 where the button directly above it measures 17.28:1 on the same white, and greying is also this surface's own signal for a control you cannot press (.p-btn:disabled below). One visual language was carrying two meanings, and the meaning it landed on was the wrong one: a person who wants to refuse a reply should not have to test whether the control is even available. It keeps its lower emphasis through its BORDER, which carries no second meaning, and its label reads at the same ink as every other control. */ .p-btn.quiet { border-color: var(--e-card-border); background: var(--e-inset); } .p-btn:disabled { opacity: .55; cursor: default; } /* THE KEYBOARD IS VISIBLE HERE TOO, and this repository has already paid for this exact defect once: the comment on the nav tabs above records a control falling back to Chrome's own `auto 1px rgb(0, 95, 204)`, a blue that appears in no token in this product. The phone edition repeated it and the gate could not say so, because its probe read type sizes and rectangles and never a focus style. Same grammar as the rest of the product, 2px at a 2px offset, and the probe reads it now. */ /* WRITTEN AS LONGHANDS ON PURPOSE, so the gate can READ it. `outline: 2px solid var(--e-token)` is a shorthand carrying a custom property, and the CSSOM keeps that as a pending substitution: both rule.style.outline and rule.style.outlineWidth come back EMPTY, so a leg reading the served stylesheet measures zero over a perfectly ringed control. The ring is identical either way; only the instrument can tell the difference, and an instrument that cannot read the thing it certifies is the reason to write it this way. */ .p-btn:focus-visible, .p-stop:focus-visible { outline-width: 2px; outline-style: solid; outline-color: var(--e-glance-floor); outline-offset: 2px; } .p-empty { background: var(--e-card); border: 1px dashed var(--e-card-border); border-radius: var(--e-card-radius); padding: 20px 16px; } .p-empty b { display: block; font-size: 18px; color: var(--e-ink-900); margin-bottom: 8px; } .p-empty p { margin: 0; font-size: 16px; color: var(--e-glance-floor); } .p-more { margin: 0; font-size: 16px; color: var(--e-glance-floor); } .p-done { border-top: 1px solid var(--e-card-border); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; } .p-done h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--e-ink-900); } .p-donerow { display: flex; flex-direction: column; gap: 6px; } .p-donetop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .p-donebody { margin: 0; font-size: 15px; color: var(--e-glance-floor); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .p-rest { margin: 6px 0 0; font-size: 15px; color: var(--e-glance-floor); } /* REDUCED MOTION IS A RE-CHOREOGRAPHY, NEVER A KILL SWITCH (the motion contract, and the decision record's FIELD 8). The running dot holds its state colour and stops pulsing; it does not disappear, because the colour is the fact and the pulse was only the emphasis. */ @media (prefers-reduced-motion: reduce) { .p-state i { animation: none !important; } } /* THIS BLOCK ALSO CARRIED `.p-stop, .p-btn { transition: none !important; }` AND THE MOTION CONTRACT REFUSED IT, correctly, so it is gone and the refusal is recorded rather than worked around. u046's leg is "no transition in the shipped stylesheet carries a literal duration", and its first assertion is that a transition names a duration AT ALL; `none` names none, so a rule written to be kind under reduced motion was the one rule in the file whose tempo could not be audited. The contract's own PART I.3 is about INFINITE LOOPS ("every infinite loop is silenced") and that is what the line above does, to the one loop this surface has. A 100ms colour change on a press is not vestibular motion, it is under the contract's own high frequency band, and the existing precedent in this file silences animation and leaves transitions alone (.c-crystal .c-wash i, the only other entry in this section). */ /* CARD B8, WAVE R6k, ROUND 3 (the sealed review's N1): THE OWNER'S ACTION APPROVALS in the Outbox (ui/crystal/ActionApprovals.tsx). tests/u040_design_tokens.test.ts holds that every class a component names exists here. The section keeps its distance from the Outbox below it; a card waiting on him and a card whose write failed carry their state on the left edge, from the data attributes the card already sets, in the theme's own tokens. */ .r6k-actions { margin-bottom: var(--e-s3); } .r6k-action { margin-bottom: var(--e-s2); } .r6k-action[data-action-status="pending"] { border-left: 3px solid var(--e-warn); } .r6k-action[data-action-status="write-failed"] { border-left: 3px solid var(--e-bad); } /* CARD DS2, WAVE R6k (THE REFUSAL STOPS JUMPING THE LAYOUT, 2026-10-09, the builder of SESSION C; rounds C2 and C3 under the mentor's rulings on the two design sittings). DS2-RESERVE BEGIN. Every line a REFUSED CLICK paints on the Connections cards and the claim screen sits in a ROOM (.r6k-rv, a new node that carries none of the answer classes other suites read; ui/crystal/Connections.tsx Room, ui/crystal/Claim.tsx), so the refusal lands inside it and nothing below moves. A Clear is not a refusal: what a Clear changes keeps no room. THE NUMBERS ARE MEASURED, NEVER TYPED (tools/r6k/ds2_frames.mjs, banked in docs/shots/r6k/DS2/DS2_U166_RECEIPT.json, read by tests/u166_refusal_layout.test.ts U166-ROWS). A CAPPED room (data-cap) is as tall as five lines of its own line height for an answer, the Go live blockers' FULL RESERVE (round C4: the fresh invited account's rest list, 6 items measured; the engine can list 7, and a longer list scrolls under the fade in its focusable named region), or the claim screen's expired answer; it keeps 4 px of inline padding (the focus ring is drawn in it, never on the words) and scrolls a longer refusal. The Room's capped rooms fade their last visible line while words lie below (data-more, set by the Room while it is not scrolled to its end); the CLAIM answer room is capped WITHOUT the fade (its real refusals fit its 113 px; it is drawn by Claim.tsx, not the Room). The Copy line and the Go live row hold their longest content. The base rule serves under 1440 px (measured at 1180); the media rule 1440 px and over. */ .r6k-rv { display: flow-root; } .r6k-rv[data-cap] { overflow-y: auto; padding-inline: 4px; } .r6k-rv[data-cap]:focus-visible { outline: 2px solid var(--e-accent); outline-offset: -2px; box-shadow: 0 0 0 1px var(--e-accent); } /* AMENDED 2026-10-23 11:09 MDT, card RING156 of wave R6k (the builder seat, RUN_OWNER=route6-r6k). Headless Chrome 156 snaps a room whose top sits on a half pixel (the answer room at 1440: top 433.5, height 101.5) to 101 painted rows, so the ring's bottom edge fell one pixel short of where Chrome 155 painted it and U166-FOCUS read white on white there. The 2 px outline drawn inside the room stands as it was; a 1 px box shadow ring in the same accent now paints the pixel just outside the room's edge on every side, so the ring holds its 3 to 1 whichever way a half pixel box snaps. No room height changed. */ .r6k-rv[data-more]:not(:focus-visible) { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1lh), rgb(0 0 0 / 0.6)); mask-image: linear-gradient(to bottom, black calc(100% - 1lh), rgb(0 0 0 / 0.6)); } /* AMENDED 2026-10-09, card DS3 of wave R6k (the builder seat, for the mentor's landing). The Settings tab joined the Crystal scope (every tab wears the Today chrome), and the Go live row's longest content now measures 65.5 px at 1180 and at 1440 (tools/r6k/ds2_frames.mjs, re rendered over the tree, its receipt's natural.golive), not 69 px, now the scope's body weight and button rules reach the row. The room is kept and carries its measured number, as this block says. */ /* AMENDED 2026-10-16, card HUMAN1 (the Owner's R6nw), the builder seat: the Go live blockers list lost its support contact line, so the blockers room carries its newly measured need, the number U166-ROWS reads from the DS2 receipt: 187.5 px becomes 148.5 px at 1180 and 148.5 px becomes 129 px at 1440. No gate changed. */ .r6k-rv-answer { height: 101.5px; } /* DS2-RV answer 1180 */ .r6k-rv-blockers { height: 148.5px; } /* DS2-RV blockers 1180 */ .r6k-rv-goliveanswer { height: 101.5px; } /* DS2-RV goliveanswer 1180 */ .r6k-rv-copied { min-height: 39px; } /* DS2-RV copied 1180 */ .r6k-rv-golive { min-height: 65.5px; } /* DS2-RV golive 1180 */ .r6k-rv-claim { height: 113px; } /* DS2-RV claim 1180 */ .r6k-rv-channelsaid { height: 43px; } /* DS2-RV channelsaid 1180 */ .r6k-rv-alarmsaid { height: 121px; } /* DS2-RV alarmsaid 1180 */ @media (min-width: 1440px) { .r6k-rv-answer { height: 101.5px; } /* DS2-RV answer 1440 */ .r6k-rv-blockers { height: 129px; } /* DS2-RV blockers 1440 */ .r6k-rv-goliveanswer { height: 101.5px; } /* DS2-RV goliveanswer 1440 */ .r6k-rv-copied { min-height: 39px; } /* DS2-RV copied 1440 */ .r6k-rv-golive { min-height: 65.5px; } /* DS2-RV golive 1440 */ .r6k-rv-claim { height: 113px; } /* DS2-RV claim 1440 */ .r6k-rv-channelsaid { height: 43px; } /* DS2-RV channelsaid 1440 */ .r6k-rv-alarmsaid { height: 101.5px; } /* DS2-RV alarmsaid 1440 */ } /* ROUND C5 (2026-10-11, DS2_ruling_c5.md ruling 1, the confirming design sitting's SERIOUS 1). THE BLOCKERS ROOM'S RESERVE FOLLOWS THE ENGINE'S LIST. The rule above is the FULL reserve (the tallest rest list, painted when two or more lines stand). The room names the smaller two by data-reserve (ui/crystal/Connections.tsx): "line" is the height of the list's heading and ONE item, the pool's longest single item, measured by tools/r6k/ds2_frames.mjs under the mutant (a ready or paused account has no list, a refusal that lands paints in place, a longer one scrolls inside the room under the fade); These two numbers are read from the DS2-RV-RESERVE markers by reserveNumbers in the same tool. ROUND C6 (DS2_ruling_c7.md ruling 1): the "none" reserve (0 px for a live account) is RETIRED and its rule moved out of this file: a 0 px room was an invisible keyboard Tab stop and its flip to "line" moved the pressed control about 90 px. A live account takes "line". */ .r6k-rv-blockers[data-reserve="line"] { height: 90px; } /* DS2-RV-RESERVE line 1180 */ @media (min-width: 1440px) { .r6k-rv-blockers[data-reserve="line"] { height: 90px; } /* DS2-RV-RESERVE line 1440 */ } /* DS2-RESERVE END */