/* ═══════════════════════════════════════════
   Genesis SOC: the dashboard's frame and page style (wi-1131-dashboard-navigation-and-visual-style-redesign; docs/journal/plans/20261021-01-dashboard-redesign.md).
   Loaded by Views/Shared/_Layout.cshtml, after site.css.
   Navigation option A (groups that fold), page style 1 (Navy frame) and the Light and Dark themes, from the approved mockup
   docs/pm/items/wi-1131-dashboard-navigation-and-visual-style-redesign/mockups/recommended.html. Every class here starts rd-.
   ═══════════════════════════════════════════ */

/* Inter: wwwroot/css/inter.css, loaded before this file by Views/Shared/_Layout.cshtml. */

/* ── Tokens. Light is the brand's palette (site.css), kept exactly. ── */
:root {
    --rd-navy: #082B4C; --rd-navy-2: #0E3558; --rd-navy-line: #12406A; --rd-blue: #0B5FA8; --rd-cyan: #21B8D7; --rd-check: #8DD3F0;
    --rd-bg: #F2F8FC; --rd-surface: #FFFFFF; --rd-surface-2: #F8FBFD; --rd-hover: #F2F7FB; --rd-line: #D5E1EA; --rd-line-2: #EAF0F5; --rd-field: #C7D6E0;
    --rd-ink: #082B4C; --rd-ink-2: #405466; --rd-ink-3: #5B7083; --rd-link: #0B5FA8;
    --rd-primary: #0B5FA8; --rd-primary-ink: #FFFFFF;
    --rd-ok-bg: #E6F3EC; --rd-ok: #14653F; --rd-off-bg: #EEF2F5; --rd-off: #5B7083; --rd-int-bg: #E5F0FA; --rd-int: #0B5FA8; --rd-demo-bg: #FBF0E4; --rd-demo: #8F4A07;
    --rd-danger: #C7352C; --rd-danger-bg: #FDECEA; --rd-warn: #B25E09;
    --rd-shadow: 0 1px 2px rgba(8, 43, 76, .06); --rd-pop: 0 16px 40px rgba(8, 43, 76, .18);
    --rd-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --rd-sidebar-width: 248px;
    color-scheme: light;
}

/* Dark is designed, not inverted (design.md, "The dark look"): deep navy surfaces under the same navy sidebar, softer lines, brighter accents. */
:root[data-theme="dark"] {
    --rd-bg: #061A2D; --rd-surface: #0B2136; --rd-surface-2: #0E2740; --rd-hover: #112C47; --rd-line: #1C3A57; --rd-line-2: #152F49; --rd-field: #2A4A68;
    --rd-ink: #E4EDF5; --rd-ink-2: #AFC2D3; --rd-ink-3: #8AA1B5; --rd-link: #7DBBF2;
    --rd-primary: #1C74C9; --rd-primary-ink: #FFFFFF;
    --rd-ok-bg: rgba(61, 214, 140, .14); --rd-ok: #72E2AC; --rd-off-bg: rgba(255, 255, 255, .07); --rd-off: #A2B5C7; --rd-int-bg: rgba(76, 155, 230, .18); --rd-int: #9ACBF5;
    --rd-demo-bg: rgba(242, 165, 65, .16); --rd-demo: #F5BE75;
    --rd-danger: #FF8378; --rd-danger-bg: rgba(255, 107, 94, .12); --rd-warn: #F2A541;
    --rd-shadow: 0 1px 2px rgba(0, 0, 0, .3); --rd-pop: 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;

    /* Pages darken through the variables site.css styles them with; each page is checked in both themes. */
    --gd-gold: #1C74C9; --gd-gold-dark: #7DBBF2; --gd-gold-light: #21B8D7;
    --gd-dark-bg: #061A2D; --gd-dark-surface: #0B2136; --gd-dark-card: #0E2740; --gd-dark-border: #1C3A57;
    --gd-text: #E4EDF5; --gd-text-sec: #AFC2D3; --gd-text-on-gold: #FFFFFF;
    --gd-success: #3DD68C; --gd-danger: #FF8378; --gd-info: #7DBBF2; --gd-warning: #F2A541;
    --g-navy: #E4EDF5; --g-cloud: #061A2D; --g-white: #0B2136; --g-slate: #AFC2D3; --g-border: #1C3A57;
    --g-shadow-card: 0 1px 3px rgba(0, 0, 0, .35); --g-shadow-overlay: 0 12px 32px rgba(0, 0, 0, .5);
}

