/* ── RH2 Shared Styles ── applies to ALL portal pages
   Loads tokens.css FIRST so the editorial kit palette + type +
   spacing + radius are available on every page that imports
   shared.css. Per-page <style> blocks can use --ed-*, --font-heading,
   --sp-*, --r-*, etc. without each page needing its own <link>. */
@import url('/css/tokens.css');
/* Shared modal (MSNYCModal) styling. modal.js is loaded on nearly every staff
   page, but modal.css used to be linked only piecemeal — so a page that built
   a dialog via MSNYCModal.open() with no local modal.css link rendered it
   unstyled. Import it here so the CSS tracks the script everywhere shared.css
   is loaded. (Pages that also link modal.css directly just no-op the dupe.) */
@import url('/css/modal.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    /* Legacy portal names remapped onto the editorial design system (tokens.css,
     @imported above). Changing these VALUES re-themes shared.css + every page
     that consumes var(--gold)/var(--dark)/etc. — no per-page edits needed.
     navy (#1a1a2e/#16213e) -> ink; bright amber (#f9b016) -> muted gold #a08830. */
    --gold: var(--ed-gold);
    --gold-dark: var(--ed-gold-dark);
    --dark: var(--ed-ink);
    --dark2: var(--ed-ink);
    --mid: var(--ed-slate);
    --light: var(--ed-bg);
    --text: var(--ed-ink);
    --muted: #666; /* neutral grey — no exact editorial token; kept for contrast */
    --white: #fff;
    --green: var(--ed-green);
    --red: #ef4444;
    --blue: var(--ed-blue);
    --radius: 10px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
body {
    font-family: var(--font-body);
    background: var(--light);
    color: var(--text);
    min-height: 100vh;
}
a {
    color: inherit;
    text-decoration: none;
}

/* ── Top Nav (consistent across ALL pages — editorial brand) ── */
.rh2-nav {
    background: var(--ed-surface);
    padding: 0 var(--sp-6);
    display: flex;
    align-items: center;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 0.5px solid var(--ed-border);
}

/* Section sub-nav (Team hub + Squire) — rendered by RH2.mountTeamSubnav() /
   mountSquireSubnav(). A full-width, left-anchored chrome strip directly under
   the main nav so it renders IDENTICALLY on every page and never shifts
   horizontally when a page's scrollbar appears/disappears (a centered max-width
   bar would jump a few px between short and tall tabs). One copy of the pill
   styling lives here instead of being inlined per link in rh2.js. */
.rh2-subnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px var(--sp-6);
    background: var(--ed-surface);
    border-bottom: 0.5px solid var(--ed-border);
}
.rh2-subnav-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    font-weight: 600;
    margin-right: 2px;
}
.rh2-subnav-pill {
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.rh2-subnav-pill.on {
    font-weight: 600;
    color: #7a6620;
    background: rgba(160, 136, 48, 0.14);
    border-color: rgba(160, 136, 48, 0.3);
}
.rh2-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
}
/* Brand dot: keep the styled fallback for code-only contexts, BUT prefer
   the actual seal — rh2.js can swap the inner content to <img> on pages
   that load shared.css. Until that lands, the styled dot still renders
   tasteful editorial. */
.rh2-nav-dot {
    width: 36px;
    height: 36px;
    background: var(--ed-forest);
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ed-cream);
    font-size: 1rem;
    letter-spacing: -0.02em;
}
/* Brand seal img (preferred over the .rh2-nav-dot fallback). 36px
   matches the dot. Forest-on-cream at small sizes can read as faint;
   we render the higher-resolution 256 PNG at 36 to keep edges crisp. */
