/* theme.css — remaps Bootstrap 5.3 to Trazadera tokens and styles base elements. Loaded AFTER bootstrap.css and tokens.css. Component-level restyles are added per-screen in later phases. */ :root, [data-bs-theme="light"] { /* ---- Semantic aliases: the ONLY things the dark theme redefines. Component rules consume these, never a raw ramp position, so a second theme is one block instead of ~190 edits. Light values resolve exactly as before. ---- */ --tz-bg: var(--tz-white); /* page canvas — the page IS the paper. A deliberate brand extension (the book says n50 pages / white cards): flat sections sit directly on the page, so the page carries the paper colour. See docs/golden-style-guide.md § Brand extensions. */ --tz-surface: var(--tz-white); /* cards, modals, dropdowns, sub-nav, inputs */ --tz-surface-sunken: var(--tz-n100); /* inset panels, chips, meter tracks, row hover */ --tz-surface-hover: var(--tz-n200); /* one step beyond sunken: button hover/pressed fill */ --tz-border: var(--tz-n200); /* outer hairlines: cards, inputs, modals */ --tz-border-subtle: var(--tz-n100); /* inner dividers: card head/foot, table rows */ --tz-border-strong: var(--tz-n300); /* hover / emphasis borders */ --tz-heading: var(--tz-primary-dark); /* h1-h6, card + page titles, stat values */ --tz-text: var(--tz-n800); /* strong body: input text, meta values */ --tz-text-muted: var(--tz-n600); /* default body and muted text (AA floor) */ --tz-text-faint: var(--tz-n500); /* large text / non-text only — see AA notes */ --tz-text-disabled: var(--tz-n400); /* ══ THE LIGHT LADDER: one hue, three rungs, one perceptual step ══════════════════════════ Nacho, 28 September 2026: "the semantic system, perfectly symmetric". The three rungs of a semantic hue in light mode are --tz-*-deep the word INSIDE a tinted panel — a pill, a badge, an alert --tz-*-ink the same word on the page surface, ONE STEP lighter --tz-*-chart a painted area, a further step out toward the primitive ⚠️ ONE STEP MEANS ONE ΔE, WHICH IS NOT ONE RATIO. The four ramps are not the same length — #92400E→#F59E0B is far longer than #991B1B→#EF4444 — so an equal mix percentage gives a step nearly twice as long for the amber as for the red, which is exactly the asymmetry this replaces. The percentages below are each solved to put the ink ΔE ≈ 10 from its own deep: measured, 9.8 / 9.8 / 10.6 / 9.9. That is the symmetry, and it is why the numbers differ. Why a step at all, rather than ink == deep as it was until today: a tinted ground eats contrast, so a word on it wants to be deeper than the same word on paper. Reading the two side by side is what found it — the quality page shows a green figure beside its own green band. ⚠️ AND WHAT CANNOT BE MADE SYMMETRIC, so nobody spends another afternoon on it: the distance from a word to ITS OWN AREA is 11.7 / 26.9 / 20.5, not one number. Equalising that as well was searched and the whole space is empty: every solution that holds the inks above 5:1 and the bands ΔE 40 apart puts the error band back on the raw primitive (#E33F3F and up), which is the saturation the chart register exists to calm. The amber's ramp is simply longer than the red's. What the step DID buy is that every one of those three distances shrank — from 18.7 / 34.1 / 28.2 — and the bands moved slightly further apart, 47.2 → 49.0. ⚠️ In DARK there is no ladder to build: the panel inverts, so its word is the pale tint while a word on the page and a painted area both have to be light and converge on their own — measured, ΔE 11.0 for the red and 0.0 for the amber and the green. The dark rungs below are composed for contrast on n900 and nothing else. */ --tz-error-ink: color-mix(in srgb, var(--tz-error-deep) 64%, var(--tz-error)); --tz-warning-ink: color-mix(in srgb, var(--tz-warning-deep) 81%, var(--tz-warning)); --tz-success-ink: color-mix(in srgb, var(--tz-success-deep) 75%, var(--tz-success)); --tz-info-ink: color-mix(in srgb, var(--tz-info-deep) 52%, var(--tz-info)); --tz-error-chart: color-mix(in srgb, var(--tz-error) 70%, var(--tz-error-ink)); --tz-warning-chart: color-mix(in srgb, var(--tz-warning) 70%, var(--tz-warning-ink)); --tz-success-chart: color-mix(in srgb, var(--tz-success) 70%, var(--tz-success-ink)); /* ⚠️ The fourth rung, added 28 September 2026: the ladder had three because nothing painted an AREA in the info hue — and the quality histogram's own bars did, on the bare primitive, which is the register error the whole pass removed. A rung missing is how an exception gets written instead. */ --tz-info-chart: color-mix(in srgb, var(--tz-info) 70%, var(--tz-info-ink)); --bs-primary: var(--tz-primary); --bs-primary-rgb: var(--tz-primary-rgb); --bs-body-bg: var(--tz-bg); --bs-body-color: var(--tz-n600); --bs-emphasis-color: var(--tz-primary-dark); --bs-secondary-color: var(--tz-n600); --bs-secondary-bg: var(--tz-n100); --bs-tertiary-bg: var(--tz-n50); --bs-border-color: var(--tz-n200); --bs-link-color: var(--tz-accent-blue); --bs-link-color-rgb: 0, 128, 170; --bs-link-hover-color: var(--tz-accent-blue-dark); --bs-font-sans-serif: var(--tz-font-sans); --bs-font-monospace: var(--tz-font-mono); --bs-border-radius: var(--tz-r-md); --bs-border-radius-sm: var(--tz-r-sm); --bs-border-radius-lg: var(--tz-r-lg); --bs-border-radius-xl: var(--tz-r-xl); --bs-box-shadow-sm: var(--tz-shadow-sm); --bs-box-shadow: var(--tz-shadow-md); --bs-box-shadow-lg: var(--tz-shadow-lg); /* teal-tinted gray ramp */ --bs-gray-100: var(--tz-n100); --bs-gray-200: var(--tz-n200); --bs-gray-300: var(--tz-n300); --bs-gray-400: var(--tz-n400); --bs-gray-500: var(--tz-n500); --bs-gray-600: var(--tz-n600); --bs-gray-700: var(--tz-n700); --bs-gray-800: var(--tz-n800); --bs-gray-900: var(--tz-n900); /* Semantic hues — Bootstrap ships these as its own yellow/red/green, and .bg-warning / .bg-danger / .text-danger read straight from them. */ --bs-success-rgb: var(--tz-success-rgb); --bs-warning-rgb: var(--tz-warning-rgb); --bs-danger-rgb: var(--tz-error-rgb); --bs-info-rgb: var(--tz-info-rgb); /* *-bg-subtle / *-border-subtle are Sass-static literals (e.g. --bs-primary-bg-subtle: #cfe2ff). ~60 uses app-wide — every keyboard shortcut chip, both toasts, the merge column — so leaving them unmapped leaks Bootstrap blue across the whole UI. */ --bs-primary-bg-subtle: var(--tz-info-bg); --bs-secondary-bg-subtle: var(--tz-n100); --bs-success-bg-subtle: var(--tz-success-bg); --bs-info-bg-subtle: var(--tz-info-bg); --bs-warning-bg-subtle: var(--tz-warning-bg); --bs-danger-bg-subtle: var(--tz-error-bg); --bs-light-bg-subtle: var(--tz-n50); --bs-dark-bg-subtle: var(--tz-n300); /* Bootstrap's colour is a literal pink (#d63384 light / #e685b5 dark) and was never remapped — off-brand in both themes. */ --bs-code-color: var(--tz-text); --bs-form-invalid-color: var(--tz-error-fg); --bs-form-invalid-border-color: var(--tz-error); --bs-form-valid-color: var(--tz-success-fg); --bs-form-valid-border-color: var(--tz-success); --bs-primary-border-subtle: var(--tz-n200); --bs-secondary-border-subtle: var(--tz-n200); --bs-success-border-subtle: var(--tz-success); --bs-info-border-subtle: var(--tz-info); --bs-warning-border-subtle: var(--tz-warning); --bs-danger-border-subtle: var(--tz-error); } /* ❗️U-28. The ranked count / kv value size, which the style guide's display ramp has named since the reskin ("Ranked count / kv value, Source Serif 4, 16–17px") while no token carried it — so eight rules wrote the number by hand and 87 nodes across nine screens rendered at a size that was, on the evidence of the stylesheets, off the ramp. Declaring it changes not one pixel; what it changes is that the next one of these is a token reference and the audit stops counting it as a deviation. Ruled 13 September 2026. ⚠️ IT BELONGS IN `tokens.css`, in the type scale, whose comment says in as many words that it is "one source for every font-size" — and it is here because the 13 September wave gave this block `golden.css` and `theme.css` and gave `tokens.css` to nobody. Move the declaration into the scale, between `--tz-text-lg` and `--tz-text-h4`, the moment one change may touch both files: it is one line and every use is already a `var()`. */ :root { --tz-text-kv: 17px; } /* ============================================================================ DARK THEME. Values from trazadera-branding SKILL.md § Dark Mode Guidelines: page n950, card n900 with an n800 border, body text n300, headings white, accent unchanged (it reads well on dark), shadows same teal tint at higher opacity. Only the aliases are redefined — every component rule already consumes them, which is what the P7 migration was for. ============================================================================ */ [data-bs-theme="dark"] { --tz-bg: var(--tz-n900); /* paper, dark: the surface tone itself */ --tz-surface: var(--tz-n900); --tz-surface-sunken: var(--tz-n800); --tz-surface-hover: var(--tz-n700); --tz-border: var(--tz-n800); --tz-border-subtle: var(--tz-n800); --tz-border-strong: var(--tz-n700); --tz-heading: var(--tz-white); --tz-text: var(--tz-n200); --tz-text-muted: var(--tz-n300); --tz-text-faint: var(--tz-n400); --tz-text-disabled: var(--tz-n500); /* Status pairs swap: the tint becomes the text, the deep shade the fill. */ --tz-success-bg: var(--tz-success-deep); --tz-success-fg: var(--tz-success-tint); --tz-warning-bg: var(--tz-warning-deep); --tz-warning-fg: var(--tz-warning-tint); --tz-error-bg: var(--tz-error-deep); --tz-error-fg: var(--tz-error-tint); --tz-info-bg: var(--tz-info-deep); --tz-info-fg: var(--tz-info-tint); /* ⚠️ U-22 — INK DOES NOT FOLLOW THE PANEL SWAP. The pair above is right for a tinted panel and wrong for a red word on the page: taking --tz-error-fg for a destructive button's ink handed it #FEE2E2 in dark, so Delete rendered pale pink and read as indistinguishable in weight from the Edit beside it — legible (12.24:1) and no longer a warning, which is the whole of what the colour is for. The primitive itself, #EF4444, measures 3.97:1 on n900 and misses AA at 13px, and tokens.css is the only place a hex may be written — so the ink is composed from two primitives that are already there. 80/20 gives #F26464: 4.82:1 on the button's own surface and unmistakably red (R 242 against G/B 100). */ --tz-error-ink: color-mix(in srgb, var(--tz-error) 80%, var(--tz-error-tint)); /* ⚠️ And the amber needs no lightening at all, which is the one place it differs from the red: the primitive #F59E0B measures 6.96:1 on n900 as it stands, where #EF4444 manages 3.97 and has to be mixed. So this is the primitive, and the mix above is not a house style to copy. */ --tz-warning-ink: var(--tz-warning); /* Same shape as the amber: the primitive is 5.89:1 on n900 where the deep is 1.95, so on dark the ink IS the primitive and no mix is needed. */ --tz-success-ink: var(--tz-success); /* The blue is the one that does need a mix: the primitive #0080AA measures 3.32:1 on n900 and misses AA, so it is lifted toward its own tint until it passes — 5.25:1. */ --tz-info-ink: color-mix(in srgb, var(--tz-info) 70%, var(--tz-info-tint)); --tz-shadow-sm: var(--tz-shadow-sm-dark); --tz-shadow-md: var(--tz-shadow-md-dark); --tz-shadow-lg: var(--tz-shadow-lg-dark); --tz-shadow-xl: var(--tz-shadow-xl-dark); /* Bootstrap ships its own [data-bs-theme=dark] block earlier in bootstrap.css. Ours loads later and wins on what it sets, so point every var we care about back at the aliases rather than inheriting Bootstrap's slate palette. */ --bs-body-bg: var(--tz-bg); --bs-body-color: var(--tz-text-muted); --bs-emphasis-color: var(--tz-heading); --bs-secondary-color: var(--tz-text-muted); --bs-secondary-bg: var(--tz-surface-sunken); --bs-tertiary-bg: var(--tz-bg); --bs-border-color: var(--tz-border); --bs-link-color: var(--tz-accent); --bs-link-hover-color: var(--tz-white); --bs-secondary-bg-subtle: var(--tz-surface-sunken); --bs-light-bg-subtle: var(--tz-surface-sunken); --bs-dark-bg-subtle: var(--tz-n800); /* Bootstrap's dark block fills these with navy/slate. bg-primary-subtle is the keyboard-shortcut chip in 19 templates; the danger/success ones are the toasts. */ --bs-primary-bg-subtle: var(--tz-info-bg); --bs-success-bg-subtle: var(--tz-success-bg); --bs-info-bg-subtle: var(--tz-info-bg); --bs-warning-bg-subtle: var(--tz-warning-bg); --bs-danger-bg-subtle: var(--tz-error-bg); --bs-primary-border-subtle: var(--tz-border); --bs-secondary-border-subtle: var(--tz-border); --bs-success-border-subtle: var(--tz-success); --bs-info-border-subtle: var(--tz-info); --bs-warning-border-subtle: var(--tz-warning); --bs-danger-border-subtle: var(--tz-error); --bs-code-color: var(--tz-text); --bs-link-color-rgb: var(--tz-accent-rgb); --bs-form-invalid-color: var(--tz-error-fg); --bs-form-invalid-border-color: var(--tz-error); --bs-form-valid-color: var(--tz-success-fg); --bs-form-valid-border-color: var(--tz-success); } /* The topbar is --tz-primary-dark (#02232D) and the dark page is n950 (#0B1D24) — 1.15:1 apart, so the bar would dissolve into the page. Separate them with a hairline instead of inventing a fill the brand book does not define. */ [data-bs-theme="dark"] .tz-topbar { border-bottom: 1px solid var(--tz-n800); } /* Selection: accent background with primary-dark text (brand book). */ [data-bs-theme="dark"] ::selection { background: var(--tz-accent); color: var(--tz-primary-dark); } /* Form fields in dark, and a deliberate divergence from the brand book. The book's "n800 border" is guidance for CARDS, where the n900 fill already separates the component from the n950 page. A field is identified BY its border, and n800-on-n900 is 1.33:1 — invisible, failing WCAG 1.4.11's 3:1 for UI components. Two fixes: recess the field to the page colour so it reads as an input well, and take the border to n500 (3.82:1 against that fill). */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea.form-control { background-color: var(--tz-bg); border-color: var(--tz-n500); } [data-bs-theme="dark"] .input-group-text { border-color: var(--tz-n500); } /* Same reasoning for the topbar hairline: n800 on n950 is 1.54:1, so the separator would not separate. n600 clears 3:1 while staying a hairline. */ [data-bs-theme="dark"] .tz-topbar { border-bottom-color: var(--tz-n600); } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-font-sans-serif); font-size: var(--tz-text-base); /* Inter renders harsh with macOS subpixel AA — smooth it. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Base UI controls share the 14px base for a consistent rhythm. ⚠️ U-25 — .btn IS NOT IN THIS LIST, AND ITS ABSENCE IS THE FIX. A direct `font-size` here beats Bootstrap's own `.btn { font-size: var(--bs-btn-font-size) }` on equal specificity, because this file loads later — so THE ONE BUTTON's `--bs-btn-font-size: var(--tz-text-sm)` at the end of this file was set, inherited by nothing, and silently overruled. The product shipped two button label sizes: 14px for every default button and 13px only where `.btn-sm` (two classes) beat this rule — the variant the settlement says is dead was the only one arriving at its stated size, and screens carried both at once. It is the same shadowing the type-scale comment in tokens.css already describes one layer down. */ .form-control, .form-select, .form-label, .input-group-text, .table, .dropdown-item, .nav-link, .badge { font-size: var(--tz-text-base); } small, .small, .text-muted, .form-text { font-size: var(--tz-text-sm); } /* Buttons never wrap — icon + label + shortcut badge stay on a single line. */ .btn { white-space: nowrap; } /* The serif display face is reserved for the few large titles; everything else is Inter. Semibold, not bold: Source Serif 4 at 700 goes black at display sizes, and the editorial register wants a confident title, not a shouted one. */ h1, h2, .h1, .h2 { font-family: var(--tz-font-display); color: var(--tz-heading); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-family: var(--bs-font-sans-serif); color: var(--tz-heading); font-weight: 600; letter-spacing: -0.005em; } h1, .h1 { font-size: var(--tz-text-h1); } h2, .h2 { font-size: var(--tz-text-h2); } h3, .h3 { font-size: var(--tz-text-h3); } h4, .h4 { font-size: var(--tz-text-h4); } h5, .h5 { font-size: var(--tz-text-lg); } h6, .h6 { font-size: var(--tz-text-base); } /* Fixed-width: standardized on JetBrains Mono everywhere code appears. */ code, pre, kbd, samp, .font-monospace { font-family: var(--tz-font-mono); } .ace_editor, .ace_editor .ace_text-layer, .ace_editor .ace_line { font-family: var(--tz-font-mono) !important; } /* ============================================================================ BUTTON ROLES — normalized to 4. Every button maps to exactly one: Primary .btn-primary solid teal — the one main action/view Secondary .btn-outline-* neutral hairline outline — toolbar / non-primary actions Neutral .btn-secondary filled gray — cancel / toolbar / utility Danger .btn-danger/-outline red — destructive only Retired (do not reintroduce): btn-light + btn-default (→ btn-secondary), btn-outline-secondary (→ btn-secondary), btn-dark, btn-warning/-outline-warning (→ btn-danger by intent). .btn-link is a separate no-chrome inline-action utility (icon edit/delete/cancel), not an emphasis role — left to Bootstrap. ============================================================================ */ /* Primary → solid teal */ .btn-primary { --bs-btn-bg: var(--tz-primary); --bs-btn-border-color: var(--tz-primary); --bs-btn-hover-bg: var(--tz-primary-dark); --bs-btn-hover-border-color: var(--tz-primary-dark); --bs-btn-active-bg: var(--tz-primary-dark); --bs-btn-active-border-color: var(--tz-primary-dark); --bs-btn-disabled-bg: var(--tz-primary); --bs-btn-disabled-border-color: var(--tz-primary); } /* The dark accent-filled `.btn-primary` rule that stood here predated THE one button and out-specified it — `[data-bs-theme="dark"] .btn-primary` beats the consolidated block's bare `.btn-primary`, so every resting primary in dark mode kept an accent fill the settlement had retired. The dark half of the consolidated block (end of this file) is the only dark button rule now. */ /* Non-primary outline actions (.btn-outline-primary) share the neutral hairline treatment of .btn-outline-secondary — styled together in golden.css so an action toolbar never mixes teal and neutral outline buttons. Teal is reserved for the one filled .btn-primary. */ /* Neutral → filled gray */ .btn-secondary { --bs-btn-bg: var(--tz-surface); --bs-btn-border-color: var(--tz-border); --bs-btn-color: var(--tz-text-muted); --bs-btn-hover-bg: var(--tz-surface); --bs-btn-hover-border-color: var(--tz-border-strong); --bs-btn-hover-color: var(--tz-heading); --bs-btn-active-bg: var(--tz-surface-sunken); --bs-btn-active-border-color: var(--tz-border-strong); --bs-btn-active-color: var(--tz-heading); --bs-btn-disabled-color: var(--tz-text-disabled); --bs-btn-disabled-bg: var(--tz-surface); --bs-btn-disabled-border-color: var(--tz-border); } /* Danger → solid / outline red (destructive only). ⚠️ THE RULES ARE NOT HERE, and the empty space is the point: a `.btn-danger` block and a `.btn-outline-danger` block used to sit at this spot, and every declaration in both was re-set, at the same specificity and later in the file, by the DESTRUCTIVE half of THE ONE BUTTON at the foot of this stylesheet. Nothing they said reached a screen. Verified by dumping all seventeen --bs-btn-* variables plus the three computed colours for both classes in both themes, with the two blocks present and deleted: identical. They were left standing when the settlement consolidated the roles, and the next person to read them wasted an edit on it — the U-22 fix in this branch was written into the dead `.btn-outline-danger` block first, where it did nothing. Destructive lives in one place. */ /* focus = visible ring, not glow (scoped to interactive elements) */ .btn:focus-visible, .form-control:focus, .form-select:focus, a:focus-visible, .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tz-primary); border-color: var(--tz-primary); } /* ⚠️ THE DARK HALF OF THE SAME RULE, AND IT IS NOT DECORATION (U-10). --tz-primary is a raw brand primitive, not one of the semantic aliases the dark block at the top of this file redefines, so the ring above resolves to #024256 in BOTH themes. Measured against the dark page (n900): 1.36:1, where WCAG 1.4.11 asks 3:1 of a focus indicator — and because the rule cancels the browser outline FIRST, there is no fallback underneath it. A keyboard user in dark mode had nothing at all. The accent is what dark uses for emphasis everywhere else in this file, and it measures 6.80:1 on n900. The three siblings that already knew this — .btn-close, .btn-check + .btn and .tz-passtoggle — carry the same override; these are the ones that did not. Solid, not the light theme's soft glow: a 25%-alpha halo composites to 1.32:1 on a dark ground however wide it is drawn, so on dark the ring is ink. */ [data-bs-theme="dark"] .btn:focus-visible, [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] a:focus-visible, [data-bs-theme="dark"] .nav-link:focus-visible { box-shadow: 0 0 0 2px var(--tz-accent); border-color: var(--tz-accent); } /* Same reasoning, for the three rings written elsewhere in this file: the checkbox (its halo is primary at 25%, 1.07:1), the pagination link, and the invalid field — the last one is left alone, --tz-error measures 3.97:1 on n900 and already passes. */ [data-bs-theme="dark"] .form-check-input:focus { border-color: var(--tz-accent); box-shadow: 0 0 0 2px var(--tz-accent); } [data-bs-theme="dark"] .pagination { --bs-pagination-focus-box-shadow: 0 0 0 2px var(--tz-accent); } a { color: var(--bs-link-color); text-decoration: none; } /* Unified link policy: no underline anywhere; interactivity is a colour shift on hover. Structural links (below) inherit text colour and reveal the link colour. */ a:hover { text-decoration: none; } /* Heroicons via sprite + fragment inherit text color */ .tz-icon { display: inline-block; vertical-align: -0.125em; color: currentColor; } /* Compact padding for data tables (tz-table). */ .tz-table > :where(thead, tbody) > tr > :where(th, td) { padding: 6px 10px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---- App shell: a light editorial masthead (L1) + underline sub-nav (L2). The September 2026 reskin retired the dark-teal bar: an editorial page is paper edge to edge, and the chrome separates with a rule, not a colour block. It also dissolves two audit findings at once — the invisible focus ring on the dark bar (M4) and the sub-AA "Admin User" text (M3) — because the links now sit on the same surface the rest of the theme is contrast-checked against. ---- */ .tz-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 56px; background: var(--tz-surface); border-bottom: 1px solid var(--tz-border); } .tz-brand { display: inline-flex; align-items: center; gap: 10px; height: 60px; text-decoration: none; margin-right: 32px; } .tz-brand__icon { height: 28px; width: 28px; } /* An cannot recolor with the theme, so light/dark are two files and CSS shows exactly one. */ .tz-brand__icon--dark { display: none; } [data-bs-theme="dark"] .tz-brand__icon--light { display: none; } [data-bs-theme="dark"] .tz-brand__icon--dark { display: inline; } /* Icon and word, both in the corporate teal, nothing else. */ .tz-brand__word { font-family: var(--tz-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--tz-primary); line-height: 1; } [data-bs-theme="dark"] .tz-brand__word { color: var(--tz-white); } .tz-topbar-spacer { flex: 1 1 auto; } .tz-user { display: inline-flex; align-items: center; color: var(--tz-heading); } /* The corner shows only the avatar. The menu fits a normal full name on one line; exceptional names ellipsize instead of making the whole dropdown unwieldy. */ .tz-user-menu { min-width: 270px; max-width: calc(100vw - 24px); } /* The theme, as ONE row (decision 8 of 9 September 2026): the label, then a segmented control of the three modes. It replaced a header and three menu items. The options keep .dropdown-item so Bootstrap's arrow-key navigation still walks them; these rules only undo that class's full-width block shape. What is stored and how is untouched -- tzTheme in main.js, localStorage 'tz-theme'. */ .tz-theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px; } .tz-theme-switch__label { font-size: var(--tz-text-sm); color: var(--tz-text-muted); white-space: nowrap; } .tz-theme-switch__options { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--tz-r-full); background: var(--tz-surface-sunken); } /* Icon-only since 17 September 2026: the word lives in the tooltip and in the hidden span. */ .tz-user-menu .tz-theme-switch__option.dropdown-item { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 26px; padding: 0; border-radius: var(--tz-r-full); font-size: 14px; line-height: 1; color: var(--tz-text-muted); background: transparent; white-space: nowrap; } .tz-user-menu .tz-theme-switch__option.dropdown-item:hover { color: var(--tz-heading); background: var(--tz-surface-hover); } .tz-user-menu .tz-theme-switch__option.dropdown-item.active { color: var(--tz-heading); background: var(--tz-surface); font-weight: 600; box-shadow: 0 0 0 1px var(--tz-border); } .tz-user-menu .tz-theme-switch__option.dropdown-item:focus-visible { outline: 2px solid var(--tz-primary); outline-offset: 1px; } [data-bs-theme="dark"] .tz-user-menu .tz-theme-switch__option.dropdown-item:focus-visible { outline-color: var(--tz-accent); } .tz-user-menu-name { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; } /* Focus that survives the light chrome (audit M4: the entity select had outline:none and an invisible ring; the topbar ring was primary-on-primary-dark, ~1.4:1). */ .tz-topnav > a:focus-visible, .tz-brand:focus-visible { outline: 3px solid var(--tz-accent-blue); outline-offset: 2px; border-radius: var(--tz-r-sm); } .form-select:focus, .form-control:focus { border-color: var(--tz-accent-blue); box-shadow: 0 0 0 3px rgba(var(--tz-info-rgb), .25); } [data-bs-theme="dark"] .tz-topnav > a:focus-visible, [data-bs-theme="dark"] .tz-brand:focus-visible { outline-color: var(--tz-accent); } /* The sections of the place you are in — quiet words on paper, the current one simply ink: 13px at weight 400, colour-only hover, no pill. ⚠️ Since the single row of 27 September 2026 this nav holds the SUBSCREENS, which is what the underline-tab `.tz-subnav` under the bar used to hold; that second row is gone, and with it the only two rules in the product that depended on a 105px chrome. The links keep the shape they had here, not the tabs' — a row inside a bar is words, and an underline needs a baseline of its own to sit on. */ /* ⚠️ U-18 — THE CONTAINMENT IS NOT A PHONE RULE, AND SCOPING IT TO ONE COST EVERY SCREEN BETWEEN 768px AND 1139px. These four declarations lived inside the `max-width: 767.98px` block below, whose own comment says it was written for an earlier version of this same bug. Above 767px they stopped applying, the nav went back to its natural 886px, and the bar pushed the DOCUMENT sideways: measured 374px of horizontal scroll at 768 and 118px at 1024, on 17 of 17 screens, with the account avatar landing at x=1141 — off the viewport, so profile, theme and sign-out were unreachable without scrolling the page sideways first. A nav that does not fit has to scroll inside itself at EVERY width; the phone block keeps only what is really about phones (the gutters). The height is part of the fix, not tidying: `overflow-x: auto` makes this a scroll container, which clips in both axes, and the links' focus outline is drawn 5px outside their 34px box. Standing the nav up to the bar's own 60px gives the ring its room back. */ .tz-topnav { display: flex; align-items: center; gap: 2px; /* ⚠️ `0 1 auto`, not `1 1 auto`: the nav is the SECTIONS now, not the whole first level, and it sits between the place control and the corner. Growing into the bar's slack would push the fade below onto empty paper at every width and leave the corner nowhere to be. The slack belongs to .tz-topbar-spacer. */ min-width: 0; flex: 0 1 auto; height: 60px; /* ⚠️ THE PADDING IS THE FOCUS RING'S ROOM, AND THE NEGATIVE MARGIN GIVES IT BACK. A link's ring is drawn 5px outside its box (3px outline at a 2px offset) and the first link starts flush with the nav's content edge, so the scroll container clipped the whole left side of it: measured at 1440, 114 ring pixels in the 5px band left of "Your work" before this bar became a scroll container, 0 after. Clipping happens at the PADDING box, so 6px of inline padding puts the ring back inside; the matching negative margin takes the 6px off the layout again, which is why every link lands on the pixel it did before. `scroll-padding-inline` does the same job for the far end: without it the browser scrolls a focused link flush to the scrollport edge and clips the ring it just revealed. */ padding-inline: 6px; margin-inline: -6px; scroll-padding-inline: 6px; overflow-x: auto; /* ⚠️ AND THE SCROLLBAR IS VISIBLE, EXCEPT ON A PHONE. Hiding it was right while this block only ran under the phone breakpoint, where a finger swipes the bar and a scrollbar is just clutter. Applied at every width it took the affordance away from the pointer that has no swipe: between 768px and 1139px the entities and Administration are past the edge and the only way to them was shift+wheel — nobody's first guess. Overflowing and looking as if it does not is worse than the sideways scroll this rule replaced, because that at least was visible. A scrollbar appears only when there IS overflow, so nothing shows at 1140 and above; it is drawn as a 4px hairline in the border colour rather than the OS default, which would be a slab across the masthead. */ scrollbar-width: thin; scrollbar-color: var(--tz-border-strong) transparent; } .tz-topnav::-webkit-scrollbar { height: 4px; } .tz-topnav::-webkit-scrollbar-track { background: transparent; } .tz-topnav::-webkit-scrollbar-thumb { background: var(--tz-border-strong); border-radius: var(--tz-r-full); } /* ⚠️ AND A FADE AT THE TRAILING EDGE, BECAUSE A SCROLLBAR IS NOT A PROMISE. Where the OS draws overlay scrollbars — macOS by default, and this repository's own headless Chromium, which is how the omission was measured — the bar above is invisible until something is already scrolling, so on its own it does not tell anybody the bar has more in it. The fade does, at rest, in every engine. ⚠️ It used to say the nav is `flex: 1 1 auto`, so "wherever the links fit there is slack to its right and the gradient falls on empty paper" — and this branch changed the nav to `flex: 0 1 auto` (see its own note above), which makes the nav shrink to its content: when the links fit, there is NO slack and those 28px land on the last word. That is why the class below exists and why it is not an optimisation. `:not(:focus-within)` is not tidiness — a mask fades the element AND its descendants' outlines, so without it the focus ring of the last link would dim exactly when a keyboard user needed it. The gradient's colour is a stencil, not a colour: mask-mode is alpha here, so only the opacity of the two stops matters. */ .tz-topnav:not(:focus-within) { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 28px), transparent); } /* ⚠️ AND THE FADE GOES AS SOON AS THE BAR FITS, WHICH IS THE NORMAL CASE. The gradient above assumes the nav is a scroll container with something past its edge; once the *More (n)* menu absorbs the sections that do not fit, the content ends exactly at the edge and those last 28px land on the last word instead of on empty paper — a permanently half-faded word on every screen. (This said «once "All" absorbs the entities», which was the entity bar: that bar and that panel went with the one-row chrome.) The script adds this class when, after fitting, the nav no longer overflows, and takes it off when it still does (a phone too narrow even for the collapsed row). ⚠️ WITH NO SCRIPT THE CLASS IS NEVER ADDED AND THE LAST WORD STAYS HALF-FADED — which is the cost of the fallback, not a claim that nothing changes: this comment used to say the fade "behaves exactly as it did before", and with `flex: 0 1 auto` that is no longer true. It is the state a CSP-enforced page or a no-JS reader gets, and it is legible; the affordance is what degrades, not the row. Two classes, so it outweighs the `:not()` above rather than needing an !important. */ .tz-topnav.tz-topnav--fits { -webkit-mask-image: none; mask-image: none; } .tz-topnav > a { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: var(--tz-r-sm); color: var(--tz-text-muted); font-size: var(--tz-text-sm); font-weight: 400; text-decoration: none; white-space: nowrap; transition: color .15s ease; } .tz-topnav > a:hover { color: var(--tz-heading); background: var(--tz-surface-sunken); } .tz-topnav > a.active { color: var(--tz-heading); font-weight: 600; } /* ---- "All": the entities that do not fit (decision 2 of 9 September 2026) -------------------- The bar pins as many entities as fit and the rest live in this menu. The script in header.html decides how many that is; everything here is what the two states look like. The rule below is belt and braces, and says so. `.tz-topnav > a` sets `display: inline-flex`, an author declaration that would beat the UA's `[hidden]` — but Bootstrap's reboot already ships `[hidden] { display: none !important; }`, and that is what actually hides an overflowing entity today. This line keeps the bar working if the reboot is ever dropped or trimmed, which is the kind of change nobody would connect to the menu. It is written against .tz-topbar rather than .tz-topnav so the same line also covers the menu and the button, which are the bar's children and not the nav's. */ .tz-topbar [hidden] { display: none; } /* ══ THE PLACE — where you are, and everywhere you can go from here ══════════════════════════ The one control of the bar that holds STATE rather than destinations, which is why it is boxed and the sections beside it are not: it is labelled with the current entity (or Administration, or Home) and changing it changes what the whole page is about. A category label — the word "Entities" — belongs to a menu of destinations, where there is no current value; this is not that, and the box is what says so. It is a bare