/* rustango-cms admin chrome — Material 3 design system. * * Single source of truth for every /cms-admin/* screen + the * stand-alone auth flow (login / password-reset). * * Token tier (`--md-sys-*`): direct port of the Tailwind config in * the project-root `./design` reference. Component tier reads through * the alias layer (`--accent`, `--fg`, `--bg`, ...) so the existing * 77 class names in this file keep working without per-template * rewrites. Tenant-theme overrides emitted by `theme::emit_css()` * cascade ABOVE this file (loaded inline in `_base.html`), so the * resolution order is: built-in MD3 defaults → tenant theme overrides * → @media (prefers-color-scheme: dark). * * Host apps override by dropping `static/cms_admin/cms.css` in their * project root — the admin's static handler returns it instead of * this bundled file. * * Namespacing convention (#314): * - The admin shell carries `.rcms-admin` on (both _base.html * and _auth_layout.html). It is the single scope anchor for the * framework's chrome. * - New component classes use the `rcms-` prefix. The legacy `cms-` * classes are fully folded into `rcms-`; folding the remaining * unprefixed/generic names (`.rcms-btn`, `.rcms-card`, `.rcms-field`, …) into the * prefix is the #293-coordinated rewrite, in progress. Avoid bare * generic names in new markup. * - Bare element rules (typography, form controls) that would restyle * user-authored HTML rendered INLINE in the admin (rich-text / * stream / block previews) must be `@scope`d to `.rcms-admin` with a * lower boundary at the user-content wrappers (`.rcms-block-*`, * `.rcms-stream-block`, `.rcms-block-picker-tile-preview`, `.rcms-display-chip-value`) * so admin chrome never leaks into stored content. The page-preview * pane is already iframe-isolated and needs no scoping. */ /* ============================================================ * 1. MD3 design tokens * ============================================================ */ :root { /* Color roles — light mode. Calmer indigo than the design's raw #1b32e7 — the original read too saturated against the light surface under hands-on review. #6366f1 (Tailwind indigo-500) is the modern "mild SaaS indigo" — Stripe / Linear / Notion sit in the same band. Container / fixed tiers shift up in step so the full M3 role family stays internally consistent. */ --md-sys-color-primary: #6366f1; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #818cf8; --md-sys-color-on-primary-container: #1e1b4b; --md-sys-color-primary-fixed: #eef2ff; --md-sys-color-primary-fixed-dim: #c7d2fe; --md-sys-color-on-primary-fixed: #312e81; --md-sys-color-on-primary-fixed-variant: #4338ca; --md-sys-color-secondary: #5f5e5e; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #e5e2e1; --md-sys-color-on-secondary-container: #656464; --md-sys-color-tertiary: #942f00; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #bd3e00; --md-sys-color-on-tertiary-container: #ffe5dd; --md-sys-color-tertiary-fixed: #ffdbcf; --md-sys-color-tertiary-fixed-dim: #ffb59c; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-success: #22a06b; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #d1fae5; --md-sys-color-on-success-container: #065f46; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-on-warning-container: #92400e; --md-sys-color-surface: #f8f9fa; --md-sys-color-surface-dim: #d9dadb; --md-sys-color-surface-bright: #f8f9fa; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f3f4f5; --md-sys-color-surface-container: #edeeef; --md-sys-color-surface-container-high: #e7e8e9; --md-sys-color-surface-container-highest: #e1e3e4; --md-sys-color-surface-variant: #e1e3e4; --md-sys-color-on-surface: #191c1d; --md-sys-color-on-surface-variant: #444656; --md-sys-color-surface-tint: #2f44f4; --md-sys-color-outline: #757688; --md-sys-color-outline-variant: #c5c5d9; --md-sys-color-inverse-surface: #2e3132; --md-sys-color-inverse-on-surface: #f0f1f2; --md-sys-color-inverse-primary: #bdc2ff; /* Shape — corner radii. */ --md-sys-radius-sm: 2px; --md-sys-radius-md: 4px; --md-sys-radius-lg: 8px; --md-sys-radius-xl: 12px; --md-sys-radius-full: 9999px; /* Elevation — three tiers using paired shadows (one tight + one diffuse) so depth reads on light surfaces without becoming muddy. Tuned warmer + slightly stronger than the design's raw 0.03-alpha — under hands-on review the chrome wanted more definition between surface tiers. */ --md-sys-elevation-1: 0px 1px 3px rgba(15, 23, 42, 0.08), 0px 1px 2px rgba(15, 23, 42, 0.04); --md-sys-elevation-2: 0px 4px 12px rgba(15, 23, 42, 0.08), 0px 2px 4px rgba(15, 23, 42, 0.04); --md-sys-elevation-3: 0px 12px 28px rgba(15, 23, 42, 0.10), 0px 4px 8px rgba(15, 23, 42, 0.06); /* Tinted shadow for the primary filled button — a soft halo of the primary hue lifts it off the surface without using a darker grey shadow (which always reads heavy on filled M3). */ --md-sys-shadow-primary: 0px 4px 14px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); /* Type — Hanken Grotesk for UI, Literata for editorial body. */ --md-sys-font-ui: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --md-sys-font-editor: 'Literata', Georgia, 'Times New Roman', serif; --md-sys-typescale-display-lg: 700 48px/60px var(--md-sys-font-ui); --md-sys-typescale-ui-header: 600 18px/24px var(--md-sys-font-ui); --md-sys-typescale-ui-body: 400 14px/20px var(--md-sys-font-ui); --md-sys-typescale-ui-button: 500 14px/20px var(--md-sys-font-ui); --md-sys-typescale-ui-label: 600 12px/16px var(--md-sys-font-ui); --md-sys-typescale-editor-text: 400 16px/1.7 var(--md-sys-font-editor); /* ---------------------------------------------------------- * 1a. Alias layer — existing chrome variables map onto MD3 * tokens. The 77 existing class names below this block * keep working without per-template rewrites. * ---------------------------------------------------------- */ --fg: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --muted-2: var(--md-sys-color-outline); --accent: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary-container); --accent-soft: var(--md-sys-color-primary-fixed); --accent-soft-2: var(--md-sys-color-primary-fixed-dim); /* #293 phase 1 — the `--violet*` alias trio was an early shorthand that no template or stylesheet ever read; removed. Templates that need the tertiary swatch reference `--md-sys-color-tertiary*` directly (the styleguide + the brand-image card both already do). */ --border: var(--md-sys-color-outline-variant); --border-strong: var(--md-sys-color-outline); --bg: var(--md-sys-color-surface); --bg-elevated: var(--md-sys-color-surface-container-lowest); --danger: var(--md-sys-color-error); --danger-soft: var(--md-sys-color-error-container); --danger-hover: var(--md-sys-color-on-error-container); --success: var(--md-sys-color-success); --success-soft: var(--md-sys-color-success-container); --success-hover: var(--md-sys-color-on-success-container); --warning: var(--md-sys-color-warning); --warning-soft: var(--md-sys-color-warning-container); --warning-hover: var(--md-sys-color-on-warning-container); /* Sidebar palette — M3 nav rail. Light surface with on-surface text; primary becomes the *active* color, not the background. Matches the design file's `bg-surface-container-low` aside. */ --sidebar-bg: var(--md-sys-color-surface-container-low); --sidebar-fg: var(--md-sys-color-on-surface); --sidebar-fg-muted: var(--md-sys-color-on-surface-variant); --sidebar-active: var(--md-sys-color-primary); --sidebar-active-bg: var(--md-sys-color-primary-fixed); --sidebar-hover-bg: var(--md-sys-color-surface-container); --sidebar-border: var(--md-sys-color-outline-variant); --font-body: var(--md-sys-font-ui); --font-heading: var(--md-sys-font-ui); --radius-md: var(--md-sys-radius-md); } /* Dark token block applies in TWO contexts: * 1. OS dark mode (`@media (prefers-color-scheme: dark)`), unless * the user explicitly chose Light via the toggle (`[data-theme="light"]`). * 2. Explicit Dark choice via the toggle (`[data-theme="dark"]`), * regardless of OS pref. * CSS can't combine an `@media` query with another selector via comma, * so the body is duplicated below. Keep them in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Dark mode owns its own identity — violet primary + emerald accent on charcoal-with-violet-tint surfaces. Distinct from a mechanical inversion of the light palette. */ /* Primary — violet-400 family. */ --md-sys-color-primary: #a78bfa; --md-sys-color-on-primary: #1e1b4b; --md-sys-color-primary-container: #7c3aed; --md-sys-color-on-primary-container: #ede9fe; --md-sys-color-primary-fixed: #312e81; --md-sys-color-primary-fixed-dim: #5b21b6; --md-sys-color-on-primary-fixed: #ede9fe; --md-sys-color-on-primary-fixed-variant: #c4b5fd; /* Tertiary becomes the emerald accent — used for success states + focus highlights + the "right rail" cues. */ --md-sys-color-tertiary: #34d399; --md-sys-color-on-tertiary: #064e3b; --md-sys-color-tertiary-container: #047857; --md-sys-color-on-tertiary-container: #d1fae5; --md-sys-color-tertiary-fixed: #064e3b; --md-sys-color-tertiary-fixed-dim: #065f46; /* Success — emerald, matching the tertiary accent so the two reinforce each other in dark mode. */ --md-sys-color-success: #34d399; --md-sys-color-on-success: #064e3b; --md-sys-color-success-container: #047857; --md-sys-color-on-success-container: #d1fae5; /* Surface containers — charcoal with a faint violet tint so the chrome reads warm against the violet primary. */ --md-sys-color-surface: #141220; --md-sys-color-surface-dim: #0e0c18; --md-sys-color-surface-bright: #322f4a; --md-sys-color-surface-container-lowest: #0a0814; --md-sys-color-surface-container-low: #1e1b2e; --md-sys-color-surface-container: #232036; --md-sys-color-surface-container-high: #2a2740; --md-sys-color-surface-container-highest: #322f4a; --md-sys-color-surface-variant: #2a2740; --md-sys-color-on-surface: #e7e5ef; --md-sys-color-on-surface-variant: #c4b5d9; --md-sys-color-outline: #8b85a8; --md-sys-color-outline-variant: #322f4a; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; /* Re-tune the sidebar palette for dark mode so the active pill picks up violet against the violet-tinted charcoal. */ --sidebar-bg: var(--md-sys-color-surface-container-low); --sidebar-fg: var(--md-sys-color-on-surface); --sidebar-fg-muted: var(--md-sys-color-on-surface-variant); --sidebar-active: var(--md-sys-color-primary); --sidebar-active-bg: var(--md-sys-color-primary-fixed-dim); --sidebar-hover-bg: var(--md-sys-color-surface-container); --sidebar-border: var(--md-sys-color-outline-variant); } } /* Explicit dark — mirrors the @media block above. Both bodies must * stay in sync (CSS can't deduplicate across an @media boundary). */ :root[data-theme="dark"] { color-scheme: dark; /* Primary — violet-400 family. */ --md-sys-color-primary: #a78bfa; --md-sys-color-on-primary: #1e1b4b; --md-sys-color-primary-container: #7c3aed; --md-sys-color-on-primary-container: #ede9fe; --md-sys-color-primary-fixed: #312e81; --md-sys-color-primary-fixed-dim: #5b21b6; --md-sys-color-on-primary-fixed: #ede9fe; --md-sys-color-on-primary-fixed-variant: #c4b5fd; /* Tertiary becomes the emerald accent. */ --md-sys-color-tertiary: #34d399; --md-sys-color-on-tertiary: #064e3b; --md-sys-color-tertiary-container: #047857; --md-sys-color-on-tertiary-container: #d1fae5; --md-sys-color-tertiary-fixed: #064e3b; --md-sys-color-tertiary-fixed-dim: #065f46; /* Success — emerald, matching the tertiary accent. */ --md-sys-color-success: #34d399; --md-sys-color-on-success: #064e3b; --md-sys-color-success-container: #047857; --md-sys-color-on-success-container: #d1fae5; /* Surface containers — charcoal with a faint violet tint. */ --md-sys-color-surface: #141220; --md-sys-color-surface-dim: #0e0c18; --md-sys-color-surface-bright: #322f4a; --md-sys-color-surface-container-lowest: #0a0814; --md-sys-color-surface-container-low: #1e1b2e; --md-sys-color-surface-container: #232036; --md-sys-color-surface-container-high: #2a2740; --md-sys-color-surface-container-highest: #322f4a; --md-sys-color-surface-variant: #2a2740; --md-sys-color-on-surface: #e7e5ef; --md-sys-color-on-surface-variant: #c4b5d9; --md-sys-color-outline: #8b85a8; --md-sys-color-outline-variant: #322f4a; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --sidebar-bg: var(--md-sys-color-surface-container-low); --sidebar-fg: var(--md-sys-color-on-surface); --sidebar-fg-muted: var(--md-sys-color-on-surface-variant); --sidebar-active: var(--md-sys-color-primary); --sidebar-active-bg: var(--md-sys-color-primary-fixed-dim); --sidebar-hover-bg: var(--md-sys-color-surface-container); --sidebar-border: var(--md-sys-color-outline-variant); } /* ============================================================ * 1b. Accessibility prefs (#14) — driven by `[data-text-scale]` * and `[data-high-contrast]` on . Toggle UI lives in the * sidebar footer; preferences persist in localStorage. * ============================================================ */ /* Text scale — applied as root font-size %, which `em`-based units in cms.css and `rem`-based units in editor templates both pick up. Default (M) is omitted: it's 100%. */ :root[data-text-scale="s"] { font-size: 87.5%; } :root[data-text-scale="l"] { font-size: 112.5%; } :root[data-text-scale="xl"] { font-size: 125%; } /* High-contrast — bumps border weight + opacity, swaps the focus ring color to maximum contrast, darkens muted text. */ :root[data-high-contrast] { --md-sys-color-outline: #000000; --md-sys-color-outline-variant: #4a4a4a; --md-sys-color-on-surface-variant: #1a1a1a; } :root[data-high-contrast] .rcms-card, :root[data-high-contrast] table.rcms-data, :root[data-high-contrast] .rcms-field input, :root[data-high-contrast] .rcms-field select, :root[data-high-contrast] .rcms-field textarea, :root[data-high-contrast] .rcms-btn-outlined, :root[data-high-contrast] .rcms-sidebar-logout, :root[data-high-contrast] .rcms-mode-toggle, :root[data-high-contrast] .rcms-search-input, :root[data-high-contrast] select:not(.rcms-field select) { border-width: 2px; } :root[data-high-contrast] :focus, :root[data-high-contrast] :focus-visible { /* #336 — dual-ring focus that reads on ANY background. Outer ring is the forced max-contrast neutral (--md-sys-color-outline = #000 in light / #fff in dark) instead of `primary`, which blended into filled / active primary surfaces. The inner --md-sys-color-surface band (≈white in light / dark in dark — the inverse tone) fills the outline-offset gap, so on the dark sidebar (where the black outline has little contrast) the light band still reads, and vice-versa. `!important` keeps a control's decorative elevation shadow from suppressing the ring. */ outline: 3px solid var(--md-sys-color-outline); outline-offset: 2px; box-shadow: 0 0 0 2px var(--md-sys-color-surface) !important; } :root[data-high-contrast][data-theme="dark"] { --md-sys-color-outline: #ffffff; --md-sys-color-outline-variant: #c4b5d9; --md-sys-color-on-surface-variant: #f5f3ff; } /* Sidebar links are stacked ~2px apart, so an *outset* focus ring (offset + the high-contrast dual ring) spills onto the items above/below and reads as overlapping menu rows. Inset the ring so it stays inside each link. */ .rcms-sidebar-link:focus-visible { outline-offset: -2px; } :root[data-high-contrast] .rcms-sidebar-link:focus, :root[data-high-contrast] .rcms-sidebar-link:focus-visible { outline-offset: -3px; box-shadow: none !important; } /* ============================================================ * 2. Reset + global type * ============================================================ */ /* #314 — the universal box-sizing reset and the body chrome are qualified on the admin root class so cms.css can never restyle a host page that happens to load it. */ body.rcms-admin, .rcms-admin * { box-sizing: border-box; } html:has(> body.rcms-admin), body.rcms-admin { height: 100%; } body.rcms-admin { font: var(--md-sys-typescale-ui-body); /* Override the shorthand's literal 14px with rem so the per-user text-scale toggle (#14) can scale body content via :root[data-text-scale]'s font-size %. Components that use the typescale shorthand directly (buttons, chips) intentionally stay at fixed px so the chrome density doesn't drift. */ font-size: 0.875rem; line-height: 1.43; color: var(--fg); margin: 0; background: var(--bg); display: flex; height: 100vh; /* Lock body height so the sidebar can be a fixed-height flex column. Scrolling happens inside `.rcms-app-main` (the right-hand column), which keeps the sidebar perfectly stationary even on long edit pages. */ overflow: hidden; } /* #314 — scope the heading font to the admin shell, stopping at inline user-content wrappers so a user's stored

in a rich-text / stream / block preview keeps its own (public/UA) font instead of admin chrome. The richtext preview deliberately styles its own content and is left in-scope. / @scope (.rcms-admin) to (.rcms-block-paragraph, .rcms-block-rich-text, .rcms-block-raw-html, .rcms-block-snippet-chooser, .rcms-block-picker-tile-preview, .rcms-stream-block, .rcms-display-chip-value) { h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } } / ============================================================ * 3. Material Symbols icons * ============================================================ / .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: -4px; } .material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .material-symbols-rounded.sm { font-size: 18px; vertical-align: -3px; } .material-symbols-rounded.lg { font-size: 24px; vertical-align: -6px; } / ============================================================ * 4. Sidebar * ============================================================ / .rcms-sidebar { width: 260px; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; / Soft edge shadow instead of a hard right border — reads as elevation against the main content. / box-shadow: 4px 0 16px rgba(15, 23, 42, 0.04), 1px 0 0 var(--md-sys-color-outline-variant); z-index: 1; / #271 — smooth width transition for the collapse toggle. / transition: width 0.18s ease; } / #272 — Collapsible sidebar group (e.g. Reports). Native `
` powers the open/closed toggle so the chevron click, keyboard activation, and accessibility tree all work without custom JS. `.rcms-sidebar-group-summary` is the parent row; `.rcms-sidebar-group-items` wraps the nested links and animates expand/collapse via a grid-template-rows trick (rows track interpolates from 0fr to 1fr, so the wrapper's height tweens with the content). / .rcms-sidebar-group { display: block; } .rcms-sidebar-group-summary { / Hide the native disclosure triangle — we draw our own chevron. / list-style: none; cursor: pointer; user-select: none; } .rcms-sidebar-group-summary::-webkit-details-marker { display: none; } .rcms-sidebar-group-label { / Push the chevron to the far right of the summary row. / flex: 1; } .rcms-sidebar-group-chevron { font-size: 18px !important; transition: transform 0.18s ease; opacity: 0.7; } .rcms-sidebar-group[open] > .rcms-sidebar-group-summary .rcms-sidebar-group-chevron { transform: rotate(180deg); } .rcms-sidebar-group.active > .rcms-sidebar-group-summary { / Subtle tint on the parent row when any child is the current page — reinforces "you are here, inside this group". Lighter than the full `.active` treatment so the actual current item still reads as the primary highlight. / color: var(--md-sys-color-on-surface); } / Nested links sit a touch deeper than top-level entries so the group reads as nested in scan. / .rcms-sidebar-group-items .rcms-sidebar-link { padding-left: 36px; font-size: 13px; } .rcms-sidebar-group-items .rcms-sidebar-link .material-symbols-rounded { font-size: 18px; } / Smooth expand/collapse. Override the user-agent stylesheet that slot-hides
's non-summary children so they stay in layout for the JS-driven height animation in cms-ux.js. CSS alone can't transition between `0` and `auto`, so the JS intercepts the
click, sets inline `height: ` to the measured scrollHeight, lets the transition run, then clears the inline style at transitionend so the [open] rule's `height: auto` takes back over (and the group grows naturally if items are added/removed dynamically). / .rcms-sidebar-group > :not(summary) { display: block; } .rcms-sidebar-group-items { overflow: hidden; height: 0; opacity: 0; transition: height 0.22s cubic-bezier(0.2, 0, 0, 1), opacity 0.16s ease; } .rcms-sidebar-group[open] > .rcms-sidebar-group-items { height: auto; opacity: 1; } /* Collapsed-rail tweaks: drop the chevron + label so the group's summary looks like a regular icon entry; force the items rail open so nested icons stay visible without requiring a click. / html[data-sidebar-collapsed] .rcms-sidebar-group > .rcms-sidebar-group-items { height: auto; opacity: 1; } html[data-sidebar-collapsed] .rcms-sidebar-group-chevron, html[data-sidebar-collapsed] .rcms-sidebar-group-label { display: none; } html[data-sidebar-collapsed] .rcms-sidebar-group-items .rcms-sidebar-link { padding-left: 0; } .rcms-sidebar-brand { padding: 24px 24px 20px; display: flex; align-items: center; gap: 12px; } .rcms-sidebar-brand::before { content: ""; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--md-sys-radius-lg); background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-primary-container)); box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); } / An uploaded logo IS the brand mark — drop the decorative gradient square. / .rcms-sidebar-brand.has-logo::before { display: none; } .rcms-sidebar-brand h1 { font: var(--md-sys-typescale-ui-header); font-size: 15px; margin: 0 0 2px; color: var(--md-sys-color-on-surface); } .rcms-sidebar-brand .rcms-tenant { font: var(--md-sys-typescale-ui-label); text-transform: none; letter-spacing: 0; color: var(--sidebar-fg-muted); } .rcms-sidebar-nav { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; } .rcms-sidebar-section { font: var(--md-sys-typescale-ui-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sidebar-fg-muted); padding: 18px 12px 6px; } .rcms-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--sidebar-fg-muted); text-decoration: none; font: var(--md-sys-typescale-ui-button); border-radius: var(--md-sys-radius-full); transition: background 0.12s, color 0.12s; } .rcms-sidebar-link .material-symbols-rounded { font-size: 20px; color: var(--sidebar-fg-muted); transition: color 0.12s; } .rcms-sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--md-sys-color-on-surface); } .rcms-sidebar-link:hover .material-symbols-rounded { color: var(--md-sys-color-on-surface); } .rcms-sidebar-link.active { background: var(--sidebar-active-bg); color: var(--md-sys-color-on-primary-fixed); font-weight: 600; } .rcms-sidebar-link.active .material-symbols-rounded { color: var(--md-sys-color-on-primary-fixed); } .rcms-sidebar-link .rcms-icon { display: inline-block; width: 16px; font-size: 14px; text-align: center; } .rcms-sidebar-footer { padding: 16px 16px 20px; border-top: 1px solid var(--sidebar-border); font: var(--md-sys-typescale-ui-label); text-transform: none; letter-spacing: 0; color: var(--sidebar-fg-muted); display: flex; flex-direction: column; gap: 8px; } .rcms-sidebar-footer a { color: var(--sidebar-fg-muted); text-decoration: none; } .rcms-sidebar-footer a:hover { color: var(--md-sys-color-primary); } / Light / Dark / System segmented toggle — three Material-symbol icons in a single pill, with the active mode highlighted. `.rcms-text-scale-toggle` (#14) shares the same shape; the only difference is the button glyph (A at progressively larger sizes). / .rcms-mode-toggle, .rcms-text-scale-toggle { display: inline-flex; background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-radius-full); padding: 2px; gap: 2px; / Let the bar size to its contents so the pills inside get breathing room. `align-self: stretch` previously pinned each segment to equal-share which cramped the longer labels. / flex-wrap: wrap; } .rcms-mode-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; background: transparent; color: var(--md-sys-color-on-surface-variant); border: 0; border-radius: var(--md-sys-radius-full); cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; font: var(--md-sys-typescale-ui-button); } .rcms-mode-toggle-btn:hover { color: var(--md-sys-color-on-surface); } .rcms-mode-toggle-btn.active, .rcms-mode-toggle-btn[aria-checked="true"] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .rcms-mode-toggle-btn .material-symbols-rounded { font-size: 16px; vertical-align: 0; } .rcms-sidebar-logout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; background: transparent; color: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-radius-full); font: var(--md-sys-typescale-ui-button); text-transform: none; letter-spacing: 0; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .rcms-sidebar-logout:hover { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: var(--md-sys-color-error); } .rcms-sidebar-logout .material-symbols-rounded { font-size: 16px; } / #337 — equalize the stacked footer buttons. "Sign out" is a