.rh2-nav-brand img {
    width: 36px;
    height: 36px;
}
.rh2-nav-brand span {
    color: var(--ed-ink);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: var(--ls-tight);
}
.rh2-nav-brand span em {
    color: var(--ed-gold-deep);
    font-style: italic;
    font-weight: 500;
}
.rh2-nav-links {
    display: flex;
    gap: var(--sp-1);
    margin-left: var(--sp-6);
}
.rh2-nav-links a {
    color: var(--ed-ink);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    padding: 6px 12px;
    border-radius: var(--r-sharp);
    transition:
        color var(--t-fast),
        background var(--t-fast);
    font-weight: 400;
}
.rh2-nav-links a:hover {
    color: var(--ed-gold-deep);
    background: transparent;
    text-decoration: none;
}
.rh2-nav-links a.active {
    color: var(--ed-ink);
    background: var(--ed-gold-wash);
    font-weight: 500;
}

/* ── Top-bar dropdown groups (Leads / Deals / Finance) ── */
.rh2-nav-group {
    position: relative;
    display: inline-block;
}
.rh2-nav-group-btn {
    background: transparent;
    border: none;
    color: var(--ed-ink);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 400;
    padding: 6px 12px;
    border-radius: var(--r-sharp);
    cursor: pointer;
    transition:
        color var(--t-fast),
        background var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rh2-nav-group-btn:hover {
    color: var(--ed-gold-deep);
}
.rh2-nav-group.active > .rh2-nav-group-btn {
    color: var(--ed-ink);
    background: var(--ed-gold-wash);
    font-weight: 500;
}
.rh2-nav-caret {
    font-size: 0.7em;
    transition: transform var(--t-fast);
}
.rh2-nav-group.open .rh2-nav-caret {
    transform: rotate(180deg);
}
.rh2-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 190px;
    background: var(--ed-surface, #fff);
    border: 0.5px solid var(--ed-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--r-sharp);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 1100;
}
.rh2-nav-group.open .rh2-nav-dropdown {
    display: block;
}
.rh2-nav-dropdown a {
    display: block;
    padding: 8px 12px;
    color: var(--ed-ink);
    font-size: var(--fs-small);
    border-radius: var(--r-sharp);
    white-space: nowrap;
}
.rh2-nav-dropdown a:hover {
    background: var(--ed-gold-wash);
    color: var(--ed-gold-deep);
    text-decoration: none;
}
.rh2-nav-dropdown a.active {
    background: var(--ed-gold-wash);
    color: var(--ed-ink);
    font-weight: 500;
}
/* Sub-section headers inside a dropdown (e.g. Hub → Financial Operations) */
.rh2-nav-subhead {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-gold-deep);
    font-weight: 600;
    padding: 8px 12px 3px;
    margin-top: 2px;
    border-top: 0.5px solid var(--ed-border, rgba(0, 0, 0, 0.08));
}
.rh2-nav-subhead:first-child {
    border-top: 0;
    margin-top: 0;
}
.rh2-nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.rh2-nav-user {
    color: var(--ed-gold-deep);
    font-size: var(--fs-small);
    font-weight: 500;
}
.rh2-nav-signout {
    background: transparent;
    border: 1px solid var(--ed-border);
    color: var(--ed-ink);
    padding: 5px 14px;
    border-radius: var(--r-sharp);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-family: inherit;
    transition: border-color var(--t-fast);
}
.rh2-nav-signout:hover {
    border-color: var(--ed-ink);
}
.rh2-nav-signin {
    background: var(--ed-forest);
    color: var(--ed-cream);
    padding: 7px 16px;
    border-radius: var(--r-sharp);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-decoration: none;
    letter-spacing: var(--ls-wide);
    transition: background var(--t-fast);
}
.rh2-nav-signin:hover {
    background: var(--ed-forest-dark);
}

/* ── Main Content ── */
.rh2-main {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.rh2-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}
.rh2-subtitle {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* ── Stats Row ── */
.rh2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rh2-stat {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem;
    border-left: 4px solid var(--gold);
}
.rh2-stat .val {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--dark);
}
.rh2-stat .lbl {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 2px;
}
.rh2-stat.green {
    border-left-color: var(--green);
}
.rh2-stat.green .val {
    color: var(--green);
}
.rh2-stat.blue {
    border-left-color: var(--blue);
}
.rh2-stat.red {
    border-left-color: var(--red);
}

