/** * rmc-os-grade-density.css — v4.00.26 (2026-05-29) * * The "OS-grade command cockpit" density layer. * * Philosophy: every millimeter must serve a functional purpose. Hairline * borders, micro-typography, glow-edge focus states, compact letter- * spacing. The dashboard should read like a flight deck — dense, alive, * mechanically sound. No bloated padding. No round friendly card frames. * Razor-thin separators. Tabular numerics. Mono-glyph icons. * * Activation: OPT-IN ONLY via [data-rmc-os-grade="1"] on . Luxury * chrome is the platform baseline (default-off). Enable with * localStorage["rmc-os-grade"] = "on" or window.rmcOsGrade.set(true). * * Tokens this layer introduces: * --rmc-os-hairline — 1px hairline color (default --hairline-strong) * --rmc-os-glow — accent glow color (default --rmc-page-accent) * --rmc-os-scanline-alpha — overlay scanline opacity (default 0) * --rmc-os-font-mono — monospaced font stack for numerics * * What this layer changes: * - Tightens line-heights to 1.25 from 1.5+ * - Removes round-corner softness on data containers (4px max) * - Adds 1px hairline borders + glow edges on hover/focus * - Adds tabular-nums + slashed-zero on all .rmc-num and numeric inputs * - Adds a 28px "command rail" foot to sticky surfaces * - Razor-thin sidebar with compact item rhythm * - Auto-collapse cards on narrow viewports * * This file is additive. It does NOT replace the existing aesthetic * system — it overlays on top. Disable by removing the attribute. */ :root { --rmc-os-hairline: var(--hairline-strong, rgba(255, 255, 255, 0.14)); --rmc-os-glow: var(--rmc-page-accent, #6366f1); /* off-token-allow: os-grade-glow-default */ --rmc-os-glow-soft: var(--rmc-page-accent-soft, rgba(99, 102, 241, 0.18)); /* off-token-allow: os-grade-glow-default */ --rmc-os-scanline-alpha: 0; --rmc-os-font-mono: "JetBrains Mono", "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --rmc-os-density-step: 4px; } /* ============================================================ GLOBAL OS-GRADE TYPOGRAPHY ============================================================ */ html[data-rmc-os-grade="1"] body { font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1; letter-spacing: -0.005em; } html[data-rmc-os-grade="1"] :is(h1, h2, h3, h4, .cp-hero__title, .rmc-card__title, .modal-title) { letter-spacing: -0.012em; line-height: 1.18; } html[data-rmc-os-grade="1"] :is(.rmc-num, .stat-value, .lx-copilot__quickstat-value, .lx-copilot__context-metric-value, td.numeric, td.text-end, input[type="number"]) { font-family: var(--rmc-os-font-mono); font-feature-settings: "tnum" 1, "zero" 1; } html[data-rmc-os-grade="1"] :is(.small, .text-secondary, .text-muted, .help-text, .form-text, .help) { letter-spacing: 0; line-height: 1.35; } /* ============================================================ HAIRLINE BORDER + GLOW-EDGE SYSTEM ============================================================ */ /* Cards lose their round-friendly look. 4px max corner, 1px hairline, no shadow by default. Glow on hover/focus-within. */ html[data-rmc-os-grade="1"] :is(.rmc-card, .card, .module, .module.aligned, .rmc-stat-card, .lx-notebook, .rmc-os-page-header, .cp-page-header) { border-radius: 4px !important; /* style-allow: os-grade-corner */ border: 1px solid var(--rmc-os-hairline) !important; /* style-allow: os-grade-edge */ box-shadow: none !important; /* style-allow: os-grade-edge */ transition: border-color 120ms ease, box-shadow 120ms ease; } html[data-rmc-os-grade="1"] :is(.rmc-card, .card, .module, .rmc-stat-card):hover, html[data-rmc-os-grade="1"] :is(.rmc-card, .card, .module, .rmc-stat-card):focus-within { border-color: var(--rmc-os-glow) !important; /* style-allow: os-grade-edge */ box-shadow: 0 0 0 1px var(--rmc-os-glow-soft), 0 0 14px var(--rmc-os-glow-soft) !important; /* style-allow: os-grade-edge */ } /* Buttons: rectangular, hairline, glow on focus. No round pill default. */ html[data-rmc-os-grade="1"] :is(.btn, .cp-btn, .cp-primary-nav__pill, .tp-primary-nav__item, button[type="submit"], button[type="button"]):not(.rmc-security-posture-nav):not(.lx-copilot__quickstat):not(.rmc-admin-quickaction__btn) { border-radius: 3px !important; /* style-allow: os-grade-corner */ letter-spacing: 0.01em; font-weight: 500; } html[data-rmc-os-grade="1"] :is(.btn, .cp-btn, button[type="submit"]):focus-visible { outline: 1px solid var(--rmc-os-glow) !important; /* style-allow: os-grade-edge */ outline-offset: 1px; box-shadow: 0 0 12px var(--rmc-os-glow-soft) !important; /* style-allow: os-grade-edge */ } /* Inputs share the same hairline grammar. */ html[data-rmc-os-grade="1"] :is(input.form-control, select.form-select, textarea.form-control, input[type="text"], input[type="number"], input[type="email"], input[type="search"]) { border-radius: 3px !important; /* style-allow: os-grade-corner */ border: 1px solid var(--rmc-os-hairline) !important; /* style-allow: os-grade-edge */ } html[data-rmc-os-grade="1"] :is(input.form-control, select.form-select, textarea.form-control):focus { border-color: var(--rmc-os-glow) !important; /* style-allow: os-grade-edge */ box-shadow: 0 0 0 1px var(--rmc-os-glow-soft), 0 0 12px var(--rmc-os-glow-soft) !important; /* style-allow: os-grade-edge */ outline: none; } /* ============================================================ RAZOR-THIN SIDEBAR RHYTHM ============================================================ */ html[data-rmc-os-grade="1"] :is(.admin-sidebar-app-title, .admin-sidebar-model-link, .tp-sidebar-link, .portal-sidebar-link, .cp-sidebar-link, .studio-os__rail a) { padding: 5px 10px !important; /* style-allow: os-grade-sidebar */ font-size: 12px !important; /* style-allow: os-grade-sidebar */ line-height: 1.3 !important; /* style-allow: os-grade-sidebar */ letter-spacing: 0; display: flex !important; /* style-allow: os-grade-sidebar */ align-items: center; gap: 8px !important; /* style-allow: os-grade-sidebar */ border-radius: 3px !important; /* style-allow: os-grade-sidebar */ } html[data-rmc-os-grade="1"] :is(.admin-sidebar-icon, .admin-sidebar-model-icon, .tp-sidebar-link__icon, .cp-sidebar-link__icon) { width: 14px !important; /* style-allow: os-grade-sidebar */ height: 14px !important; /* style-allow: os-grade-sidebar */ flex: 0 0 14px; opacity: 0.75; } html[data-rmc-os-grade="1"] :is(.admin-sidebar-icon, .admin-sidebar-model-icon) svg { width: 14px; height: 14px; } html[data-rmc-os-grade="1"] .admin-sidebar-model-link.active .admin-sidebar-model-icon, html[data-rmc-os-grade="1"] :is(.admin-sidebar-model-link, .tp-sidebar-link):hover .admin-sidebar-icon { opacity: 1; } html[data-rmc-os-grade="1"] .admin-sidebar-section-heading, html[data-rmc-os-grade="1"] .cp-sidebar-section-heading { font-size: 9px !important; /* style-allow: os-grade-sidebar */ font-weight: 700 !important; /* style-allow: os-grade-sidebar */ letter-spacing: 0.1em !important; /* style-allow: os-grade-sidebar */ text-transform: uppercase; padding: 8px 10px 4px !important; /* style-allow: os-grade-sidebar */ margin: 0 !important; /* style-allow: os-grade-sidebar */ color: color-mix(in srgb, currentColor 60%, transparent); } html[data-rmc-os-grade="1"] .admin-sidebar-app-title { font-weight: 600; font-size: 11px !important; /* style-allow: os-grade-sidebar */ letter-spacing: 0.02em; } html[data-rmc-os-grade="1"] .admin-sidebar-model-list { gap: 1px !important; /* style-allow: os-grade-sidebar */ padding-left: 8px !important; /* style-allow: os-grade-sidebar */ border-left: 1px solid var(--rmc-os-hairline); margin-left: 10px !important; /* style-allow: os-grade-sidebar */ } html[data-rmc-os-grade="1"] .admin-sidebar-app-group { margin-bottom: 4px !important; /* style-allow: os-grade-sidebar */ } html[data-rmc-os-grade="1"] .admin-sidebar-section-divider { margin: 6px 8px !important; /* style-allow: os-grade-sidebar */ border-color: var(--rmc-os-hairline) !important; /* style-allow: os-grade-sidebar */ opacity: 0.6; } /* Sidebar containment — prevent overflow into the canvas area, which is what produced the "10 users" vertical pile-up bug. */ html[data-rmc-os-grade="1"] :is(.admin-sidebar, .cp-sidebar-inner, .tp-sidebar-inner, #portalSidebar, #cp-sidebar-col, .portal-sidebar-col, .cp-sidebar-col) { overflow-y: auto; overflow-x: hidden; max-height: 100dvh; overscroll-behavior: contain; contain: layout style; } /* ============================================================ COMMAND RAIL FOOT — a 28px telemetry strip across the bottom of the canvas with current section + density toggle + Cmd+K hint ============================================================ */ .rmc-os-command-rail { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1020; display: none; height: 24px; padding: 0 12px; align-items: center; gap: 12px; background: color-mix(in srgb, var(--surface-popover, #0c0c12) 92%, transparent); border-top: 1px solid var(--rmc-os-hairline); font-family: var(--rmc-os-font-mono); font-size: 10px; letter-spacing: 0.04em; color: color-mix(in srgb, currentColor 75%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-rmc-os-grade="1"] .rmc-os-command-rail { display: flex; } .rmc-os-command-rail__slot { display: inline-flex; align-items: center; gap: 4px; } .rmc-os-command-rail__slot--right { margin-left: auto; } .rmc-os-command-rail__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rmc-os-glow); box-shadow: 0 0 6px var(--rmc-os-glow); animation: rmc-os-pulse-soft 1.8s ease-in-out infinite; } @keyframes rmc-os-pulse-soft { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .rmc-os-command-rail__kbd { font-family: inherit; padding: 1px 5px; border: 1px solid var(--rmc-os-hairline); border-radius: 2px; font-size: 9px; } /* Push the canvas + footer-anchored widgets up by 24px so they don't collide with the command rail. */ html[data-rmc-os-grade="1"] body { padding-bottom: 24px; } html[data-rmc-os-grade="1"] .lx-notebook { bottom: 44px !important; } /* style-allow: os-grade-rail-offset */ html[data-rmc-os-grade="1"] .rmc-admin-quickaction { bottom: 120px !important; } /* style-allow: os-grade-rail-offset */ html[data-rmc-os-grade="1"] .rmc-hover-inspector { bottom: 200px !important; } /* style-allow: os-grade-rail-offset */ /* ============================================================ TABLE TIGHTNESS — micro-rows, mono numerics, glow on hovered cell ============================================================ */ html[data-rmc-os-grade="1"] :is(.rmc-data-table, #changelist table, table.table) { border: 1px solid var(--rmc-os-hairline); border-radius: 4px; font-size: 12px; letter-spacing: 0; } html[data-rmc-os-grade="1"] :is(.rmc-data-table, #changelist table, table.table) thead th { font-size: 9px !important; /* style-allow: os-grade-table */ font-weight: 700 !important; /* style-allow: os-grade-table */ letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px !important; /* style-allow: os-grade-table */ border-bottom: 1px solid var(--rmc-os-hairline) !important; /* style-allow: os-grade-table */ background: color-mix(in srgb, var(--surface-elevated, #1a1a22) 60%, transparent); } html[data-rmc-os-grade="1"] :is(.rmc-data-table, #changelist table, table.table) tbody td { padding: 5px 8px !important; /* style-allow: os-grade-table */ border-bottom: 1px solid color-mix(in srgb, var(--rmc-os-hairline) 50%, transparent) !important; /* style-allow: os-grade-table */ font-family: inherit; } html[data-rmc-os-grade="1"] :is(.rmc-data-table, #changelist table, table.table) tbody tr:hover td { background: color-mix(in srgb, var(--rmc-os-glow) 8%, transparent); } /* ============================================================ PAGE-FOLD HEADER STRIP COMPRESS ============================================================ */ html[data-rmc-os-grade="1"] :is(.cp-hero, .rmc-os-page-header) { border-bottom: 1px solid var(--rmc-os-hairline); border-radius: 0 !important; /* style-allow: os-grade-pagehead */ padding: 6px 16px !important; /* style-allow: os-grade-pagehead */ } html[data-rmc-os-grade="1"] .cp-hero__title, html[data-rmc-os-grade="1"] .rmc-os-page-header h1 { font-size: clamp(16px, 1.4vw, 22px) !important; /* style-allow: os-grade-pagehead */ margin: 0 !important; /* style-allow: os-grade-pagehead */ } html[data-rmc-os-grade="1"] .cp-hero__eyebrow { font-size: 9px !important; /* style-allow: os-grade-pagehead */ letter-spacing: 0.1em; } html[data-rmc-os-grade="1"] .cp-hero__lede { -webkit-line-clamp: 1; font-size: 11px !important; /* style-allow: os-grade-pagehead */ margin: 2px 0 !important; /* style-allow: os-grade-pagehead */ } /* ============================================================ DEVICE PROFILES ============================================================ */ /* ─ Ultra-wide / 4K — multi-pane horizontal split where possible ─ */ @media (min-width: 1920px) { html[data-rmc-os-grade="1"] body.admin-manager-shell .admin-cp-unified-page #content { display: grid; grid-template-columns: minmax(720px, 1.6fr) minmax(360px, 0.8fr); gap: 12px; align-items: start; } html[data-rmc-os-grade="1"] body.admin-manager-shell .admin-cp-unified-page #content > form { grid-column: 1; max-width: none; } html[data-rmc-os-grade="1"] body.admin-manager-shell .admin-cp-unified-page #content > .module:not(form .module), html[data-rmc-os-grade="1"] body.admin-manager-shell .admin-cp-unified-page #content > .changelist-search { grid-column: 1 / -1; } } /* ─ Tablet — sidebar collapses to 32px icon tray ─ */ @media (min-width: 768px) and (max-width: 1023.98px) { html[data-rmc-os-grade="1"] body.admin-manager-shell .cp-sidebar-col, html[data-rmc-os-grade="1"] body.portal-body-with-layout .portal-sidebar-col { width: 36px !important; /* style-allow: os-grade-tablet */ min-width: 36px !important; /* style-allow: os-grade-tablet */ overflow: hidden; } html[data-rmc-os-grade="1"] body.admin-manager-shell .cp-sidebar-col .admin-sidebar-model-link-text, html[data-rmc-os-grade="1"] body.admin-manager-shell .cp-sidebar-col .admin-sidebar-app-title a, html[data-rmc-os-grade="1"] body.portal-body-with-layout .portal-sidebar-col .tp-sidebar-link__label { display: none; } html[data-rmc-os-grade="1"] body.admin-manager-shell .admin-sidebar-section-heading { display: none; } } /* ─ Mobile / low-end — single-column stream, command bar bottom-zone ─ */ @media (max-width: 767.98px) { html[data-rmc-os-grade="1"] :is(.cp-sidebar-col, .portal-sidebar-col) { display: none; } html[data-rmc-os-grade="1"] :is(#content, #main-content, #cp-main-content) { padding: 6px 8px; } html[data-rmc-os-grade="1"] :is(.rmc-card, .module, .rmc-stat-card) { border-radius: 0 !important; /* style-allow: os-grade-mobile */ border-left: 0 !important; /* style-allow: os-grade-mobile */ border-right: 0 !important; /* style-allow: os-grade-mobile */ margin-inline: -8px; } } /* ============================================================ COMMAND PALETTE — OS-GRADE COCKPIT SKIN Layered on top of rmc-long-page-grammar.css base styles when [data-rmc-os-grade="1"] is active. Cinematic central modal: bigger, harder edges, mono hints, accent glow, razor-thin rows. ============================================================ */ html[data-rmc-os-grade="1"] .rmc-cmdk { padding-top: clamp(6vh, 14vh, 12rem); } html[data-rmc-os-grade="1"] .rmc-cmdk__panel { width: min(720px, 92vw) !important; /* style-allow: os-grade-cmdk */ max-height: 64vh; border-radius: 6px !important; /* style-allow: os-grade-cmdk */ border: 1px solid var(--rmc-os-glow) !important; /* style-allow: os-grade-cmdk */ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 1px var(--rmc-os-glow), 0 0 40px var(--rmc-os-glow-soft) !important; /* style-allow: os-grade-cmdk */ background: color-mix(in srgb, var(--surface-popover, #0c0c12) 95%, transparent) !important; /* style-allow: os-grade-cmdk */ } html[data-rmc-os-grade="1"] .rmc-cmdk__inputbar { padding: 14px 18px !important; /* style-allow: os-grade-cmdk */ border-bottom: 1px solid var(--rmc-os-hairline) !important; /* style-allow: os-grade-cmdk */ background: linear-gradient(180deg, color-mix(in srgb, var(--rmc-os-glow) 6%, transparent) 0%, transparent 100%); } html[data-rmc-os-grade="1"] .rmc-cmdk__icon { color: var(--rmc-os-glow) !important; /* style-allow: os-grade-cmdk */ font-size: 16px; } html[data-rmc-os-grade="1"] .rmc-cmdk__input { font-size: 15px !important; /* style-allow: os-grade-cmdk */ letter-spacing: -0.005em; font-weight: 500; } html[data-rmc-os-grade="1"] .rmc-cmdk__kbd-hint { font-family: var(--rmc-os-font-mono); font-size: 10px !important; /* style-allow: os-grade-cmdk */ padding: 2px 7px !important; /* style-allow: os-grade-cmdk */ border: 1px solid var(--rmc-os-hairline) !important; /* style-allow: os-grade-cmdk */ background: transparent !important; /* style-allow: os-grade-cmdk */ color: color-mix(in srgb, currentColor 70%, transparent); letter-spacing: 0.04em; } html[data-rmc-os-grade="1"] .rmc-cmdk__list { padding: 4px !important; /* style-allow: os-grade-cmdk */ } html[data-rmc-os-grade="1"] .rmc-cmdk__item { padding: 7px 10px !important; /* style-allow: os-grade-cmdk */ border-radius: 3px !important; /* style-allow: os-grade-cmdk */ gap: 10px; border-left: 2px solid transparent; transition: border-color 80ms ease, background 80ms ease; } html[data-rmc-os-grade="1"] .rmc-cmdk__item.is-active { background: color-mix(in srgb, var(--rmc-os-glow) 10%, transparent) !important; /* style-allow: os-grade-cmdk */ border-left-color: var(--rmc-os-glow); } html[data-rmc-os-grade="1"] .rmc-cmdk__item-icon { font-size: 13px; width: 16px; opacity: 0.75; } html[data-rmc-os-grade="1"] .rmc-cmdk__item.is-active .rmc-cmdk__item-icon { color: var(--rmc-os-glow) !important; /* style-allow: os-grade-cmdk */ opacity: 1; } html[data-rmc-os-grade="1"] .rmc-cmdk__item-label { font-size: 13px !important; /* style-allow: os-grade-cmdk */ font-weight: 500; letter-spacing: 0; } html[data-rmc-os-grade="1"] .rmc-cmdk__item-sub { font-size: 10px !important; /* style-allow: os-grade-cmdk */ font-family: var(--rmc-os-font-mono); letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.7; } html[data-rmc-os-grade="1"] .rmc-cmdk__footer { border-top: 1px solid var(--rmc-os-hairline); padding: 6px 14px !important; /* style-allow: os-grade-cmdk */ font-family: var(--rmc-os-font-mono); font-size: 9px !important; /* style-allow: os-grade-cmdk */ letter-spacing: 0.08em; text-transform: uppercase; background: color-mix(in srgb, var(--surface-popover, #0c0c12) 60%, transparent); } html[data-rmc-os-grade="1"] .rmc-cmdk__footer kbd { font-family: inherit; font-size: 9px; padding: 1px 5px; border: 1px solid var(--rmc-os-hairline); border-radius: 2px; } /* Section labels inside the palette (Navigate / Actions / Recents / Page actions) become tiny telemetry-style headers. */ html[data-rmc-os-grade="1"] .rmc-cmdk__group-label, html[data-rmc-os-grade="1"] .rmc-cmdk__section { font-family: var(--rmc-os-font-mono); font-size: 9px !important; /* style-allow: os-grade-cmdk */ font-weight: 700 !important; /* style-allow: os-grade-cmdk */ letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 10px 4px !important; /* style-allow: os-grade-cmdk */ color: var(--rmc-os-glow); opacity: 0.85; } /* "Page actions" group injected by JS gets a soft accent stripe. */ html[data-rmc-os-grade="1"] .rmc-cmdk__list [data-rmc-cmdk-group="page"] { background: linear-gradient(90deg, var(--rmc-os-glow-soft) 0%, transparent 60%); padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--rmc-os-hairline); } /* v4.00.29 — Pinned Ask-AI item. Stands out as a high-contrast accent row at the head of Actions so the "talk to AI" affordance is always glance-distance regardless of query. */ html[data-rmc-os-grade="1"] .rmc-cmdk__item[data-rmc-pinned="1"], .rmc-cmdk__item[data-rmc-pinned="1"] { background: linear-gradient(90deg, var(--rmc-os-glow, var(--rmc-page-accent, #6366f1)) 0%, /* off-token-allow: cmdk-pinned-ai */ transparent 70%); color: #fff !important; /* style-allow: cmdk-pinned-ai */ font-weight: 600; position: relative; margin: 2px 0; } html[data-rmc-os-grade="1"] .rmc-cmdk__item[data-rmc-pinned="1"] .rmc-cmdk__item-icon, .rmc-cmdk__item[data-rmc-pinned="1"] .rmc-cmdk__item-icon { color: #fff !important; /* style-allow: cmdk-pinned-ai */ opacity: 1; } html[data-rmc-os-grade="1"] .rmc-cmdk__item[data-rmc-pinned="1"]::after, .rmc-cmdk__item[data-rmc-pinned="1"]::after { content: "AI"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--rmc-os-font-mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.4); /* style-allow: cmdk-pinned-ai */ border-radius: 2px; opacity: 0.85; } /* Slash group label adopts a mono prefix to telegraph the verb mode. */ html[data-rmc-os-grade="1"] .rmc-cmdk__list [data-rmc-cmdk-group="slash"] { border-top: 1px dashed var(--rmc-os-hairline); padding-top: 4px; margin-top: 4px; } /* ============================================================ v4.00.30 — VOICE INPUT MIC + AI-LINE SUGGESTION ROW ============================================================ */ .rmc-cmdk__mic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px; padding: 0; border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08)); border-radius: 8px; background: transparent; color: var(--text-secondary, currentColor); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease; } .rmc-cmdk__mic:hover { background: color-mix(in oklab, var(--text-primary, currentColor) 8%, transparent); color: var(--text-primary, currentColor); } .rmc-cmdk__mic.is-listening { color: #ef4444; /* off-token-allow: recording-live-status-indicator */ border-color: rgba(239, 68, 68, 0.55); /* off-token-allow: recording-live-status-indicator */ animation: rmc-cmdk-mic-pulse 1100ms ease-in-out infinite; min-width: 56px; } .rmc-cmdk__mic-elapsed { margin-left: 4px; padding: 0 4px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ef4444; /* off-token-allow: recording-live-status-indicator */ letter-spacing: 0.02em; } @keyframes rmc-cmdk-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } .rmc-cmdk__item--ai-line { position: relative; display: grid !important; /* style-allow: cmdk-ai-line-row */ grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px !important; /* style-allow: cmdk-ai-line-row */ background: linear-gradient( 180deg, color-mix(in oklab, var(--rmc-page-accent, #6366f1) 12%, transparent), transparent 80% ) !important; /* style-allow: cmdk-ai-line-accent */ border-left: 2px solid var(--rmc-page-accent, #6366f1) !important; /* style-allow: cmdk-ai-line-accent */ cursor: pointer; } .rmc-cmdk__item--ai-line .rmc-cmdk__item-icon { color: var(--rmc-page-accent, #6366f1); } .rmc-cmdk__item--ai-line .rmc-cmdk__item-label { font-weight: 600; letter-spacing: -0.005em; } .rmc-cmdk__item--ai-line .rmc-cmdk__item-hint { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary, currentColor); opacity: 0.85; } html[data-rmc-os-grade="1"] .rmc-cmdk__mic { border-color: var(--rmc-os-hairline, rgba(255, 255, 255, 0.08)); } /* ============================================================ PREFERS-REDUCED-MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .rmc-os-command-rail__dot { animation: none; } html[data-rmc-os-grade="1"] .rmc-cmdk__panel { animation: none; } .rmc-cmdk__mic.is-listening { animation: none; } }