/* LRR ARB global styles — 2026 redesign.
   The Material design system is provided by the MudBlazor theme (Theme/LrrTheme.cs);
   this file layers the warm earth-tone "look and feel" from the design handoff:
   Hanken Grotesk type, bold ink headings, warm surfaces, the dark forest console nav,
   focus rings, and a small set of reusable .lrr-* helpers. Account/Security (Identity
   Manage) area styles are inlined in ManageLayout.razor. */

/* ── Type ──────────────────────────────────────────────────────────────────── */
html, body {
    font-family: "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--mud-palette-text-primary);
}

.mud-typography-h5, .mud-typography-h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

/* ── Reusable helpers ──────────────────────────────────────────────────────── */
.lrr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mud-palette-secondary);
}

.lrr-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.lrr-pill .lrr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

/* Ranked list (community stats "Most common violations"): a terracotta number badge beside each
   section title + the clause's wording, readable at phone width, no counts shown. */
.lrr-ranked-list {
    list-style: none;
    counter-reset: lrr-rank;
    margin: 0;
    padding: 0;
}

.lrr-ranked-list li {
    counter-increment: lrr-rank;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lrr-ranked-list li:last-child { border-bottom: none; }

.lrr-ranked-section {
    font-size: 16px;
    font-weight: 700;
    line-height: 32px; /* centred on the badge when there is no clause line */
    color: var(--mud-palette-text-primary);
}

.lrr-ranked-clause {
    font-size: 14px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
}

.lrr-ranked-section + .lrr-ranked-clause { margin-top: -4px; }

.lrr-ranked-list li::before {
    content: counter(lrr-rank);
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-secondary);
}

/* Surface cards: soft warm shadow + lift on hover. */
.lrr-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 12px 30px rgba(40, 35, 25, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.lrr-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(40, 35, 25, .12);
}