/* Bootstrap 5.1 has no dark mode of its own: the pieces the pages use, on the dark surfaces. */
:root[data-theme="dark"] .rd-content .card,
:root[data-theme="dark"] .rd-content .modal-content,
:root[data-theme="dark"] .rd-content .list-group-item,
:root[data-theme="dark"] .rd-content .dropdown-menu,
:root[data-theme="dark"] .modal-content { background-color: var(--rd-surface); color: var(--rd-ink); border-color: var(--rd-line); }
:root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); color: var(--rd-ink); border-color: var(--rd-line); }
:root[data-theme="dark"] .table > :not(caption) > * > * { color: var(--rd-ink); border-color: var(--rd-line); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--rd-surface-2); color: var(--rd-ink); border-color: var(--rd-field); }
:root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly] { background-color: var(--rd-bg); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--rd-ink-2); border-color: var(--rd-field); }
:root[data-theme="dark"] .alert-warning { color: #F5BE75 !important; }
:root[data-theme="dark"] .alert-info, :root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .alert-success, :root[data-theme="dark"] .alert-secondary { color: var(--rd-ink) !important; }
:root[data-theme="dark"] .text-dark { color: var(--rd-ink) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--rd-surface) !important; }
:root[data-theme="dark"] .bg-light { background-color: var(--rd-surface-2) !important; }

/* ── The frame ── */
.rd-body { margin: 0; font-family: var(--rd-font); background: var(--rd-bg); color: var(--rd-ink); -webkit-font-smoothing: antialiased; }
/* A rule is one line in the theme's line color. Bootstrap 5.1 draws hr as a 1 px block of the text's color at a quarter opacity, which a border
   added on top makes a double line and which is a bright line in the dark theme; this draws the border only. A component sets its own color. */
.rd-body hr { height: 0; background: none; border: 0; border-top: 1px solid var(--rd-line); color: inherit; opacity: 1; }
.rd-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd-body :focus-visible { outline: 2px solid var(--rd-cyan); outline-offset: 2px; }
.rd-main { margin-left: var(--rd-sidebar-width); min-height: 100vh; min-width: 0; }
.rd-content { padding: 20px 32px 32px; }
.rd-mobilebar { display: none; }