/* ── Card ── */
.rh2-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.rh2-card-h {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Table ── */
.rh2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.rh2-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 2px solid #f0f0f0;
}
.rh2-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f8f8f8;
}
.rh2-table tr:hover td {
    background: rgba(160, 136, 48, 0.07);
}
/* Sortable headers (applied to every .rh2-table by RH2.initSortableTables;
   opt out with .no-sort on the table or data-no-sort on a <th>). */
.rh2-table th.rh2-th-sortable {
    cursor: pointer;
    user-select: none;
}
.rh2-table th.rh2-th-sortable:hover {
    color: var(--gold);
}
.rh2-sort-arrow {
    color: var(--gold);
    font-size: 0.85em;
}

/* ── Reusable data-table system (opt-in modifiers; base .rh2-table unchanged) ──
   Wrap a .rh2-table in .rh2-table-scroll for horizontal scroll + a sticky header
   (give the wrapper a max-height to make the header pin while rows scroll).
   Add .is-wrap to word-wrap headers + cells (nothing truncated), .is-zebra for
   striping. These only affect tables that opt in, so existing pages are safe. */
.rh2-table-scroll {
    overflow: auto;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
}
.rh2-table-scroll .rh2-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.rh2-table.is-wrap th,
.rh2-table.is-wrap td {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
}
.rh2-table.is-zebra tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.018);
}

/* ── Buttons ── */
.rh2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s;
}
.rh2-btn-gold {
    background: var(--gold);
    color: var(--dark);
}
.rh2-btn-gold:hover {
    background: var(--gold-dark);
}
.rh2-btn-outline {
    background: transparent;
    border: 1.5px solid #ddd;
    color: var(--text);
}
.rh2-btn-sm {
    padding: 4px 10px;
    font-size: 0.72rem;
}

/* ── Tags ── */
.rh2-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}
.rh2-tag-green {
    background: #dcfce7;
    color: #166534;
}
.rh2-tag-gold {
    background: rgba(249, 176, 22, 0.12);
    color: #92400e;
}
.rh2-tag-blue {
    background: #dbeafe;
    color: #1e40af;
}
.rh2-tag-red {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Login Gate ── */
/* Login gate — editorial brand pass.
   Cream page bg, white card with hairline border + soft shadow,
   real seal slot at top via .rh2-login-seal, Cormorant heading
   with italic-gold accent, Montserrat body, forest CTA button.
   width:100% + min-height:calc(100vh - 56px) so the box centers
   vertically in the area BELOW the sticky nav, not against the
   full viewport (which was making it appear offset). */
.rh2-login-gate {
    width: 100%;
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ed-bg);
    padding: var(--sp-6) var(--sp-4);
    box-sizing: border-box;
}
.rh2-login-box {
    background: var(--ed-surface);
    border: 0.5px solid var(--ed-border);
    border-radius: var(--r-sharp);
    padding: var(--sp-8) var(--sp-8);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--sh-modal);
    text-align: center;
    box-sizing: border-box;
}
.rh2-login-box .rh2-login-seal {
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto var(--sp-4);
}
.rh2-login-box h2 {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    margin-bottom: var(--sp-1);
    letter-spacing: var(--ls-tight);
    color: var(--ed-ink);
}
.rh2-login-box h2 em {
    color: var(--ed-gold-deep);
    font-style: italic;
    font-weight: 500;
}
.rh2-login-box p {
    color: var(--ed-muted-2);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-6);
    font-weight: 300;
}
.rh2-login-box input {
    width: 100%;
    padding: 11px 14px;
    border: 0.5px solid var(--ed-border);
    border-radius: var(--r-sharp);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-2);
    outline: none;
    background: var(--ed-bg);
    color: var(--ed-ink);
    transition:
        border-color var(--t-fast),
        background var(--t-fast);
}
.rh2-login-box input:focus {
    border-color: var(--ed-ink);
    background: var(--ed-surface);
}
.rh2-login-error {
    background: var(--ed-red-tint);
    border: 0.5px solid var(--ed-red);
    color: var(--ed-red-ink);
    border-radius: var(--r-sharp);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-2);
    display: none;
    text-align: left;
}
.rh2-login-btn {
    width: 100%;
    padding: 12px;
    background: var(--ed-forest);
    color: var(--ed-cream);
    border: none;
    border-radius: var(--r-sharp);
    font-weight: 500;
    font-size: var(--fs-small);
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: var(--ls-wide);
    margin-top: var(--sp-2);
    transition: background var(--t-fast);
}
.rh2-login-btn:hover {
    background: var(--ed-forest-dark);
}
.rh2-login-google {
    width: 100%;
    padding: 11px;
    background: var(--ed-surface);
    border: 0.5px solid var(--ed-border);
    color: var(--ed-ink);
    border-radius: var(--r-sharp);
    font-size: var(--fs-small);
    cursor: pointer;
    font-family: var(--font-body);
    margin-top: var(--sp-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    transition: border-color var(--t-fast);
}
.rh2-login-google:hover {
    border-color: var(--ed-ink);
}

/* ── Empty state ── */
.rh2-empty {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── Hamburger button ── always visible (not mobile-only). Opens the
   side drawer below. Sits at the far left of the top nav. */
.rh2-nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sharp);
    transition: background var(--t-fast);
}
.rh2-nav-hamburger:hover {
    background: var(--ed-bg);
}
.rh2-nav-hamburger:focus {
    outline: 1px solid var(--ed-gold);
    outline-offset: 2px;
}
.rh2-nav-hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ed-ink);
    margin: 2.5px 0;
    border-radius: 1px;
    transition:
        transform var(--t-fast),
        opacity var(--t-fast);
}

