/* ===================== RampUp Rocket · Workspace theme ===================== The single source of truth for workspace colour. Loaded by shared/dashboard_base.html, so it applies to logged-in pages only — public pages, the login page and /admin never see these rules. Light is the default. Dark activates when static/js/theme_toggle.js puts data-theme="dark" on (persisted in localStorage as 'rr-theme'). RULE — layout safety: nothing in a dark-scoped block may set a layout property. Colour, background, border-colour, box-shadow, fill and outline-colour only. Layout is then identical in both themes by construction. See docs/superpowers/specs/2026-07-27-dark-mode-design.md. */ /* ---------- Light (default) ---------- */ .rr-dashboard, .rr2{ --rr-bg:#f4f5f8; --rr-panel:#ffffff; --rr-panel-2:#f7f8fa; --rr-border:#e7e9ef; --rr-border-soft:#eef0f4; --rr-ink:#0f1626; --rr-ink-2:#1c2740; --rr-muted:#667085; --rr-faint:#98a2b3; --rr-accent:#e11d48; --rr-accent-ink:#be123c; --rr-accent-fill:#e11d48; --rr-accent-soft:#fdeaee; --rr-on-accent:#ffffff; --rr-navy:#1b2a63; --rr-navy-hover:#14224f; --rr-navy-fill:#1b2a63; --rr-on-navy:#ffffff; /* Interaction surfaces */ --rr-hover:#f5f6f9; --rr-active:#eef1f6; --rr-pill:#f0f2f6; --rr-tile:#f1f3f8; --rr-tile-ink:#334155; --rr-border-hover:#dcdfe8; --rr-border-strong:#d6dbe6; --rr-rule:#d8dce5; --rr-dot:#c3c8d4; --rr-dot-soft:#dfe3ea; --rr-icon-faint:#cbd2de; --rr-shadow:0 1px 2px rgba(16,22,38,.03); --rr-shadow-lg:0 8px 24px rgba(16,22,38,.07); /* Status */ --rr-success:#1a9950; --rr-success-bg:#e6f5ec; --rr-success-ink:#1a7a45; --rr-warning:#b7791f; --rr-warning-bg:#fdf1dc; --rr-warning-ink:#c77a12; --rr-warning-dot:#e8961a; --rr-info:#3457c9; --rr-info-bg:#e8edfb; --rr-info-ink:#1c3596; --rr-info-border:#dde5fa; --rr-info-surface:#eef2fc; --rr-info-text:#324063; --rr-info-strong:#1c2a52; --rr-info-link:#2a4bc4; --rr-neutral:#7b8598; --rr-neutral-bg:#eef1f5; --rr-danger:#c81e51; --rr-danger-bg:#fbe3ea; /* Brick red — the Space Grotesk pages (Modules, Brief History) use this rather than the rose accent. Kept as its own token so the light UI is unchanged. */ --rr-brick:#c2382f; --rr-brick-fill:#c2382f; --rr-on-brick:#ffffff; /* Signal blue (the "this week" dot) */ --rr-fill-blue:#0B3D91; --rr-fill-blue-hover:#083374; --rr-tint-blue:rgba(0,82,164,.05); --rr-focus-ring:rgba(27,42,99,.08); --rr-overlay:rgba(238,240,243,.96); --rr-blue:#2a51d4; --rr-blue-halo:rgba(42,81,212,.14); --rr-accent-halo:rgba(225,29,72,.14); /* Inverted "today" chip — background is dark in light mode and must NOT simply follow --rr-ink, which flips to near-white in dark mode. */ --rr-today-bg:#0f1626; --rr-today-ink:#ffffff; --rr-today-label:#9aa4bb; --rr-today-dot:#66708a; /* Avatar palette (bg/fg pairs), applied via .rr-av-1 … .rr-av-6 */ --rr-av1-bg:#fbe3ea; --rr-av1-fg:#c81e51; --rr-av2-bg:#e2ebfd; --rr-av2-fg:#2a51d4; --rr-av3-bg:#fdeede; --rr-av3-fg:#bf7712; --rr-av4-bg:#e1f3e8; --rr-av4-fg:#1a9950; --rr-av5-bg:#efe7fc; --rr-av5-fg:#7c3aed; --rr-av6-bg:#e6f4f6; --rr-av6-fg:#0e8aa0; /* ---- Mission Brief (Advance Prep + In-Call) ---- Light values are the page's shipped colours, unchanged. The dark block below is what gives the brief a themed appearance; briefing.html, incall_view.css and advance_prep_cards.css consume these names only. */ --mb-ink:#16223b; --mb-strong:#1a1a1a; --mb-body:#2f3a4c; --mb-body-2:#374151; --mb-muted:#6b7686; --mb-meta:#576172; --mb-faint:#9aa1ac; --mb-dim:#6b7280; --mb-dim-2:#9ca3af; --mb-dim-3:#b6bcc6; --mb-red:#c2382f; --mb-red-soft:#fdeaee; --mb-green:#1f7a45; --mb-green-soft:#eaf6ee; --mb-surface:#ffffff; --mb-surface-2:#fafbfc; --mb-surface-3:#f9fafb; --mb-canvas:#eef0f3; --mb-backdrop:#141c2e; --mb-line:#eceef1; --mb-line-2:#e5e7eb; --mb-line-3:#f0f0f0; --mb-hover:#f2f3f5; --mb-active:#f6f7f9; --mb-pill:#f1f3f6; --mb-fill:#16223b; --mb-on-fill:#ffffff; --mb-fill-hover:#0e1830; --mb-blue:#0B3D91; --mb-blue-fill:#0B3D91; --mb-blue-2:#083374; --mb-blue-soft:#eff6ff; --mb-quote:#f7f8fa; --mb-code:#f3f4f6; --mb-win-line:#d7e8dd; --mb-win-bg:#f4faf6; --mb-win-sep:#eef4f0; --mb-win-chk:#1f9a52; --mb-warn-bg:#fff8f0; --mb-warn-line:#f0d9bd; --mb-warn-ink:#7a4a12; --mb-chip-line:#d7dbe2; --mb-frame-line:#e0e3e9; --mb-table-alt:#f8f9fa; --mb-table-hover:#e9ecef; --mb-dot:#c3c8d4; --mb-file-bg:#f4f6fa; --mb-btn-line:#d1d5db; --mb-count-open:rgba(255,255,255,.75); --mb-count-open-ink:#6b7686; --mb-tint-blue:rgba(11,61,145,.06); --mb-accent-ink:#FC3D21; --mb-stage-bg:#FC3D21; --mb-on-stage:#ffffff; --rr-radius:16px; --dashboard-sidebar-width:252px; color-scheme:light; } /* ---------- Dark ---------- */ html[data-theme="dark"] .rr-dashboard, html[data-theme="dark"] .rr2{ --rr-bg:#0f1319; --rr-panel:#161b24; --rr-panel-2:#1d2431; --rr-border:#2a3242; --rr-border-soft:#212836; --rr-ink:#e9edf5; --rr-ink-2:#c9d2e0; --rr-muted:#9aa5b8; --rr-faint:#8b95a9; --rr-accent:#f8536e; --rr-accent-ink:#fb7185; --rr-accent-fill:#c81e45; --rr-accent-soft:#2b1620; --rr-on-accent:#ffffff; --rr-navy:#9db0f2; --rr-navy-hover:#b3c2f7; --rr-navy-fill:#34489c; --rr-on-navy:#ffffff; --rr-hover:#1d2431; --rr-active:#242d3d; --rr-pill:#232b39; --rr-tile:#212a38; --rr-tile-ink:#c9d2e0; --rr-border-hover:#3a4459; --rr-border-strong:#3a4459; --rr-rule:#39435a; --rr-dot:#4a5468; --rr-dot-soft:#333c4d; --rr-icon-faint:#4a5468; --rr-shadow:0 1px 2px rgba(0,0,0,.4); --rr-shadow-lg:0 12px 32px rgba(0,0,0,.45); --rr-success:#5ad48b; --rr-success-bg:#12291d; --rr-success-ink:#5ad48b; --rr-warning:#f0b34a; --rr-warning-bg:#2c2210; --rr-warning-ink:#f0b34a; --rr-warning-dot:#f0b34a; --rr-info:#9db0f2; --rr-info-bg:#1a2136; --rr-info-ink:#b8c6f7; --rr-info-border:#2b3557; --rr-info-surface:#1a2136; --rr-info-text:#c3cdec; --rr-info-strong:#e4eaff; --rr-info-link:#9db0f2; --rr-neutral:#9aa5b8; --rr-neutral-bg:#222a37; --rr-danger:#f8536e; --rr-danger-bg:#2b1620; --rr-tint-blue:#1a2136; --rr-focus-ring:rgba(157,176,242,.22); --rr-overlay:rgba(15,19,25,.96); --rr-brick:#f0776a; --rr-brick-fill:#a83125; --rr-on-brick:#ffffff; /* app.css declares these on :root for the whole site. Re-declaring them here re-themes every shared component and every inline var(--nasa-*) usage on workspace pages, without touching public pages. --nasa-blue must stay dark enough to carry white text: .btn-nasa uses it as a fill. Text-coloured usages are handled by the component layer below. */ /* Text-safe: the overwhelming majority of --nasa-blue usages are type and icons on a surface. The handful of components that FILL with it are redirected to --rr-fill-blue in the component layer below, because no single value can be both readable as text on a dark panel and dark enough to carry white text. */ --nasa-blue:#9db0f2; --nasa-blue-hover:#b3c2f7; --rr-fill-blue:#3d55b8; --rr-fill-blue-hover:#4a63c9; --nasa-black:#e9edf5; --nasa-gray:#9aa5b8; /* app.css uses these only as FILLS that carry white text (nav, section headers, table heads) — they must stay dark. Lifted slightly so a header bar still separates from the panel behind it. */ --primary-black:#232b39; --charcoal:#2d3646; --text-gray:#9aa5b8; /* Bootstrap's default link blue is 3.84:1 on the dark panel. */ --bs-link-color:#9db0f2; --bs-link-hover-color:#b3c2f7; --border-color:#2a3242; --card-background:#161b24; --background-light:#0f1319; --shadow-light:0 2px 8px rgba(0,0,0,.4); --shadow-medium:0 4px 16px rgba(0,0,0,.45); --rr-blue:#8ba6ff; --rr-blue-halo:rgba(139,166,255,.18); --rr-accent-halo:rgba(248,83,110,.18); /* Inverted chip flips the other way in dark: a raised slate block that still stands out against the panel, with light text on it. */ --rr-today-bg:#39476a; --rr-today-ink:#f4f7ff; --rr-today-label:#c3cce0; --rr-today-dot:#9aa8c6; /* Avatar palette — deep tinted chips with a light glyph, so the initials read against a dark card instead of glowing pastel. */ --rr-av1-bg:#3d1b28; --rr-av1-fg:#f8a3b8; --rr-av2-bg:#1c2a4d; --rr-av2-fg:#9db4f5; --rr-av3-bg:#3a2a12; --rr-av3-fg:#f0bd77; --rr-av4-bg:#153322; --rr-av4-fg:#7ddba4; --rr-av5-bg:#2b2145; --rr-av5-fg:#c0a7f5; --rr-av6-bg:#123037; --rr-av6-fg:#79c9d8; /* ---- Mission Brief (Advance Prep + In-Call) ---- Matched to the dashboard: same surfaces, borders, ink and status greens, so the brief reads as the same product in dark. Fill tokens stay dark enough to carry white text; text tokens lift for contrast. */ --mb-ink:#e9edf5; --mb-strong:#f2f5fb; --mb-body:#c9d2e0; --mb-body-2:#c9d2e0; --mb-muted:#9aa5b8; --mb-meta:#9aa5b8; --mb-faint:#8b95a9; --mb-dim:#9aa5b8; --mb-dim-2:#8b95a9; --mb-dim-3:#8b95a9; --mb-red:#f0776a; --mb-red-soft:#2e1a19; --mb-green:#5ad48b; --mb-green-soft:#12291d; --mb-surface:#161b24; --mb-surface-2:#1d2431; --mb-surface-3:#1a2029; --mb-canvas:#0f1319; --mb-backdrop:#080b12; --mb-line:#2a3242; --mb-line-2:#2a3242; --mb-line-3:#212836; --mb-hover:#1d2431; --mb-active:#242d3d; --mb-pill:#232b39; --mb-fill:#34489c; --mb-on-fill:#ffffff; --mb-fill-hover:#3f56b8; --mb-blue:#9db0f2; --mb-blue-fill:#3d55b8; --mb-blue-2:#4a63c9; --mb-blue-soft:#1a2136; --mb-quote:#1a2130; --mb-code:#232b39; --mb-win-line:#1f4632; --mb-win-bg:#12291d; --mb-win-sep:#1d3527; --mb-win-chk:#5ad48b; --mb-warn-bg:#2c2210; --mb-warn-line:#4a3a17; --mb-warn-ink:#f0b34a; --mb-chip-line:#3a4459; --mb-frame-line:#2a3242; --mb-table-alt:#1a2029; --mb-table-hover:#242d3d; --mb-dot:#4a5468; --mb-file-bg:#1d2431; --mb-btn-line:#3a4459; --mb-count-open:rgba(255,255,255,.14); --mb-count-open-ink:#f0c9c3; --mb-tint-blue:#1a2136; --mb-accent-ink:#ff7a63; --mb-stage-bg:#a83125; --mb-on-stage:#ffffff; color-scheme:dark; } /* The canvas behind the shell (overscroll, short pages). app.css paints body #fafafa, which would flash light around the edges. */ html[data-theme="dark"] body{background:#0f1319;} /* Set by theme_toggle.js for the single frame in which the tokens change, so `transition: all` rules in app.css don't animate the whole page through an intermediate grey. Removed on the next frame. */ html.rr-theme-switching *, html.rr-theme-switching *::before, html.rr-theme-switching *::after{transition:none !important;} /* Tells the browser to render native widgets — checkboxes, radios, scrollbars, date pickers, form autofill — in their dark variants. Set on because scrollbars and pickers are painted at document level. Public pages never get the attribute, so they keep light native controls. */ html[data-theme="dark"]{color-scheme:dark;} html[data-theme="dark"] .rr-dashboard input[type="checkbox"], html[data-theme="dark"] .rr-dashboard input[type="radio"]{accent-color:var(--rr-navy);} /* The wordmark is dark navy artwork — invert it to a white wordmark rather than shipping a second asset. */ html[data-theme="dark"] .rr-brand-logo{filter:brightness(0) invert(1);opacity:.92;} /* Flash messages render in base.html, outside .rr-dashboard, so they need their own dark scope or they stay light on a dark page. */ html[data-theme="dark"] .flash-message{ background:#161b24; border-color:#2a3242; color:#e9edf5; box-shadow:0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .flash-message.flash-success{border-left-color:#5ad48b;} html[data-theme="dark"] .flash-message.flash-error{border-left-color:#f8536e;} html[data-theme="dark"] .flash-close{color:#9aa5b8;} /* ========================================================================== Shared components inside the workspace shell -------------------------------------------------------------------------- Bootstrap and app.css paint these light and are shared with public pages, so they can't be tokenised at the source. Scoping the dark values to .rr-dashboard flips them on workspace pages only. Colour properties only — see the layout-safety rule at the top. ========================================================================== */ /* --- Form controls --- */ html[data-theme="dark"] .rr-dashboard .form-control, html[data-theme="dark"] .rr-dashboard .form-select{ background:var(--rr-panel-2); border-color:var(--rr-border); color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .form-control::placeholder{color:var(--rr-faint);} html[data-theme="dark"] .rr-dashboard .form-control:focus, html[data-theme="dark"] .rr-dashboard .form-select:focus{ background:var(--rr-panel); border-color:var(--rr-navy); color:var(--rr-ink); box-shadow:0 0 0 3px rgba(157,176,242,.18); } html[data-theme="dark"] .rr-dashboard .form-control:disabled, html[data-theme="dark"] .rr-dashboard .form-control[readonly]{ background:var(--rr-bg); color:var(--rr-muted); } /* Chrome paints autofilled fields blue. */ html[data-theme="dark"] .rr-dashboard .form-control:-webkit-autofill, html[data-theme="dark"] .rr-dashboard .form-control:-webkit-autofill:focus{ -webkit-text-fill-color:var(--rr-ink); -webkit-box-shadow:0 0 0 1000px var(--rr-panel-2) inset; caret-color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .form-label{color:var(--rr-ink-2);} html[data-theme="dark"] .rr-dashboard .form-text, html[data-theme="dark"] .rr-dashboard .text-muted{color:var(--rr-muted) !important;} html[data-theme="dark"] .rr-dashboard .form-check-input{ background-color:var(--rr-panel-2); border-color:var(--rr-border); } html[data-theme="dark"] .rr-dashboard .form-check-input:checked{ background-color:var(--rr-navy-fill); border-color:var(--rr-navy-fill); } html[data-theme="dark"] .rr-dashboard .input-group-text{ background:var(--rr-panel-2); border-color:var(--rr-border); color:var(--rr-muted); } /* --- Cards / surfaces --- */ html[data-theme="dark"] .rr-dashboard .card, html[data-theme="dark"] .rr-dashboard .nasa-card, html[data-theme="dark"] .rr-dashboard .modal-content, html[data-theme="dark"] .rr-dashboard .dropdown-menu, html[data-theme="dark"] .rr-dashboard .list-group-item{ background:var(--rr-panel); border-color:var(--rr-border); color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .card-header, html[data-theme="dark"] .rr-dashboard .card-footer{ background:var(--rr-panel-2); border-color:var(--rr-border); color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .bg-light, html[data-theme="dark"] .rr-dashboard .bg-white{ background:var(--rr-panel-2) !important; color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .dropdown-item{color:var(--rr-ink-2);} html[data-theme="dark"] .rr-dashboard .dropdown-item:hover, html[data-theme="dark"] .rr-dashboard .dropdown-item:focus{ background:var(--rr-hover); color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard hr{border-color:var(--rr-border);} /* --- Tables --- */ html[data-theme="dark"] .rr-dashboard .table{ --bs-table-bg:transparent; --bs-table-color:var(--rr-ink); --bs-table-border-color:var(--rr-border); --bs-table-striped-bg:var(--rr-panel-2); --bs-table-striped-color:var(--rr-ink); --bs-table-hover-bg:var(--rr-hover); --bs-table-hover-color:var(--rr-ink); color:var(--rr-ink); border-color:var(--rr-border); } html[data-theme="dark"] .rr-dashboard .table > :not(caption) > * > *{ background-color:transparent; color:var(--rr-ink); border-bottom-color:var(--rr-border); } html[data-theme="dark"] .rr-dashboard .table thead th{color:var(--rr-muted);} /* --- Alerts --- */ html[data-theme="dark"] .rr-dashboard .alert-info{ background:var(--rr-info-bg);border-color:var(--rr-info-border);color:var(--rr-info-text); } html[data-theme="dark"] .rr-dashboard .alert-success{ background:var(--rr-success-bg);border-color:#1f4b32;color:var(--rr-success); } html[data-theme="dark"] .rr-dashboard .alert-warning{ background:var(--rr-warning-bg);border-color:#4a3a17;color:var(--rr-warning); } html[data-theme="dark"] .rr-dashboard .alert-danger{ background:var(--rr-danger-bg);border-color:#4d2231;color:var(--rr-danger); } html[data-theme="dark"] .rr-dashboard .alert-secondary, html[data-theme="dark"] .rr-dashboard .alert-light{ background:var(--rr-neutral-bg);border-color:var(--rr-border);color:var(--rr-ink-2); } html[data-theme="dark"] .rr-dashboard .alert-link{color:var(--rr-info-link);} /* --- Buttons defined in app.css --- */ html[data-theme="dark"] .rr-dashboard .btn-nasa-outline{ color:var(--rr-navy) !important; border-color:var(--rr-navy); background:transparent; } html[data-theme="dark"] .rr-dashboard .btn-nasa-outline:hover{ background:var(--rr-navy-fill); color:var(--rr-on-navy) !important; } html[data-theme="dark"] .rr-dashboard .btn-outline-secondary{ color:var(--rr-ink-2); border-color:var(--rr-border); } html[data-theme="dark"] .rr-dashboard .btn-outline-secondary:hover{ background:var(--rr-hover); color:var(--rr-ink); } html[data-theme="dark"] .rr-dashboard .btn-light{ background:var(--rr-panel-2); border-color:var(--rr-border); color:var(--rr-ink); } /* --- Speech-to-text mic buttons (app.css paints them white) --- */ html[data-theme="dark"] .rr-dashboard .stt-mic-btn{ background:var(--rr-panel-2); border-color:var(--rr-navy); color:var(--rr-navy); } html[data-theme="dark"] .rr-dashboard .stt-mic-btn:hover{ background:var(--rr-navy-fill); color:var(--rr-on-navy); } /* --- Components that FILL with blue --- --nasa-blue is text-tuned in dark, so anything using it as a background with white content needs the fill token instead. */ html[data-theme="dark"] .rr-dashboard .btn-nasa, html[data-theme="dark"] .rr-dashboard .badge-high-fit{ background:var(--rr-fill-blue) !important; color:#fff !important; } html[data-theme="dark"] .rr-dashboard .btn-nasa:hover{ background:var(--rr-fill-blue-hover) !important; } html[data-theme="dark"] .rr-dashboard .btn-nasa-outline:focus{ background:var(--rr-fill-blue); color:#fff !important; } html[data-theme="dark"] .rr-dashboard .module-icon, html[data-theme="dark"] .rr-dashboard .wave-bar, html[data-theme="dark"] .rr-dashboard .bv-dq-num{ background:var(--rr-fill-blue); } /* A table head that carries a blue fill needs light type on it, not muted. */ html[data-theme="dark"] .rr-dashboard .table thead th{color:var(--rr-ink);} /* --- Bootstrap outline buttons and links --- */ html[data-theme="dark"] .rr-dashboard .btn-outline-primary{ color:var(--rr-navy); border-color:var(--rr-navy); } html[data-theme="dark"] .rr-dashboard .btn-outline-primary:hover{ background:var(--rr-navy-fill); color:var(--rr-on-navy); border-color:var(--rr-navy-fill); } html[data-theme="dark"] .rr-dashboard .btn-outline-danger{ color:var(--rr-danger); border-color:var(--rr-danger); } html[data-theme="dark"] .rr-dashboard .btn-outline-danger:hover{ background:var(--rr-danger); color:#fff; } html[data-theme="dark"] .rr-dashboard a:not([class]){color:var(--rr-navy);} html[data-theme="dark"] .rr-dashboard a:not([class]):hover{color:var(--rr-navy-hover);} /* --- Progress / misc --- */ html[data-theme="dark"] .rr-dashboard .progress{background:var(--rr-panel-2);} html[data-theme="dark"] .rr-dashboard code, html[data-theme="dark"] .rr-dashboard pre{ background:var(--rr-panel-2); color:var(--rr-ink-2); } html[data-theme="dark"] .rr-dashboard .page-header-component{ background:var(--rr-panel); box-shadow:var(--rr-shadow); } html[data-theme="dark"] .rr-dashboard .page-header-title{color:var(--rr-ink);} html[data-theme="dark"] .rr-dashboard .page-header-subtitle{color:var(--rr-muted);} /* ---------- Avatar palette ---------- Was six inline bg/fg pairs in the templates; now classes so both themes can define their own values. Index with loop.index0 % 6 + 1. */ .rr-av-1{background:var(--rr-av1-bg);color:var(--rr-av1-fg);} .rr-av-2{background:var(--rr-av2-bg);color:var(--rr-av2-fg);} .rr-av-3{background:var(--rr-av3-bg);color:var(--rr-av3-fg);} .rr-av-4{background:var(--rr-av4-bg);color:var(--rr-av4-fg);} .rr-av-5{background:var(--rr-av5-bg);color:var(--rr-av5-fg);} .rr-av-6{background:var(--rr-av6-bg);color:var(--rr-av6-fg);} /* ---------- Theme toggle ---------- */ .rr-theme-toggle{ flex:0 0 auto;margin-left:auto; display:flex;align-items:center;justify-content:center; width:30px;height:30px;padding:0; border:1px solid var(--rr-border);border-radius:9px; background:var(--rr-panel);color:var(--rr-muted); cursor:pointer; transition:background .14s ease,color .14s ease,border-color .14s ease; } .rr-theme-toggle:hover{background:var(--rr-hover);color:var(--rr-ink);} .rr-theme-toggle:focus-visible{outline:2px solid var(--rr-navy);outline-offset:2px;} .rr-theme-toggle i{font-size:12.5px;} /* One icon per theme; the other is hidden. */ .rr-theme-toggle .rr-icon-dark{display:none;} html[data-theme="dark"] .rr-theme-toggle .rr-icon-dark{display:inline-block;} html[data-theme="dark"] .rr-theme-toggle .rr-icon-light{display:none;} /* In the icon rail the footer has ~52px of usable width — avatar and toggle stack instead of crowding. Applies in both themes. */ html.rr-sidebar-collapsed .rr-sidebar-foot, .rr-dashboard.is-rail-locked .rr-sidebar-foot{flex-direction:column;gap:10px;} html.rr-sidebar-collapsed .rr-theme-toggle, .rr-dashboard.is-rail-locked .rr-theme-toggle{margin-left:0;} @media (max-width:860px){ html.rr-sidebar-collapsed .rr-sidebar-foot, .rr-dashboard.is-rail-locked .rr-sidebar-foot{flex-direction:row;gap:11px;} html.rr-sidebar-collapsed .rr-theme-toggle, .rr-dashboard.is-rail-locked .rr-theme-toggle{margin-left:auto;} } @media (prefers-reduced-motion:reduce){ .rr-theme-toggle{transition:none;} }