/* ── The sidebar: the same navy in both themes ── */
.rd-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--rd-sidebar-width); z-index: 1030; display: flex; flex-direction: column; color: #C9D8E3;
    background: var(--rd-navy) radial-gradient(120% 50% at 0% 0%, rgba(33, 184, 215, .12), transparent 60%); border-right: 1px solid var(--rd-navy-line);
    font-family: var(--rd-font); font-size: 14px;
}
.rd-sidebar a { text-decoration: none; }
/* A plain button inside the menu, at no specificity, so each component's own rule below sets its look. */
.rd-sidebar :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rd-brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; flex: none; }
.rd-brand-link, .rd-brand-link:hover { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.rd-mark { width: 26px; height: 30px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-word b { display: block; font-size: 14.5px; letter-spacing: .16em; color: #fff; }
.rd-word b span { color: var(--rd-check); font-size: 11px; letter-spacing: .2em; margin-left: 5px; }
.rd-word small { display: block; font-size: 11.5px; color: #9FB6C8; margin-top: 3px; font-weight: 500; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-find-button { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #B8CBD8; }
.rd-find-button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.rd-scope { margin: 0 12px 6px; height: 40px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 10px; border-radius: 9px; background: var(--rd-navy-2); border: 1px solid #1E4A70; flex: none; }
.rd-scope-link { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 600; text-align: left; }
.rd-scope-link:hover { color: #fff; }
.rd-scope-updown { margin-left: auto; color: #9FB6C8; }
.rd-scope-link:hover .rd-scope-updown, .rd-scope-link[aria-expanded="true"] .rd-scope-updown { color: #fff; }
.rd-scope-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--rd-cyan); color: var(--rd-navy); display: flex; align-items: center; justify-content: center; flex: none; }
.rd-scope-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-scope-text small { display: block; font-size: 10.5px; color: #9FB6C8; font-weight: 500; }
.rd-scope-clear { margin: 0; }
.rd-scope-clear button { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #9FB6C8; }
.rd-scope-clear button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* The company chooser, beside the menu as a folded group's pages are: a search box over the active companies, each a button that chooses it. */
.rd-chooser {
    position: fixed; left: calc(var(--rd-sidebar-width) - 10px); top: 52px; width: 300px; max-height: min(460px, calc(100vh - 64px)); z-index: 1045;
    display: flex; flex-direction: column; padding: 8px; border-radius: 12px; background: var(--rd-surface); color: var(--rd-ink); box-shadow: var(--rd-pop), 0 0 0 1px var(--rd-line);
}
.rd-chooser[hidden] { display: none; }
.rd-chooser form { margin: 0; }
.rd-chooser #company-chooser-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rd-chooser-search { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--rd-field); border-radius: 8px; background: var(--rd-surface-2); color: var(--rd-ink-3); }
.rd-chooser-search:focus-within { border-color: var(--rd-blue); box-shadow: 0 0 0 3px rgba(11, 95, 168, .18); }
.rd-chooser-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--rd-ink); font: inherit; font-size: 13.5px; }
.rd-chooser-list { overflow-y: auto; min-height: 0; }
.rd-chooser-list > :first-child { border-bottom: 1px solid var(--rd-line-2); padding-bottom: 4px; margin-bottom: 4px; }
.rd-chooser-list > [hidden] { display: none; }
.rd-chooser .rd-chooser-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; text-align: left; color: var(--rd-ink); }
.rd-chooser .rd-chooser-option:hover, .rd-chooser .rd-chooser-option:focus-visible { background: var(--rd-hover); }
.rd-chooser-option .rd-ic { color: var(--rd-ink-3); }
.rd-chooser-option small { display: block; font-size: 11.5px; color: var(--rd-ink-3); font-weight: 400; }
.rd-chooser .rd-chooser-option[aria-current="true"] { background: var(--rd-int-bg); font-weight: 600; }
.rd-chooser-option[aria-current="true"] .rd-ic { color: var(--rd-int); }
.rd-chooser-none { margin: 8px; font-size: 13px; color: var(--rd-ink-3); }

/* Its bottom padding is 2 px: a platform admin's Platform group has seven pages, and with Live operations and one more group open the menu
   still fits 1280 by 720 with nothing scrolling (the mockup listed six; Phone apps is a page of the menu the mockup left out). */
.rd-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 2px; scrollbar-width: thin; }
.rd-group-head { width: 100%; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8FA9BD; border-radius: 6px; text-align: left; }
.rd-group:first-child .rd-group-head { margin-top: 0; }
.rd-group-head.is-pinned { cursor: default; }
.rd-group-head:not(.is-pinned):hover, .rd-group.is-flyout .rd-group-head { background: rgba(255, 255, 255, .07); color: #fff; }
.rd-chevron { width: 13px; height: 13px; stroke-width: 2.2; }
/* Only after the first fold, so the menu settling at load does not animate. */
.rd-sidebar.is-ready .rd-chevron { transition: transform .18s; }
.rd-group[data-open="false"] .rd-group-head { color: #C9D8E3; }
.rd-group[data-open="false"] .rd-chevron { transform: rotate(-90deg); }
.rd-group-meta { margin-left: auto; display: none; gap: 4px; align-items: center; letter-spacing: 0; font-weight: 600; color: #8FA9BD; }
.rd-group[data-open="false"] .rd-group-meta { display: flex; }
.rd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .18); margin: 0 3px; }
.rd-group[data-open="false"] .rd-group-pages { display: none; }
.rd-flyout-title, .rd-link-hint { display: none; }
.rd-link { height: 27px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: #C9D8E3; position: relative; white-space: nowrap; }
.rd-link .rd-ic { color: #9FB6C8; }
.rd-link-label { overflow: hidden; text-overflow: ellipsis; }
a.rd-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* The open page: white on a pale cyan wash with a Signal Cyan bar (design.md, smaller fixes 4 and 5), and aria-current for a screen reader. */
.rd-link[aria-current="page"] { background: linear-gradient(90deg, rgba(141, 211, 240, .22), rgba(141, 211, 240, .08)); color: #fff; font-weight: 600; }
.rd-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rd-cyan); }
.rd-link[aria-current="page"] .rd-ic { color: var(--rd-check); }
.rd-link.is-locked { color: #8FA9BD; cursor: not-allowed; }
.rd-link.is-locked .rd-ic { color: #7F9AB0; }
.rd-lock { margin-left: auto; width: 13px; height: 13px; }
.rd-lock-reason { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.rd-group-meta .rd-badge { margin-left: 0; height: 16px; min-width: 16px; font-size: 10px; }
.rd-badge.is-danger { background: #C7352C; }
.rd-badge.is-warn { background: #B25E09; }

/* A folded group's pages, as a pop-out beside it on hover or keyboard focus. */
.rd-group.is-flyout .rd-group-pages {
    display: block; position: fixed; left: calc(var(--rd-sidebar-width) - 10px); width: 290px; z-index: 1040; padding: 8px; border-radius: 12px;
    background: var(--rd-surface); color: var(--rd-ink); box-shadow: var(--rd-pop), 0 0 0 1px var(--rd-line);
}
.rd-group.is-flyout .rd-group-pages::before { content: ""; position: absolute; left: -6px; top: 15px; width: 12px; height: 12px; background: var(--rd-surface); transform: rotate(45deg); box-shadow: -1px 1px 0 var(--rd-line); }
.rd-group.is-flyout .rd-flyout-title { display: block; margin: 2px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink-3); }
.rd-group.is-flyout .rd-link {
    height: auto; display: grid; grid-template-columns: 16px 1fr auto; gap: 0 10px; line-height: 1.25; align-items: center; padding: 7px 8px; color: var(--rd-ink); border-radius: 8px; white-space: normal;
}
.rd-group.is-flyout .rd-link > .rd-ic:first-child { grid-row: span 2; color: var(--rd-ink-2); }
.rd-group.is-flyout .rd-link > :not(.rd-ic):not(.rd-link-label):not(.rd-link-hint) { grid-column: 3; grid-row: 1 / span 2; }
.rd-group.is-flyout a.rd-link:hover, .rd-group.is-flyout a.rd-link:focus-visible { background: var(--rd-hover); color: var(--rd-ink); }
.rd-group.is-flyout .rd-link-hint { display: block; grid-column: 2; font-size: 11.5px; color: var(--rd-ink-3); font-weight: 400; }
.rd-group.is-flyout .rd-link.is-locked { color: var(--rd-ink-3); }
.rd-group.is-flyout .rd-lock-reason { position: static; width: auto; height: auto; clip: auto; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--rd-demo); background: var(--rd-demo-bg); border-radius: 5px; padding: 2px 6px; }
.rd-group.is-flyout .rd-lock { display: none; }

/* The person, once, with the account menu. */
.rd-foot { height: 56px; flex: none; border-top: 1px solid var(--rd-navy-line); padding: 0 8px; position: relative; }
.rd-user { width: 100%; height: 55px; display: flex; align-items: center; gap: 10px; padding: 0 6px; border-radius: 9px; text-align: left; }
.rd-user:hover, .rd-user[aria-expanded="true"] { background: rgba(255, 255, 255, .06); }
.rd-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rd-blue); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(141, 211, 240, .35); flex: none; }
.rd-user-text { min-width: 0; }
.rd-user-text b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-user-text small { color: #9FB6C8; font-size: 11.5px; }
.rd-more { margin-left: auto; color: #9FB6C8; }
.rd-account { position: absolute; left: 8px; bottom: 62px; width: 252px; background: var(--rd-surface); color: var(--rd-ink); border-radius: 12px; box-shadow: var(--rd-pop), 0 0 0 1px var(--rd-line); padding: 6px; z-index: 1040; }
.rd-account[hidden] { display: none; }
.rd-account-head { display: flex; flex-direction: column; gap: 1px; padding: 8px; min-width: 0; }
.rd-account-head b { font-size: 13.5px; color: var(--rd-ink); }
.rd-account-head span { font-size: 12px; color: var(--rd-ink-3); overflow-wrap: anywhere; }
.rd-account-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 13.5px; width: 100%; text-align: left; color: var(--rd-ink); }
.rd-account-item:hover, .rd-account-item:focus-visible { background: var(--rd-hover); color: var(--rd-ink); }
.rd-account-item .rd-ic { color: var(--rd-ink-2); }
.rd-account-item small { display: block; font-size: 11.5px; color: var(--rd-ink-3); }
.rd-account hr { height: 0; background: none; border: 0; border-top: 1px solid var(--rd-line-2); margin: 4px; opacity: 1; }
.rd-signout { margin: 0; }
.rd-theme { padding: 8px 8px 6px; }
.rd-theme-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink-3); margin-bottom: 6px; }
.rd-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--rd-surface-2); border: 1px solid var(--rd-line); border-radius: 9px; padding: 3px; gap: 3px; }
.rd-seg button { height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.rd-seg button[aria-pressed="true"] { background: var(--rd-surface); color: var(--rd-ink); box-shadow: 0 1px 2px rgba(8, 43, 76, .12), 0 0 0 1px var(--rd-line); }
.rd-seg .rd-ic { width: 14px; height: 14px; }

/* ── The page finder (Ctrl K) ── */
.rd-finder-scrim { position: fixed; inset: 0; background: rgba(6, 26, 45, .45); backdrop-filter: blur(2px); z-index: 1060; }
.rd-finder { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); background: var(--rd-surface); color: var(--rd-ink); border-radius: 14px; box-shadow: var(--rd-pop), 0 0 0 1px var(--rd-line); z-index: 1061; overflow: hidden; font-family: var(--rd-font); }
.rd-finder-input { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-bottom: 1px solid var(--rd-line-2); }
.rd-finder-input .rd-ic { width: 20px; height: 20px; color: var(--rd-link); }
.rd-finder-input input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--rd-ink); }
/* A field inside a framed box (the page finder, a list's search, the company chooser): the frame shows the focus, not a second ring inside it. */
.rd-finder-input input:focus-visible, .rd-search input:focus-visible, .rd-chooser-search input:focus-visible { outline: 0; }
.rd-finder kbd { font: 600 11px/1 var(--rd-font); border: 1px solid var(--rd-field); border-radius: 5px; padding: 4px 6px; color: var(--rd-ink-3); background: var(--rd-surface); }
.rd-finder-list { max-height: 340px; overflow: auto; padding: 8px; }
.rd-finder-list h2 { margin: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink-3); }
.rd-finder-option { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: 9px; font-size: 14px; color: var(--rd-ink); text-decoration: none; cursor: pointer; }
.rd-finder-option .rd-ic { width: 18px; height: 18px; color: var(--rd-ink-2); }
.rd-finder-option .rd-finder-group { margin-left: auto; font-size: 12px; color: var(--rd-ink-3); }
.rd-finder-option .rd-finder-was { font-size: 11.5px; color: var(--rd-demo); background: var(--rd-demo-bg); border-radius: 5px; padding: 2px 6px; margin-left: 8px; }
.rd-finder-option[aria-selected="true"] { background: var(--rd-int-bg); }
.rd-finder-option[aria-selected="true"] .rd-ic { color: var(--rd-link); }
.rd-finder-option.is-locked { cursor: not-allowed; color: var(--rd-ink-3); }
.rd-finder-option .rd-lock-reason { position: static; width: auto; height: auto; clip: auto; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--rd-demo); background: var(--rd-demo-bg); border-radius: 5px; padding: 2px 6px; }
.rd-finder-option mark { background: none; color: var(--rd-link); font-weight: 700; padding: 0; }
.rd-finder-none { padding: 32px 16px; text-align: center; color: var(--rd-ink-2); }
.rd-finder-none b { display: block; color: var(--rd-ink); font-size: 15px; margin-bottom: 4px; }
.rd-finder-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--rd-line-2); background: var(--rd-surface-2); font-size: 12px; color: var(--rd-ink-3); }
.rd-finder-foot kbd { font-size: 10.5px; padding: 2px 5px; border-bottom-width: 2px; margin-right: 4px; color: var(--rd-ink-2); }
.rd-finder-foot span:last-child { margin-left: auto; }