/* ── Side drawer ── slides in from the left. Holds the same nav links
   plus extras (Tools section) that don't fit on the top bar. */
.rh2-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}
.rh2-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.rh2-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--ed-surface);
    border-right: 0.5px solid var(--ed-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.rh2-drawer.open {
    transform: translateX(0);
}

.rh2-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    border-bottom: 0.5px solid var(--ed-border);
}
.rh2-drawer-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ed-ink);
    letter-spacing: -0.005em;
}
.rh2-drawer-title em {
    color: var(--ed-gold);
    font-style: italic;
    font-weight: 500;
}
.rh2-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ed-muted-2);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sharp);
    transition:
        color var(--t-fast),
        background var(--t-fast);
}
.rh2-drawer-close:hover {
    color: var(--ed-ink);
    background: var(--ed-bg);
}

.rh2-drawer-user {
    padding: var(--sp-3) var(--sp-5);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ed-ink);
    border-bottom: 0.5px solid var(--ed-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.rh2-drawer-role {
    font-size: 0.6rem;
    color: var(--ed-muted-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.rh2-drawer-section {
    padding: var(--sp-3) 0 var(--sp-2);
}
.rh2-drawer-section-title {
    font-size: 0.6rem;
    color: var(--ed-muted-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    padding: var(--sp-2) var(--sp-5) var(--sp-1);
}
.rh2-drawer-section a {
    display: block;
    padding: 9px var(--sp-5);
    font-size: 0.88rem;
    color: var(--ed-ink);
    text-decoration: none;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition:
        background var(--t-fast),
        border-left-color var(--t-fast);
}
.rh2-drawer-section a:hover {
    background: var(--ed-bg);
    border-left-color: var(--ed-gold);
}
.rh2-drawer-section a.active {
    border-left-color: var(--ed-ink);
    background: var(--ed-gold-wash);
    font-weight: 500;
}

/* ── Drawer mode toggle (bottom of drawer) ── lets the user pick
   between three nav layouts. Active mode persists in localStorage. */
.rh2-drawer-mode {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 0.5px solid var(--ed-border);
}
.rh2-drawer-mode-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 var(--sp-5) var(--sp-4);
}
.rh2-drawer-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px;
    background: var(--ed-surface);
    border: 0.5px solid var(--ed-border);
    border-radius: var(--r-sharp);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.66rem;
    color: var(--ed-muted-2);
    transition: all var(--t-fast);
}
.rh2-drawer-mode-btn:hover {
    border-color: var(--ed-ink);
    color: var(--ed-ink);
}
.rh2-drawer-mode-btn.active {
    border-color: var(--ed-ink);
    background: var(--ed-gold-wash);
    color: var(--ed-ink);
    font-weight: 500;
}
.rh2-drawer-mode-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--ed-gold-deep);
}

