/* designs.css — the design worlds (R9 · G1.D D6; DESIGN.md "Designs on offer"; the client's decision B-16: all three ship, After Hours the default). * * core/theme.js paints from the per-user setting `design`; * Settings › Appearance offers the picker. This file is loaded straight after tokens.css on both shells. * * · After Hours is the incumbent: the tokens in tokens.css ARE After Hours (Ink & Brass by night, Parchment & Ink by day). * It needs no rule and has none here. * · The Reading Room and the Counting House are token sets under :root[data-design="…"] — VALUES of the frozen names in * tokens.css, never a new name — ported from the client-approved comps (docs/redesign/comps/designs/*.css, the visual authority), * then a short list of scoped treatment rules that the tokens cannot carry. * * The rules of this file: * 1. The Measurements Rule. A world changes tokens, never the plan's sizes: no world sets --rail-w, --dock-h, --font-scale, * --fs-*, --control-h, --titlebar-h, --taskbar-h, and no scoped rule below sets a width, height, margin, position, font-size * or line-height. The rail, the pills, the chips, the Provenance bar and Paper measure the same in all three worlds. * (test/designs.test.mjs parses this file and holds all of it.) * 2. The Status Rule. Status, family-plum and verification colours keep their HUES; a world may tune a wash and the shade of * the text on it, per theme, so that every chip, button and message clears 4.5:1 on that world's grounds. Since G1.D D1 * lifted every status text to clear 4.5:1 on every ground a chip sits on, no world sets a text shade: the Reading Room * only thins its washes (DESIGN.md, amended 13/10/2026). * 3. The Switch Rule. Switching worlds is live and loses nothing: the same markup, the same stored preferences, the same keys. * 4. Specificity. :root[data-design] ties tokens.css's :root[data-theme] / [data-density] / [data-text] / [data-transparency] * blocks (0,2,0) and loads after them, so a world wins a tie; the dark block also matches while the light theme is on, so * every colour set there is set again under [data-theme="light"] (0,3,0). High contrast (data-contrast="high" with its * data-accent) outranks both on purpose: a person who asked for it gets it in every world. * 5. Motion is transform / opacity only and this file adds none. No side stripes. No glass over text (--glass-blur is 0px in * both worlds; the two hard-coded blurs of the sign-in cards are switched off below). --ease-spring is defined, never used. * * The scoped rules name the classes the desk draws today (ui-*, w2-*) AND the class names of the approved comps (rail-item, * count, seal, pane-h, …): the second edition's shell and kit (G1.S, G1.D D2–D5) are built from the comps, so the treatment * reaches them the day they land. A selector that matches nothing yet costs nothing. */ /* ══ THE READING ROOM — a library reading room by daylight, kept airy at night ═══════════════════════════════════════════ Light-first paper whites with charcoal ink; a deep warm umber (never navy) with bone text by night. Accent: inkwell blue; brass retired to the seal alone. The serif carries titles and headings. Softer shape. FLAT: hairlines and tonal steps, no shadow at rest, one soft shadow on flyouts and dialogs only, no glass. Rows 34 px, window padding 20. */ /* night (the default theme) and the theme-independent type, shape, elevation and density */ :root[data-design="reading-room"] { --bg-0: #1e1a16; --bg-1: #27221d; --bg-2: #302a24; /* opaque on purpose: no glass, so a surface is a tonal step, never a see-through film */ --surface-1: #28231e; --surface-2: #2d2721; --surface-3: #38312a; --surface-solid: #2a241f; --surface-sunken: rgba(12, 9, 6, .24); --surface-content: #231e1a; --line-1: rgba(236, 229, 214, .09); --line-2: rgba(236, 229, 214, .17); --line-3: rgba(236, 229, 214, .32); --text-1: #ece5d6; --text-2: #c6bdab; --text-3: #aaa190; --text-4: #8d8474; --text-on-accent: #1b1712; /* the one accent: inkwell blue (brass is kept for the seal, see the scoped rules) */ --accent: #9ab8e8; --accent-strong: #b9d0f2; --accent-weak: rgba(154, 184, 232, .13); --accent-ring: rgba(154, 184, 232, .6); --selection: rgba(154, 184, 232, .3); --scrim: rgba(10, 8, 5, .62); /* The Status Rule: the danger text is After Hours' own (D1 lifted it to clear 4.5:1 on every ground); only the wash is tuned for the umber grounds (the lead, 13/10/2026 — the earlier night shade #f58a83 fell to 4.41:1 on a selected row) */ --danger-bg: rgba(232, 104, 95, .1); /* Paper: a warm umber page, bone ink */ --surface-paper: #241f1a; --text-paper: #ece5d6; /* elevation: flat. Nothing has a shadow at rest; flyouts and dialogs share the one soft shadow. */ --shadow-1: none; --shadow-window: none; --shadow-window-focus: none; --shadow-2: 0 10px 28px rgba(0, 0, 0, .42); --shadow-3: 0 10px 28px rgba(0, 0, 0, .42); --glass-blur: 0px; --glass-sat: 100%; --w2-highlight: transparent; --w2-hover: rgba(236, 229, 214, .07); --w2-press: rgba(236, 229, 214, .12); --w2-desk-text: #ece5d6; --w2-desk-shadow: none; /* type: the serif carries titles and headings; the chrome's leading is looser */ --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, serif; --font-display: var(--font-serif); --lh-ui: 1.5; --tracking-eyebrow: .05em; /* shape: softer. hair 6 · controls 8 · cards 12 · panels and windows 16 · sheets 20 · the lock card 28 */ --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-6: 28px; --r-window: 16px; /* density: rows 34 (28 compact), window padding 20 (12 compact); the controls and the title bar keep their measured heights */ --row-h: 34px; --pad-window: 20px; } /* the density and text-size ladders of tokens.css tie with the block above and load earlier, so they are restated here */ :root[data-design="reading-room"][data-density="compact"] { --row-h: 28px; --pad-window: 12px; } :root[data-design="reading-room"][data-text="115"] { --row-h: 38px; } :root[data-design="reading-room"][data-text="130"] { --row-h: 42px; } :root[data-design="reading-room"][data-density="compact"][data-text="115"] { --row-h: 32px; } :root[data-design="reading-room"][data-density="compact"][data-text="130"] { --row-h: 36px; } /* day: paper whites with charcoal ink */ :root[data-design="reading-room"][data-theme="light"] { --bg-0: #ece6d8; --bg-1: #f4f0e6; --bg-2: #fbf9f4; --surface-1: #f8f5ed; --surface-2: #fbf9f4; --surface-3: #fefcf8; --surface-solid: #fbf9f4; --surface-sunken: rgba(70, 56, 30, .06); --surface-content: #fffefb; --line-1: rgba(35, 38, 43, .09); --line-2: rgba(35, 38, 43, .16); --line-3: rgba(35, 38, 43, .3); --text-1: #23262b; --text-2: #5a5f69; --text-3: #62676f; --text-4: #7b7f87; --text-on-accent: #fbf9f4; --accent: #2f4f7f; --accent-strong: #1f3a64; --accent-weak: rgba(47, 79, 127, .1); --accent-ring: rgba(47, 79, 127, .66); --selection: rgba(47, 79, 127, .2); --scrim: rgba(35, 38, 43, .3); --surface-paper: #fffefb; --text-paper: #23262b; /* the day danger text is After Hours' own (inherited from tokens.css); the night block above only tunes the wash, reset here for day */ --danger-bg: rgba(184, 50, 42, .1); /* The Status Rule, day: the hues and the text shades are After Hours'; the green, amber and blue washes are thinned so the word on them clears 4.5:1 */ --ok-bg: rgba(39, 122, 82, .06); --warn-bg: rgba(149, 96, 10, .06); --info-bg: rgba(47, 109, 179, .06); --shadow-1: none; --shadow-window: none; --shadow-window-focus: none; --shadow-2: 0 10px 28px rgba(46, 38, 24, .14); --shadow-3: 0 10px 28px rgba(46, 38, 24, .14); --w2-highlight: transparent; --w2-hover: rgba(35, 38, 43, .05); --w2-press: rgba(35, 38, 43, .09); --w2-desk-text: #23262b; --w2-desk-shadow: none; } /* ── Reading Room · scoped rules (none sets a size or a position) ── */ /* RR1 · the serif on titles and headings (tokens cannot reach every heading: some read --font-ui) */ :root[data-design="reading-room"] :is(h1, h2, h3, h4, .w2-titlebar__title, .ui-card__title, .ui-dialog__title, .titlebar .place, .tb h1, .tb .title, .state-cap b, .matter, .spec-h3) { font-family: var(--font-display); } /* RR2 · labels in small capitals, not tracked uppercase (the serif draws true ones in Palatino Linotype); a chip inside a pane head stays in the UI face */ :root[data-design="reading-room"] :is(.w2-eyebrow, .ui-stat__label, .ui-divider__label, .ui-menu__header, .ui-digest__eyebrow, .w2-results__group, .w2-centre__group, .w2-scenes__eyebrow, .w2-scenes__label, .w2-clockw__meta, .w2-wg-gallery__eyebrow, .w2-wgc-search__eyebrow, .w2-wgm-cd__eyebrow, .w2-wgm-ver__eyebrow, .w2-wgm-tasks__eyebrow, .pane-h, .msg .k) { font-family: var(--font-serif); text-transform: none; font-variant-caps: all-small-caps; letter-spacing: var(--tracking-eyebrow); } :root[data-design="reading-room"] .pane-h .chip { font-family: var(--font-ui); font-variant-caps: normal; } /* RR3 · a flat primary button: a solid inkwell fill, not a vertical gradient with a glow (a gradient is a form of relief) */ :root[data-design="reading-room"] :is(.ui-btn--primary, .btn.primary, .w2-auth__submit, .w2-lock__go) { background: var(--accent); background-image: none; box-shadow: none; } :root[data-design="reading-room"] :is(.ui-btn--primary:hover:not(:disabled), .btn.primary:hover, .w2-auth__submit:hover) { background: var(--accent-strong); background-image: none; } /* RR4 · flat means no hard-coded relief at rest: a module plate keeps its colour and loses its bevel; the dialogs and flyouts take the one soft shadow, nothing more */ :root[data-design="reading-room"] .ui-plate { box-shadow: none; } :root[data-design="reading-room"] :is(.ui-dialog, .w2-start, .w2-palette, .w2-centre, .w2-flyout, .w2-preview, .w2-toast, .w2-switch__panel, .w2-scenes) { box-shadow: var(--shadow-3); } :root[data-design="reading-room"] :is(.w2-auth__card, .w2-lock__card) { box-shadow: var(--shadow-3); background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; } /* RR5 · a window without a shadow still needs an edge: one hairline, drawn as an outline so no box moves (the comps' .win) */ :root[data-design="reading-room"] :is(.win, .backwin) { outline: 1px solid var(--line-2); outline-offset: 0; } /* RR6 · the inset rings that stand in for a border on a count pill, a help button and an avatar are box-shadows in the comps; a flat world drops them (the count keeps its tint) or draws them as an inside outline, so no box moves */ :root[data-design="reading-room"] :is(.count, .help, .avatar) { box-shadow: none; } :root[data-design="reading-room"] :is(.help, .avatar) { outline: 1px solid var(--line-2); outline-offset: -1px; } /* RR7 · brass is retired to the seal alone: the seal (the comps' rail and dock seal, and the filing seal's gradient) keeps After Hours' brass while the page takes inkwell blue. (The desk's own .w2-seal paints literal brass and needs nothing.) */ :root[data-design="reading-room"] :is(.seal, #brass-g) { --accent: #d4a94f; --accent-strong: #e8c170; --accent-weak: rgba(212, 169, 79, .16); } :root[data-design="reading-room"][data-theme="light"] :is(.seal, #brass-g) { --accent: #8a661d; --accent-strong: #735515; --accent-weak: rgba(138, 102, 29, .12); } /* RR8 · the ring inside a done dot (a zero-blur inset box-shadow in the comp) is an inside outline: same ring, no box-shadow */ :root[data-design="reading-room"] .sg.is-done { box-shadow: none; outline: 3px solid var(--surface-paper); outline-offset: -4.5px; } /* ══ THE COUNTING HOUSE — a clerk's ledger in black ink ═══════════════════════════════════════════════════════════════════ Near-monochrome: paper #f4f1ea / #ebe7dd and ink #111111 by day; true black #0b0b0b / #151515 and bone #e8e4d8 by night. The one accent is the ink itself. Square (radii 2 / 3 / 4, pills become 3 px tabs). Solid full-strength rules, no shadows at all, no glass. Every figure in Cascadia Code; Paper stays Palatino. Rows 30 px, window padding 12. */ /* night: true black and bone (also the theme-independent type, shape and density) */ :root[data-design="counting-house"] { /* ground: true black, the desk floor darkest; no translucency anywhere (there is no glass to see through) */ --bg-0: #0b0b0b; --bg-1: #151515; --bg-2: #1c1c1c; --surface-1: #151515; --surface-2: #1a1a1a; --surface-3: #202020; --surface-solid: #151515; --surface-sunken: #000000; --surface-content: #0b0b0b; /* rules, not hairlines: solid, full-strength bone at every one of the three strengths */ --line-1: #e8e4d8; --line-2: #e8e4d8; --line-3: #e8e4d8; /* text: bone, then three steps down */ --text-1: #e8e4d8; --text-2: #c3bfb3; --text-3: #a39f94; --text-4: #8c887f; --text-on-accent: #0b0b0b; /* the one accent is the ink itself: bone by night; one value for the accent and its strong twin so a button is flat */ --accent: #e8e4d8; --accent-strong: #e8e4d8; --accent-weak: rgba(232, 228, 216, 0); --accent-ring: #e8e4d8; --selection: rgba(232, 228, 216, .3); --scrim: rgba(0, 0, 0, .72); /* Paper: a black sheet, bone print (Palatino stays) */ --surface-paper: #0b0b0b; --text-paper: #e8e4d8; /* no shadows at all, no glass */ --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-window: none; --shadow-window-focus: none; --glass-blur: 0px; --glass-sat: 100%; --w2-highlight: transparent; --w2-hover: rgba(232, 228, 216, .09); --w2-press: rgba(232, 228, 216, .16); --w2-desk-text: #e8e4d8; --w2-desk-shadow: none; /* type: Segoe UI Variable Display for titles (weight 700 in CH2), labels tracked .1em, Cascadia Code for figures (CH1) */ --tracking-eyebrow: .1em; /* shape: square. radii 2 / 3 / 4; pills become 3 px tabs; windows, sheets and panels 4 */ --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 4px; --r-5: 4px; --r-6: 4px; --r-pill: 3px; --r-window: 4px; /* density: rows 30 (26 compact), window padding 12; --control-h, --titlebar-h and --gap are left to tokens.css */ --row-h: 30px; --pad-window: 12px; } /* compact and larger text keep the relation tokens.css gives them (its rules tie with the block above and load earlier) */ :root[data-design="counting-house"][data-density="compact"] { --row-h: 26px; --pad-window: 12px; } :root[data-design="counting-house"][data-text="115"] { --row-h: 34px; --pad-window: 12px; } :root[data-design="counting-house"][data-text="130"] { --row-h: 38px; --pad-window: 14px; } :root[data-design="counting-house"][data-density="compact"][data-text="115"] { --row-h: 28px; } :root[data-design="counting-house"][data-density="compact"][data-text="130"] { --row-h: 32px; } /* day: paper and ink */ :root[data-design="counting-house"][data-theme="light"] { --bg-0: #ebe7dd; --bg-1: #f4f1ea; --bg-2: #faf8f3; /* windows are the lightest sheet (#faf8f3) so the fixed status hues clear as much contrast as the day ground can give them */ --surface-1: #faf8f3; --surface-2: #fcfbf7; --surface-3: #fcfbf7; --surface-solid: #faf8f3; --surface-sunken: #f4f1ea; --surface-content: #fdfcf8; --line-1: #111111; --line-2: #111111; --line-3: #111111; --text-1: #111111; --text-2: #3b3a36; --text-3: #55524a; --text-4: #5c5951; --text-on-accent: #f4f1ea; --accent: #111111; --accent-strong: #111111; --accent-weak: rgba(17, 17, 17, 0); --accent-ring: #111111; --selection: rgba(17, 17, 17, .2); --scrim: rgba(17, 17, 17, .45); --surface-paper: #faf8f3; --text-paper: #111111; /* The Status Rule, day: the hues and the text shades are After Hours'; the green, amber and blue washes are thinned so the word on them clears 4.5:1 */ --ok-bg: rgba(39, 122, 82, .06); --warn-bg: rgba(149, 96, 10, .06); --info-bg: rgba(47, 109, 179, .06); --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-window: none; --shadow-window-focus: none; --w2-highlight: transparent; --w2-hover: rgba(17, 17, 17, .07); --w2-press: rgba(17, 17, 17, .13); --w2-desk-text: #111111; --w2-desk-shadow: none; } /* ── Counting House · scoped rules (none sets a width, height, margin, position or font-size on a measured element; borders replace the old inset-shadow rings inside the same border-box, outlines draw inside, so no box and no x moves) ── */ /* CH1 · every figure in Cascadia Code: counts, dates, tokens, times, table cells (the element that IS the figure; prose that merely contains a number keeps its face) */ :root[data-design="counting-house"] :is(.ui-badge, .ui-chip, .ui-tabs__badge, .ui-tree__badge, .ui-stat__value, .ui-stat__delta, .ui-table__td, .w2-titlebar__badge, .w2-tb-item__badge, .w2-gtab__badge, .w2-tray__count, .w2-dicon__badge, .w2-clockw__meta, .count, .gen, .tf-n, .date, .pin, .tok, .where, .t, .n, .gnote, .mod-n, .plate, .tray, .chip, .tag, .delta, .v b, dl.meas dd, .lede b, small, .ruler div, td, th, .meta:not(.measure .meta), .row .rail, .scales > span, .tree-w, figcaption > :is(strong, b)):not(.ui-paper__body *, .ui-paper__body) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* CH1b · the Provenance chips and the pin are figures wherever they sit (D3's chips are the comps' .chip; Paper's pin is mono already) */ :root[data-design="counting-house"] :is(.ui-pchip, .ui-paper__pin) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* CH2 · titles: Segoe UI Variable Display at 700 (Paper's headings and the landing, typeset as Paper, stay Palatino) */ :root[data-design="counting-house"] :is(h1, h2, h3, .w2-titlebar__title, .ui-card__title, .ui-dialog__title, .title, .place, .mod-t, .matter):not(.measure *, .landing *, .ui-paper *, .ui-paper) { font-family: var(--font-display); font-weight: 700; } /* CH3 · labels: the 10.5 px uppercase eyebrow is tracked .1em through --tracking-eyebrow already; the comps' own label classes follow it */ :root[data-design="counting-house"] :is(.pane-h, .msg .k) { font-size: var(--fs-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } :root[data-design="counting-house"] .eyebrow:not(.notes .eyebrow) { font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); font-variant-caps: normal; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } /* CH4 · a double rule under headings, in the full-strength line (the border lives in the heading's own box) */ :root[data-design="counting-house"] :is(.comp-head h1, .board > h2, .list-h h1, .rv-h h2, .card > h2, .card > h3, .sec-h h3) { border-bottom: 3px double var(--line-3); padding-bottom: 4px; } /* CH5 · a ruled grid in tables: every cell closed by a solid 1 px rule on its right, a double rule under the head. The desk's table is a grid of divs (ui-table__*), the comps' and Paper's are s; the desk's div-grid keeps its padding so no row grows; the comps'
cells (the glyph check, the contrast tables) take 6px 8px as approved. Paper's own tables (and rendered markdown inside it) are excluded as CH1 excludes them: Paper keeps its one-rule table in every world, so its sheet grows by no pixel. */ :root[data-design="counting-house"] :is(.ui-table__td, .ui-table__th) { border-right: 1px solid var(--line-1); } :root[data-design="counting-house"] .ui-table__head { border-bottom: 3px double var(--line-3); } :root[data-design="counting-house"] .ui-table__row { border-bottom-color: var(--line-1); } :root[data-design="counting-house"] table:not(.ui-paper__body *) { border-collapse: collapse; } :root[data-design="counting-house"] :is(td, th):not(.ui-paper__body *) { border: 1px solid var(--line-1); padding: 6px 8px; } :root[data-design="counting-house"] thead :is(td, th):not(.ui-paper__body *) { border-bottom-width: 2px; } /* CH6 · selection is an ink rule, not a tint: a 2 px outline inside the control's own box on every selected / current state (the desk's stripe on a selected row is replaced by it: no side stripe in this world) */ :root[data-design="counting-house"] :is(.ui-chip.is-selected, .ui-seg__opt.is-active, .ui-table__row.is-selected, .ui-table__row.is-cursor, .ui-tree__row.is-selected, .ui-vlist__row.is-selected, .chip.sel, .seg button[aria-pressed="true"], .cs-seg button[aria-pressed="true"], .pill.is-active, .titlebar .tab[aria-selected="true"], .titlebar .tab:not([aria-selected]), .rail-item.is-active .rail-pill, .row[aria-selected="true"], .tofile, .btn.is-subtle, .tab.is-on) { background: transparent; box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; } :root[data-design="counting-house"] :is(.tofile:hover, .btn.is-subtle:hover) { background: var(--accent); color: var(--text-on-accent); } /* CH7 · the primary button is solid ink (solid bone by night): one flat colour, no gradient, no glow; hover is a rule, not a lighter fill */ :root[data-design="counting-house"] :is(.ui-btn--primary, .btn.primary, .w2-auth__submit, .w2-lock__go) { background: var(--accent); background-image: none; box-shadow: none; color: var(--text-on-accent); border-color: var(--accent); } :root[data-design="counting-house"] :is(.ui-btn--primary:hover:not(:disabled), .btn.primary:hover, .w2-auth__submit:hover) { background: var(--accent); background-image: none; outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-design="counting-house"] .tb .plate { background: var(--accent); background-image: none; } /* CH8 · no hard-coded relief: the module plate loses its bevel and sheen, dialogs and flyouts and the sign-in cards carry a rule and no shadow and no glass */ :root[data-design="counting-house"] .ui-plate { box-shadow: none; } :root[data-design="counting-house"] .ui-plate::after { background: none; } :root[data-design="counting-house"] :is(.ui-dialog, .w2-start, .w2-palette, .w2-centre, .w2-flyout, .w2-preview, .w2-toast, .w2-switch__panel, .w2-scenes) { box-shadow: none; } :root[data-design="counting-house"] :is(.w2-auth__card, .w2-lock__card) { box-shadow: none; background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; } /* CH9 · rings that were inset shadows become real borders; fills that borrowed a line colour become tints */ :root[data-design="counting-house"] :is(.count, .help, .avatar) { box-shadow: none; border: 1px solid var(--line-2); border-radius: var(--r-1); } :root[data-design="counting-house"] .count.is-warn { border-color: var(--warn); } :root[data-design="counting-house"]:not([data-contrast]) .count:not(.is-warn) { background: var(--surface-3); color: var(--text-1); } :root[data-design="counting-house"] .count { background: var(--surface-3); color: var(--text-1); } :root[data-design="counting-house"] .count.is-warn { background: var(--warn-bg); color: var(--warn); } :root[data-design="counting-house"] .chip.sel .count { background: var(--accent); color: var(--text-on-accent); } :root[data-design="counting-house"] .sg.is-done { box-shadow: none; background: var(--ok); background-clip: content-box; padding: 2px; border: 1.5px solid var(--ok); } :root[data-design="counting-house"] :is(.mini i, .mini .mini-bar, .ghostlines i) { background: var(--text-4); } :root[data-design="counting-house"] .ln.pad { background: var(--w2-hover); } /* CH10 · square: the hard-coded round shapes (pills, count badges, dots, avatars, slots, the cs strip's group) take the 2–4 px radii; the seal, the toggles and the swatches keep their shape */ :root[data-design="counting-house"] :is(.ui-chip, .ui-tabs__badge, .ui-tree__badge, .w2-titlebar__badge, .w2-tb-item__badge, .w2-gtab__badge, .w2-tray__count, .w2-dicon__badge) { border-radius: var(--r-pill); } :root[data-design="counting-house"] :is(.dot, .avatar, .ui-avatar, .sg, .slot, .count, .w2-wsdot__dot, .w2-status-dot) { border-radius: var(--r-1); } :root[data-design="counting-house"] .cs-seg { border-radius: var(--r-3); } :root[data-design="counting-house"] .seal.stamp::before { border-radius: var(--r-1); background: none; } /* CH11 · brass only on the seal: the comps' seal keeps After Hours' brass, night and day (the only warm metal in this world); the desk's .w2-seal paints literal brass already */ :root[data-design="counting-house"] .seal .s-ring { fill: rgba(212, 169, 79, .16); stroke: #d4a94f; } :root[data-design="counting-house"] .seal .s-dash { stroke: #d4a94f; } :root[data-design="counting-house"] .seal .s-core { fill: #d4a94f; } :root[data-design="counting-house"] #brass-g stop:first-child { stop-color: #e8c170 !important; } :root[data-design="counting-house"] #brass-g stop:last-child { stop-color: #d4a94f !important; } :root[data-design="counting-house"][data-theme="light"] .seal .s-ring { fill: rgba(138, 102, 29, .12); stroke: #8a661d; } :root[data-design="counting-house"][data-theme="light"] .seal .s-dash { stroke: #8a661d; } :root[data-design="counting-house"][data-theme="light"] .seal .s-core { fill: #8a661d; } :root[data-design="counting-house"][data-theme="light"] #brass-g stop:first-child { stop-color: #735515 !important; } :root[data-design="counting-house"][data-theme="light"] #brass-g stop:last-child { stop-color: #8a661d !important; } /* CH12 · the Status Rule for two chip colours the comps mix from --text-1: the mix is pinned to After Hours' text-1 so those chips read the same colour in every world (the hues themselves are never set here) */ :root[data-design="counting-house"] .chip--wp { color: color-mix(in srgb, var(--slate) 70%, #efe9dc); } :root[data-design="counting-house"] .chip--ai { color: color-mix(in srgb, var(--info) 80%, #efe9dc); } :root[data-design="counting-house"][data-theme="light"] .chip--wp { color: color-mix(in srgb, var(--slate) 70%, #1a2130); } :root[data-design="counting-house"][data-theme="light"] .chip--ai { color: color-mix(in srgb, var(--info) 80%, #1a2130); }