/* ── Page style 1, Navy frame: the page header ── */
.rd-page-header { margin-bottom: 18px; }
.rd-page-header:not(:has(.rd-page-header-row)) { margin-bottom: 10px; }
.rd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.2; color: var(--rd-ink-3); }
.rd-crumbs li { display: flex; align-items: center; gap: 6px; }
.rd-crumbs a { color: var(--rd-ink-3); text-decoration: none; }
.rd-crumbs a:hover { color: var(--rd-link); }
.rd-crumbs .rd-ic { width: 12px; height: 12px; stroke-width: 2; }
.rd-crumbs [aria-current] { font-weight: 500; color: var(--rd-ink); }
.rd-page-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 6px; }
.rd-title { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; color: var(--rd-ink); }
.rd-count { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--rd-int); background: var(--rd-int-bg); border-radius: 999px; padding: 3px 9px; }
.rd-description { margin: 7px 0 0; color: var(--rd-ink-2); font-size: 14px; max-width: 64ch; line-height: 1.45; }

/* ── Page style 1: buttons, search, filters, the table, status pills, row menus, empty and loading states, the dialog ── */
.rd-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 9px; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; }
.rd-btn .rd-ic { stroke-width: 2.1; }
.rd-btn-primary { background: var(--rd-primary); color: var(--rd-primary-ink); box-shadow: 0 1px 0 rgba(8, 43, 76, .25), inset 0 1px 0 rgba(255, 255, 255, .14); }
.rd-btn-primary:hover { color: var(--rd-primary-ink); filter: brightness(1.08); }
.rd-btn-secondary { background: var(--rd-surface); border: 1px solid var(--rd-field); color: var(--rd-ink); }
.rd-btn-danger { background: #C7352C; color: #fff; }
.rd-btn:disabled { opacity: .45; cursor: not-allowed; }
.rd-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rd-search { display: flex; align-items: center; gap: 8px; height: 36px; width: 300px; padding: 0 8px 0 12px; border: 1px solid var(--rd-field); border-radius: 9px; background: var(--rd-surface); color: var(--rd-ink-3); margin: 0; }
.rd-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--rd-ink); flex: 1; min-width: 0; }
.rd-search:focus-within { border-color: var(--rd-blue); box-shadow: 0 0 0 3px rgba(11, 95, 168, .18); }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--rd-field); background: var(--rd-surface); font-size: 12.5px; font-weight: 500; color: var(--rd-ink-2); cursor: pointer; }
.rd-chip[aria-pressed="true"] { background: var(--rd-navy); border-color: var(--rd-navy); color: #fff; }
:root[data-theme="dark"] .rd-chip[aria-pressed="true"] { background: #1C74C9; border-color: #1C74C9; }
.rd-chip i { font-style: normal; color: var(--rd-ink-3); font-weight: 600; }
.rd-chip[aria-pressed="true"] i { color: var(--rd-check); }
.rd-card { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 12px; box-shadow: var(--rd-shadow); position: relative; }
.rd-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--rd-ink); margin: 0; }
.rd-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--rd-ink-3); padding: 10px 16px; background: var(--rd-surface-2); border-bottom: 1px solid var(--rd-line); white-space: nowrap; }
.rd-table th:first-child { border-top-left-radius: 12px; }
.rd-table th:last-child { border-top-right-radius: 12px; }
.rd-table td { height: 45px; padding: 0 16px; border-bottom: 1px solid var(--rd-line-2); font-size: 13.5px; vertical-align: middle; }
.rd-table tbody tr:last-child td { border-bottom: 0; }
.rd-table tbody tr:hover td { background: var(--rd-hover); }
.rd-table tr.is-dim td { color: var(--rd-ink-3); }
.rd-num { font-variant-numeric: tabular-nums; color: var(--rd-ink-2); }
.rd-table-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rd-line-2); font-size: 12.5px; color: var(--rd-ink-3); }
/* Status as a word with a dot, in tinted pills that pass contrast in both themes (tour step 19). */
.rd-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-right: 4px; }
.rd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rd-pill.is-ok { background: var(--rd-ok-bg); color: var(--rd-ok); }
.rd-pill.is-off { background: var(--rd-off-bg); color: var(--rd-off); }
.rd-pill.is-info { background: var(--rd-int-bg); color: var(--rd-int); }
.rd-pill.is-demo, .rd-pill.is-warn { background: var(--rd-demo-bg); color: var(--rd-demo); }
.rd-pill.is-danger { background: var(--rd-danger-bg); color: var(--rd-danger); }
/* One actions menu per row (tour step 20): a "..." button, the menu under it, the action that cannot be undone set apart in red. */
.rd-row-actions { text-align: right; white-space: nowrap; position: relative; width: 1%; }
.rd-row-menu-button { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--rd-ink-3); vertical-align: middle; background: none; border: 0; cursor: pointer; }
.rd-row-menu-button .rd-ic { width: 18px; height: 18px; stroke-width: 2.6; }
.rd-row-menu-button:hover, .rd-row-menu-button[aria-expanded="true"] { background: var(--rd-surface); box-shadow: 0 0 0 1px var(--rd-field), 0 1px 2px rgba(8, 43, 76, .08); color: var(--rd-ink); }
.rd-row-menu { position: absolute; right: 16px; top: 40px; z-index: 30; width: 256px; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 11px; box-shadow: var(--rd-pop); padding: 6px; text-align: left; white-space: normal; }
.rd-row-menu[hidden] { display: none; }
.rd-row-menu form { margin: 0; }
.rd-row-menu-item { display: flex; align-items: center; gap: 0 10px; line-height: 1.3; min-height: 34px; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; flex-wrap: wrap; width: 100%; text-align: left; color: var(--rd-ink); background: none; border: 0; text-decoration: none; cursor: pointer; }
.rd-row-menu-item:hover, .rd-row-menu-item:focus-visible { background: var(--rd-hover); color: var(--rd-ink); }
.rd-row-menu-item .rd-ic { color: var(--rd-ink-3); }
.rd-row-menu-item small { flex-basis: 100%; padding-left: 26px; margin-top: 1px; line-height: 1.35; font-size: 11.5px; color: var(--rd-ink-3); }
.rd-row-menu hr { height: 0; background: none; border: 0; border-top: 1px solid var(--rd-line-2); margin: 5px 4px; opacity: 1; }
.rd-row-menu-item.is-danger, .rd-row-menu-item.is-danger .rd-ic { color: var(--rd-danger); }
.rd-empty { padding: 40px 16px; text-align: center; color: var(--rd-ink-2); }
.rd-empty b { display: block; color: var(--rd-ink); font-size: 15px; margin-bottom: 4px; }
.rd-skeleton { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--rd-line-2), var(--rd-hover), var(--rd-line-2)); background-size: 200% 100%; animation: rd-shimmer 1.4s ease-in-out infinite; }
@keyframes rd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rd-skeleton { animation: none; } .rd-chevron { transition: none; } }
.rd-dialog .modal-content { border-radius: 14px; border: 0; box-shadow: var(--rd-pop), 0 0 0 1px var(--rd-line); background: var(--rd-surface); color: var(--rd-ink); }
.rd-dialog .modal-header, .rd-dialog .modal-footer { border-color: var(--rd-line-2); }
.rd-warnbox { background: var(--rd-danger-bg); color: var(--rd-ink); border: 1px solid rgba(199, 53, 44, .35); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

/* ── Narrow windows: the menu becomes a drawer, with rows tall enough for a finger ── */
.rd-scrim { position: fixed; inset: 0; background: rgba(6, 26, 45, .5); z-index: 1025; }
.rd-scrim[hidden] { display: none; }
@media (max-width: 991.98px) {
    .rd-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 280px; }
    .rd-body.rd-menu-open .rd-sidebar { transform: none; }
    .rd-main { margin-left: 0; }
    .rd-mobilebar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: var(--rd-navy); color: #fff; position: sticky; top: 0; z-index: 1020; }
    .rd-mobilebar .rd-mark { width: 22px; height: 26px; }
    .rd-menu-button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: none; color: #fff; display: flex; align-items: center; justify-content: center; }
    .rd-mobile-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-link { height: 40px; }
    .rd-chooser { left: 12px; right: 12px; width: auto; top: 104px; }
    .rd-content { padding: 16px; }
    .rd-search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rd-sidebar { transition: none; } }