/* ── Mode: BAR (default) ── top bar + hamburger, drawer is modal ──
   Default behavior — already styled above. Nothing extra needed. */

/* ── Mode: BURGER ── hide top bar links, drawer is modal ── */
body[data-nav-mode='burger'] .rh2-nav-links {
    display: none;
}

/* ── Mode: SIDE PANEL ── drawer permanent on left, content shifts right ── */
body[data-nav-mode='side-panel'] .rh2-drawer {
    transform: translateX(0);
    box-shadow: none;
    width: 240px;
}
body[data-nav-mode='side-panel'] .rh2-drawer-backdrop {
    display: none !important;
}
body[data-nav-mode='side-panel'] .rh2-drawer-close {
    /* No "close" button when the drawer is meant to stay open. */
    display: none;
}
body[data-nav-mode='side-panel'] .rh2-nav-hamburger {
    /* No hamburger when drawer is always visible. */
    display: none;
}
body[data-nav-mode='side-panel'] .rh2-nav-links {
    /* Top bar links also hidden — drawer is the nav. Top bar keeps brand
     + sign-in/out only. */
    display: none;
}
body[data-nav-mode='side-panel'] .rh2-nav,
body[data-nav-mode='side-panel'] .rh2-main,
body[data-nav-mode='side-panel'] main,
body[data-nav-mode='side-panel'] .splash,
body[data-nav-mode='side-panel'] section,
body[data-nav-mode='side-panel'] .status-foot,
body[data-nav-mode='side-panel'] footer {
    margin-left: 240px;
    transition: margin-left 0.25s ease-out;
}
@media (max-width: 720px) {
    /* On phones, side-panel mode degrades to burger mode — no room. */
    body[data-nav-mode='side-panel'] .rh2-drawer {
        transform: translateX(-100%);
    }
    body[data-nav-mode='side-panel'] .rh2-drawer.open {
        transform: translateX(0);
    }
    body[data-nav-mode='side-panel'] .rh2-drawer-backdrop {
        display: block !important;
    }
    body[data-nav-mode='side-panel'] .rh2-drawer-close {
        display: block;
    }
    body[data-nav-mode='side-panel'] .rh2-nav-hamburger {
        display: flex;
    }
    body[data-nav-mode='side-panel'] .rh2-nav,
    body[data-nav-mode='side-panel'] .rh2-main,
    body[data-nav-mode='side-panel'] main,
    body[data-nav-mode='side-panel'] .splash,
    body[data-nav-mode='side-panel'] section,
    body[data-nav-mode='side-panel'] .status-foot,
    body[data-nav-mode='side-panel'] footer {
        margin-left: 0;
    }
}

/* ── Mobile fallbacks ──
   On phones, the top nav links collapse — only hamburger + brand show.
   The drawer becomes the primary navigation surface. */