.lrr-stat-number {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.lrr-stat-number.lrr-accent { color: var(--mud-palette-secondary); }

/* ── Buttons: pill CTAs with colored shadow ────────────────────────────────── */
.mud-button-root.mud-button-filled {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 8px 20px rgba(46, 107, 83, .22);
}

.mud-button-root.mud-button-filled.mud-button-filled-secondary {
    box-shadow: 0 10px 24px rgba(185, 96, 63, .24);
}

.mud-button-root.mud-button-outlined {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
    border-width: 1.5px;
}

.mud-button-root.mud-button-text { text-transform: none; font-weight: 600; }

/* ── Focus ring (inputs) ───────────────────────────────────────────────────── */
.mud-input-control .mud-input.mud-input-focused {
    box-shadow: 0 0 0 3px rgba(46, 107, 83, .14);
    border-radius: 12px;
}

/* ── Tables: warm row hover + soft dividers ────────────────────────────────── */
.mud-table-root .mud-table-row:hover > td {
    background: var(--mud-palette-background-gray);
}

/* ── Dark forest console drawer nav ────────────────────────────────────────── */
.mud-drawer .mud-navmenu {
    padding: 8px 10px;
}

.mud-drawer .mud-nav-link {
    color: #d9e4dc;
    border-radius: 12px;
    margin: 2px 0;
    font-weight: 600;
    font-size: 14.5px;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: #9fd9bd;
}

.mud-drawer .mud-nav-link:hover {
    background: #2A3A31;
    color: #fff;
}

/* Active link: a clearly-visible light-green tint over the dark forest sidebar, a bright green
   accent bar on the leading edge, and a bright icon — so the current page reads at a glance. */
/* Active link: a LIGHT pill (pale-green background + dark ink text) so the current page reads as
   "lit up" against the dark forest sidebar — the opposite of the surrounding dark rows. */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active {
    /* !important: MudBlazor's own `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...)` rule
       is more specific (0,5,0) and would otherwise win with a dull hover-grey background. */
    background: #E7EFE5 !important;
    color: var(--mud-palette-primary-darken) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* Pinned bottom nav group (RoleNavBottom: My account / What's new / App feedback) — sits under the
   scrolling sections in the dark console sidebar, separated by a hairline. PublicChrome (anonymous
   visitors only) never renders RoleNavBottom, so there is no public-drawer variant to style. */
.mud-drawer .lrr-nav-bottom-wrap {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 0;
}

/* Section labels in the dark drawer = small uppercase headers. */
.mud-drawer .lrr-navsection {
    padding: 16px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8aa496;
}

.mud-drawer .lrr-navsection:first-child { padding-top: 4px; }

/* Collapsible section HEADERS (MudNavGroup) — the direct-child link only, so nested links keep the
   normal nav styling. Uppercase label + expand chevron; a subtle hover shows they're clickable. */
.mud-drawer .mud-nav-group > .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: #a9c4b6;
}

.mud-drawer .mud-nav-group > .mud-nav-link:hover {
    background: #2A3A31;
    color: #fff;
}

.mud-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon { color: #a9c4b6; }

/* Public mobile drawer is light/warm (overrides the dark console nav styling). */
.mud-drawer.lrr-public-drawer { background: #fff !important; }
.mud-drawer.lrr-public-drawer .mud-nav-link { color: var(--mud-palette-text-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link:hover { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link.active,
.mud-drawer.lrr-public-drawer .mud-nav-link.mud-nav-link-active {
    background: #E7EFE5 !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.mud-drawer.lrr-public-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer.lrr-public-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; }

/* ── Breadcrumbs (PageHeader trail) — small, quiet, warm ───────────────────── */
.lrr-crumbs .mud-breadcrumb-item,
.lrr-crumbs .mud-breadcrumb-separator {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.lrr-crumbs .mud-breadcrumb-item a {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.lrr-crumbs .mud-breadcrumb-item a:hover { text-decoration: underline; }

/* ── AI assistant rich-text answers ────────────────────────────────────────── */
.lrr-ai-answer {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.lrr-ai-answer p {
    margin: 0 0 10px;
}

.lrr-ai-answer p:last-child {
    margin-bottom: 0;
}

.lrr-ai-answer ul,
.lrr-ai-answer ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.lrr-ai-answer li {
    margin-bottom: 4px;
}

.lrr-ai-answer h1,
.lrr-ai-answer h2,
.lrr-ai-answer h3,
.lrr-ai-answer h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 12px 0 6px;
}

.lrr-ai-answer code {
    background: var(--mud-palette-background-gray, #f4efe6);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8rem;
}

.lrr-ai-answer blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    margin: 0 0 10px;
    padding: 2px 12px;
    color: var(--mud-palette-text-secondary);
}

/* ── Community map legend ──────────────────────────────────────────────────── */
.lrr-map-legend {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--mud-palette-text-primary);
}

.lrr-map-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: -1px;
}

/* ── Sticky translucent public header ──────────────────────────────────────── */
.lrr-appbar-public {
    background: rgba(253, 246, 238, .92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* Phones/tablets: fully opaque — at 92% the page visibly slid behind the bar while scrolling
   (owner report 2026-09-29). The frosted look stays on large screens. */
@media (max-width: 959.98px) {
    .lrr-appbar-public {
        background: rgb(253, 246, 238) !important;
        backdrop-filter: none;
    }
}

/* ── Console mobile top bar (below lg): solid, theme-aware, never see-through ─ */
.lrr-appbar-console {
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Console shell: no top app bar on desktop (the sidebar carries the brand, nav
      and user controls, matching the design). The mobile-only app bar appears below
      the lg breakpoint, so only then must the content clear it. ───────────────── */
.lrr-console-main { padding-top: 0 !important; }
@media (max-width: 1279.98px) {
    .lrr-console-main { padding-top: var(--mud-appbar-height, 64px) !important; }
}
/* With no app bar on desktop, pin the full-height sidebar to the very top so it isn't
   offset down (which clipped the footer's "Public site" link off the bottom). */
@media (min-width: 1280px) {
    .mud-drawer.lrr-console-drawer { top: 0 !important; }
}

/* ── Static account pages (no circuit: Identity pages under [ExcludeFromInteractiveRouting]) ──
   MudBlazor's own responsive drawer only reveals itself below the lg breakpoint once its JS
   breakpoint watcher clears the library's own "mud-drawer--initial" class — which never happens
   without a circuit, so `.mud-drawer-responsive.mud-drawer-lg.mud-drawer--initial` stays
   `display:none !important` there (see MudBlazor.min.css). static-nav.js toggles OUR OWN class
   instead; `_open` already renders true (the interactive breakpoint correction in
   ConsoleChrome.OnAfterRenderAsync never runs on a static page either), so the drawer is already
   positioned at left:0 by MudBlazor's own `.mud-drawer--open` rule — only `display` needs
   restoring here. */
@media (max-width: 1279.98px) {
    .mud-drawer.mud-drawer-responsive.mud-drawer-lg.mud-drawer--initial.lrr-drawer-static-open {
        display: block !important;
    }
}

/* Our own tap-to-close scrim for the static drawer (MudBlazor's built-in overlay is Razor-gated
   the same way the drawer is, so it isn't reliable without a circuit either). Sits above the
   mobile app bar, below the drawer (z-index: calc(appbar + 2) — see MudBlazor.min.css). */
.lrr-static-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--mud-zindex-appbar, 1100) + 1);
}

.lrr-static-nav-overlay.lrr-static-nav-overlay-open {
    display: block;
}

/* ── Sticky footer (design sweep D1): the chrome's main content is a full-viewport flex
      column whose content region grows, so on SHORT pages the footer still sits at the
      viewport bottom instead of floating mid-screen. box-sizing is border-box, so the
      app-bar padding-top is included in the 100vh. ─────────────────────────────────── */
.lrr-main-flex { display: flex; flex-direction: column; min-height: 100vh; }
.lrr-main-flex > .lrr-grow { flex: 1 1 auto; }

/* ── Validation / framework / error UI (unchanged) ─────────────────────────── */
.validation-message { color: var(--mud-palette-error, #b03a2e); }

.blazor-error-boundary {
    background: #b03a2e;
    padding: 1rem;
    color: white;
    border-radius: 12px;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    color-scheme: light dark;
    background: #fbf1e4;
    color: #3a2a1f;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Auth pages (Identity static SSR forms) ────────────────────────────────── */
.auth-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--mud-palette-lines-inputs, #e2d4bf);
    border-radius: 12px;
    font-size: 14px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #3a2a1f);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #2e6b53);
    box-shadow: 0 0 0 3px rgba(46, 107, 83, .14);
}

.auth-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #6b5747);
    margin-bottom: 4px;
    display: block;
}

.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }

/* ── Show-password eye (js/password-toggle.js, BACKLOG §29) ──────────────────────────────── */
.lrr-pw-wrap { position: relative; }
.lrr-pw-wrap .auth-input { padding-right: 44px; }
.lrr-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #6b5747);
}
.lrr-pw-toggle svg { pointer-events: none; }
.lrr-pw-toggle:hover { color: var(--mud-palette-primary, #2e6b53); }
.lrr-pw-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary, #2e6b53); outline-offset: 2px; border-radius: 8px; }

/* ── Passkeys (js/passkeys.js) ─────────────────────────────────────────────── */
.lrr-passkey-status { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); text-align: center; }
.lrr-passkey-status.lrr-passkey-error { color: var(--mud-palette-error); }
.lrr-passkey-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--mud-palette-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lrr-passkey-divider::before, .lrr-passkey-divider::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-lines-default); }

/* ── What's new (release notes) ─────────────────────────────────────────────── */
.lrr-whats-new-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--mud-palette-secondary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; vertical-align: middle; }
.lrr-whats-new-list { margin: 8px 0 0; padding-left: 20px; }
.lrr-whats-new-list li { margin: 6px 0; line-height: 1.5; }
.lrr-whats-new-list li p { margin: 0; }

/* ── Rich-text editor (Quill): token chips, plain-language header names, single-line mode ── */
.ql-editor .lrr-token {
    display: inline-block;
    padding: 0 .5em;
    margin: 0 .05em;
    border-radius: 999px;
    background: #E7EFE5;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    font-weight: 600;
    font-size: .92em;
    line-height: 1.55;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}
.ql-editor .lrr-token-block {
    display: block;
    margin: .5em 0;
    padding: .5em .9em;
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-primary);
    background: #E7EFE5;
    color: var(--mud-palette-primary);
    font-weight: 600;
    user-select: none;
    cursor: default;
}
.ql-editor .lrr-token-block::before { content: "\2630\00a0"; }

/* The header picker says what it does, never "H2/H3". */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Normal text"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Heading"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Subheading"; }
.ql-snow .ql-picker.ql-header { width: 9.5em; }

.quill-single-line .ql-container.ql-snow { border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; }
.quill-single-line .ql-editor { min-height: 0; padding: 10px 12px; white-space: nowrap; overflow-x: auto; }
.quill-single-line .ql-editor p { margin: 0; }

/* ── Row action buttons in list tables (My applications): side by side, labels never broken ──
   A narrow action column used to squeeze paired buttons into a stack and split labels like
   "Mark as done" over two lines (owner, 2026-09-30). The table gives the column the width it
   needs instead. On phones MudTable renders each row as a card, where wrapping is fine. */
.lrr-row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.lrr-row-actions .mud-button-root { white-space: nowrap; }
@media (max-width: 599.98px) {
    .lrr-row-actions { flex-wrap: wrap; }
}

/* ── Scorecard chart palette (task 3, board/staff scorecards v1.33.0) ───────────────────────
   Every chart under Components/Shared/Charts/ reads its colors from these custom properties
   (never a hex literal in markup) so dark mode holds without touching the SVG.

   Dark mode follows the app's OWN toggle (MainLayout's dark-mode switch / the "lrr-theme"
   cookie), not the browser's OS preference — App.razor renders <html data-theme="dark|light">
   from that same cookie, and MainLayout's toggle keeps it live via window.lrrSetTheme
   (wwwroot/js/print.js). Selectors below key off html[data-theme="dark"] — never the browser's
   OS-level dark-preference media feature (code review fix round 1, item 1).

   Anything that's really just an existing MudBlazor palette color (gridlines, axis labels, the
   roster-card avatar tint) is DERIVED from --mud-palette-* so it already follows that toggle —
   only the brand chart colors and the vote palette need an explicit light/dark pair here. The
   vote palette (--lrr-vote-*) matches the app's existing CVD-checked For/Against/Abstain/none
   colors already used on BoardMembers.razor's vote pies (#1E7A54/#D97B4B/#3E6FA8/#E6DFD3) in
   light mode — kept in one place here instead of re-declared per page. */
:root {
    --lrr-chart-primary: #2E6B4F;
    --lrr-chart-accent: #D9772F;
    --lrr-chart-muted: #8A8178;
    --lrr-chart-missed: #C9C1B6;
    --lrr-chart-overdue: #A2341C;
    /* Warning TEXT (final fix wave I6): the chart accent (#D9772F) is only ~3.2:1 on light
       surfaces — fine for bars/arcs, not for 11-16 px text. This pair is >= 4.5:1 (about 7.7:1
       on white; the dark value about 9:1 on the dark surface). */
    --lrr-warn-text: #8A3B12;
    --lrr-chart-grid: var(--mud-palette-lines-default);
    --lrr-chart-label: var(--mud-palette-text-secondary);
    --lrr-avatar-bg: #E3EFE7;

    --lrr-vote-for: #1E7A54;
    --lrr-vote-against: #D97B4B;
    --lrr-vote-abstain: #3E6FA8;
    --lrr-vote-none: #E6DFD3;
}

html[data-theme="dark"] {
    --lrr-chart-primary: #4FAE84;
    --lrr-chart-accent: #E8A368;
    --lrr-chart-muted: #9B9388;
    --lrr-chart-missed: #A79F93;
    --lrr-chart-overdue: #D9654A;
    --lrr-warn-text: #F2B482;
    --lrr-avatar-bg: #24382E;

    --lrr-vote-for: #4FAE84;
    --lrr-vote-against: #E8A368;
    --lrr-vote-abstain: #7C9FC9;
    --lrr-vote-none: #4A443A;
}

.lrr-chart-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lrr-chart-svg { width: 100%; height: auto; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.lrr-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--lrr-chart-label); }
.lrr-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lrr-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lrr-chart-swatch-line { border-radius: 50%; }
.lrr-chart-swatch-dashed { width: 16px; height: 0; border-top: 2px dashed var(--lrr-chart-muted); border-radius: 0; }

/* Segmented toggle (scorecards: the sort control and the period toggle) — the design's beige track
   with one white "selected" pill. Plain buttons so aria-pressed lands on the control itself. */
.lrr-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}
.lrr-segmented > button {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}
.lrr-segmented > button[aria-pressed="true"] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.lrr-segmented > button:disabled { cursor: default; opacity: .6; }
.lrr-segmented > button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.lrr-ring-svg { display: block; flex: none; }
/* Natural width (set per mark count by the component); shrinks only when the card is narrower than the line. */
.lrr-meeting-timeline { display: block; max-width: 100%; height: auto; font-family: "Hanken Grotesk", system-ui, sans-serif; }

/* ── Print: the member/staff scorecard prints as one clean document (task 3 brief, spec §6/§7)
   — no nav/toggles/buttons, one column, charts and cards kept whole. */
@media print {
    .mud-drawer, .mud-appbar, .lrr-no-print { display: none !important; }
    .lrr-print-grid { display: block !important; }
    .lrr-print-grid > * { margin-bottom: 16px; }
    .mud-paper, .lrr-chart-card { break-inside: avoid; }
    .lrr-print-header { display: block !important; }
}
.lrr-print-header { display: none; }

/* ── Staff & admin accounts table: roomier rows + a steady actions column (owner, 2026-10-20).
   Below Breakpoint.Md, MudTable stacks each cell full-width with its DataLabel, so the pill
   stack keeps reading top to bottom instead of overflowing sideways. Name and Email wrap
   (no nowrap) so the seven columns fit the console's MaxWidth.Large content area without a
   horizontal scrollbar — fix 2026-10-20: the Actions column was off the right edge at 2560px. */
.lrr-staff-table td, .lrr-staff-table th { vertical-align: middle; padding: 12px 16px; }
.lrr-staff-table th { white-space: nowrap; }
.lrr-staff-table .lrr-col-email { overflow-wrap: anywhere; }
.lrr-staff-table .lrr-col-title { min-width: 160px; }
.lrr-staff-table .lrr-col-personal { min-width: 220px; }
.lrr-staff-table .lrr-col-actions { min-width: 200px; }

/* Actions column pills: one vertical, equal-width, left-aligned column of chips per row instead
   of a loose row of plain buttons (owner, 2026-10-20). */
.lrr-action-pill { width: 100%; justify-content: flex-start; white-space: nowrap; }