:root[data-theme="light"] body.os.inthread .wsFacts li.big{grid-template-columns:1fr;gap:1px;padding:8px 0 7px} :root[data-theme="light"] body.os.inthread .wsFacts li.big b{order:2} :root[data-theme="light"] body.os.inthread .wsFacts li.big span{font:800 30px/1.05 var(--disp);letter-spacing:-.02em;color:var(--ink);white-space:normal} /* a card's one action — "Measure now" — in the product's own button language, not a bare bordered rectangle inside body copy (owner, 2026-09-05) */ :root[data-theme="light"] body.os.inthread .wsToolMore{ display:inline-block;margin-top:10px;padding:8px 14px;border:0;border-radius:var(--r-pill); background:var(--fill);color:var(--onfill);font:800 11.5px/1 var(--body);letter-spacing:.01em; box-shadow:var(--clay);cursor:pointer;transition:transform .16s,box-shadow .16s} :root[data-theme="light"] body.os.inthread .wsToolMore:hover{transform:translateY(-1px);box-shadow:var(--lift-2)} /* the quotation stands behind the number — smaller, quieter, a dashed rule */ :root[data-theme="light"] body.os.inthread .wsQuote{ margin:9px 0 0;padding-left:10px;border-left:2px dashed var(--line2); font:400 11px/1.45 var(--body);color:var(--muted);-webkit-line-clamp:2} /* ═══════════════════════════════════════════════════════════════════════════ work-clay.css — THE CLAY WORLD, and the only design this product wears. Owner, 2026-09-04: one design. The four moods of the mock (Māls · Gaisma · Krēsla · Ass) are NOT shipped; the mood switch is not built; the dark theme is closed and has no door. `docs/HANDOVER-DESIGN-WORKSPACE-2026-09-04.md` §1 holds the decisions, `docs/design-workspace-2026-09-04/mocks/workspace-final.html` is the reference this file was measured against, value by value. ⛔ `data-theme="light"` IS THE CLAY WORLD NOW. The attribute is forced by index.html and there is no control that changes it. Forty files across this app carry `:root[data-theme="light"] X` component fixes; renaming the attribute would have unmatched every one of them and dropped each of those surfaces back onto a dark base nobody can reach any more. So the name stays and its VALUES moved. ⛔ Do not add a second theme back by adding a second value — add it by deciding it, the way this one was decided. ⛔ THIS FILE OVERRIDES, IT DOES NOT REPLACE. os-thread.css carries a GENERATED block pasted out of proto/ui.css (tools/scope-proto-css.mjs), and test-home-css-paste asserts it byte for byte. Editing it there would have made a green-ish suite red for a reason that has nothing to do with the paste. So every clay rule lives here, at equal specificity, in a file that loads last — order decides, and the paste stays the paste. ⛔ NOTHING HERE INVENTS A NUMBER. Every count, dot and pulse this file styles is drawn by work-home.js from a measured read; a rule that painted a bar with no job behind it would be the one lie the product forbids. ═══════════════════════════════════════════════════════════════════════════ */ /* ── the palette ─────────────────────────────────────────────────────────── Copied from the mock's `:root`, value for value — clay ink #2b2440 over a cream ground, one violet #7c5cff, and the two shadow recipes that make a panel read as clay rather than as a card: --lift (a lit top edge and a soft drop) and --clay (lit top, dark under-lip, violet bloom). */ :root[data-theme="light"] body.os.workHomeOpen, :root[data-theme="light"] body.os.inthread{ --bg:#f4efe6; --ink:#2b2440; --muted:#6b6380; --faint:#9a92ad; --line:rgba(43,36,64,.10); --line2:rgba(43,36,64,.20); --surf:rgba(43,36,64,.045); --surf2:rgba(43,36,64,.085); --panel:#fffbf4; --panelT:rgba(255,251,244,.94); --askT:rgba(255,251,244,.88); --violet:#7c5cff; --violet-h:254; --cyan:#22d3ee; --lime:#8fbf3a; --mint:#2f7a5c; --amber:#c2410c; --rose:#d6455f; --cream:#fffbf4; --cream2:#f8f2e8; --lav:#e5dcff; --lav2:#efe9ff; --clay-mint:#dff1e8; --clay-peach:#fbd9c9; --okbg:#cdeedd; /* the instrument surface — lavender clay, not graphite */ --fill:#7c5cff; --fill-2:rgba(124,92,255,.28); --onfill:#ffffff; --glowA:rgba(124,92,255,.10); --glowB:rgba(246,210,194,.16); --shadow:rgba(58,51,72,.18); --glass:rgba(255,251,244,.74); --glassT:rgba(255,251,244,.58); --lift:inset 0 2px 0 rgba(255,255,255,.8),0 10px 24px rgba(58,51,72,.08); --lift-2:inset 0 2px 0 rgba(255,255,255,.8),0 18px 44px rgba(58,51,72,.14); --clay:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(58,51,72,.14),0 8px 18px rgba(124,92,255,.22); --r:22px; --r-s:12px; --r-pill:999px; --aurora:linear-gradient(100deg,#22d3ee,#7c5cff 60%,#f472b6); /* ⚡ Nunito is the mock's own face and it is what makes the world read as clay rather than as a pastel dashboard: round terminals, high x-height, a heavy 800 for headings. --disp and --body are the app's two font tokens, so setting them here re-faces every surface in the workspace at once. */ --body:Nunito,'DM Sans',-apple-system,system-ui,sans-serif; --disp:Nunito,Sora,'Space Grotesk',sans-serif; } /* ── the ground ──────────────────────────────────────────────────────────── ⛔ THE WORLD IS PAINTED IN THREE PLACES, NOT ONE, and missing any of them leaves a screen with no ground under it. work-screen.css §"v7 · the workspace world" paints `.whPlane::before` for the company home, `.thread::before` for the signed-in conversation, and the plane again under `html.whBoot` for the loader — three layers because the home and the thread are different elements and the loader runs before the theme attribute exists. ⚠ Measured here 2026-09-04: skinning only the plane left every ROOM — the screen a person actually spends the day on — showing `ws-world-light`, because `.thread.on::before` was painting over it. `elementsFromPoint` does not report it (it is `pointer-events:none`), so the covering layer is invisible to the obvious probe; enumerating viewport-sized elements WITH their pseudo-elements is what found it. ⚡ So all three point at the same picture, and the wash over them is one recipe. One world, whichever screen you are standing on. */ :root[data-theme="light"] body.os.workHomeOpen .whPlane::before, :root[data-theme="light"] body.os.inthread.workHomeOpen .thread::before, :root[data-theme="light"] body.os.inthread .thread::before{ background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat; opacity:1!important;filter:none!important;transform:none} html.whBoot:not([data-theme="dark"]) body.workHomeOpen .whPlane::before{ background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat} /* ⛔ A wash this light is deliberate: the hills ARE the ground, and a veil heavy enough to be safe is a veil heavy enough to make the world pointless. Contrast is bought back on the panels, which are opaque cream. */ :root[data-theme="light"] body.os.workHomeOpen .whPlane::after, :root[data-theme="light"] body.os.inthread.workHomeOpen .thread::after, :root[data-theme="light"] body.os.inthread .thread::after{ background:radial-gradient(1100px 620px at 82% -10%,rgba(124,92,255,.07),transparent 62%), linear-gradient(180deg,rgba(244,239,230,.16),rgba(244,239,230,.34))} html.whBoot:not([data-theme="dark"]) body.workHomeOpen .whPlane::after{ background:linear-gradient(180deg,rgba(244,239,230,.14),rgba(244,239,230,.32))} :root[data-theme="light"] body.os.workHomeOpen{background:var(--bg)} /* ── the rail ────────────────────────────────────────────────────────────── Frosted cream glass over the hills. Radii come from the clay scale: a 22px panel, 12px cards, 999px rows. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav{ background:var(--glassT); border-right:1px solid var(--line); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); padding:14px 12px 16px; } /* Šodien — a cream card with the clay lift, the way the mock opens the rail. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today{ border:0;border-radius:var(--r-s);background:var(--cream); box-shadow:var(--lift);padding:10px 12px;margin-bottom:12px; } :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today.on{background:var(--cream)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .d{font:800 14px var(--disp)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .s{font-size:11px;color:var(--muted)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .n{ min-width:24px;height:24px;padding:0 8px;border-radius:var(--r-pill); display:grid;place-items:center;background:var(--violet);color:#fff; font:700 11px var(--mono);box-shadow:var(--clay)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav h4{ font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--faint);padding:12px 10px 6px} /* the workplace row — a clay pillow, not a rectangle */ /* ⚡ 12px ROW CORNERS, NOT PILLS (spec §4). A 999px radius on a 40px row is a capsule: it reads as a chip in a toolbar rather than as a line in a list, and the nested rooms lost their column because every left edge curved away from the connector. `--r-s` is the clay scale's card radius. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjrow, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .add{border-radius:var(--r-s)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .chv{border-radius:var(--r-pill)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj{font-weight:700;font-size:13.5px;padding:5px 8px} /* ⚡ TIGHTER AND WIDER (owner, 2026-09-05: "a liiiitle less spacing between rows, slightly wider all the elements — less space on the right and left within this menu"). The rail's own gutter comes off the scroller, so every row gains it on both sides; the rows lose a little of their vertical air. ⛔ Padding, not width: a row that is 100% of a narrower box still ends where the box ends, and only the gutter decides how much of the rail it uses. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whNavScroll{padding-left:2px;padding-right:2px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjwrap{margin:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjrow{margin-top:1px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .rooms{margin:1px 0 4px 8px;padding-left:8px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{padding:4px 6px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav h4{padding:9px 8px 4px} /* ── the rail's first line: the mark, and the decisions pill ────────────── ⛔ The page's header bar is HIDDEN, not emptied, while the shell is up — it held exactly these two things and nothing else, and an empty bar is 54px of nothing above somebody's desk. */ :root[data-theme="light"] body.os.workHomeOpen .top{display:none!important} /* ⛔ HIDING THE BAR IS HALF THE JOB — THE STRIP IT STOOD IN IS A TOKEN (owner, 2026-09-05: "still header line fully intact there, just empty now, taking space"). `--wh-top` is 54px on :root and every surface that starts below the header reads it: .workHomeView's `top`, .thread's `padding-top`, the rail, the tool view. `display:none` on .top removes the bar and leaves all of them holding its space. With the bar gone in this state the reservation is gone with it — one token, one place, exactly as the token was written for. */ :root[data-theme="light"] body.os.workHomeOpen{--wh-top:0px} /* ⛔ AND THE DOCK IS THE ONE SURFACE THAT NEVER READ THE TOKEN (owner, 2026-09-06: the right dock starts ~60px below the top). `os-thread.css` gives it a LITERAL `top:64px` — which beat os-dock.css's 54px and was never part of the `--wh-top` family — so hiding the header moved every other surface up and left the dock behind a strip of nothing. ⚡ It reads the token here like the rail and the thread do, at the same prefix and the same specificity family as the rule above; no !important, because the fix is a higher-scoped rule and not a louder one. */ :root[data-theme="light"] body.os.workHomeOpen .osDock{top:var(--wh-top,0px)} /* ⚡ 10px HORIZONTAL INSET, 12px OF TOP AIR — the same gutter the rows below it use (spec §2). The head carried 14px on the left alone, so the mark sat two pixels further in than every name under it and the column read bent. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whRailHead{ display:flex;align-items:center;gap:10px;padding:12px 10px 8px;min-height:38px} /* ⛔ The mark's own artwork bleeds past its box: the sprite is drawn with a stroke and `overflow:visible`, so a box flush at x=0 puts INK on the rail's edge. It is inset, not resized. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whRailMark{ flex:none;display:grid;place-items:center;width:32px;height:28px;text-decoration:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whRailMark svg{ width:32px;height:auto;display:block;overflow:visible} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whRailPulse{ flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center} /* ⚡ The pill re-parents in as it is; only its BOX is told about the new place. ⛔ Its height is set from the line, not from padding — the header gave it room to be loose and the rail does not, so uneven top/bottom padding read as a pill sitting off its own centre. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav #pulse{ max-width:100%;height:28px;padding:0 11px 0 6px;gap:7px; font:700 12px var(--body);line-height:1;align-items:center} :root[data-theme="light"] body.os.workHomeOpen .whAppNav #pulse img{ width:20px;height:20px;flex:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav #pulse span{ display:block;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjrow:hover, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj:hover, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj.open{background:var(--cream2)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjrow.here{ background:var(--lav);color:var(--ink);box-shadow:var(--lift)} /* the company mark — a rounded clay tile, a real logo when we hold one, the person's own round mark. ⛔ Order is the one /api/brand-mark already uses: real logo → family icon → initials. Nothing here invents a mark. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk{ width:28px;height:28px;border-radius:9px;border:0;font:800 10px var(--disp); background:var(--lav2);color:var(--violet); box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(58,51,72,.10)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.own{ background:var(--violet);color:#fff;box-shadow:var(--clay)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.person{ background:linear-gradient(135deg,#22d3ee,#7c5cff 55%,#f472b6);color:#fff; border-radius:50%;box-shadow:var(--clay)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.mklogo{ background:#fff;box-shadow:inset 0 0 0 1px var(--line)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk img{ width:100%;height:100%;object-fit:contain;border-radius:9px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .dot{ background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent)} /* the rooms under a company — connector lines, the way the mock nests them */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .rooms{ position:relative;margin:2px 0 6px 14px;padding-left:12px;gap:2px; border-left:1.5px solid var(--line)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{ padding:6px 10px;font-size:12.5px;font-weight:700;color:var(--muted); transition:background .18s,color .18s,box-shadow .18s} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room::after{ content:'';position:absolute;left:-12px;top:50%;width:10px;height:1.5px;background:var(--line)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room:hover{background:var(--cream2);color:var(--ink)} /* ⚡ THE LIFTED ACTIVE ROW (owner's choice, over Kimi's dimple): a filled lavender pillow, the icon lifted 1px and scaled 1.06 with a violet glow, and a 4px violet bar outside the row's left edge. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on{ background:var(--lav);color:var(--ink);box-shadow:var(--lift)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on::before{ content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%); width:4px;height:18px;border-radius:99px;background:var(--violet)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on .h{ transform:translateY(-1px) scale(1.06)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on .km{ filter:drop-shadow(0 4px 10px rgba(124,92,255,.35))} /* ⛔ THE ICON READABILITY RULE, IN CSS (handover §1). Pictorial 3D does not read below ~24px — the rail drew these at 17px in a 12px column, which is the size at which a rendered object becomes a smudge and the whole family reads as clip-art. Contour clay lives at 26–32px; anything smaller than that has to become a flat glyph instead, which is a different asset tier, not a smaller version of this one. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .h{ width:28px;height:28px;display:grid;place-items:center;flex:none; transition:transform .18s cubic-bezier(.2,.8,.2,1)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .km{ width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(43,36,64,.18))} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .g{ font:500 10.5px var(--mono);color:var(--faint)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on .g{color:var(--ink);opacity:.7} /* ⚡ "strādā" — the green pulse the mock puts on a room where an agent is actually running. ⛔ work-home.js only emits .whBusy when a CONNECTED agent carries this room's goal and its execution state is `running`; this rule makes that measured fact visible and never manufactures one. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whBusy{ width:8px;height:8px;border-radius:50%;background:var(--mint);margin-left:auto;flex:none; animation:clayPulse 1.4s ease-in-out infinite} @keyframes clayPulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 45%,transparent)} 60%{box-shadow:0 0 0 6px transparent}} @media (prefers-reduced-motion:reduce){ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whBusy{animation:none}} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .add{ border:1.5px dashed var(--line);color:var(--faint);font-weight:700;font-size:12px; text-align:center;margin:6px 8px;padding:7px 12px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .add:hover{ background:var(--cream2);color:var(--ink)} /* ⚡ THE PRIVATE VIEW SITS ON TOP AND SAYS SO (owner, 2026-09-04). It was already first in the markup — roomNavigation() emits personBlock before the workplace groups — but it read as one more workplace, so "on top" was true and invisible. It now arrives inside its own labelled block (`.whMine`, with the section heading every other group already gets), lifted onto the cream card so the eye lands on it before the companies. ⛔ The block is emitted only when there IS a person — an anonymous visitor and a credential bound to a company have no `.sbjrow.me` at all, and a heading over nothing is a claim about a space that does not exist. */ /* ⛔ NO HAIRLINE UNDER THE PRIVATE BLOCK (owner, 2026-09-05: "the horizontal line not needed either, too much space taking"). The heading below it already separates the groups; the rule was drawing a second separator and paying 10px of padding for it. */ /* ⚡ AND THE SPACE THE LINE USED TO MAKE IS NOW A MARGIN (owner, 2026-09-05, task 77bcf912). With the hairline gone the person's own row sat 4px above the first company and the two blocks read as one list. ⛔ 16px of margin, not the rule back: the separation is the point, the line was only how it used to be spelt. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine{ margin:2px 0 16px;padding:0;border-bottom:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine .sbjrow.me{margin-top:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine .sbj{font-size:14px} /* ⛔ THE PERSON'S ROW RESTS LIKE EVERY OTHER ROW (owner, 2026-09-09: "I'm in aba, but my personal Mārtiņš Īviņš is still active, not good"). It wore a cream card with a lift at rest, so beside the one lavender active row it read as a SECOND active place. Only `.here` lifts it now (the rule further down), and exactly one row on the rail carries the active treatment. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine .sbjrow{ background:transparent;box-shadow:none} /* ── the dock ────────────────────────────────────────────────────────────── The same frosted cream glass on the other side, so the conversation sits between two panes of the same material. */ :root[data-theme="light"] body.os.workHomeOpen .osDock, :root[data-theme="light"] body.os.inthread .osDock{ background:var(--glassT);border-left:1px solid var(--line);box-shadow:none; backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15)} /* ── the conversation ────────────────────────────────────────────────────── The answer is a cream panel with the clay lift; the question keeps the mock's violet rule down its left edge. */ :root[data-theme="light"] body.os.workHomeOpen .m-orc, :root[data-theme="light"] body.os.inthread .m-orc{color:var(--ink)} :root[data-theme="light"] body.os.workHomeOpen .cwrap, :root[data-theme="light"] body.os.inthread .cwrap{ border:0!important;border-radius:var(--r-pill)!important; background:var(--cream)!important;box-shadow:var(--lift)!important} :root[data-theme="light"] body.os.workHomeOpen .chips.steps .chip, :root[data-theme="light"] body.os.inthread .chips.steps .chip{ border:0;border-radius:var(--r-pill);background:var(--lav);color:var(--violet); box-shadow:none;font-weight:700} /* ── the shared kit ──────────────────────────────────────────────────────── Buttons are clay: a lit top edge, a dark under-lip and a violet bloom. */ :root[data-theme="light"] body.os.workHomeOpen .whBtn.primary, :root[data-theme="light"] body.os.workHomeOpen .primary{ border-radius:var(--r-pill);background:#8b6cff;color:#fff;box-shadow:var(--clay)} /* ── the panels ──────────────────────────────────────────────────────────── The company home and the Šodien panel are the largest surfaces on screen, and glass built for a near-black page reads as a wash over the hills rather than as a panel standing on them. Cream, the clay lift, the 22px radius. */ :root[data-theme="light"] body.os.workHomeOpen .whHome .blk, :root[data-theme="light"] body.os.workHomeOpen .whHome .panel, :root[data-theme="light"] body.os.workHomeOpen .whSection{ border:0;border-radius:var(--r);background:var(--glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:var(--lift)} :root[data-theme="light"] body.os.workHomeOpen .whHome .blk>h3, :root[data-theme="light"] body.os.workHomeOpen .whSectionHead{ font-family:var(--mono);letter-spacing:.14em;color:var(--faint)} :root[data-theme="light"] body.os.workHomeOpen .whHome .appc, :root[data-theme="light"] body.os.workHomeOpen .whHome .tile, :root[data-theme="light"] body.os.workHomeOpen .whHome .aroom{ border:0;border-radius:var(--r-s);background:var(--cream);box-shadow:var(--lift)} :root[data-theme="light"] body.os.workHomeOpen .whHome .appc:hover, :root[data-theme="light"] body.os.workHomeOpen .whHome .aroom:hover{ transform:translateY(-2px);box-shadow:var(--lift-2)} /* ⛔ THE `custom-app` TINT IS GONE (owner, 2026-09-10). It painted the two rows the ledger flags `customApp` — a flag that only means "opens at appPath in the pane" — as Brain Club's own private tools. Documents & sheets is a general app for every customer and must be drawn like every other app. */ /* ⛔ THE LIT TOP EDGE STAYS, AND IT IS NOT A FULL BORDER. It is what makes a clay panel read as clay rather than as a flat rectangle; the generated block already draws it and this file only warms the light it is made of. */ :root[data-theme="light"] body.os.workHomeOpen .whHome .blk::before, :root[data-theme="light"] body.os.workHomeOpen .whHome .appc::before, :root[data-theme="light"] body.os.workHomeOpen .whHome .tile::before, :root[data-theme="light"] body.os.workHomeOpen .whHome .panel::before, :root[data-theme="light"] body.os.workHomeOpen .whHome .aroom::before{ left:16px;right:16px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)} :root[data-theme="light"] body.os.workHomeOpen .whHome .blk>h3, :root[data-theme="light"] body.os.workHomeOpen .whHome .ln, :root[data-theme="light"] body.os.workHomeOpen .whHome .grow, :root[data-theme="light"] body.os.workHomeOpen .whHome button.ln, :root[data-theme="light"] body.os.workHomeOpen .whHome button.grow{border-color:var(--line)} /* the small marks inside a panel — lavender clay, not graphite */ :root[data-theme="light"] body.os.workHomeOpen .whMark{ border-radius:9px;background:var(--lav2);color:var(--violet)} :root[data-theme="light"] body.os.workHomeOpen .whRow.clickable:hover{background:var(--cream2)} :root[data-theme="light"] body.os.workHomeOpen .whAbsent{ border-radius:var(--r-s);background:var(--clay-peach);color:var(--amber)} :root[data-theme="light"] body.os.workHomeOpen .whProof{color:var(--mint)} /* the panel's own headline — Nunito 800, the mock's heading weight */ :root[data-theme="light"] body.os.workHomeOpen .whPanelHead h1, :root[data-theme="light"] body.os.workHomeOpen .whHome h1{font-weight:800;letter-spacing:-.02em} /* ── the header ──────────────────────────────────────────────────────────── The bar was a plain strip over a photograph. Same frosted cream as the two rails, one hairline under it — three panes of one material. */ :root[data-theme="light"] body.os.workHomeOpen .top, :root[data-theme="light"] body.os.inthread .top{ background:var(--glass);border-bottom:1px solid var(--line); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15)} :root[data-theme="light"] body.os.workHomeOpen .top::before, :root[data-theme="light"] body.os.inthread .top::before{display:none} :root[data-theme="light"] body.os.workHomeOpen .top .hsearch, :root[data-theme="light"] body.os.workHomeOpen .top .auth button, :root[data-theme="light"] body.os.workHomeOpen #arvPill{ border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--line); box-shadow:var(--lift);color:var(--ink);font-weight:700} /* ⚡ THE ATTENTION CONTROL — "Lēmumi: N steidzami · N gaida" (paintPulse in index.html). ⛔ It is drawn from rows whose `dueOn` has arrived; there is NO urgency field in this product and this rule must never be read as licence to invent one. At 0 the control says so in words and this styling goes with it. */ :root[data-theme="light"] body.os.workHomeOpen .top .pulse, :root[data-theme="light"] body.os.inthread .top .pulse{ border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--line); box-shadow:var(--lift);color:var(--ink);font-weight:700} /* ⚡ OUR OWN MARK IN THE RAIL — no tile behind it. The contour has its own edges; a lavender pillow under it makes it read as a logo pasted onto a button rather than as the company's own mark standing in the list. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.ours{ background:transparent;box-shadow:none;color:var(--violet)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk .whOurMark{ width:32px;height:26px;display:block;overflow:visible} /* ═══ ROUND 2 (owner review, 2026-09-04 evening): "not even close yet" ═══════ What the review named, each with its rule here: rows carry a SECOND LINE; the fonts are the design's; the right-hand dock is skinned, not lost; the composer is the fat cream pill with its two clay verbs. */ /* ── fonts, all the way down ─────────────────────────────────────────────── The thread and the dock read their own font tokens (--osDisp, --f-body, --osMono), not --body/--disp — so Nunito reached the rail and stopped at the conversation. One face everywhere, or it is two products. */ :root[data-theme="light"] body.os.workHomeOpen, :root[data-theme="light"] body.os.inthread{ --osDisp:Nunito,Sora,sans-serif; --f-body:Nunito,'DM Sans',system-ui,sans-serif; --f-disp:Nunito,Sora,sans-serif; --osMono:'JetBrains Mono',ui-monospace,Menlo,monospace; --ws-ink:var(--ink); --ws-muted:var(--muted); --ws-faint:var(--faint); --ws-glass:var(--glass); --ws-glass-2:var(--cream); --ws-glass-line:var(--line); --ws-glass-shadow:var(--lift); --ws-cta:#8b6cff; } /* ── the rail row, two lines ─────────────────────────────────────────────── name over a soft secondary line, count and pulse in a right column. The secondary line is COUNTED (work-home.js placeSub / kindWord) — never a time nobody measured. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{ display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center; padding:6px 8px;font-size:13px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .lbl, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .lbl{display:grid;line-height:1.15;min-width:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .lbl .nm, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .lbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .sub, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .sub{ font-weight:600;font-size:10px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .sub:empty, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .sub:empty{display:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .right{display:grid;justify-items:end;gap:3px;flex:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .g, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .g{ font:500 10.5px var(--mono);color:var(--faint);margin-left:auto;flex:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on .sub{color:var(--ink);opacity:.7} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whBusy{margin-left:0} /* the grip stays a grip, and it stays in the right column */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .grip{grid-column:3;grid-row:1} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj{gap:10px;align-items:center} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.mklogo img[data-mark="portrait"]{ width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:var(--clay)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk.person{ width:28px;height:28px;background:transparent;box-shadow:none} /* ── Šodien with its three stats ───────────────────────────────────────────── */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today{display:grid;gap:8px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .t{display:flex;align-items:center;justify-content:space-between;gap:10px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .stat{ padding:6px 8px;border-radius:8px;background:var(--cream2);display:grid;text-align:left} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .stat b{font:700 14px var(--mono);color:var(--ink)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today .stat small{font:600 9.5px var(--font,var(--body));color:var(--faint);letter-spacing:.04em} /* ── the composer: one fat cream pill, two clay verbs ────────────────────── ⛔ The field is `.cwrap` and the verbs are `.sendPair`, two siblings in a grid — the design draws them as one pill. The pill goes on the field; the verbs sit flush against its right edge as clay buttons. One markup, the design's read. */ :root[data-theme="light"] body.os.inthread .composer{ display:grid;grid-template-columns:minmax(0,760px) auto;justify-content:center;align-items:center; column-gap:8px;padding-top:10px;padding-bottom:20px} :root[data-theme="light"] body.os.inthread .composer .cwrap{ min-height:52px;padding:8px 10px 8px 16px;border:0!important;border-radius:var(--r-pill)!important; background:var(--cream)!important;box-shadow:var(--lift)!important} :root[data-theme="light"] body.os.inthread .composer .cwrap:focus-within{box-shadow:var(--lift-2)!important} :root[data-theme="light"] body.os.inthread .composer .pfx{ font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)} :root[data-theme="light"] body.os.inthread .composer #in{font:600 14.5px/1.45 var(--body);color:var(--ink)} :root[data-theme="light"] body.os.inthread .composer #in::placeholder{color:var(--faint);font-weight:600} :root[data-theme="light"] body.os.inthread .composer #mic, :root[data-theme="light"] body.os.inthread .composer #clip{ border-radius:50%;border:1px solid var(--line);background:var(--cream2);color:var(--muted)} :root[data-theme="light"] body.os.inthread .composer .sendPair{ height:auto;border:0;background:transparent;box-shadow:none;overflow:visible;gap:8px; backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0} :root[data-theme="light"] body.os.inthread .composer .sendPair>button{ display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px; border:0;border-radius:var(--r-pill);font:800 13px var(--body);letter-spacing:0; box-shadow:var(--clay);transition:transform .15s,filter .15s} :root[data-theme="light"] body.os.inthread .composer .sendPair>button em{font-style:normal} :root[data-theme="light"] body.os.inthread .composer .sendPair>#send, :root[data-theme="light"] body.os.inthread .composer .sendPair>#send:not(:disabled){ background:var(--clay-peach);color:var(--amber)} :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit, :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit:hover:not(:disabled){ background:#8b6cff;color:#fff;border-left:0} :root[data-theme="light"] body.os.inthread .composer .sendPair>button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)} :root[data-theme="light"] body.os.inthread .composer .sendPair>button:disabled{opacity:.55} :root[data-theme="light"] body.os.inthread .composer .sendPair:has(.send.hot){box-shadow:none;border-color:transparent} /* ── the dock: NOTIEK · konteksts · rīki ──────────────────────────────────── */ :root[data-theme="light"] body.os.inthread .osDock{padding:14px 12px 96px;gap:2px} :root[data-theme="light"] body.os.inthread .osSec + .osSec{border-top:0} :root[data-theme="light"] body.os.inthread .osTog{ font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:12px 4px 6px} :root[data-theme="light"] body.os.inthread .osTog .c{font:400 10px var(--mono);color:var(--faint)} :root[data-theme="light"] body.os.inthread .osBody{gap:7px} /* every row is a cream card with the lift */ :root[data-theme="light"] body.os.inthread .osRow{ border:0;border-radius:var(--r-s);background:var(--cream);box-shadow:var(--lift);padding:9px 11px} :root[data-theme="light"] body.os.inthread a.osRow:hover, :root[data-theme="light"] body.os.inthread button.osRow:hover{background:var(--cream);box-shadow:var(--lift-2);transform:translateY(-1px)} :root[data-theme="light"] body.os.inthread .osRow .nm{font-weight:800;font-size:12.5px;color:var(--ink)} :root[data-theme="light"] body.os.inthread .osRow .d{font-size:11px;color:var(--muted)} :root[data-theme="light"] body.os.inthread .osRow .st{width:8px;height:8px;background:var(--line)} :root[data-theme="light"] body.os.inthread .osRow.s-used{background:var(--cream)} :root[data-theme="light"] body.os.inthread .osRow.s-used .st{background:var(--mint)} :root[data-theme="light"] body.os.inthread .osRow.s-avail .st{background:var(--line2)} :root[data-theme="light"] body.os.inthread .osRow.s-locked{opacity:1;border:1.5px dashed var(--line);box-shadow:none;background:transparent} :root[data-theme="light"] body.os.inthread .osEmpty{ border:1.5px dashed var(--line);border-radius:var(--r-s);color:var(--faint);font-weight:600} :root[data-theme="light"] body.os.inthread .osNew{ border:1.5px dashed var(--line);border-radius:var(--r-pill);color:var(--faint);font-weight:700;text-align:center} /* the loading rows: clay tone, not grey */ :root[data-theme="light"] body.os.inthread .osWaitRow{background:var(--cream2);border-radius:var(--r-s)} :root[data-theme="light"] body.os.inthread .osWaitRow i{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)} /* NOTIEK — the live-progress card: cream, an aurora bar that flows while the job runs, a green outline when it is done. ⛔ The bar is drawn only from a `pct` the producer measured; an unmeasured job gets the indeterminate rail, never a number. */ :root[data-theme="light"] body.os.inthread .osRow.osRun{ min-height:0;border:0;background:var(--cream);box-shadow:var(--lift);border-radius:var(--r-s)} :root[data-theme="light"] body.os.inthread .osRun .ic{color:var(--violet)} :root[data-theme="light"] body.os.inthread .osRunBar::before{height:8px;background:var(--cream2);box-shadow:inset 0 1px 2px rgba(43,36,64,.12)} :root[data-theme="light"] body.os.inthread .osRunBar i{ height:8px;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#7c5cff 60%,#f472b6); background-size:200% 100%;animation:clayFlow 1.6s linear infinite} @keyframes clayFlow{to{background-position:-200% 0}} :root[data-theme="light"] body.os.inthread .osRunBar b{font:600 11px var(--mono);color:var(--muted)} :root[data-theme="light"] body.os.inthread .osRow.osRun.s-used{outline:2px solid var(--mint);outline-offset:-2px} :root[data-theme="light"] body.os.inthread .osRow.osRun.s-used .osRunBar i{background:var(--mint);animation:none} :root[data-theme="light"] body.os.inthread .osRow.osRun.s-locked{ border:1.5px solid var(--amber);background:var(--clay-peach);box-shadow:none} :root[data-theme="light"] body.os.inthread .osRow.osRun.s-bad{border:1.5px solid var(--rose)} @media (prefers-reduced-motion:reduce){:root[data-theme="light"] body.os.inthread .osRunBar i{animation:none}} /* ── the header: account pill and the attention control as clay ───────────── */ :root[data-theme="light"] body.os.inthread .top, :root[data-theme="light"] body.os.workHomeOpen .top{ background:var(--glass);border-bottom:1px solid var(--line); backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)} :root[data-theme="light"] body.os.inthread .top #arvPill, :root[data-theme="light"] body.os.inthread .top .pulse, :root[data-theme="light"] body.os.inthread .top .hsearch{ border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--line); box-shadow:var(--lift);color:var(--ink);font-weight:700} :root[data-theme="light"] body.os.inthread .top .pulse b{color:var(--amber);font-weight:800} /* ── round-2 fixes measured on screen ─────────────────────────────────────── */ /* ⛔ FOUR CHILDREN, FOUR COLUMNS. The row now carries .h .lbl .right .grip; a three-column grid pushed the grip onto a second row and took the count with it, so "42" hung under the room name. The grip keeps a column of its own. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{ grid-template-columns:28px minmax(0,1fr) auto 14px;column-gap:10px;row-gap:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .grip{grid-column:4;justify-self:end} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .right{grid-column:3;grid-row:1} /* ⛔ THE COMPOSER STOPS AT THE DOCK. The thread pays for the rails only under the shell (.thread{padding:… var(--wh-dock)}); the plain conversation set a left inset for the anonymous rail and nothing on the right, so the two verbs ran under the dock and "Izpildi" was cut in half. --app-right is the width the dock's own sheet declares — the composer reads it and nothing else. And the band itself is bare: the design floats the pill on the world. */ :root[data-theme="light"] body.os.inthread .composer{ padding-left:calc(var(--app-left,0px) + 26px);padding-right:calc(var(--app-right,0px) + 26px); background:transparent;border-top:0} :root[data-theme="light"] body.os.inthread .composer::before{display:none} :root[data-theme="light"] body.os.workHomeOpen .composer{padding-left:20px;padding-right:20px} /* ── an app, opened in the middle column ────────────────────────────────── Owner, 2026-09-04: the chat sits in the middle, and the apps open THERE with everything they do. `.osApp` painted an opaque slab of --bg over the world; the app's card already wears the clay glass through the shared tokens, so the pane itself goes transparent and the world stays under it exactly as it does under the conversation. */ :root[data-theme="light"] body.os.inthread .osApp, :root[data-theme="light"] body.os.workHomeOpen .osApp{background:transparent;padding:14px 20px 24px} :root[data-theme="light"] .osApp .osAppCard{ border:0;border-radius:var(--r);background:var(--glass);box-shadow:var(--lift); backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)} /* Izpildi is one solid violet, the design's, not the door's aurora */ :root[data-theme="light"] body.os.inthread .composer .sendPair:has(.send.hot) .doit, :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit:not(:disabled){ background:#8b6cff;color:#fff;box-shadow:var(--clay)} /* the verb is solid violet in every state — disabled only dims it */ :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit, :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit:disabled, :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit:hover{ background:#8b6cff!important;background-image:none!important;color:#fff} /* ═══ ROUND 3 (owner: "do you like what you did?" — no) ═══════════════════ The centre of the screen, never skinned in rounds 1–2: the question, the answer as a CARD, the chips as pills, the receipt; the veil lifted off the world; the composer one pill; customer rows with their second line. */ /* ⛔ THE VEIL. work-screen.css lays a glass sheet over the whole exchange (.messageStage::before) and an aurora hairline down the answer's left edge — the reading paper of the previous design. Under clay the paper is the card itself, so both go, and the hills stay vivid behind the conversation. */ :root[data-theme="light"] body.os.inthread .messageStage::before{display:none} :root[data-theme="light"] body.os.inthread .msgs{padding:18px 28px 12px;gap:14px} /* ⛔ AND THE RIGHT-HAND GUTTER, for exactly the reason the left one needed fixing: `os-thread.css:199` reserves `padding-right:358px` at ≥1180 so the messages stop where the dock starts, and the shorthand above resets it to 28px — so every answer ran under the dock (owner, 2026-09-05: "chat not fitting in nicely"). Measured at 1400px: the answer's right edge sat at 1271 with the dock covering from 1104. Same specificity, `--app-right` as the width so a hidden dock reclaims the space by itself. */ :root[data-theme="light"] body.os.inthread .msgs, :root[data-theme="light"] body.os.inthread .t-head{ padding-right:calc(var(--app-right,0px) + 28px)} /* the question — the design's .q: 24px/800, a 4px violet rule, ≤34ch */ :root[data-theme="light"] body.os.inthread .m-you{ font:800 24px/1.2 var(--disp);letter-spacing:-.01em;text-wrap:balance;color:var(--ink); padding-left:14px;border-left:4px solid var(--violet);max-width:min(var(--ws-measure),34ch);margin:14px 0 0} /* ⛔ TWO RULES DREW TWO BARS. `work-screen.css:468` paints `.m-you::after` as a 3px accent bar and the clay skin above paints a 4px `border-left` — both are "the question's rule", so every question wore a double stripe (owner's screenshot, 2026-09-05). The clay skin owns the look here, so the older pseudo-element is switched off rather than the border removed. */ :root[data-theme="light"] body.os.inthread .m-you::after, :root[data-theme="light"] body.os.inthread .msgs .m-orc + .m-you::after{content:none} :root[data-theme="light"] body.os.inthread .m-you .pfx, :root[data-theme="light"] body.os.inthread .m-you .who{display:none} /* the answer — a cream card with the lift, the mark and the stamp in its head */ :root[data-theme="light"] body.os.inthread .m-orc{ margin:12px 0 0;padding:16px 20px 18px;border-left:0;border-image:none; border-radius:var(--r);background:var(--cream);box-shadow:var(--lift); max-width:var(--ws-measure);font:600 15px/1.55 var(--body);color:var(--ink);position:relative} :root[data-theme="light"] body.os.inthread .m-orc p{margin:0 0 12px} :root[data-theme="light"] body.os.inthread .m-orc strong, :root[data-theme="light"] body.os.inthread .m-orc b{font-weight:800} :root[data-theme="light"] body.os.inthread .m-orc .who{ font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--faint);margin:0 0 10px;gap:10px} :root[data-theme="light"] body.os.inthread .m-orc .who svg.bcMark{width:34px;height:28px} /* the receipt row — a dashed rule, then mono pills */ :root[data-theme="light"] body.os.inthread .m-orc .meta{ margin-top:12px;padding-top:10px;border-top:1px dashed var(--line); display:flex;gap:6px;flex-wrap:wrap;align-items:center;font:600 11px var(--mono);color:var(--faint)} :root[data-theme="light"] body.os.inthread .m-orc .meta>span, :root[data-theme="light"] body.os.inthread .m-orc .meta .tools .tb, :root[data-theme="light"] body.os.inthread .m-orc .meta .tools button{ padding:2px 8px;border-radius:var(--r-pill);background:var(--cream2);border:0;color:var(--faint);font:600 11px var(--mono)} /* the aurora hairline while the model works (the design's .answer.thinking) */ :root[data-theme="light"] body.os.inthread .m-orc:has(.bcMark.live)::before{ content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none; background:linear-gradient(120deg,#22d3ee,#7c5cff,#f472b6,#22d3ee);background-size:300% 300%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:clayAur 2.2s linear infinite} @keyframes clayAur{to{background-position:300% 0}} /* chips are pills: evidence in cream with a hairline, steps in lavender */ :root[data-theme="light"] body.os.inthread .chip-lbl{display:none} :root[data-theme="light"] body.os.inthread .chips{display:flex;flex-wrap:wrap;gap:7px;max-width:var(--ws-measure);margin:10px 0 0} :root[data-theme="light"] body.os.inthread .chips.steps{grid-template-columns:none;display:flex} :root[data-theme="light"] body.os.inthread .chips .chip, :root[data-theme="light"] body.os.inthread .chips.steps .chip{ display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill); font:700 11.5px var(--body);background:var(--cream);border:1px solid var(--line);color:var(--ink); box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .15s} :root[data-theme="light"] body.os.inthread .chips.steps .chip::after{display:none} :root[data-theme="light"] body.os.inthread .chips.steps .chip .mk{display:none} :root[data-theme="light"] body.os.inthread .chips.steps .chip, :root[data-theme="light"] body.os.inthread .chips.steps .chip.k-calc, :root[data-theme="light"] body.os.inthread .chips.steps .chip.k-act{ background:var(--lav);color:var(--violet);border-color:transparent;font-weight:700} :root[data-theme="light"] body.os.inthread .chips.steps .chip:hover{transform:translateY(-1px);box-shadow:var(--lift)} :root[data-theme="light"] body.os.inthread .chip.mod{background:var(--cream)} /* ── the composer is ONE pill ────────────────────────────────────────────── Two elements, one object: the field takes the left half of the pill, the verbs the right half, same cream, no gap, one soft drop shadow under both. */ :root[data-theme="light"] body.os.inthread .composer{column-gap:0} :root[data-theme="light"] body.os.inthread .composer .cwrap{ border-radius:var(--r-pill) 0 0 var(--r-pill)!important;padding-right:6px; box-shadow:0 10px 24px rgba(58,51,72,.08)!important} :root[data-theme="light"] body.os.inthread .composer .cwrap:focus-within{box-shadow:0 14px 30px rgba(58,51,72,.12)!important} :root[data-theme="light"] body.os.inthread .composer .sendPair{ align-self:stretch;display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 2px; background:var(--cream);border-radius:0 var(--r-pill) var(--r-pill) 0; box-shadow:0 10px 24px rgba(58,51,72,.08)} :root[data-theme="light"] body.os.inthread .composer .sendPair>button{height:40px;padding:0 14px} /* ── the header: Lēmumi as the cream pill with the amber count ───────────── */ :root[data-theme="light"] body.os .top .pulse, :root[data-theme="light"] body.os .top #pulse{ display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 8px; border-radius:var(--r-pill);background:var(--cream);box-shadow:var(--lift);border:1px solid var(--line); font:700 13px var(--body);color:var(--ink);max-width:none} :root[data-theme="light"] body.os .top .pulse b, :root[data-theme="light"] body.os .top #pulse b, :root[data-theme="light"] body.os .top #pulse em{color:var(--amber);font-weight:800;font-style:normal} :root[data-theme="light"] body.os .top #pulse img{width:24px;height:24px} /* ── customer rows: the family mark at rail size, never a slab ───────────── */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk img[data-mark="family"]{ width:28px;height:28px;object-fit:contain;border-radius:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj .mk:has(img[data-mark="family"]){ background:transparent;box-shadow:none} /* an empty attention control is no control — the pill shape must not outlive its content */ :root[data-theme="light"] body.os .top #pulse[hidden], :root[data-theme="light"] body.os .top #pulse:empty{display:none} /* ⛔ THE SECOND VEIL, AND THE HAIRLINE IT DREW. os-thread.css lays a white gradient over the messages (.msgs::before) whose LEFT EDGE sits exactly at the rail's width — the faint vertical line down the middle of every screenshot was that edge, not a border anywhere. Gone under clay. */ :root[data-theme="light"] body.os.inthread .msgs::before{display:none} /* ── the steps stay OPEN, as lavender pills under the answer ────────────── The design shows the next steps as a row of pills inside the card; the product had folded them behind a "NĀKAMIE SOĻI · 4" bar with two peek pills and a chevron. Under clay the body is always shown and the bar shrinks to the mono label the design uses over every chip row. */ :root[data-theme="light"] body.os.inthread .ns{margin-top:10px} :root[data-theme="light"] body.os.inthread .ns .ns-body{display:block;padding:0} :root[data-theme="light"] body.os.inthread .ns .ns-bar{ display:flex;align-items:center;gap:8px;width:auto;padding:0 0 6px;border:0;background:none; font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:default} :root[data-theme="light"] body.os.inthread .ns .ns-peek, :root[data-theme="light"] body.os.inthread .ns .ns-chev{display:none} :root[data-theme="light"] body.os.inthread .ns .chips.steps{flex-direction:row;align-items:center;flex-wrap:wrap;margin-top:0} :root[data-theme="light"] body.os.inthread .ns-more{ margin-top:8px;padding:4px 11px;border-radius:var(--r-pill);border:1.5px dashed var(--line); background:transparent;color:var(--faint);font:700 11px var(--body);cursor:pointer} /* the steps sit on the card itself — no second box around them */ :root[data-theme="light"] body.os.inthread .ns, :root[data-theme="light"] body.os.inthread .ns .ns-body{background:none;border:0;box-shadow:none;padding:0;border-radius:0} /* ═══ ROUND 4 (owner review, image 6–10) ═══════════════════════════════════ */ /* ⛔ NO DIMMING. The design paints the hills with NO wash at all (its .app is the picture, full stop); ours still carried a cream gradient over every world layer, and side by side it read as a screen under tracing paper. */ :root[data-theme="light"] body.os.workHomeOpen .whPlane::after, :root[data-theme="light"] body.os.inthread.workHomeOpen .thread::after, :root[data-theme="light"] body.os.inthread .thread::after{background:none} html.whBoot:not([data-theme="dark"]) body.workHomeOpen .whPlane::after{background:none} /* the design's column widths: rail 300, dock 296 */ /* ⚡ THE RAIL IS WIDER AND ITS GUTTERS ARE THINNER (owner, 2026-09-08: "that navigation has to be taking more space with less spacing on right/left, so that texts in the buttons can be read longer and clearer"). 262 → 300 with the gutters cut below buys ~46 px of readable room name per row, and the `•••` fold that used to sit under every row is gone, so the rail is also twelve lines shorter. ⛔ Both halves are needed: widening alone would have been paid straight back to padding. */ :root[data-theme="light"] body.os.workHomeOpen, /* ⚡ The two rails are ONE width (owner, 2026-09-09) so the middle column sits centred between them — the 4 px difference read as "not precisely centred". */ :root[data-theme="light"] body.os.inthread{--wh-nav:262px;--wh-dock:262px;--ws-rail:262px;--ws-dock:262px} /* ⛔ Not a literal: the rail and the dock read the SAME variable, so the middle column (absolute left/right from the same two vars) is centred by construction. */ :root[data-theme="light"] body.os.inthread .osDock{width:var(--ws-dock)} :root[data-theme="light"] body.os.inthread{--app-right:296px} /* ⛔ …and the same token at the same specificity when the dock is gone. The line above is (0,2,2); the resets in os-thread.css:205 and work-screen.css:366 are `body.os.inthread{--app-right:0px}` (0,2,1) inside a media query — so below 1180 the messages kept a 296px gutter for a dock that was not there. Measured 2026-09-05 at 390px: `.msgs` padding-right 324px, the answer column 40px wide, every card inside it 2px. A themed rule silently outranking a layout rule, for the fourth time this week. */ @media (max-width:1179px){:root[data-theme="light"] body.os.inthread{--app-right:0px}} :root[data-theme="light"] body.os.workHomeOpen .whAppNav{width:var(--wh-nav)} /* the private block needs no heading — the name IS the heading */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine h4{display:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine{padding-top:4px} /* ⛔ THE FIRST QUESTION MUST NOT START UNDER THE CRUMB BAR. The header of the middle block is sticky over the messages, and the messages began at y=0 beneath it, so the top of the first question was cut until the person scrolled. The messages start below the bar. */ :root[data-theme="light"] body.os.inthread .msgs{padding-top:52px} :root[data-theme="light"] body.os.inthread .t-head{ background:transparent;border:0;padding:12px 28px 6px; font:600 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--faint)} /* the composer's bolt is a coloured spark, not a white outline */ :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit svg{ fill:#ffd166;stroke:#ffd166;filter:drop-shadow(0 0 3px rgba(255,209,102,.7))} :root[data-theme="light"] body.os.inthread .composer .sendPair>#send svg{stroke:var(--amber)} :root[data-theme="light"] body.os.inthread .composer .cwrap, :root[data-theme="light"] body.os.inthread .composer .sendPair{min-height:56px} :root[data-theme="light"] body.os.inthread .composer #in{font:600 15px/1.45 var(--body)} :root[data-theme="light"] body.os.inthread .composer .sendPair>button{font:800 13.5px var(--body)} /* the block's foot: a dashed rule, then the receipt pills — every block */ :root[data-theme="light"] body.os.inthread .m-orc .meta:empty{display:none} /* evidence chips: mint when read, dashed when a source is missing */ :root[data-theme="light"] body.os.inthread .chips .chip.ok, :root[data-theme="light"] body.os.inthread .chips .chip.read{background:var(--clay-mint);color:var(--mint);border-color:transparent} :root[data-theme="light"] body.os.inthread .chips .chip.miss, :root[data-theme="light"] body.os.inthread .chips .chip.absent{border-style:dashed;color:var(--faint);background:transparent} :root[data-theme="light"] body.os.inthread .chips .chip.warn{background:var(--clay-peach);color:var(--amber);border-color:transparent} /* while the answer is prepared: the ring, and "domā…" muted text */ :root[data-theme="light"] body.os.inthread .m-orc:has(.bcMark.live) .body{color:var(--muted)} /* ═══ ROUND 5 (owner review, images 11–13) ═════════════════════════════════ */ /* ⛔ AN APP MUST NOT COVER THE RAIL. .osApp starts at --app-left, which only the anonymous rail sets; under the shell nobody set it, so every opened app began at x=0 and the whole left rail vanished behind it. The pane sits between the shell's two rails, like the conversation it replaces. */ :root[data-theme="light"] body.os.workHomeOpen .osApp{left:var(--wh-nav);right:var(--wh-dock)} /* ⚡ FOCUS MODE (owner, 2026-09-08). The pane asks, `index.html` grants, and the grant is this class. ⛔ It ZEROES THE COLUMNS rather than hiding the rails by selector: `.osApp` reads --wh-nav/--wh-dock, and so do ~a dozen other rules that pad to the rail. Setting the two numbers to 0 moves every one of them together; hiding two elements would leave the rest padding to rails that are no longer there. */ :root[data-theme="light"] body.os.appFocus{--wh-nav:0px;--wh-dock:0px;--ws-rail:0px;--ws-dock:0px} :root[data-theme="light"] body.os.appFocus .whAppNav, :root[data-theme="light"] body.os.appFocus .osDock, :root[data-theme="light"] body.os.appFocus .top{display:none} :root[data-theme="light"] body.os.appFocus .osApp{left:0;right:0;top:0;border-radius:0} @media (max-width:1180px){:root[data-theme="light"] body.os.workHomeOpen .osApp{right:0}} @media (max-width:860px){:root[data-theme="light"] body.os.workHomeOpen .osApp{left:0}} /* rows tighter under each other, as in the design (40px pitch, not 46) */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{padding:4px 8px;margin:1px 0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .rooms{gap:0;margin:1px 0 4px 14px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room .lbl{line-height:1.1} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj{padding:5px 10px} /* ═══ ROUND 6 — the rail's measured row pitch (spec §4, 2026-09-05) ════════ ⚡ 40px PARENT ROWS, 38px ROOM ROWS. The pitch was whatever the padding and the two-line label happened to add up to, so a workplace with a subtitle and one without were different heights and the column read ragged. min-height sets the floor; the padding still decides where a taller row grows. ⛔ min-height, not height: a long name that wraps must be allowed to. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj{min-height:40px;padding:5px 10px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room{min-height:38px} /* the connector column survives the smaller radius — the rooms keep their rule and each room keeps its 10px tick into it */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .rooms{border-left:1.5px solid var(--line)} /* ⚡ THE HISTORY DISCLOSURE (task 7616d579). It wears the section-heading voice it replaced — the same mono caps `h4` used — so the rail did not gain a new widget language for it. The count sits where every other group's count sits. ⛔ Its marker turns; the rows below it do not move the places. */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs{margin:2px 0 6px} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary{ display:flex;align-items:center;gap:7px;min-height:30px;padding:9px 10px 6px; border-radius:var(--r-s);cursor:pointer;list-style:none; font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--faint)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary::-webkit-details-marker{display:none} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary::before{content:'›';font-size:12px;letter-spacing:0;transition:transform .18s} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs[open]>summary::before{transform:rotate(90deg)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary:hover{background:var(--cream2);color:var(--muted)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary .c{margin-left:auto;font:500 10px var(--mono);letter-spacing:0} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConv{min-height:34px;border-radius:var(--r-s)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConv .whRoomName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ⚡ A VISIBLE FOCUS RING ON EVERY RAIL CONTROL (spec §7). */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbj:focus-visible, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .chv:focus-visible, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room:focus-visible, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .today:focus-visible, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConvs>summary:focus-visible, :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whConv:focus-visible{outline:2px solid var(--violet);outline-offset:2px} /* the icons need their ground: a real drop shadow, the design's depth */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .km{ width:28px;height:28px;filter:drop-shadow(0 3px 4px rgba(43,36,64,.28)) drop-shadow(0 1px 1px rgba(43,36,64,.18))} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .room.on .km{ filter:drop-shadow(0 4px 10px rgba(124,92,255,.45)) drop-shadow(0 1px 1px rgba(43,36,64,.2))} :root[data-theme="light"] body.os.workHomeOpen .whHome .ln .t .km, :root[data-theme="light"] body.os.workHomeOpen .whHome .appc img{filter:drop-shadow(0 3px 4px rgba(43,36,64,.24))} /* the person's own row, when it is the place you stand: cream lift + the violet bar, like a room — a flat lavender slab behind a portrait read wrong */ :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine .sbjrow.here{ background:var(--cream);box-shadow:var(--lift);position:relative} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .whMine .sbjrow.here::before{ content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:4px;height:18px;border-radius:99px;background:var(--violet)} :root[data-theme="light"] body.os.workHomeOpen .whAppNav .sbjrow.here{background:var(--lav)} /* ⛔ THE VERBS ARE SMALL PILLS INSIDE THE BIG ONE, not two slabs filling its height. The old sheet's .sendPair kept overflow:hidden and align-stretch, so the buttons were clipped square on the container's edge and stretched to 56px — image 14, top. The design: 36px pills, 8px inside the composer's right edge, peach and violet, fully rounded. */ :root[data-theme="light"] body.os.inthread .composer .sendPair{ overflow:visible!important;align-self:center;height:56px;padding:0 8px 0 0;gap:6px;align-items:center} :root[data-theme="light"] body.os.inthread .composer .sendPair>button, :root[data-theme="light"] body.os.inthread .composer .sendPair>#send, :root[data-theme="light"] body.os.inthread .composer .sendPair>#doit{ height:36px!important;min-height:0;padding:0 14px!important;border-radius:999px!important; font:800 13px var(--body)!important;letter-spacing:0;line-height:1} :root[data-theme="light"] body.os.inthread .composer .sendPair>button svg{width:14px;height:14px} :root[data-theme="light"] body.os.inthread .composer .cwrap, :root[data-theme="light"] body.os.inthread .composer .sendPair{min-height:52px;height:52px} :root[data-theme="light"] body.os.inthread .composer .cwrap{padding-top:6px;padding-bottom:6px;align-items:center} /* ⛔ THE SEAM. The composer is two elements drawn as one pill; at the boundary a hairline of the world showed between them (owner, image 15). The verbs' half now overlaps the field by 2px and carries no left edge of its own — one pill. */ :root[data-theme="light"] body.os.inthread .composer .sendPair{margin-left:-2px;padding-left:2px;border-left:0;box-shadow:0 10px 24px rgba(58,51,72,.08)} :root[data-theme="light"] body.os.inthread .composer .cwrap{border-right:0!important;box-shadow:0 10px 24px rgba(58,51,72,.08)!important} :root[data-theme="light"] body.os.inthread .composer .sendPair>#send{margin-left:0} /* one shadow for the whole pill: each half carried its own, and the second half's began abruptly at the seam. The composer's filter shadows the two halves as one silhouette. */ :root[data-theme="light"] body.os.inthread .composer{filter:drop-shadow(0 10px 14px rgba(58,51,72,.11))} :root[data-theme="light"] body.os.inthread .composer .cwrap{box-shadow:none!important} :root[data-theme="light"] body.os.inthread .composer .cwrap:focus-within{box-shadow:none!important} :root[data-theme="light"] body.os.inthread .composer .sendPair{box-shadow:none} /* ── NOTIEK, the design's card (owner, 2026-09-05) ─────────────────────────── */ :root[data-theme="light"] body.os.inthread .osRow.osRun{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px 11px} :root[data-theme="light"] body.os.inthread .osRun .ic{width:30px;height:30px;display:grid;place-items:center} :root[data-theme="light"] body.os.inthread .osRun .ic img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(43,36,64,.22))} :root[data-theme="light"] body.os.inthread .osRun.is-running .ic img{animation:clayBob 1.6s ease-in-out infinite alternate} @keyframes clayBob{from{transform:translateY(1px) rotate(-3deg)}to{transform:translateY(-3px) rotate(3deg)}} :root[data-theme="light"] body.os.inthread .osRun .nm{display:flex;align-items:center;gap:8px;font-weight:800} :root[data-theme="light"] body.os.inthread .osRunReady{margin-left:auto;font:800 11px var(--body);color:var(--mint)} /* the step strip: dot + word, the current one pulsing violet, done ones mint */ :root[data-theme="light"] body.os.inthread .osRunSteps{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;font-family:var(--body)} :root[data-theme="light"] body.os.inthread .osRunSteps .js{display:inline-flex;align-items:center;gap:4px;font:600 10.5px var(--body);color:var(--faint)} :root[data-theme="light"] body.os.inthread .osRunSteps .js::before{content:'';width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)} :root[data-theme="light"] body.os.inthread .osRunSteps .js.now{color:var(--violet)} :root[data-theme="light"] body.os.inthread .osRunSteps .js.now::before{border-color:var(--violet);animation:clayPulse 1.2s infinite} :root[data-theme="light"] body.os.inthread .osRunSteps .js.done{color:var(--mint)} :root[data-theme="light"] body.os.inthread .osRunSteps .js.done::before{background:var(--mint);border-color:var(--mint)} /* the bar: aurora flowing while it runs, the indeterminate rail in the same hand, mint and still when it is done */ :root[data-theme="light"] body.os.inthread .osRunBar{margin-top:8px} :root[data-theme="light"] body.os.inthread .osRunRail{height:8px!important;margin-top:8px!important;background:var(--cream2)!important;box-shadow:inset 0 1px 2px rgba(43,36,64,.12)} :root[data-theme="light"] body.os.inthread .osRunRail i{background:linear-gradient(90deg,#22d3ee,#7c5cff 60%,#f472b6)!important;background-size:200% 100%!important;animation:clayFlow 1.6s linear infinite!important;opacity:1!important} :root[data-theme="light"] body.os.inthread .osRun.is-done{outline:2px solid var(--mint);outline-offset:-2px} :root[data-theme="light"] body.os.inthread .osRun.is-done .osRunBar i{background:var(--mint);animation:none} :root[data-theme="light"] body.os.inthread .osRun.is-done .osRunBar b{display:none} :root[data-theme="light"] body.os.inthread .osRunOpen{ display:inline-flex;margin-top:8px;padding:6px 12px;border-radius:var(--r-pill); background:#8b6cff;color:#fff;font:800 11.5px var(--body);box-shadow:var(--clay)} :root[data-theme="light"] body.os.inthread .osRun .st{display:none} /* ── the facts a dock card carries — a cream plate, one row per fact ──────── Owner, 2026-09-05, on the Registry card: a label/value stack that broke "Liepāja, Friča Brīvzemnieka iela 7" mid-address. The plate is the clay version of the passport: inset cream, dashed rules between rows, the label in small caps, the value in the body face (ids and dates in mono). A long value (`li.wide`) takes the whole row and wraps; a register state (`li.pill`) is a clay pill; the number you should see first (`li.big`) is the hero with its label underneath. ⛔ Every fact stays, including a stated absence ("tax debt · none") — the layout holds them, it does not thin them. */ :root[data-theme="light"] body.os.inthread .wsFacts{ margin:10px 0 0;padding:2px 10px;gap:0;border-radius:var(--r-s);background:var(--cream2); box-shadow:inset 0 1px 2px rgba(43,36,64,.10),inset 0 -1px 0 rgba(255,255,255,.7)} /* ⛔ A WRAPPED LABEL COLLIDED WITH ITS VALUE. The label column was 74px, so "NODOKĻU PARĀDS" wrapped to two lines while `align-items:baseline` pinned the value to the FIRST line's baseline — the second line then ran under "nav" (owner's screenshot, 2026-09-05). Wider column, aligned to the top, and the label may hyphenate rather than push the value. */ :root[data-theme="light"] body.os.inthread .wsFacts li{ grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:start;padding:7px 0; border-bottom:1px dashed var(--line);font:600 12px/1.35 var(--body);color:var(--ink)} :root[data-theme="light"] body.os.inthread .wsFacts li:last-child{border-bottom:0} :root[data-theme="light"] body.os.inthread .wsFacts li b{ font:800 9.5px/1.5 var(--body);letter-spacing:.09em;color:var(--faint); overflow-wrap:anywhere;hyphens:auto;padding-top:1px} :root[data-theme="light"] body.os.inthread .wsFacts li span.mono{font:600 11.5px/1.35 var(--mono);color:var(--ink)} :root[data-theme="light"] body.os.inthread .wsFacts li.wide{grid-template-columns:1fr;gap:2px} :root[data-theme="light"] body.os.inthread .wsFacts li.wide span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;overflow-wrap:anywhere} :root[data-theme="light"] body.os.inthread .wsFacts li.pill span{ display:inline-block;justify-self:start;padding:2px 9px;border-radius:var(--r-pill); background:var(--surf2);color:var(--muted);font:800 10.5px/1.5 var(--body);letter-spacing:.02em} :root[data-theme="light"] body.os.inthread .wsFacts li.pill.st-active span{background:var(--okbg);color:var(--mint)} :root[data-theme="light"] body.os.inthread .wsFacts li.pill.st-liquidation span{background:var(--clay-peach);color:var(--amber)} @media (prefers-reduced-motion:reduce){:root[data-theme="light"] body.os.inthread .osRun.is-running .ic img,:root[data-theme="light"] body.os.inthread .osRunSteps .js.now::before{animation:none}} /* ═══ THE LANDING IN THE CLAY WORLD (owner, 2026-09-05: "the whole landing page in the new design as the workspace — keep the buddy, the texts, the info blocks, rebuild into the new colour and design scheme") ═══════════ The markup, the copy, the buddy stage and every block stay; only the material changes: the clay hills for the sky, cream glass for the door, pills for the rows and the chips, Nunito, one violet, the clay verbs. */ :root[data-theme="light"] body{ --bg:#f4efe6; --ink:#2b2440; --muted:#6b6380; --faint:#9a92ad; --line:rgba(43,36,64,.10); --line2:rgba(43,36,64,.20); --surf:rgba(43,36,64,.045); --surf2:rgba(43,36,64,.085); --panel:#fffbf4; --panelT:rgba(255,251,244,.94); --askT:rgba(255,251,244,.88); --violet:#7c5cff; --cyan:#22d3ee; --mint:#2f7a5c; --lime:#8fbf3a; --glowA:rgba(124,92,255,.10); --glowB:rgba(246,210,194,.16); --shadow:rgba(58,51,72,.18); --cream:#fffbf4; --cream2:#f8f2e8; --lav:#e5dcff; --lav2:#efe9ff; --clay-mint:#dff1e8; --clay-peach:#fbd9c9; --glass:rgba(255,251,244,.74); --glassT:rgba(255,251,244,.58); --lift:inset 0 2px 0 rgba(255,255,255,.8),0 10px 24px rgba(58,51,72,.08); --lift-2:inset 0 2px 0 rgba(255,255,255,.8),0 18px 44px rgba(58,51,72,.14); --clay:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(58,51,72,.14),0 8px 18px rgba(124,92,255,.22); --r:22px; --r-s:12px; --r-pill:999px; --body:Nunito,'DM Sans',-apple-system,system-ui,sans-serif; --disp:Nunito,Sora,'Space Grotesk',sans-serif; } /* the sky becomes the hills; the painted world, the orbs, the veil and the hero backdrop are the previous design's atmosphere and step aside */ :root[data-theme="light"] body:not(.inthread){background:#f4efe6 url(/art/os/bg-clay.webp) center/cover fixed no-repeat} :root[data-theme="light"] html.immBoot{background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat!important} :root[data-theme="light"] #void .world,:root[data-theme="light"] #void .veil,:root[data-theme="light"] #void .o1, :root[data-theme="light"] #void .o2,:root[data-theme="light"] #void .o3,:root[data-theme="light"] #void .grain, :root[data-theme="light"] #void .heroBg,:root[data-theme="light"] #void .dust{display:none!important} :root[data-theme="light"] #void,:root[data-theme="light"] #void.land{background:transparent} :root[data-theme="light"] #void::before,:root[data-theme="light"] #void::after{display:none} /* type */ :root[data-theme="light"] #void h1,:root[data-theme="light"] #void h2,:root[data-theme="light"] #void .hero h1{ font-family:var(--disp);font-weight:800;letter-spacing:-.02em;color:var(--ink)} :root[data-theme="light"] #void h1 .lit,:root[data-theme="light"] #void h1 b.lit{ background:linear-gradient(90deg,#7c5cff,#b48cff 55%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="light"] #void .hero p,:root[data-theme="light"] #void .heroLead{font-family:var(--body);color:var(--muted)} /* the door: cream glass, the clay radius, the lift */ :root[data-theme="light"] #void .doorStage.launchPad{ background:var(--glass);border:0;border-radius:var(--r);box-shadow:var(--lift-2); backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)} :root[data-theme="light"] #void .partnerSpotlight{background:transparent;border:0;box-shadow:none} :root[data-theme="light"] #void .partnerSpotlight::before,:root[data-theme="light"] #void .partnerSpotlight::after{display:none} :root[data-theme="light"] #void .psJourney{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift)} :root[data-theme="light"] #void .psPresence{border-radius:var(--r);overflow:hidden} /* the option rows: cream pills, the family icon at 26px, lavender when chosen */ :root[data-theme="light"] #void .stop{ background:var(--cream2);border:0;border-radius:var(--r-pill);box-shadow:none; font:700 14px var(--body);color:var(--ink);transition:transform .15s,box-shadow .15s} :root[data-theme="light"] #void .stop:hover{background:var(--cream);box-shadow:var(--lift);transform:translateY(-1px)} :root[data-theme="light"] #void .stop.on{background:var(--lav);box-shadow:var(--lift)} :root[data-theme="light"] #void .stop .n,:root[data-theme="light"] #void .stop .k{ width:30px;height:30px;border-radius:9px;background:var(--lav2);color:var(--violet);font:800 10px var(--mono)} :root[data-theme="light"] #void .stop img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(43,36,64,.26))} /* the composer: the same pill as the workspace, the same two verbs */ :root[data-theme="light"] #void .qrow{background:var(--cream)!important;border:0!important;border-radius:var(--r-pill)!important;box-shadow:none!important;min-height:56px} :root[data-theme="light"] #void .partnerCanvas .card{filter:drop-shadow(0 10px 14px rgba(58,51,72,.11))} :root[data-theme="light"] #void .qrow textarea{font:600 15px/1.45 var(--body);color:var(--ink)} :root[data-theme="light"] #void .qrow textarea::placeholder{color:var(--faint);font-weight:600} :root[data-theme="light"] #void .qrow .sendPair{background:transparent!important;border:0!important;box-shadow:none!important;gap:6px;padding:0 4px 0 0;overflow:visible!important} :root[data-theme="light"] #void .qrow .sendPair>button{ height:36px!important;min-height:0;padding:0 14px!important;border-radius:999px!important;border:0; font:800 13px var(--body)!important;box-shadow:var(--clay);color:#fff} :root[data-theme="light"] #void .qrow .sendPair>.send,:root[data-theme="light"] #void .qrow .sendPair>.send.hot{background:var(--clay-peach);color:var(--amber)} :root[data-theme="light"] #void .qrow .sendPair>.doit,:root[data-theme="light"] #void .qrow .sendPair:has(.send.hot) .doit{background:#8b6cff!important;background-image:none!important;color:#fff} :root[data-theme="light"] #void .qrow .sendPair>.doit svg{fill:#ffd166;stroke:#ffd166} :root[data-theme="light"] #void .qrow .sendPair>.send svg{stroke:var(--amber)} :root[data-theme="light"] #void .qrow .mic,:root[data-theme="light"] #void .qrow .clip{border-radius:50%;background:var(--cream2);border:1px solid var(--line);color:var(--muted)} /* the river of examples: cream pills with a hairline */ :root[data-theme="light"] #void .immRow button,:root[data-theme="light"] #void .seed{ background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:none; font:700 13px var(--body);color:var(--ink)} :root[data-theme="light"] #void .immRow button:hover{background:var(--lav);border-color:transparent;color:var(--violet)} /* the shelf of things it can do */ :root[data-theme="light"] #void .exCard{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift)} :root[data-theme="light"] #void .exCard:hover{box-shadow:var(--lift-2)} :root[data-theme="light"] #void .exArt{background:var(--cream2);border-radius:var(--r-s);box-shadow:none} :root[data-theme="light"] #void .exArt img{mix-blend-mode:normal;filter:drop-shadow(0 8px 12px rgba(43,36,64,.18))} :root[data-theme="light"] #void .exCard .tag,:root[data-theme="light"] #void .exR .exR-tag{font-family:var(--mono);color:var(--faint);letter-spacing:.14em} :root[data-theme="light"] #void .exLine{font:700 14px/1.35 var(--body);color:var(--ink)} :root[data-theme="light"] #void .exOpen{background:var(--lav);color:var(--violet);border:0;border-radius:var(--r-pill);font:800 13px var(--body)} /* the proof band and the footer */ :root[data-theme="light"] #void .pbCard{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift)} :root[data-theme="light"] #void .pbJoin{background:#8b6cff;color:#fff;border:0;border-radius:var(--r-pill);box-shadow:var(--clay);font:800 13px var(--body)} :root[data-theme="light"] #void .pbFrame{border-radius:var(--r-s)} :root[data-theme="light"] #void footer.foot,:root[data-theme="light"] #void footer{ background:var(--glass);border:0;border-radius:var(--r);box-shadow:var(--lift);font-family:var(--body);color:var(--muted)} :root[data-theme="light"] #void footer .flinks a{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);font:700 12px var(--body)} /* the header: cream pills */ :root[data-theme="light"] body:not(.inthread) .top{background:transparent;border:0} :root[data-theme="light"] body:not(.inthread) .top::before{display:none} :root[data-theme="light"] body:not(.inthread) .top .auth button,:root[data-theme="light"] body:not(.inthread) .top #arvPill, :root[data-theme="light"] body:not(.inthread) .top .hsearch{ background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--lift);color:var(--ink);font:700 13px var(--body)} /* the cookie bar, in the same hand */ :root[data-theme="light"] .ck{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift-2);color:var(--muted);font-family:var(--body)} :root[data-theme="light"] .ck button{border-radius:var(--r-pill);font:800 12.5px var(--body);border:1px solid var(--line);background:var(--cream2);color:var(--ink)} :root[data-theme="light"] .ck button.primary,:root[data-theme="light"] .ck button:last-child{background:#8b6cff;color:#fff;border:0;box-shadow:var(--clay)} /* ═══ THE SIGN-IN GATE IN THE CLAY WORLD (owner, 2026-09-05) ═══════════════ The buddy's stage on the left stands on the hills; the ask on the right is cream, Nunito, the step line in mono violet, one pill for the address and the clay verb to send the code. Same material as the door behind it. */ :root[data-theme="light"] #gateReg .grModal,:root[data-theme="light"] #gateReg.immGate .grModal{ background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift-2),0 40px 90px -40px rgba(58,51,72,.45)} :root[data-theme="light"] #gateReg .imgStage{ background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat;border-radius:var(--r) 0 0 var(--r)} :root[data-theme="light"] #gateReg .imgStage::before,:root[data-theme="light"] #gateReg .imgStage::after{display:none} :root[data-theme="light"] #gateReg .imgKt,:root[data-theme="light"] #gateReg .imgK{ font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink);text-transform:uppercase} :root[data-theme="light"] #gateReg .imgSay{ background:var(--cream);border-radius:var(--r-s) var(--r-s) var(--r-s) 4px;box-shadow:var(--lift); font:600 13px/1.5 var(--body);color:var(--ink)} :root[data-theme="light"] #gateReg .imgSay b{color:var(--violet);font-weight:800} :root[data-theme="light"] #gateReg .imgBud img{filter:drop-shadow(0 14px 18px rgba(124,92,255,.35))} /* the ask */ :root[data-theme="light"] #gateReg .imgSteps{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--faint);gap:10px} :root[data-theme="light"] #gateReg .imgSteps span{color:var(--faint)} :root[data-theme="light"] #gateReg .imgSteps span.on{color:var(--violet)} :root[data-theme="light"] #gateReg .imgSteps span::before{background:var(--line)} :root[data-theme="light"] #gateReg .imgSteps span.on::before{background:var(--violet)} :root[data-theme="light"] #gateReg #grT{font:800 24px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink)} :root[data-theme="light"] #gateReg #grP{font:600 13.5px/1.5 var(--body);color:var(--muted)} :root[data-theme="light"] #gateReg .auOr{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint)} :root[data-theme="light"] #gateReg .auOr::before,:root[data-theme="light"] #gateReg .auOr::after{background:var(--line)} :root[data-theme="light"] #gateReg .auin,:root[data-theme="light"] #gateReg.immGate .auin{ background:var(--cream2)!important;border:1px solid var(--line)!important;border-radius:var(--r-pill)!important; padding:14px 18px;font:600 15px var(--body);color:var(--ink);box-shadow:none} :root[data-theme="light"] #gateReg .auin:focus{border-color:var(--violet)!important;box-shadow:0 0 0 4px rgba(124,92,255,.14)} :root[data-theme="light"] #gateReg .auin::placeholder{color:var(--faint);font-weight:600} :root[data-theme="light"] #gateReg .pbtn,:root[data-theme="light"] #gateReg.immGate .pbtn{ background:#8b6cff!important;background-image:none!important;color:#fff!important;border:0;border-radius:var(--r-pill)!important; font:800 14px var(--body)!important;box-shadow:var(--clay);height:48px} :root[data-theme="light"] #gateReg .pbtn:hover{filter:brightness(1.04);transform:translateY(-1px)} /* Google's own button keeps its identity; its frame follows the pill */ :root[data-theme="light"] #gateReg #auGBtn{display:flex;justify-content:center} :root[data-theme="light"] #gateReg #auGBtn>div{border-radius:999px;overflow:hidden;box-shadow:var(--lift)} :root[data-theme="light"] #gateReg .why,:root[data-theme="light"] #gateReg #grW{font:600 12px/1.5 var(--body);color:var(--faint)} :root[data-theme="light"] #gateReg .why a,:root[data-theme="light"] #gateReg #grW a{color:var(--violet)} :root[data-theme="light"] #gateReg .lnk,:root[data-theme="light"] #gateReg #grLost,:root[data-theme="light"] #gateReg #auBack{ font:700 12px var(--body);color:var(--faint);background:transparent;border:0} :root[data-theme="light"] #gateReg .xbtn,:root[data-theme="light"] #gateReg #grX{ background:var(--cream2);border:1px solid var(--line);border-radius:50%;color:var(--muted)} /* the veil behind the gate: the world, blurred, not greyed */ :root[data-theme="light"] #gateReg .bg{background:rgba(244,239,230,.55);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)} /* the code step shares the same hand */ :root[data-theme="light"] #gateReg .auin.code{font:800 22px var(--mono);letter-spacing:.3em;text-align:center} :root[data-theme="light"] #gateReg .ausent,:root[data-theme="light"] #gateReg .aumsg{font:600 13px/1.5 var(--body);color:var(--muted)} /* the subscription gate, same material */ :root[data-theme="light"] #gateSub .modal{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift-2)} :root[data-theme="light"] #gateSub .pbtn{background:#8b6cff;background-image:none;color:#fff;border-radius:var(--r-pill);font:800 14px var(--body);box-shadow:var(--clay)} :root[data-theme="light"] #gateReg .lost,:root[data-theme="light"] #gateReg .lost::before,:root[data-theme="light"] #gateReg .lost::after{background:transparent;border:0;box-shadow:none} :root[data-theme="light"] #gateReg .lost{font:700 12px var(--body);color:var(--faint);text-align:center} /* ═══ THE LANDING, SECOND PASS (owner, 2026-09-05, images 21–24) ═══════════ */ /* the option rows ARE the workspace's rail rows: icon 28px with its ground, name 700, the note as the soft second line, lavender when chosen */ :root[data-theme="light"] #void .launchPad .stop,:root[data-theme="light"] #void .stop{ display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center; min-height:0;padding:9px 14px 9px 12px;border-radius:var(--r-pill); background:var(--cream2);border:0;box-shadow:none;color:var(--ink)} :root[data-theme="light"] #void .stop:hover{background:var(--cream);box-shadow:var(--lift);transform:translateY(-1px)} :root[data-theme="light"] #void .stop.on,:root[data-theme="light"] #void .launchPad .stop.on{ background:var(--lav);box-shadow:var(--lift)} /* ── THE CONVERSATION YOU PARKED, PROMOTED WHERE IT ALREADY LIVES ──────── The row is the way back to a parked conversation (the floating pill that used to cover the starter list is gone): a violet edge on the leading side, the arrow held out rather than resting, the chip reading PARKED. ⛔ AND CLAY IS NOT THE LAST SHEET. index.html links work-clay.css at 4676 and landing-progress.css at 4677 — so on the door the LAST word belongs to landing-progress, whose `:root[data-theme="light"] #void .psJourney .stop.on` is (1 id, 5 classes) and ties with the rule below, then wins on order. It was measured doing exactly that: the promoted row came back #ece4ff with `box-shadow:none` instead of --lav with a lift, while the ::before edge — which nothing else claims — painted correctly. So the general rule stays for every other surface, and the door gets its own scoped copy that outranks the later sheet at (1 id, 6 classes). ⛔ Never "fix" this by moving a link tag: the order was chosen for the progress sheet, and reordering it moves the defect somewhere nobody is looking. */ :root[data-theme="light"] #void .stop.wsConv.wsParked{ background:var(--lav);box-shadow:var(--lift),0 0 0 3px rgba(124,92,255,.16)} :root[data-theme="light"] #void .stop.wsConv.wsParked::before{ content:'';position:absolute;left:0;top:14%;bottom:14%;width:3px; border-radius:0 3px 3px 0;background:var(--violet)} :root[data-theme="light"] #void .stop.wsConv.wsParked .pathGo{opacity:1;transform:translateX(3px)} :root[data-theme="light"] #void .stop.wsConv.wsParked .wsOn{ color:var(--violet);border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.16)} /* the door's own copy — outranks landing-progress.css, which is linked after this file and claims .psJourney .stop.on at the same weight as the above */ :root[data-theme="light"] #void .psJourney .stop.wsConv.wsParked{ background:var(--lav);border-color:transparent; box-shadow:var(--lift),0 0 0 3px rgba(124,92,255,.16)} :root[data-theme="light"] #void .stop .pathPick{ width:32px;height:32px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none;border-radius:0; font:800 10px var(--mono);color:var(--violet)} /* ⛔ THE ICONS RENDERED PIXELLED FOR THE FIRST SECONDS (owner, 2026-09-05). Three things compounded: the markup declared the image 22x22 while this rule forced it to 28 with !important, so the browser laid out one raster and painted another; `filter: drop-shadow` forces a rasterisation of the element at its layout box; and `transform: scale(1.06)` then blew that raster up. The shadow moves to the container (never re-rastered by the scale), the attributes match the painted size, and the layer is promoted so the compositor keeps a crisp copy through the transition. */ :root[data-theme="light"] #void .stop .pathPick{ filter:drop-shadow(0 3px 4px rgba(43,36,64,.28)) drop-shadow(0 1px 1px rgba(43,36,64,.18))} :root[data-theme="light"] #void .stop.on .pathPick{ filter:drop-shadow(0 4px 10px rgba(124,92,255,.45)) drop-shadow(0 1px 1px rgba(43,36,64,.2))} :root[data-theme="light"] #void .stop .pathPick img{ width:28px!important;height:28px!important;object-fit:contain;filter:none; image-rendering:auto;backface-visibility:hidden;transform:translateZ(0); transition:transform .18s cubic-bezier(.2,.8,.2,1)} :root[data-theme="light"] #void .stop.on .pathPick img{transform:translateZ(0) translateY(-1px) scale(1.06)} :root[data-theme="light"] #void .stop .pathBody{display:grid;line-height:1.15;min-width:0} :root[data-theme="light"] #void .stop .pathTitle{font:700 13.5px var(--body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="light"] #void .stop .pathNote{font:600 10px var(--body);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="light"] #void .stop .pathGo{color:var(--violet)} :root[data-theme="light"] #void .stop.on .pathGo{color:var(--violet)} :root[data-theme="light"] #void .ladder{gap:6px} /* the composer: ONE line, and the verbs readable */ :root[data-theme="light"] #void .qrow{min-height:52px;padding:6px 8px 6px 18px;align-items:center} :root[data-theme="light"] #void .qrow textarea{height:24px;min-height:24px;max-height:120px;line-height:24px;padding:0;resize:none;overflow:hidden} :root[data-theme="light"] #void .qrow .sendPair>button{opacity:1} :root[data-theme="light"] #void .qrow .sendPair>button:disabled{opacity:.9} :root[data-theme="light"] #void .qrow .sendPair>.send,:root[data-theme="light"] #void .qrow .sendPair>.send:disabled{color:var(--amber);font-weight:800} /* the shelf: icons at 76px on a soft tile — pictures, not posters */ :root[data-theme="light"] #void .exArt{height:118px;background:var(--cream2);border-radius:var(--r-s)} :root[data-theme="light"] #void .exArt img,html.immOn :root[data-theme="light"] #void .exCard .exArt img{ width:78px!important;height:78px!important;filter:drop-shadow(0 8px 10px rgba(43,36,64,.2))} :root[data-theme="light"] #void .exCard .tag{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--violet)} /* the companies it already works for — clay cards, not the old frames */ :root[data-theme="light"] #void .pbCard::before{display:none} :root[data-theme="light"] #void .pbCard{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift);overflow:hidden} :root[data-theme="light"] #void .pbCard:hover{box-shadow:var(--lift-2);transform:translateY(-2px)} :root[data-theme="light"] #void .pbShot{background:var(--lav2)} :root[data-theme="light"] #void .pbFrame{border-radius:var(--r-s) var(--r-s) 0 0;box-shadow:0 8px 20px rgba(43,36,64,.14)} :root[data-theme="light"] #void .pbCard .tag,:root[data-theme="light"] #void .pbKind{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--violet)} :root[data-theme="light"] #void .pbCard h3,:root[data-theme="light"] #void .pbName{font:800 17px var(--disp);color:var(--ink)} :root[data-theme="light"] #void .pbSaid{font:600 13px/1.5 var(--body);color:var(--muted)} :root[data-theme="light"] #void .pbMods span{background:var(--lav);border:0;border-radius:var(--r-pill);color:var(--violet);font:700 10px var(--body);padding:4px 9px} :root[data-theme="light"] #void .pbHead p{font:600 14px/1.5 var(--body);color:var(--muted)} /* the footer: one cream card, the wordmark, the line, pills for the links */ :root[data-theme="light"] #void footer::before,:root[data-theme="light"] #void footer.foot::before{display:none} :root[data-theme="light"] #void footer{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--lift);padding:28px 32px 22px} :root[data-theme="light"] #void footer .fbrand p,html.immOn :root[data-theme="light"] #void footer .fbrand p{font:700 16px/1.45 var(--body);color:var(--muted);letter-spacing:0} :root[data-theme="light"] #void footer .flinks a{background:var(--cream2);border:0;border-radius:var(--r-pill);color:var(--ink);font:700 12.5px var(--body);padding:8px 14px} :root[data-theme="light"] #void footer .flinks a:hover{background:var(--lav);color:var(--violet)} :root[data-theme="light"] #void footer .fbar{border-top:1px dashed var(--line);color:var(--faint);font:600 11px var(--mono)} :root[data-theme="light"] #void .pbJoin,:root[data-theme="light"] #void .pbJoin:hover{background:#8b6cff;color:#fff;box-shadow:var(--clay)} /* the landing's field is ONE line while empty — the auto-grow script sets an inline height for two rows on load; while the placeholder shows there is nothing to grow for. Typing still grows it. And Jautā is amber, full weight, in every state — the old sheet faded the disabled verb to a ghost. */ @media (min-width:700px){:root[data-theme="light"] #void .qrow textarea:placeholder-shown{height:24px!important;min-height:24px!important}} /* ⚠ below 700px the field keeps its two lines of room: a placeholder that wraps on a 390px screen was once CLIPPED to half a sentence (index.html's own note) */ :root[data-theme="light"] #void .qrow{min-height:52px!important;height:auto;padding:6px 8px 6px 18px!important} :root[data-theme="light"] #void .qrow .sendPair>.send,:root[data-theme="light"] #void .qrow .sendPair>.send:disabled, :root[data-theme="light"] #void .qrow .sendPair>.send *{opacity:1!important;color:#9a3412!important;font-weight:800!important} :root[data-theme="light"] #void .qrow .sendPair>.send svg{stroke:var(--amber)!important} :root[data-theme="light"] #void .qrow .sendPair>.doit,:root[data-theme="light"] #void .qrow .sendPair>.doit:disabled, :root[data-theme="light"] #void .qrow .sendPair>.doit *{opacity:1!important;color:#fff!important} :root[data-theme="light"] #void .qrow .sendPair>.doit svg{fill:#ffd166!important;stroke:#ffd166!important} /* the field sizes itself to its content (one line while it is one line); the grow script's inline height is overruled — it floored at two rows */ :root[data-theme="light"] #void .qrow textarea,:root[data-theme="light"] #void .card textarea#q{ height:auto!important;field-sizing:content;max-height:120px!important;overflow:auto} /* ⛔ THE COMPANIES BAND SHARES THE PAGE'S COLUMN (owner, 2026-09-05: "this block is still not aligned perfectly as other block"). It was `min(1180px,92vw)!important` — 100px wider than everything above it, so at 1400 the heading started at 110 while the door card started at 160, and the band read as a section belonging to a different page. ⛔ AND IT WAS ALREADY FIXED ONCE: landing-progress.css:180 sets this element to `min(1080px, 100% - 48px)`, the right answer — and lost, because it has no `!important` and this rule did. An `!important` here does not beat a rule; it beats whoever writes the NEXT one, silently. Widths are the page's grid, so this one now says the same thing rather than shouting a different number. */ :root[data-theme="light"] #void .proofBand{ width:min(var(--landMax),calc(100% - 48px));margin-left:auto;margin-right:auto;filter:none} :root[data-theme="light"] #void .proofBand .pbHead{margin:0 0 20px!important} /* "Vēlāk" is a quiet pill, not a round close button */ :root[data-theme="light"] #gateReg #grX,:root[data-theme="light"] #gateReg .xbtn{ width:auto;height:auto;border-radius:var(--r-pill);padding:8px 16px;background:transparent; border:1.5px dashed var(--line);color:var(--faint);font:700 12px var(--body);margin:10px auto 0;display:inline-flex} :root[data-theme="light"] #gateReg #grX:hover{background:var(--cream2);color:var(--ink)} /* ── the account popup, in the clay hand (owner, 2026-09-05) ──────────────── */ :root[data-theme="light"] .ctxPop{ background:var(--cream)!important;border:0!important;border-radius:var(--r)!important; box-shadow:var(--lift-2),0 40px 90px -40px rgba(58,51,72,.45)!important;padding:8px;font-family:var(--body)} :root[data-theme="light"] .ctxPop::before,:root[data-theme="light"] .ctxPop::after{display:none} :root[data-theme="light"] .ctxPop .who{border-bottom:1px dashed var(--line);padding:12px 12px 12px} :root[data-theme="light"] .ctxPop .who .av2{width:38px;height:38px;box-shadow:var(--clay);background:linear-gradient(135deg,#22d3ee,#7c5cff 55%,#f472b6);color:#fff;font:800 13px var(--disp)} :root[data-theme="light"] .ctxPop .who .av2.guest{background:var(--lav2);color:var(--violet)} :root[data-theme="light"] .ctxPop .who .nm2{font:800 15px var(--disp);color:var(--ink)} :root[data-theme="light"] .ctxPop .who .em2{font:600 11px var(--body);color:var(--muted)} :root[data-theme="light"] .ctxPop .gh{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--faint);padding:12px 12px 6px} :root[data-theme="light"] .ctxPop .gh::before{display:none} :root[data-theme="light"] .ctxPop .grp{padding:0 4px} :root[data-theme="light"] .ctxPop .grp+.grp{border-top:1px dashed var(--line)} :root[data-theme="light"] .ctxPop button{ border:0!important;border-radius:var(--r-pill)!important;background:transparent!important;box-shadow:none!important; padding:7px 10px;margin:2px 0;font-family:var(--body);color:var(--ink);transition:background .15s} :root[data-theme="light"] .ctxPop button:hover{background:var(--cream2)!important} :root[data-theme="light"] .ctxPop button.on{background:var(--lav)!important;box-shadow:var(--lift)!important} :root[data-theme="light"] .ctxPop button .e{ width:30px;height:30px;border-radius:9px;background:var(--lav2);color:var(--violet);font:800 10px var(--mono);display:grid;place-items:center;border:0;box-shadow:none} :root[data-theme="light"] .ctxPop button.on .e{background:var(--violet);color:#fff;box-shadow:var(--clay)} :root[data-theme="light"] .ctxPop button .n{font:700 13.5px var(--body);color:var(--ink)} :root[data-theme="light"] .ctxPop button .d{font:600 11px var(--body);color:var(--faint)} :root[data-theme="light"] .ctxPop button .ck{background:var(--violet);color:#fff;border-radius:50%} :root[data-theme="light"] .ctxPop .grp.acct button:first-child .n{color:var(--violet)} :root[data-theme="light"] .ctxPop .grp.acct button:first-child .e{background:var(--violet);color:#fff;box-shadow:var(--clay)} :root[data-theme="light"] #void .pbGrid{width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important} /* ⛔ THE FIELD'S FLOOR OF 48px SURVIVED EVERY RULE ABOVE. index.html sets it with two ids (#void … textarea#q) and !important; a rule needs the same weight to be heard. #q#q is that weight, on purpose. */ :root[data-theme="light"] #void textarea#q#q{ height:auto!important;min-height:24px!important;max-height:120px!important;padding:0!important; font:600 15px/24px var(--body)!important;field-sizing:content;overflow:auto} /* no underline under the typed line — the pill is the field's edge */ :root[data-theme="light"] #void textarea#q#q,:root[data-theme="light"] #void .card.qfocus textarea#q#q{border:0!important;box-shadow:none!important;background-image:none!important} :root[data-theme="light"] #void .qrow::after,:root[data-theme="light"] #void .card.qfocus .qrow::after{display:none} /* ═══ THE FOOTER, PROPERLY (owner, 2026-09-05: the wordmark's tail was cut, "make a fully wow footer") ═══════════════════════════════════════════════ One wide cream card standing on the hills: the living mark large with room for its tail, the line in Nunito, the links as pills, a dashed rule and a mono foot with the pulse. */ :root[data-theme="light"] #void footer{ width:min(1180px,92vw);margin:56px auto 40px;padding:40px 44px 26px; background:linear-gradient(180deg,rgba(255,251,244,.96),rgba(255,251,244,.86)); border-radius:var(--r);box-shadow:var(--lift-2);overflow:visible;position:relative} :root[data-theme="light"] #void footer::after{ content:'';position:absolute;inset:auto 0 0 0;height:6px;border-radius:0 0 var(--r) var(--r); background:linear-gradient(90deg,#c9bff5,#bfe8d8 40%,#f6d2c2 75%,#c9bff5);opacity:.9} :root[data-theme="light"] #void footer .fwrap{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center} :root[data-theme="light"] #void footer .fbrand{grid-template-columns:200px minmax(0,440px);gap:32px;align-items:center} /* ⛔ THE TAIL. The mark's chat contour drops below its own baseline; a 38px box with the svg pinned 5px down clipped it. The box is as tall as the mark. */ :root[data-theme="light"] #void footer .fBrand,:root[data-theme="light"] #void footer .fBrand.logo{ width:200px!important;height:auto!important;overflow:visible;display:block} :root[data-theme="light"] #void footer .fBrand svg{width:200px;height:auto;top:0;position:static;overflow:visible; filter:drop-shadow(0 8px 14px rgba(124,92,255,.18))} :root[data-theme="light"] #void footer .fbrand p,html.immOn :root[data-theme="light"] #void footer .fbrand p{ font:700 18px/1.4 var(--body)!important;color:var(--ink)!important;letter-spacing:-.01em;max-width:26ch} :root[data-theme="light"] #void footer .flinks{gap:8px;justify-content:flex-end} :root[data-theme="light"] #void footer .flinks a{background:var(--lav2);color:var(--violet);font:800 13px var(--body);padding:10px 16px;border-radius:var(--r-pill);border:0} :root[data-theme="light"] #void footer .flinks a:hover{background:var(--lav);transform:translateY(-1px);box-shadow:var(--lift)} :root[data-theme="light"] #void footer .fbar{margin:26px auto 0;padding-top:16px;border-top:1px dashed var(--line);font:600 11px var(--mono);letter-spacing:.06em;color:var(--faint)} @media (max-width:900px){:root[data-theme="light"] #void footer{padding:28px 22px 22px}:root[data-theme="light"] #void footer .fbrand{grid-template-columns:1fr;gap:16px}:root[data-theme="light"] #void footer .flinks{justify-content:flex-start}} /* ── the band's call: under its own sentence, aligned with it ───────────── A button hanging in the top-right corner beside a two-line lead was two things not talking to each other. The lead says what companies gain; the verb answers it, one line below, at the same left edge, as the clay pill the whole product uses. */ :root[data-theme="light"] #void .proofBand .pbHead{grid-template-columns:minmax(0,1fr)!important;justify-items:start;row-gap:6px;align-items:start;margin-bottom:26px!important} :root[data-theme="light"] #void .proofBand .pbHead h2{grid-column:1;grid-row:1} :root[data-theme="light"] #void .proofBand .pbHead p{grid-column:1;grid-row:2;max-width:60ch} :root[data-theme="light"] #void .pbJoin{ grid-column:1!important;grid-row:3!important;justify-self:start;align-self:start;margin:14px 0 0!important; display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px; background:#8b6cff!important;color:#fff!important;border:0;border-radius:var(--r-pill);box-shadow:var(--clay); font:800 14px var(--body)} :root[data-theme="light"] #void .pbJoin:hover{transform:translateY(-1px);filter:brightness(1.04)} :root[data-theme="light"] #void .pbJoin svg,:root[data-theme="light"] #void .pbJoin .ar{width:18px;height:18px;stroke-width:2.6} /* ═══ THE DOOR ANSWERS A CHOICE (owner, 2026-09-05: ideas 1 · 2 · 3) ═══════ */ /* 2 · the chosen row unfolds its path as step chips; the others stay one line */ :root[data-theme="light"] #void .stop .pathNote{display:none;gap:5px;flex-wrap:wrap;margin-top:4px;white-space:normal} :root[data-theme="light"] #void .stop.on .pathNote{display:flex} :root[data-theme="light"] #void .stop .pathNote i{ font:700 10.5px var(--body);font-style:normal;color:var(--violet);background:rgba(255,255,255,.7); padding:2px 8px;border-radius:var(--r-pill);animation:clayStep .35s cubic-bezier(.2,.8,.2,1) both} :root[data-theme="light"] #void .stop .pathNote i:nth-child(2){animation-delay:.06s} :root[data-theme="light"] #void .stop .pathNote i:nth-child(3){animation-delay:.12s} @keyframes clayStep{from{opacity:0;transform:translateY(4px)}} :root[data-theme="light"] #void .stop.on{align-items:start;padding-top:8px;padding-bottom:8px} :root[data-theme="light"] #void .stop.on .pathPick{align-self:center} /* 1 · the field's slot — where the icon lands and stays */ :root[data-theme="light"] #void .qrow .qPick{display:none;width:30px;height:30px;flex:none;margin-right:2px;align-items:center;justify-content:center} :root[data-theme="light"] #void .qrow .qPick.on{display:inline-flex} :root[data-theme="light"] #void .qrow .qPick img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(43,36,64,.28))} :root[data-theme="light"] #void .qrow .qPick.landing img{animation:clayLand .5s cubic-bezier(.34,1.56,.64,1) both} @keyframes clayLand{0%{transform:scale(.86)}45%{transform:scale(1.14,.9)}100%{transform:scale(1)}} .qFly{filter:drop-shadow(0 8px 12px rgba(124,92,255,.4))} /* 3 · the outcome object lands on the buddy's desk and STAYS — the previous design cast a small result card in and out over nine seconds */ :root[data-theme="light"] #void .psWork{ left:auto;right:6%;top:8%;width:auto;max-width:170px;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px 12px 10px 10px; border:0;border-radius:var(--r-s);background:var(--cream);box-shadow:var(--lift);color:var(--ink);transform-origin:50% 100%} :root[data-theme="light"] #void .psWork img{width:64px;height:64px;filter:drop-shadow(0 6px 8px rgba(43,36,64,.24))} :root[data-theme="light"] #void .psWorkCopy b{font:800 12px/1.2 var(--body);color:var(--ink)} :root[data-theme="light"] #void .psWorkCopy small{font:600 9.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--mint);margin-top:4px} :root[data-theme="light"] #void .partnerSpotlight[data-work-phase="ready"] .psWork{animation:clayWorkLand .8s cubic-bezier(.34,1.4,.64,1) both} @keyframes clayWorkLand{ 0%{opacity:0;transform:translate3d(0,-70px,0) scale(.7) rotate(6deg)} 55%{opacity:1;transform:translate3d(0,6px,0) scale(1.06,.92) rotate(-2deg)} 100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(-2deg)}} :root[data-theme="light"] #void .partnerSpotlight[data-work-phase="thinking"] .psWork{opacity:0;transform:translate3d(0,-70px,0) scale(.7)} @media (prefers-reduced-motion:reduce){:root[data-theme="light"] #void .partnerSpotlight[data-work-phase="ready"] .psWork{animation:none;opacity:1;transform:none}:root[data-theme="light"] #void .stop .pathNote i{animation:none}} /* the object lands beside him, not on his face */ :root[data-theme="light"] #void .psWork{left:5%;right:auto;top:7%} /* ═══ THE COMPANY FORMING — the guest rail's card (owner, 2026-09-05) ═════ Not a promise of a room but the visitor's own company taking shape: the logo their page showed, the register passport, the filed money, laid out as the same four rooms an account gets. One cream clay card; the rooms are rows with the product's own icons; a row that has nothing says so in words and sits at 55% — never a zero, never a filler picture. */ :root[data-theme="light"] body.os.inthread .osCo{ margin-top:12px;padding:14px 13px 12px;border:0;border-radius:var(--r); background:var(--cream);box-shadow:var(--lift);color:var(--ink)} :root[data-theme="light"] body.os.inthread .osCo.empty{padding:16px 14px;background:var(--cream2);box-shadow:none;border:1px dashed var(--line2)} :root[data-theme="light"] body.os.inthread .osCo.empty b{display:block;font:800 13.5px/1.25 var(--body);color:var(--ink)} :root[data-theme="light"] body.os.inthread .osCo.empty span{display:block;margin-top:6px;font:500 11.5px/1.5 var(--body);color:var(--muted)} :root[data-theme="light"] body.os.inthread .osCoHead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center} :root[data-theme="light"] body.os.inthread .osCoLogo{ width:44px;height:44px;border-radius:14px;overflow:hidden;display:grid;place-items:center; background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 6px 14px -8px rgba(43,36,64,.35)} :root[data-theme="light"] body.os.inthread .osCoLogo img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box} :root[data-theme="light"] body.os.inthread .osCoLogo i{font:800 15px var(--body);font-style:normal;color:var(--violet);letter-spacing:.02em} :root[data-theme="light"] body.os.inthread .osCoId{min-width:0} :root[data-theme="light"] body.os.inthread .osCoId em{display:block;font:700 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-style:normal;margin-bottom:2px} :root[data-theme="light"] body.os.inthread .osCoId b{display:block;font:800 14px/1.2 var(--body);color:var(--ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="light"] body.os.inthread .osCoId span{display:block;font:600 10.5px/1.4 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root[data-theme="light"] body.os.inthread .osCoId .osCoDom{color:var(--violet)} :root[data-theme="light"] body.os.inthread .osCoAsk{ display:flex;align-items:center;gap:6px;margin:11px 0 0;padding:8px 10px;border-radius:var(--r-s);background:var(--lav2)} :root[data-theme="light"] body.os.inthread .osCoAsk span{flex:1;font:700 12px var(--body);color:var(--ink);white-space:nowrap} :root[data-theme="light"] body.os.inthread .osCoAsk button{ border:0;border-radius:var(--r-pill);padding:6px 11px;cursor:pointer;font:800 11.5px var(--body); background:var(--cream);color:var(--violet);box-shadow:var(--lift)} :root[data-theme="light"] body.os.inthread .osCoAsk button[data-co="yes"]{background:var(--violet);color:#fff} :root[data-theme="light"] body.os.inthread .osCoAsk button:disabled{opacity:.5;cursor:default} :root[data-theme="light"] body.os.inthread .osCoTtl{margin:14px 2px 6px;font:700 9.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} :root[data-theme="light"] body.os.inthread .osCoRow{ display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center; padding:7px 8px;border-radius:var(--r-s);background:var(--cream2)} :root[data-theme="light"] body.os.inthread .osCoRow+.osCoRow{margin-top:5px} :root[data-theme="light"] body.os.inthread .osCoRow img{grid-row:1/3;width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(43,36,64,.18))} :root[data-theme="light"] body.os.inthread .osCoRow b{font:800 12px/1.2 var(--body);color:var(--ink)} :root[data-theme="light"] body.os.inthread .osCoRow span{font:600 10.5px/1.3 var(--mono);color:var(--mint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root[data-theme="light"] body.os.inthread .osCoRow.off{opacity:.62} :root[data-theme="light"] body.os.inthread .osCoRow.off span{color:var(--muted)} :root[data-theme="light"] body.os.inthread .osCoFacts{margin:11px 2px 0;font:600 10.5px/1.3 var(--mono);color:var(--faint)} :root[data-theme="light"] body.os.inthread .osCo.sure .osCoHead{padding-bottom:2px} /* ═══ THE GUEST RAIL'S GUTTER — the themed rule must not eat the layout ════ ⛔ MEASURED 2026-09-05, signed out at 1400px, one question asked: the guest rail `nav.osAnon` is a FIXED overlay at x 0–262, and the first `.m-you` sat at x=28 with `.t-head` starting at 0 — the question read "…nclub.com" and the eyebrow "…ING STAYS BETWEEN YOU", both sliced by the rail. The gutter was never missing: os-thread.css:284 and work-screen.css:79 both set it inside `@media (min-width:1180px)`. It was OVERRULED — this sheet's own `:root[data-theme="light"] body.os.inthread .msgs{padding:18px 28px 12px}` (and the `.t-head` rule below it) carry one more class than the layout rules and land in the LAST stylesheet, so the themed skin silently reset the layout. Same shape as the footer trap. ⚡ The fix is stated where the damage was done, at higher specificity, and the number is not written twice: `--app-left` is the rail's own width, set by whichever sheet DRAWS the rail (os-thread.css:288, work-screen.css:75) and only while `osAnonOn` is on and the rail is actually shown — it falls back to 0px below 1180, so the same one rule gives 262+28=290px wide and the pre-existing 28px narrow, with no media query of its own. ⛔ `.osAnonOn` scopes it to the STRANGER: a signed-in person has no guest rail, and the clay padding they see is unchanged. ⛔ padding-left only — never the `padding` shorthand: line 678 gives `.msgs` its 52px top so the first question clears the sticky bar, and a shorthand here would silently undo it. Guard: test/test-guest-gutter.mjs asserts this rule outranks the clay one. */ :root[data-theme="light"] body.os.inthread.osAnonOn .msgs, :root[data-theme="light"] body.os.inthread.osAnonOn .t-head{ padding-left:calc(var(--app-left,0px) + 28px)} /* the same button's missing states — a keyboard has to see it, and a person who asked for less motion must not be moved. Min-height is the touch target. */ :root[data-theme="light"] body.os.inthread .wsToolMore{min-height:36px} :root[data-theme="light"] body.os.inthread .wsToolMore:active{transform:none} :root[data-theme="light"] body.os.inthread .wsToolMore:focus-visible{ outline:2px solid var(--violet);outline-offset:2px} @media (prefers-reduced-motion:reduce){ :root[data-theme="light"] body.os.inthread .wsToolMore{transition:none} :root[data-theme="light"] body.os.inthread .wsToolMore:hover{transform:none}} /* ═══════════════════════════════════════════════════════════════════════════ THE GOALS BLOCK ON THE COMPANY HOME (task 9a619555, owner 2026-09-08) ⛔ IT REPLACED THREE BLOCKS AND A WALL. `Mērķi ar īpašnieku` read 0 and `Mērķi bez īpašnieka` read 111 — a split on a fact that is empty for every row, so the whole board arrived undifferentiated under a heading that said only what it was NOT. ⚡ The compression that works is the FIELD, in the same ten-hue palette the goals pane, the dock and the chat cards use. ⛔ One goal, one colour, everywhere — and the word always rides the colour. ⛔ AND THE BLOCK IS A DOOR. Everything past the summary is one press away in the goals app; a home that tries to BE the app is how 111 rows got here. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whGoalsBlk>h3{ display:flex;align-items:center;gap:8px} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgOpen{ margin-left:auto;font:800 11px/1 var(--body);letter-spacing:.01em; border:0;border-radius:var(--r-pill);padding:7px 13px;cursor:pointer; background:var(--fill);color:var(--onfill);box-shadow:var(--clay); transition:transform .16s,box-shadow .16s;text-transform:none} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgOpen:hover{ transform:translateY(-1px);box-shadow:var(--lift-2)} /* the fields — the useful reading of a hundred goals */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTiles{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin:12px 0 4px;align-items:stretch} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile{ display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;font:inherit;text-align:left; border-radius:var(--r-s);border:1px solid hsl(var(--fh) 52% 52% / .38); background:hsl(var(--fh) 70% 64% / .09); transition:transform .16s,box-shadow .16s} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile:hover{ transform:translateY(-1px);box-shadow:var(--lift)} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile .whgW{ font:700 11.5px/1.2 var(--body);color:hsl(var(--fh) 46% 33%); /* ⛔ THE WORD WRAPS, IT DOES NOT CLIP. `white-space:nowrap` rendered "field not declared" as "field not declarea" — a cut letter, not even an ellipsis, because the ellipsis needs room the fixed track did not leave. The word is the only carrier a colour-blind reader has; the tile grows a line instead. */ min-width:0;overflow-wrap:anywhere} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile .whgN{ margin-left:auto;font:800 17px/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums} /* ⛔ undeclared is its own value: no --fh at all, dashed, never a tenth colour and never hue 0 — which is red, and is what a fallback would have painted. */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile.none{ border-style:dashed;border-color:var(--line2);background:none} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgTile.none .whgW{ color:var(--muted);font-style:italic;font-weight:500} /* what is moving — a fact about today, not a property nobody filled in */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgSec{ font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase; color:var(--faint);margin:14px 0 6px} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow{ display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center; width:100%;padding:7px 9px;border:0;background:none;font:inherit;text-align:left; border-radius:var(--r-s);cursor:pointer} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow:hover{background:var(--surf)} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow .whgDot{ width:8px;height:8px;border-radius:50%;background:var(--line2)} /* ⛔ NO --fh FALLBACK — I wrote `hsl(var(--fh, 220) …)` here on the first pass, which is the same defect the goals pane shipped and this spec forbids: a fallback paints an UNDECLARED field as a real one. A row with a field gets the hue; a row without gets grey, and grey is a statement. */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow[style*="--fh"] .whgDot{ background:hsl(var(--fh) 56% 46%)} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow .whgT{ min-width:0;font:600 13px/1.3 var(--body);color:var(--ink); overflow:hidden;text-overflow:ellipsis} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow .whgM{ display:flex;align-items:center;gap:6px; font:600 11px var(--osMono,ui-monospace);color:var(--muted);font-variant-numeric:tabular-nums} /* the carrier — which room is actually holding this goal */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgCar{ display:block;font:400 11px/1.3 var(--body);font-style:normal;color:var(--faint);margin-top:1px} /* ⛔ WORDS, NEVER A BAR AT ZERO. "not measured" and "0 %" are different sentences about a goal, and drawing an empty bar says the second one. */ :root[data-theme="light"] body.os.workHomeOpen .whHome .whgUn{ font:400 11px var(--body);font-style:italic;color:var(--faint)} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgM .mini{ display:inline-block;width:44px;height:4px;border-radius:99px; background:var(--surf2);overflow:hidden;vertical-align:middle} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgM .mini i{ display:block;height:100%;border-radius:inherit;background:var(--f-mid,var(--muted))} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgRow[style*="--fh"] .mini i{ background:hsl(var(--fh) 56% 46%)} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgMore, :root[data-theme="light"] body.os.workHomeOpen .whHome .whgNone, :root[data-theme="light"] body.os.workHomeOpen .whHome .whgFoot{ font:400 11.5px/1.4 var(--body);color:var(--faint);padding:5px 9px} :root[data-theme="light"] body.os.workHomeOpen .whHome .whgFoot{ margin-top:8px;border-top:1px solid var(--line);padding-top:9px} /* ═══ ONE VEIL, ONE WORKING LINE — for every app (owner, 2026-09-08) ═══════ Two complaints, one cause each, and both were systemic rather than one app's bug: "bad looking background" on a sheet, and "some line types blink, like connection some areas with others, seems not cool". ── 1 · THE VEIL ─────────────────────────────────────────────────────────── ⛔ FOUR DIFFERENT BACKDROPS FOR ONE CONCEPT. Measured on the tree serving 4896: `.bcAppSheetWrap` (os-kit.css) and `.whModWrap` (injected by work-home.js) were BYTE-IDENTICAL duplicates — bg 62%, blur 6px, z 60; `.whRoomSet` was DARK, rgba(24,20,34,.34) over blur 3px, at z 24; the sign-in gate's `.bg` was cream .55 over blur 14px. Four recipes, one modal idea, and a person meets three of them in a day. ⛔ AND 62% OVER 6px IS THE WORST OF BOTH. Rendered over the real clay world: 6px is far too weak to dissolve hills that are 600px of gradient, so they do not become ground — they SMEAR, and the cards behind read as ghost text competing with the sheet. That render is what the owner photographed. Owner picked B: 78% wash over blur 22, where the world becomes texture and the sheet is the only thing to read. ⚠ AND THE BUDDY STAYED SHARP OVER THE DIMMED WORLD — that is what the photograph shows, and it is all it shows. ⛔ I wrote a cause for it here first (a z-index tie at 60 between the wrap and `.buddy`) and it did not survive its own measurement: `.buddy{z-index:60}` is in os.css, which index.html does not link, and the buddy's real rule `.bcb-wrap{z-index:15}` is injected by buddy.js at runtime — so the tie never existed. The mechanism is UNMEASURED and is not claimed here. What this rule does is put every veil at one z (70), above every panel that has a number today; whether that is what finally covers him is a thing to look at, not to assert from a stylesheet. ⚡ ONE TOKEN DECIDES. Change --veil-* here and every backdrop moves together; that is the whole point of writing it down once. ⚠ The values live on the theme root, but the RULE names each veil explicitly rather than adding a class — .whModWrap is injected as a