@media (max-width: 720px) {
    .rh2-main {
        padding: 1rem;
    }
    .rh2-title {
        font-size: 1.2rem;
    }
    .rh2-nav-links {
        display: none;
    }
    .rh2-nav-user {
        display: none;
    }
    .rh2-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── Modern selects + searchable combobox (RH2) ───────────────────────────
   Native <select>s get a consistent editorial style (custom chevron, brand
   font/colors, gold focus ring). Long / [data-search] selects are progressively
   enhanced by rh2.js into a searchable combobox (.ss-*) that mirrors the hidden
   native <select>. Brand tokens with hex fallbacks; 16px on mobile to block the
   iOS focus-zoom (matches the existing mobile-input convention). */
:root {
    --ss-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    color: var(--ed-ink, #1a1a1a);
    background-color: var(--ed-surface, #ffffff);
    background-image: var(--ss-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    border: 1px solid var(--ed-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    padding: 9px 34px 9px 12px;
    line-height: 1.3;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
select:focus {
    outline: none;
    border-color: var(--ed-gold, #a08830);
    box-shadow: 0 0 0 3px var(--ed-gold-tint, rgba(160, 136, 48, 0.18));
}
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Searchable combobox */
.ss-wrap {
    position: relative;
    display: block;
    /* Inherit the bottom spacing the native <select> had (forms.css uses 14px)
       so enhancing a select doesn't collapse the gap to the next field. */
    margin-bottom: 14px;
}
/* Enhanced select inside a horizontal control row (flex/grid toolbar or filter
   bar). RH2.enhanceSelects tags these; drop the vertical-form margin so the
   combobox lines up with sibling inputs/buttons instead of sitting too high. */
.ss-wrap.ss-wrap--inline {
    margin-bottom: 0;
}
.ss-wrap.ss-ready > select {
    display: none;
} /* native hidden only once the combobox is built (fail-safe) */
.ss-control {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    color: var(--ed-ink, #1a1a1a);
    background-color: var(--ed-surface, #ffffff);
    background-image: var(--ss-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    border: 1px solid var(--ed-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    padding: 9px 34px 9px 12px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.ss-control.ss-placeholder {
    color: var(--ed-muted-2, #888888);
}
.ss-control:focus,
.ss-wrap.ss-open .ss-control {
    outline: none;
    border-color: var(--ed-gold, #a08830);
    box-shadow: 0 0 0 3px var(--ed-gold-tint, rgba(160, 136, 48, 0.18));
}
.ss-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: var(--ed-surface, #ffffff);
    border: 1px solid var(--ed-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.ss-search {
    box-sizing: border-box;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--ed-border-soft, rgba(0, 0, 0, 0.06));
    padding: 10px 12px;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.9rem;
    color: var(--ed-ink, #1a1a1a);
    outline: none;
}
.ss-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}
.ss-option {
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--ed-ink, #1a1a1a);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-option.ss-active,
.ss-option:hover {
    background: var(--ed-gold-tint, rgba(160, 136, 48, 0.12));
}
.ss-option.ss-selected {
    font-weight: 600;
}
.ss-option.ss-disabled {
    color: var(--ed-muted, #aaaaaa);
    cursor: default;
}
.ss-empty {
    padding: 10px 12px;
    color: var(--ed-muted-2, #888888);
    font-size: 0.88rem;
}
@media (max-width: 760px) {
    select,
    .ss-control,
    .ss-search {
        font-size: 16px;
    } /* block iOS focus-zoom */
}

/* ── Cancel / remove "×" buttons — app-wide convention ──
   A clean borderless × (no surrounding circle) that removes/cancels something
   (a staged file, a chip, a list row). Uses the brand alert maroon so
   destructive ×s read consistently across the app and stand apart from neutral
   "close this panel" ×s (which stay grey). Add class="btn-x-cancel" to any such
   button. NOTE: for DESTRUCTIVE removes, not modal/drawer close buttons. */
.btn-x-cancel {
    flex: 0 0 auto;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: var(--ed-maroon, #944347);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s;
}
.btn-x-cancel:hover,
.btn-x-cancel:focus-visible {
    color: var(--ed-maroon-dark, #7a3538);
}
.btn-x-cancel svg {
    display: block;
    width: 18px;
    height: 18px;
} /* if a glyph is swapped for an icon */