/* LedgerRow design tokens and primitives.
   All visual tokens live here as CSS variables under the --lr-* namespace.
   No hex literals appear in any other .css or .cshtml file. Carve-outs apply
   only to #FFFFFF / #000000 utility uses; those are bound to tokens below.
   Component primitives use the lr-* class prefix per D-007. */

/* Self-hosted fonts. Style guide Section 4 binds Inter for v1 and JetBrains
   Mono for numerics and IDs. font-display: swap renders the system fallback
   immediately, then upgrades to Inter when the woff2 resolves. The fallback
   stack starts with Segoe UI which has very close x-height and advance widths
   to Inter at 16px, so the swap does not visibly reflow the layout at body
   sizes. The size-adjust descriptor on the Segoe UI override below pins the
   fallback metrics to match Inter to within a few pixels on display sizes. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/InterVariable.woff2") format("woff2-variations"),
         url("/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

/* Fallback face. Maps the literal name "Segoe UI" to itself with metric
   overrides tuned so a paragraph rendered in the fallback occupies very close
   to the same vertical space as the same paragraph rendered in Inter. This
   prevents a perceptible reflow when the Inter woff2 resolves over a slow
   cell signal. Values are taken from the Capsize metric overrides for Inter
   vs Segoe UI; ascent / descent overrides keep the cap line stable. */
@font-face {
    font-family: "Segoe UI";
    src: local("Segoe UI");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

:root {
    /* Color, action */
    --lr-color-primary: #2F5A3D;
    --lr-color-primary-strong: #1F3C29;
    --lr-color-primary-soft: #E3EFE6;
    --lr-color-error: #B0301F;

    /* Color, neutrals */
    --lr-color-neutral-ink: #1B1F1C;
    --lr-color-neutral-mute: #4B4F4C;
    --lr-color-neutral-line: #D7DAD6;
    --lr-color-neutral-bg: #FAFAF7;
    --lr-color-neutral-card: #FFFFFF;
    --lr-color-dirt: #6B5A45;

    /* Color, state tints */
    --lr-color-sky: #2C6E91;
    --lr-color-warn: #9D5715;
    --lr-color-focus: #2C6E91;

    /* Utility (white kept as a token so no raw #FFFFFF appears outside this file) */
    --lr-color-on-primary: #FFFFFF;

    /* Type families */
    --lr-font-heading: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lr-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lr-font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

    /* Type ramp, screen */
    --lr-type-display-size: 40px;
    --lr-type-display-weight: 700;
    --lr-type-display-lh: 1.15;

    --lr-type-h1-size: 28px;
    --lr-type-h1-weight: 700;
    --lr-type-h1-lh: 1.2;

    --lr-type-h2-size: 22px;
    --lr-type-h2-weight: 700;
    --lr-type-h2-lh: 1.2;

    --lr-type-h3-size: 18px;
    --lr-type-h3-weight: 600;
    --lr-type-h3-lh: 1.25;

    --lr-type-body-size: 16px;
    --lr-type-body-weight: 400;
    --lr-type-body-lh: 1.4;

    --lr-type-body-strong-size: 16px;
    --lr-type-body-strong-weight: 600;
    --lr-type-body-strong-lh: 1.4;

    --lr-type-small-size: 14px;
    --lr-type-small-weight: 400;
    --lr-type-small-lh: 1.4;

    --lr-type-eyebrow-size: 12px;
    --lr-type-eyebrow-weight: 600;
    --lr-type-eyebrow-lh: 1.2;
    --lr-type-eyebrow-tracking: 0.04em;

    /* Type ramp, PDF cover sheet (declared for parity with style guide; QuestPDF reads these) */
    --lr-print-cover-title: 22pt;
    --lr-print-cover-subtitle: 13pt;
    --lr-print-h1: 14pt;
    --lr-print-h2: 11pt;
    --lr-print-body: 10pt;
    --lr-print-body-strong: 10pt;
    --lr-print-small: 8pt;
    --lr-print-mono: 10pt;

    /* Spacing scale */
    --lr-space-1: 4px;
    --lr-space-2: 8px;
    --lr-space-3: 12px;
    --lr-space-4: 16px;
    --lr-space-5: 24px;
    --lr-space-6: 32px;
    --lr-space-8: 48px;
    --lr-space-10: 64px;

    /* Radii */
    --lr-radius-sm: 2px;
    --lr-radius-md: 4px;
    --lr-radius-lg: 8px;

    /* Elevation. The elevated token stays reserved for floating surfaces
       (drawers, dropdowns). The interactive token is for the transient hover,
       focus, and active states of interactive surfaces only, never at rest.
       See D-017. */
    --lr-shadow-elevated: 0 2px 8px rgba(27, 31, 28, 0.08);
    --lr-shadow-interactive: 0 6px 18px rgba(27, 31, 28, 0.10);

    /* Motion */
    --lr-motion-fast: 150ms;
    --lr-motion-slow: 240ms;
    --lr-ease-enter: cubic-bezier(0.2, 0, 0, 1);
    --lr-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Layout */
    --lr-max-width: 1120px;
}

/* Reset and base */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lr-font-heading);
    color: var(--lr-color-neutral-ink);
    margin: 0;
}

h1 { font-size: var(--lr-type-h1-size); font-weight: var(--lr-type-h1-weight); line-height: var(--lr-type-h1-lh); }
h2 { font-size: var(--lr-type-h2-size); font-weight: var(--lr-type-h2-weight); line-height: var(--lr-type-h2-lh); }
h3 { font-size: var(--lr-type-h3-size); font-weight: var(--lr-type-h3-weight); line-height: var(--lr-type-h3-lh); }

p {
    margin: 0;
}

a {
    color: var(--lr-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--lr-color-primary-strong);
}

:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

/* Skip link */
.lr-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lr-color-neutral-ink);
    color: var(--lr-color-on-primary);
    padding: var(--lr-space-2) var(--lr-space-4);
    border-radius: var(--lr-radius-sm);
    text-decoration: none;
    z-index: 100;
}

.lr-skip-link:focus {
    left: var(--lr-space-4);
    top: var(--lr-space-4);
}

/* App shell */
.lr-app-header {
    background: var(--lr-color-neutral-card);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-app-header__inner {
    max-width: var(--lr-max-width);
    margin: 0 auto;
    padding: var(--lr-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-4);
    flex-wrap: wrap;
}

.lr-app-header__brand {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
    text-decoration: none;
    color: inherit;
}

.lr-app-header__brand .lr-eyebrow {
    margin: 0;
    color: var(--lr-color-dirt);
}

.lr-app-header__brand:hover .lr-wordmark__row,
.lr-app-header__brand:focus-visible .lr-wordmark__row {
    color: var(--lr-color-primary-strong);
}

.lr-app-header__side {
    display: flex;
    align-items: center;
    gap: var(--lr-space-4);
}

/* Marketing header collapsible menu (CSS-only, no JS).
   Below 720px the <details> element collapses to a single hamburger button.
   At 720px and above the menu is forced open and the summary is hidden,
   so the nav renders inline as a horizontal bar. */
.lr-app-header__menu {
    position: relative;
}

.lr-app-header__menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    min-height: 48px;
    min-width: 48px;
    padding: var(--lr-space-2) var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    background: var(--lr-color-neutral-card);
}

.lr-app-header__menu > summary::-webkit-details-marker {
    display: none;
}

.lr-app-header__menu > summary:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-app-header__menu > summary svg {
    width: 20px;
    height: 20px;
}

.lr-app-header__menu[open] > .lr-app-header__side {
    position: absolute;
    right: 0;
    top: calc(100% + var(--lr-space-2));
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    box-shadow: var(--lr-shadow-elevated);
    min-width: 220px;
    padding: var(--lr-space-3);
    z-index: 50;
}

.lr-app-header__menu[open] > .lr-app-header__side .lr-app-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--lr-space-1);
}

.lr-app-header__menu[open] > .lr-app-header__side .lr-app-nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.lr-app-header__menu[open] > .lr-app-header__side .lr-app-header__cta {
    margin-top: var(--lr-space-1);
}

.lr-app-header__signout {
    margin: 0;
    display: inline-flex;
}

.lr-app-header__signout-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    font: inherit;
    padding: var(--lr-space-2) var(--lr-space-3);
}

.lr-app-header__signout-button:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

@media (min-width: 720px) {
    .lr-app-header__menu > summary {
        display: none;
    }
    .lr-app-header__menu > .lr-app-header__side {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    .lr-app-header__menu > .lr-app-header__side .lr-app-nav {
        flex-direction: row !important;
        align-items: center !important;
    }
    /* PC and tablet: the brand pushes the menu and Log in button to the right,
       the bar Log in button appears, and the mobile-only sign-in link hides. */
    .lr-app-header__brand {
        margin-right: auto;
    }
    .lr-app-header__login {
        display: inline-flex;
    }
    .lr-app-nav__link--mobile {
        display: none;
    }
}

.lr-app-header__cta {
    text-transform: none;
    letter-spacing: 0;
}

/* The bar Log in button is for PC and tablet only. On mobile the hamburger
   menu carries the sign-in link instead. */
.lr-app-header__login {
    display: none;
    text-transform: none;
    letter-spacing: 0;
}

.lr-app-header__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-1);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
}

.lr-app-header__chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lr-color-primary);
    display: inline-block;
}

.lr-app-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--lr-max-width);
    margin: 0 auto;
    padding: var(--lr-space-6) var(--lr-space-4) var(--lr-space-10);
}

.lr-app-footer {
    background: var(--lr-color-neutral-card);
    border-top: 1px solid var(--lr-color-neutral-line);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-app-footer__inner {
    max-width: var(--lr-max-width);
    margin: 0 auto;
    padding: var(--lr-space-6) var(--lr-space-4);
}

.lr-app-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-5);
}

@media (min-width: 720px) {
    .lr-app-footer__columns {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

.lr-app-footer__col-title {
    margin: 0 0 var(--lr-space-2);
    color: var(--lr-color-dirt);
}

.lr-app-footer__name {
    font-family: var(--lr-font-heading);
    font-weight: 700;
    color: var(--lr-color-neutral-ink);
    font-size: var(--lr-type-h3-size);
    letter-spacing: -0.01em;
}

.lr-app-footer__name .lr-wordmark__row {
    color: var(--lr-color-primary);
}

.lr-app-footer__tagline {
    margin-top: var(--lr-space-2);
    color: var(--lr-color-neutral-mute);
    max-width: 32ch;
}

.lr-app-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    color: var(--lr-color-neutral-ink);
}

/* Regulated-term inline link used in body copy across the marketing
   surfaces and the shared footer. Reads as part of running text via
   currentColor; a dotted underline signals "link" without breaking
   the typographic rhythm. Defined here (in addition to landing.css)
   so the shared footer Trust column also styles correctly on pages
   that do not load the landing stylesheet. */
.lr-landing__term-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
}

.lr-landing__term-link:hover,
.lr-landing__term-link:focus-visible {
    color: var(--lr-color-primary);
    border-bottom-style: solid;
}

.lr-app-footer--marketing .lr-landing__term-link:hover,
.lr-app-footer--marketing .lr-landing__term-link:focus-visible {
    color: var(--lr-color-primary-soft);
}

.lr-landing__term-link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
    border-radius: var(--lr-radius-sm);
}

.lr-app-footer__meta {
    margin-top: var(--lr-space-5);
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3) var(--lr-space-5);
    color: var(--lr-color-neutral-mute);
}

.lr-app-footer__meta-strong {
    color: var(--lr-color-neutral-ink);
}

.lr-app-nav {
    display: flex;
    gap: var(--lr-space-1);
}

.lr-app-nav__link {
    color: var(--lr-color-neutral-mute);
    text-decoration: none;
    padding: var(--lr-space-2) var(--lr-space-3);
    border-radius: var(--lr-radius-sm);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
    transition: color var(--lr-motion-fast) var(--lr-ease-enter),
                background-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-app-nav__link:hover {
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
}

/* Wordmark */
.lr-wordmark {
    font-family: var(--lr-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
    font-size: var(--lr-type-h2-size);
    line-height: 1;
    display: inline-block;
}

.lr-wordmark__ledger { color: var(--lr-color-neutral-ink); }
.lr-wordmark__row { color: var(--lr-color-primary); }

.lr-wordmark--display {
    font-size: var(--lr-type-display-size);
    line-height: var(--lr-type-display-lh);
}

/* Hero (placeholder index until Epic L) */
.lr-hero {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    padding: var(--lr-space-5) 0 var(--lr-space-8);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    color: var(--lr-color-dirt);
    margin: 0;
}

.lr-hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: var(--lr-space-5);
    height: 1px;
    background: var(--lr-color-dirt);
}

.lr-hero__title {
    margin: 0;
    font-size: var(--lr-type-display-size);
    line-height: var(--lr-type-display-lh);
}

.lr-hero__lede {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
    max-width: 56ch;
}

.lr-hero__lede--full {
    max-width: none;
}

.lr-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-2) var(--lr-space-5);
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-hero__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--lr-space-2);
}

.lr-hero__meta-key {
    color: var(--lr-color-dirt);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

/* Phase 0 splash cards under the hero */
.lr-splash {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
    margin-top: var(--lr-space-6);
}

@media (min-width: 720px) {
    .lr-splash {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lr-splash__note {
    margin-top: var(--lr-space-6);
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-2) var(--lr-space-4);
    align-items: center;
}

/* Error page */
.lr-error {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    max-width: 720px;
}

.lr-error__title {
    font-size: var(--lr-type-h1-size);
}

.lr-error__lede {
    color: var(--lr-color-neutral-mute);
}

.lr-error__meta {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

/* Primitive: lr-btn */
.lr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: var(--lr-space-3) var(--lr-space-5);
    border-radius: var(--lr-radius-md);
    border: 1px solid var(--lr-color-neutral-line);
    background: transparent;
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-strong-size);
    font-weight: var(--lr-type-body-strong-weight);
    line-height: var(--lr-type-body-strong-lh);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--lr-motion-fast) var(--lr-ease-enter),
                border-color var(--lr-motion-fast) var(--lr-ease-enter),
                color var(--lr-motion-fast) var(--lr-ease-enter),
                box-shadow var(--lr-motion-fast) var(--lr-ease-enter),
                transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-btn:hover,
.lr-btn.lr-is-hover {
    background: var(--lr-color-primary-soft);
    border-color: var(--lr-color-neutral-mute);
}

/* Tactile press. The control settles 1px on tap, the same cue a physical
   button gives. Transform only, inside the motion budget. The decorative
   interaction transforms are removed under prefers-reduced-motion by the
   targeted block near the end of this file. See D-017. */
.lr-btn:active {
    transform: translateY(1px);
}

.lr-btn[disabled]:active,
.lr-btn:disabled:active {
    transform: none;
}

.lr-btn.lr-is-focus,
.lr-btn:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-btn[disabled],
.lr-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: transparent;
    border-color: var(--lr-color-neutral-line);
}

.lr-btn[disabled]:hover,
.lr-btn:disabled:hover {
    background: transparent;
    border-color: var(--lr-color-neutral-line);
}

/* Primitive: lr-btn-primary */
.lr-btn-primary {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.lr-btn-primary:hover,
.lr-btn-primary.lr-is-hover {
    background: var(--lr-color-primary-strong);
    border-color: var(--lr-color-primary-strong);
    color: var(--lr-color-on-primary);
    box-shadow: var(--lr-shadow-interactive);
}

.lr-btn-primary:active {
    box-shadow: none;
}

.lr-btn-primary[disabled],
.lr-btn-primary:disabled {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
    opacity: 0.5;
}

.lr-btn-primary[disabled]:hover,
.lr-btn-primary:disabled:hover {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
}

/* BEM double-hyphen alias for lr-btn-primary. Used by button elements that
   follow the lr-btn + lr-btn--primary composition pattern (as opposed to
   the lr-btn lr-btn-primary pattern used on links). Both compile to the
   same visual result. */
.lr-btn--primary {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.lr-btn--primary:hover,
.lr-btn--primary.lr-is-hover {
    background: var(--lr-color-primary-strong);
    border-color: var(--lr-color-primary-strong);
    color: var(--lr-color-on-primary);
    box-shadow: var(--lr-shadow-interactive);
}

.lr-btn--primary:active {
    box-shadow: none;
}

.lr-btn--primary[disabled],
.lr-btn--primary:disabled {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
    opacity: 0.5;
}

.lr-btn--primary[disabled]:hover,
.lr-btn--primary:disabled:hover {
    background: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
}

/* Primitive: lr-btn-contractor (modifier on lr-btn-primary for the contractor flow) */
.lr-btn-contractor {
    min-height: 60px;
    width: 100%;
}

@media (min-width: 720px) {
    .lr-btn-contractor {
        width: auto;
        min-width: 240px;
    }
}

/* Primitive: lr-input */
.lr-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--lr-space-3) var(--lr-space-4);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-input:focus,
.lr-input:focus-visible,
.lr-input.lr-is-focus {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
    border-color: var(--lr-color-primary);
}

.lr-input[disabled],
.lr-input:disabled {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-mute);
    cursor: not-allowed;
}

.lr-input.lr-is-invalid,
.lr-input[aria-invalid="true"] {
    border-color: var(--lr-color-error);
}

.lr-input__error {
    margin-top: var(--lr-space-1);
    color: var(--lr-color-error);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
}

/* Primitive: lr-select */
.lr-select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--lr-space-3) var(--lr-space-8) var(--lr-space-3) var(--lr-space-4);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background-color: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%231B1F1C' d='M3.2 5.6h9.6L8 11.2z'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--lr-space-4) center;
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-select:focus,
.lr-select:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
    border-color: var(--lr-color-primary);
}

.lr-select[disabled],
.lr-select:disabled {
    background-color: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-mute);
    cursor: not-allowed;
}

/* Primitive: lr-card */
.lr-card {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-5);
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter),
                box-shadow var(--lr-motion-fast) var(--lr-ease-enter),
                transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-card--active {
    border-top: 2px solid var(--lr-color-primary);
}

.lr-card__title {
    margin-top: var(--lr-space-1);
}

.lr-card__meta {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    margin-top: var(--lr-space-2);
}

/* Primitive: lr-checklist */
.lr-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--lr-space-3);
}

.lr-checklist__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    font-family: var(--lr-font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lr-checklist__body {
    flex: 1 1 auto;
}

.lr-checklist__title {
    margin: 0;
    font-weight: 600;
}

.lr-checklist__note {
    margin: var(--lr-space-1) 0 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: 1.6;
}

/* Primitive: lr-eyebrow */
.lr-eyebrow {
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    line-height: var(--lr-type-eyebrow-lh);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    margin: 0 0 var(--lr-space-1);
}

/* Warning modifier. Uses the --lr-color-warn token (#9D5715) which clears
   5.28:1 against the card background (#FFFFFF) and 4.65:1 against the
   page background (#FAFAF7), both passing WCAG AA for small text.
   Color alone does not carry the full meaning; the label "Pending verification"
   is visible text, conforming to the design rule from D-007. */
.lr-eyebrow--warn {
    color: var(--lr-color-warn);
}

/* Primitive: lr-label */
.lr-label {
    display: block;
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    font-weight: 500;
    line-height: var(--lr-type-body-lh);
    color: var(--lr-color-neutral-ink);
    margin-bottom: var(--lr-space-2);
}

/* Primitive: lr-mono */
.lr-mono {
    font-family: var(--lr-font-mono);
}

/* Primitive: lr-num (tabular numerics) */
.lr-num {
    font-family: var(--lr-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Gallery layout helpers. These classes style the /Components surface only
   and are not reusable visual primitives; they do not need gallery entries
   and live under the lr-gallery__* namespace per the standards. */
.lr-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-8);
}

.lr-gallery__hero {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    padding-bottom: var(--lr-space-6);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-gallery__hero-title {
    margin: 0;
    font-size: var(--lr-type-display-size);
    line-height: var(--lr-type-display-lh);
}

.lr-gallery__lede {
    color: var(--lr-color-neutral-mute);
    max-width: 60ch;
}

.lr-gallery__section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-5);
}

@media (min-width: 720px) {
    .lr-gallery__section {
        grid-template-columns: 14rem 1fr;
        gap: var(--lr-space-6);
    }
}

.lr-gallery__section-head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
}

.lr-gallery__section-title {
    font-size: var(--lr-type-h2-size);
    line-height: var(--lr-type-h2-lh);
    margin: 0;
}

.lr-gallery__section-note {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-gallery__section-body {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    min-width: 0;
}

.lr-gallery__group {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-gallery__group-title {
    font-size: var(--lr-type-h3-size);
    margin: 0;
}

.lr-gallery__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    align-items: center;
}

.lr-gallery__row--stack {
    flex-direction: column;
    align-items: stretch;
}

.lr-gallery__field {
    display: flex;
    flex-direction: column;
    max-width: 480px;
}

.lr-gallery__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-gallery__cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1080px) {
    .lr-gallery__cards--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lr-gallery__num-table {
    width: 100%;
    border-collapse: collapse;
}

.lr-gallery__num-table th,
.lr-gallery__num-table td {
    text-align: left;
    padding: var(--lr-space-2) var(--lr-space-3);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-gallery__num-table th.lr-num,
.lr-gallery__num-table td.lr-num {
    text-align: right;
}

/* Type specimen rows */
.lr-gallery__specimen {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-gallery__specimen-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-1);
    padding: var(--lr-space-3) 0;
    border-bottom: 1px dashed var(--lr-color-neutral-line);
}

@media (min-width: 720px) {
    .lr-gallery__specimen-row {
        grid-template-columns: 9rem 1fr;
        gap: var(--lr-space-4);
        align-items: baseline;
    }
}

.lr-gallery__specimen-tag {
    color: var(--lr-color-dirt);
    font-family: var(--lr-font-mono);
    font-size: var(--lr-type-small-size);
}

.lr-gallery__specimen-display {
    font-size: var(--lr-type-display-size);
    line-height: var(--lr-type-display-lh);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lr-gallery__specimen-h1 {
    font-size: var(--lr-type-h1-size);
    line-height: var(--lr-type-h1-lh);
    font-weight: 700;
}

.lr-gallery__specimen-h2 {
    font-size: var(--lr-type-h2-size);
    line-height: var(--lr-type-h2-lh);
    font-weight: 700;
}

.lr-gallery__specimen-h3 {
    font-size: var(--lr-type-h3-size);
    line-height: var(--lr-type-h3-lh);
    font-weight: 600;
}

.lr-gallery__specimen-body {
    font-size: var(--lr-type-body-size);
    line-height: var(--lr-type-body-lh);
}

.lr-gallery__specimen-body-strong {
    font-size: var(--lr-type-body-strong-size);
    line-height: var(--lr-type-body-strong-lh);
    font-weight: 600;
}

.lr-gallery__specimen-small {
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
    color: var(--lr-color-neutral-mute);
}

/* Color chip grid */
.lr-gallery__chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
}

@media (min-width: 720px) {
    .lr-gallery__chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1080px) {
    .lr-gallery__chips {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lr-gallery__chip {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--lr-space-3);
    align-items: center;
    padding: var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
}

.lr-gallery__chip-swatch {
    width: 56px;
    height: 56px;
    border-radius: var(--lr-radius-sm);
    border: 1px solid var(--lr-color-neutral-line);
}

.lr-gallery__chip-swatch--primary { background: var(--lr-color-primary); }
.lr-gallery__chip-swatch--primary-strong { background: var(--lr-color-primary-strong); }
.lr-gallery__chip-swatch--primary-soft { background: var(--lr-color-primary-soft); }
.lr-gallery__chip-swatch--error { background: var(--lr-color-error); }
.lr-gallery__chip-swatch--ink { background: var(--lr-color-neutral-ink); }
.lr-gallery__chip-swatch--mute { background: var(--lr-color-neutral-mute); }
.lr-gallery__chip-swatch--line { background: var(--lr-color-neutral-line); }
.lr-gallery__chip-swatch--dirt { background: var(--lr-color-dirt); }
.lr-gallery__chip-swatch--sky { background: var(--lr-color-sky); }
.lr-gallery__chip-swatch--warn { background: var(--lr-color-warn); }
.lr-gallery__chip-swatch--focus { background: var(--lr-color-focus); }

.lr-gallery__chip-name {
    font-family: var(--lr-font-heading);
    font-weight: 600;
    font-size: var(--lr-type-small-size);
}

.lr-gallery__chip-hex {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

/* Record card body, used to give the lr-card primitive realistic content */
.lr-gallery__record {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-gallery__record-row {
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-3);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-gallery__record-row strong {
    color: var(--lr-color-neutral-ink);
    font-weight: 600;
}

/* Epic B layout helpers. Compose existing lr-* primitives; no new visual variants. */
.lr-auth {
    max-width: 480px;
    margin: var(--lr-space-8) auto;
    padding: 0 var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-auth__lede {
    color: var(--lr-color-neutral-mute);
}

.lr-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-auth__field {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-auth__remember {
    display: flex;
    align-items: center;
    gap: var(--lr-space-2);
    font-size: var(--lr-type-small-size);
    color: var(--lr-color-neutral-mute);
}

.lr-auth__alt {
    font-size: var(--lr-type-small-size);
    color: var(--lr-color-neutral-mute);
}

.lr-auth__alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lr-space-4);
    align-items: baseline;
    margin-top: var(--lr-space-4);
}

.lr-auth__alt-row .lr-auth__alt {
    margin: 0;
}

.lr-auth__alt-row .lr-auth__alt:last-child {
    text-align: right;
}

/* Selected-plan banner on the sign-up page. Carried from the landing pricing
   cards so the chosen tier stays visible while the account is created. */
.lr-auth__plan {
    display: flex;
    align-items: baseline;
    gap: var(--lr-space-3);
    margin: 0;
    padding: var(--lr-space-3) var(--lr-space-4);
    background: var(--lr-color-primary-soft);
    border-radius: var(--lr-radius-md);
    border-left: 3px solid var(--lr-color-primary);
}

.lr-auth__plan-label {
    font-size: var(--lr-type-small-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lr-color-primary-strong);
}

.lr-auth__plan-name {
    font-weight: 600;
    color: var(--lr-color-neutral-ink);
}

/* Subscribe plan picker. Cards were previously unstyled; this gives them a
   surface and a highlight for the plan preselected from sign-up. */
.lr-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

.lr-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    padding: var(--lr-space-5);
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
}

.lr-plan-card--selected {
    border-color: var(--lr-color-primary);
    box-shadow: 0 0 0 1px var(--lr-color-primary), var(--lr-shadow-elevated);
}

.lr-plan-card__flag {
    align-self: flex-start;
    font-size: var(--lr-type-small-size);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lr-color-primary-strong);
    background: var(--lr-color-primary-soft);
    padding: 2px var(--lr-space-2);
    border-radius: var(--lr-radius-sm);
}

.lr-plan-price {
    margin: 0;
    font-family: var(--lr-font-heading);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--lr-color-neutral-ink);
    font-variant-numeric: tabular-nums;
}

/* Active subscription summary on the billing page: current plan, renewal, and
   usage against the plan limits. */
.lr-plan-summary {
    max-width: 520px;
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

.lr-plan-summary__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-4);
}

.lr-plan-summary__price {
    margin: var(--lr-space-1) 0 0;
    color: var(--lr-color-neutral-mute);
}

.lr-plan-summary__status {
    text-transform: capitalize;
    flex-shrink: 0;
}

.lr-plan-summary__meta {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-plan-summary__usage {
    margin: var(--lr-space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-plan-summary__usage > div {
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-4);
    padding-bottom: var(--lr-space-2);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-plan-summary__usage > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lr-plan-summary__usage dt {
    margin: 0;
    color: var(--lr-color-neutral-mute);
}

.lr-plan-summary__usage dd {
    margin: 0;
    font-weight: var(--lr-type-body-strong-weight);
}

/* Epic C layout helpers. Compose existing lr-* primitives; no new visual variants.
   These page-level classes scope dashboard, manager-nav, and roster layouts. They
   do not invent new typography, color, or interactive surfaces; the underlying
   look-and-feel comes from lr-card, lr-btn, lr-eyebrow, lr-num, and lr-mono. */
.lr-manager-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-2);
    margin: var(--lr-space-4) 0 var(--lr-space-6);
}

.lr-manager-nav__link {
    color: var(--lr-color-neutral-mute);
    text-decoration: none;
    padding: var(--lr-space-2) var(--lr-space-4);
    border-radius: var(--lr-radius-sm);
    border: 1px solid var(--lr-color-neutral-line);
    background: var(--lr-color-neutral-card);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
    transition: color var(--lr-motion-fast) var(--lr-ease-enter),
                background-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-manager-nav__link:hover,
.lr-manager-nav__link[aria-current="page"] {
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
}

.lr-dashboard__counts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
    margin-top: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-dashboard__counts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1080px) {
    .lr-dashboard__counts {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lr-dashboard__count {
    font-size: var(--lr-type-display-size);
    line-height: var(--lr-type-display-lh);
    font-weight: 700;
    margin-top: var(--lr-space-2);
}

.lr-dashboard__count-label {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    margin-top: var(--lr-space-2);
}

.lr-dashboard__actions {
    margin-top: var(--lr-space-2);
}

.lr-listing__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--lr-space-4);
}

.lr-listing__title {
    margin: 0;
}

.lr-listing__table {
    width: 100%;
    border-collapse: collapse;
}

.lr-listing__table th,
.lr-listing__table td {
    text-align: left;
    padding: var(--lr-space-3);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    vertical-align: top;
}

.lr-listing__table th {
    color: var(--lr-color-dirt);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

.lr-listing__empty,
.lr-listing__error {
    margin-top: var(--lr-space-2);
}

.lr-form {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-4);
}

@media (min-width: 720px) {
    .lr-form__row--split {
        grid-template-columns: 1fr 1fr;
    }
}

.lr-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
}

.lr-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-mute);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
}

.lr-settings__danger {
    margin-top: var(--lr-space-6);
}

.lr-tag--archived {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-warn);
    border: 1px solid var(--lr-color-warn);
}

/* Epic D layout helpers. Page-level composition of existing lr-* primitives.
   These are not reusable primitives and do not appear in the gallery. */
.lr-roster {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-roster__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    align-items: end;
    justify-content: space-between;
}

.lr-roster__actions {
    display: flex;
    gap: var(--lr-space-3);
    flex-wrap: wrap;
}

.lr-roster__table {
    width: 100%;
    border-collapse: collapse;
}

.lr-roster__table th,
.lr-roster__table td {
    text-align: left;
    padding: var(--lr-space-3);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    vertical-align: top;
}

.lr-roster__table th {
    color: var(--lr-color-dirt);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

.lr-roster__email {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    margin-top: var(--lr-space-1);
}

.lr-roster__status {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-1);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
}

.lr-roster__status--invited {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-mute);
    border: 1px solid var(--lr-color-neutral-line);
}

.lr-roster__status--removed {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-mute);
    border: 1px solid var(--lr-color-neutral-line);
}

.lr-roster__empty,
.lr-roster__loading,
.lr-roster__error {
    padding: var(--lr-space-6);
    border: 1px dashed var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    text-align: center;
    color: var(--lr-color-neutral-mute);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    align-items: center;
}

.lr-roster__error {
    border-color: var(--lr-color-error);
    color: var(--lr-color-error);
}

.lr-roster__row-actions {
    display: flex;
    gap: var(--lr-space-2);
    flex-wrap: wrap;
}

.lr-roster__row-actions form {
    display: inline;
    margin: 0;
}

.lr-roster__flash {
    padding: var(--lr-space-3) var(--lr-space-4);
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    border-radius: var(--lr-radius-sm);
}

.lr-license-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-2);
    padding: var(--lr-space-4);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
}

@media (min-width: 720px) {
    .lr-license-row {
        grid-template-columns: 2fr 1fr 1fr auto;
        align-items: center;
    }
}

.lr-license-row__name {
    font-weight: 600;
}

.lr-license-row__meta {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

/* Style guide Section 4: state colors never carry meaning alone. The expiring
   row pairs the warn color with a triangle icon and a literal "Expiring soon"
   text label so the cue is legible without color perception. AA contrast is
   maintained: warn token #9D5715 on the card background clears 5.28:1 body. */
.lr-license-row--expiring {
    border-color: var(--lr-color-warn);
    border-left-width: 4px;
}

.lr-license-row--expired {
    border-color: var(--lr-color-error);
    border-left-width: 4px;
}

.lr-license-row__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-1);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
}

.lr-license-row__chip--expiring {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-warn);
    border: 1px solid var(--lr-color-warn);
}

.lr-license-row__chip--expired {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-error);
    border: 1px solid var(--lr-color-error);
}

.lr-license-row__chip-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.lr-license-row__actions {
    display: flex;
    gap: var(--lr-space-2);
    flex-wrap: wrap;
}

.lr-warn-banner {
    padding: var(--lr-space-3) var(--lr-space-4);
    border: 1px solid var(--lr-color-warn);
    border-radius: var(--lr-radius-sm);
    color: var(--lr-color-warn);
    background: var(--lr-color-neutral-card);
    display: flex;
    align-items: center;
    gap: var(--lr-space-2);
}

.lr-warn-banner__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* Admin shell. Layout-only classes that wrap inner SaaS pages (/manager/*, /contractor/*).
   Composes existing lr-* primitives for cards, buttons, eyebrows, and typography. No new
   visual primitives. The sidebar is fixed-width on desktop and an off-canvas drawer on
   mobile. The off-canvas mechanism is a CSS-only checkbox toggle so the drawer works
   without JavaScript. Tokens only: no raw hex, no Bootstrap utility classes. */
.lr-admin-shell {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.lr-admin-toggle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.lr-admin-sidebar {
    background: var(--lr-color-neutral-card);
    border-right: 1px solid var(--lr-color-neutral-line);
    width: 260px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

.lr-admin-sidebar__brand {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
    padding: var(--lr-space-5) var(--lr-space-5) var(--lr-space-4);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    color: inherit;
    text-decoration: none;
}

.lr-admin-sidebar__brand:hover .lr-wordmark__row,
.lr-admin-sidebar__brand:focus-visible .lr-wordmark__row {
    color: var(--lr-color-primary-strong);
}

.lr-admin-sidebar__brand .lr-wordmark {
    font-size: var(--lr-type-h3-size);
    line-height: 1;
}

.lr-admin-sidebar__operation {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
    margin-top: var(--lr-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lr-admin-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: var(--lr-space-3) var(--lr-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.lr-admin-sidebar__nav-label {
    padding: var(--lr-space-4) var(--lr-space-3) var(--lr-space-1);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
}

.lr-admin-sidebar__nav-link {
    display: flex;
    align-items: center;
    gap: var(--lr-space-3);
    padding: var(--lr-space-3) var(--lr-space-3);
    border-left: 2px solid transparent;
    border-radius: 0 var(--lr-radius-sm) var(--lr-radius-sm) 0;
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    font-weight: 500;
    line-height: 1.2;
    min-height: 44px;
    transition: background-color var(--lr-motion-fast) var(--lr-ease-enter),
                color var(--lr-motion-fast) var(--lr-ease-enter),
                border-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-admin-sidebar__nav-link:hover {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-primary-strong);
}

.lr-admin-sidebar__nav-link[aria-current="page"] {
    background: var(--lr-color-primary-soft);
    border-left-color: var(--lr-color-primary);
    color: var(--lr-color-primary-strong);
    font-weight: 600;
}

.lr-admin-sidebar__nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--lr-color-neutral-mute);
}

.lr-admin-sidebar__nav-link[aria-current="page"] .lr-admin-sidebar__nav-icon {
    color: var(--lr-color-primary);
}

.lr-admin-sidebar__user {
    border-top: 1px solid var(--lr-color-neutral-line);
    padding: var(--lr-space-3);
}

.lr-admin-sidebar__user details {
    position: relative;
}

.lr-admin-sidebar__user summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--lr-space-3);
    padding: var(--lr-space-2);
    border-radius: var(--lr-radius-sm);
    min-height: 48px;
    color: var(--lr-color-neutral-ink);
    transition: background-color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-admin-sidebar__user summary::-webkit-details-marker {
    display: none;
}

.lr-admin-sidebar__user summary:hover {
    background: var(--lr-color-neutral-bg);
}

.lr-admin-sidebar__user summary:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-admin-sidebar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-small-size);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lr-admin-sidebar__user-name {
    flex: 1 1 auto;
    font-size: var(--lr-type-small-size);
    font-weight: 500;
    color: var(--lr-color-neutral-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lr-admin-sidebar__user-caret {
    width: 12px;
    height: 12px;
    color: var(--lr-color-neutral-mute);
    flex-shrink: 0;
    transition: transform var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-admin-sidebar__user details[open] .lr-admin-sidebar__user-caret {
    transform: rotate(180deg);
}

.lr-admin-sidebar__user-menu {
    position: absolute;
    bottom: calc(100% + var(--lr-space-2));
    left: 0;
    right: 0;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    box-shadow: var(--lr-shadow-elevated);
    padding: var(--lr-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
    z-index: 20;
}

.lr-admin-sidebar__user-menu form {
    margin: 0;
}

.lr-admin-sidebar__user-menu button,
.lr-admin-sidebar__user-menu a {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--lr-space-2) var(--lr-space-3);
    border-radius: var(--lr-radius-sm);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    color: var(--lr-color-neutral-ink);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lr-admin-sidebar__user-menu button:hover,
.lr-admin-sidebar__user-menu a:hover {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-primary-strong);
}

.lr-admin-sidebar__user-menu button:focus-visible,
.lr-admin-sidebar__user-menu a:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-admin-content {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--lr-space-6);
}

.lr-admin-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--lr-space-4);
    margin-bottom: var(--lr-space-5);
    padding-bottom: var(--lr-space-4);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-admin-page__header-text {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
    min-width: 0;
}

.lr-admin-page__header-title {
    margin: 0;
}

.lr-admin-page__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
}

.lr-admin-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-3);
    padding: var(--lr-space-3) var(--lr-space-4);
    background: var(--lr-color-neutral-card);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    position: sticky;
    top: 0;
    z-index: 15;
}

.lr-admin-mobile-bar__brand {
    text-decoration: none;
    color: inherit;
}

.lr-admin-mobile-bar__brand .lr-wordmark {
    font-size: var(--lr-type-h3-size);
    line-height: 1;
}

.lr-admin-mobile-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.lr-admin-mobile-toggle:hover {
    background: var(--lr-color-neutral-bg);
}

.lr-admin-toggle:focus-visible + .lr-admin-mobile-bar .lr-admin-mobile-toggle,
.lr-admin-mobile-toggle:focus-within {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-admin-mobile-toggle__icon {
    width: 20px;
    height: 20px;
}

.lr-admin-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27, 31, 28, 0.4);
    z-index: 20;
}

@media (max-width: 1079px) {
    .lr-admin-shell {
        flex-direction: column;
        min-height: auto;
    }

    .lr-admin-mobile-bar {
        display: flex;
    }

    .lr-admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 25;
        transform: translateX(-100%);
        transition: transform var(--lr-motion-slow) var(--lr-ease-enter);
        box-shadow: var(--lr-shadow-elevated);
    }

    .lr-admin-toggle:checked ~ .lr-admin-sidebar {
        transform: translateX(0);
    }

    .lr-admin-toggle:checked ~ .lr-admin-drawer-backdrop {
        display: block;
    }

    .lr-admin-content {
        padding: var(--lr-space-5) var(--lr-space-4) var(--lr-space-8);
    }
}

@media (max-width: 720px) {
    .lr-admin-sidebar {
        width: min(86vw, 320px);
        flex-basis: auto;
    }

    .lr-admin-content {
        padding: var(--lr-space-4) var(--lr-space-4) var(--lr-space-6);
    }
}

/* Primitive: lr-segment. Segmented control for picking one of a small set of
   options inline, used by the contractor flow for the application rate unit
   per F3.8. Each label is a 48px tap target on its shortest side. */
.lr-segment {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-neutral-card);
    padding: 2px;
    gap: 2px;
}

.lr-segment input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lr-segment label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 64px;
    padding: 0 var(--lr-space-4);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    font-weight: 500;
    line-height: var(--lr-type-body-lh);
    border-radius: var(--lr-radius-sm);
    cursor: pointer;
    transition: background var(--lr-motion-fast) var(--lr-ease-enter), color var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-segment label:hover,
.lr-segment label.lr-is-hover {
    background: var(--lr-color-primary-soft);
}

.lr-segment input[type="radio"]:checked + label,
.lr-segment label.lr-is-checked {
    background: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.lr-segment input[type="radio"]:focus-visible + label,
.lr-segment label.lr-is-focus {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-segment input[type="radio"]:disabled + label,
.lr-segment label[aria-disabled="true"] {
    color: var(--lr-color-neutral-mute);
    cursor: not-allowed;
}

/* Epic F contractor flow layout helpers. Not reusable primitives; page-level
   composition of lr-* primitives, so no gallery entry per D-007. */
.lr-application-form {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 720px;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-5);
}

@media (min-width: 720px) {
    .lr-application-form {
        padding: var(--lr-space-6);
    }
}

.lr-application-form .lr-input,
.lr-application-form .lr-select {
    min-height: 56px;
    font-size: 18px;
}

.lr-application-form__rate {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
    align-items: end;
}

@media (min-width: 720px) {
    .lr-application-form__rate {
        grid-template-columns: 1fr auto;
    }
}

/* The rate unit control fills the row on mobile and divides into even cells so
   five units sit on one tidy line instead of wrapping four-plus-one. At the
   720px breakpoint it returns to an inline control beside the rate input. */
.lr-application-form__rate .lr-segment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    width: 100%;
}

.lr-application-form__rate .lr-segment label {
    min-width: 0;
    padding: 0 var(--lr-space-2);
}

@media (min-width: 720px) {
    .lr-application-form__rate .lr-segment {
        display: inline-flex;
        width: auto;
    }

    .lr-application-form__rate .lr-segment label {
        min-width: 64px;
        padding: 0 var(--lr-space-4);
    }
}

.lr-product-lines {
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-5);
    margin: 0 0 var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-product-line {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    padding-bottom: var(--lr-space-5);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-product-line:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.lr-product-line__actions {
    display: flex;
    justify-content: flex-end;
}

.lr-product-lines__actions {
    display: flex;
}

.lr-btn-ghost {
    border-color: transparent;
    padding-left: var(--lr-space-3);
    padding-right: var(--lr-space-3);
    color: var(--lr-color-neutral-mute);
}

.lr-btn-ghost:hover,
.lr-btn-ghost.lr-is-hover {
    background: var(--lr-color-primary-soft);
    border-color: transparent;
}

.lr-app-step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    margin-top: var(--lr-space-4);
}

.lr-app-picker {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
}

.lr-app-picker__option {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: transparent;
}

.lr-app-picker__option .lr-card {
    min-height: 96px;
}

.lr-app-picker__option:hover .lr-card,
.lr-app-picker__option:focus-visible .lr-card {
    border-color: var(--lr-color-primary);
    box-shadow: var(--lr-shadow-interactive);
    transform: translateY(-2px);
}

.lr-app-picker__option:active .lr-card {
    transform: translateY(0);
    box-shadow: none;
}

.lr-app-picker__option:focus-visible {
    outline: none;
}

.lr-app-picker__option:focus-visible .lr-card {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-app-list {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* This is the detail row inside each list card (product, acreage, and the Open
   action), not the list <li> itself. The top rule separates it from the
   record header above it within the same card. */
.lr-app-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--lr-space-4);
    margin-top: var(--lr-space-3);
    padding-top: var(--lr-space-3);
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-app-empty,
.lr-app-loading,
.lr-app-error {
    padding: var(--lr-space-6);
    border: 1px dashed var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    color: var(--lr-color-neutral-mute);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    align-items: center;
}

.lr-app-error {
    border-color: var(--lr-color-error);
    color: var(--lr-color-error);
}

.lr-app-detail {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
    max-width: 720px;
}

.lr-app-detail__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-1);
    padding: var(--lr-space-3) 0;
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

@media (min-width: 720px) {
    .lr-app-detail__row {
        grid-template-columns: 12rem 1fr;
        align-items: baseline;
    }
}

.lr-app-detail__label {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

/* Voice control and from-voice highlight (Epic H, F3.11). The mic control
   composes a circular button with a hint line. The from-voice modifier
   overlays a soft primary border tint and a small mono caption next to the
   field so the contractor sees which values were populated by voice. */
.lr-mic-control {
    display: flex;
    align-items: center;
    gap: var(--lr-space-4);
    padding: var(--lr-space-4);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
    margin-bottom: var(--lr-space-4);
}

.lr-mic-control__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--lr-color-primary);
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    cursor: pointer;
    font-family: var(--lr-font-body);
    font-weight: 700;
    font-size: 18px;
    transition: background var(--lr-motion-fast) var(--lr-ease-enter);
}

.lr-mic-control__button:hover,
.lr-mic-control__button:focus-visible {
    background: var(--lr-color-primary);
    color: var(--lr-color-neutral-card);
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}

.lr-mic-control__button[disabled] {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-mute);
    border-color: var(--lr-color-neutral-line);
    cursor: not-allowed;
}

.lr-mic-control__glyph {
    font-family: var(--lr-font-mono);
    font-weight: 700;
    line-height: 1;
}

.lr-mic-control__hint {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
}

.lr-mic-control--recording .lr-mic-control__button {
    background: var(--lr-color-error);
    color: var(--lr-color-neutral-card);
    border-color: var(--lr-color-error);
}

.lr-mic-control--recording .lr-mic-control__hint {
    color: var(--lr-color-error);
}

.lr-mic-control--disabled .lr-mic-control__hint {
    color: var(--lr-color-neutral-mute);
}

.lr-input--from-voice,
.lr-select.lr-input--from-voice {
    border-color: var(--lr-color-primary);
    box-shadow: inset 0 0 0 1px var(--lr-color-primary-soft);
}

.lr-input__from-voice-hint {
    margin-top: var(--lr-space-1);
    color: var(--lr-color-primary-strong);
    font-family: var(--lr-font-mono);
    font-size: var(--lr-type-eyebrow-size);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}
/* Epic J - Manager applications list and verification surfaces.
   Layout-only classes. Verification badges compose the existing palette
   tokens (primary-soft for verified, sky for queried, warn for flagged,
   neutral mute for unreviewed). State is signaled by color + icon + label
   together per style guide Section 4 (color is never the load-bearing
   signal). */

.lr-applications-filters {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-4);
    margin-bottom: var(--lr-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

.lr-applications-filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--lr-space-3);
}

.lr-applications-filters__actions {
    display: flex;
    gap: var(--lr-space-2);
    flex-wrap: wrap;
}

/* Epic K - Manager exports page chrome. Layout-only; visuals come from lr-btn,
   lr-eyebrow, lr-card, lr-input, lr-select, and lr-num primitives. The page
   splits into a sectioned form on the left and a sticky preview summary card
   on the right at >=1080px, collapsing to a single column below that. */

.lr-exports-page {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-6);
}

.lr-exports-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    padding-bottom: var(--lr-space-5);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-exports-page__title {
    margin: 0;
}

.lr-exports-page__lede {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    max-width: 68ch;
}

.lr-exports-page__create {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-6);
    align-items: start;
}

@media (min-width: 1080px) {
    .lr-exports-page__create {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
        gap: var(--lr-space-8);
    }
}

.lr-exports-page__form {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-6);
    min-width: 0;
}

.lr-exports-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    padding-bottom: var(--lr-space-6);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-exports-page__section--last {
    padding-bottom: 0;
    border-bottom: 0;
}

.lr-exports-page__section .lr-eyebrow {
    margin: 0;
}

.lr-exports-page__section-help {
    margin: 0 0 var(--lr-space-2);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
    line-height: var(--lr-type-small-lh, 1.5);
    max-width: 62ch;
}

.lr-exports-page__dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
}

@media (min-width: 560px) {
    .lr-exports-page__dates {
        grid-template-columns: minmax(0, 220px) minmax(0, 220px);
    }
}

.lr-exports-page__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-2);
    margin-top: var(--lr-space-2);
}

.lr-exports-page__preset {
    padding: var(--lr-space-2) var(--lr-space-4);
    font-size: var(--lr-type-small-size, 0.875rem);
}

.lr-exports-page__refine {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lr-space-3);
}

@media (min-width: 560px) {
    .lr-exports-page__refine {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .lr-exports-page__refine {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lr-exports-page__purpose {
    margin-top: var(--lr-space-2);
}

.lr-exports-page__purpose-input {
    font-size: 1.0625rem;
    padding-top: var(--lr-space-4);
    padding-bottom: var(--lr-space-4);
}

.lr-exports-page__recipient {
    margin-top: var(--lr-space-4);
    max-width: 420px;
}

.lr-exports-page__aside {
    min-width: 0;
}

.lr-export-summary {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    margin: 0;
}

@media (min-width: 1080px) {
    .lr-export-summary--sticky {
        position: sticky;
        top: var(--lr-space-5);
    }
}

.lr-export-summary .lr-eyebrow {
    margin: 0;
}

.lr-export-summary__placeholder,
.lr-export-summary__zero {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
    line-height: var(--lr-type-small-lh, 1.5);
}

.lr-export-summary__count {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
    margin: 0;
}

.lr-export-summary__count-num {
    font-size: 3rem;
    line-height: 1;
    color: var(--lr-color-primary-strong);
    font-weight: 600;
}

.lr-export-summary__count-label {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
}

.lr-export-summary__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lr-space-2);
}

.lr-export-summary__chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--lr-space-2) var(--lr-space-3);
    border-radius: var(--lr-radius-md);
    border: 1px solid var(--lr-color-neutral-line);
    background: var(--lr-color-neutral-card);
}

.lr-export-summary__chip .lr-num {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lr-color-neutral-ink);
}

.lr-export-summary__chip-label {
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
}

.lr-export-summary__chip--verified {
    background: var(--lr-color-primary-soft);
    border-color: var(--lr-color-primary);
}

.lr-export-summary__chip--verified .lr-num,
.lr-export-summary__chip--verified .lr-export-summary__chip-label {
    color: var(--lr-color-primary-strong);
}

.lr-export-summary__chip--queried {
    border-color: var(--lr-color-sky);
}

.lr-export-summary__chip--queried .lr-num,
.lr-export-summary__chip--queried .lr-export-summary__chip-label {
    color: var(--lr-color-sky);
}

.lr-export-summary__chip--flagged {
    border-color: var(--lr-color-warn);
}

.lr-export-summary__chip--flagged .lr-num,
.lr-export-summary__chip--flagged .lr-export-summary__chip-label {
    color: var(--lr-color-warn);
}

.lr-export-summary__chip--unreviewed .lr-num {
    color: var(--lr-color-neutral-ink);
}

.lr-export-summary__meta {
    margin: 0;
    padding: var(--lr-space-3) 0 0;
    border-top: 1px solid var(--lr-color-neutral-line);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-export-summary__meta-row {
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-3);
    align-items: baseline;
}

.lr-export-summary__meta-row dt {
    color: var(--lr-color-neutral-mute);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

.lr-export-summary__meta-row dd {
    margin: 0;
    color: var(--lr-color-neutral-ink);
    font-size: var(--lr-type-small-size, 0.875rem);
    text-align: right;
}

.lr-export-summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    padding-top: var(--lr-space-3);
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-export-summary__actions .lr-btn {
    width: 100%;
    justify-content: center;
}

.lr-export-summary__hint {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
    text-align: center;
}

.lr-exports-page__history {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    padding-top: var(--lr-space-5);
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-exports-page__history-header {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-1);
}

.lr-exports-page__history-header .lr-eyebrow {
    margin: 0;
}

.lr-exports-page__history-caption {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    max-width: 68ch;
}

.lr-exports-page__empty {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
    align-items: flex-start;
}

.lr-exports-page__empty-body {
    margin: 0;
    color: var(--lr-color-neutral-mute);
    max-width: 56ch;
}

.lr-exports-page__table-wrap {
    width: 100%;
    overflow-x: auto;
}

.lr-exports-page__table {
    min-width: 760px;
}

.lr-application-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--lr-space-3);
    align-items: center;
    padding: var(--lr-space-4);
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    margin-bottom: var(--lr-space-3);
}

@media (max-width: 720px) {
    .lr-application-row {
        grid-template-columns: 1fr;
    }
}

.lr-application-row__title {
    font-size: var(--lr-type-h3-size);
    font-weight: var(--lr-type-h3-weight);
    line-height: var(--lr-type-h3-lh);
    margin: 0 0 var(--lr-space-1);
}

.lr-application-row__title a {
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
}

.lr-application-row__title a:hover,
.lr-application-row__title a:focus {
    text-decoration: underline;
}

.lr-application-row__meta {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
    margin: 0 0 var(--lr-space-1);
}

.lr-application-row__sep {
    margin: 0 var(--lr-space-1);
    color: var(--lr-color-neutral-line);
}

.lr-application-row__actions {
    display: flex;
    gap: var(--lr-space-2);
}

.lr-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-1);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    line-height: 1.6;
    border: 1px solid transparent;
}

.lr-verify-badge__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.lr-verify-badge--verified {
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    border-color: var(--lr-color-primary);
}

.lr-verify-badge--queried {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-sky);
    border-color: var(--lr-color-sky);
}

.lr-verify-badge--flagged {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-warn);
    border-color: var(--lr-color-warn);
}

.lr-verify-badge--unreviewed {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-mute);
    border-color: var(--lr-color-neutral-line);
}

.lr-application {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-application__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-4);
}

.lr-application__meta {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
    margin: var(--lr-space-1) 0;
}

.lr-application__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--lr-space-4);
    margin: var(--lr-space-3) 0 0;
}

.lr-application__grid dt {
    font-size: var(--lr-type-small-size);
    color: var(--lr-color-neutral-mute);
    margin-bottom: var(--lr-space-1);
}

.lr-application__grid dd {
    margin: 0;
    font-size: var(--lr-type-body-size);
}

.lr-application__notes {
    margin-top: var(--lr-space-3);
    color: var(--lr-color-neutral-ink);
}

.lr-application__lines {
    list-style: none;
    padding: 0;
    margin: var(--lr-space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-application__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lr-space-3);
    padding: var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
}

.lr-application__line-title {
    margin: 0;
    font-weight: var(--lr-type-body-strong-weight);
}

.lr-application__line-meta {
    margin: var(--lr-space-1) 0 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
}

.lr-application__actions {
    display: flex;
    gap: var(--lr-space-2);
}

.lr-verify-panel__form {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    margin-top: var(--lr-space-3);
}

.lr-verify-panel__choices {
    display: flex;
    gap: var(--lr-space-3);
    border: 0;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.lr-verify-panel__choices legend {
    width: 100%;
    margin-bottom: var(--lr-space-2);
}

.lr-verify-panel__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-1);
    padding: var(--lr-space-2) var(--lr-space-3);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    cursor: pointer;
    min-height: 48px;
}

.lr-verify-panel__actions {
    display: flex;
    gap: var(--lr-space-2);
}

.lr-verify-history {
    list-style: none;
    padding: 0;
    margin: var(--lr-space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

.lr-verify-history__item {
    padding: var(--lr-space-3);
    border-left: 2px solid var(--lr-color-neutral-line);
    padding-left: var(--lr-space-3);
}

.lr-verify-history__note {
    margin: var(--lr-space-2) 0 0;
    color: var(--lr-color-neutral-ink);
}

/* Application detail rendered as an on-screen audit record sheet, mirroring the
   exported PDF (docs/audit-pdf-sample/AUDIT-PDF-MOCKUP.md): a single document
   column of label-over-value sections separated by hairline rules, mono for
   identifiers, restrained color. The verify form is the one interactive block. */
.lr-record {
    max-width: 760px;
    margin: 0 auto;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    box-shadow: var(--lr-shadow-elevated);
    padding: var(--lr-space-6) var(--lr-space-6) var(--lr-space-5);
}

.lr-record__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-4);
    padding-bottom: var(--lr-space-4);
    border-bottom: 2px solid var(--lr-color-primary);
}

.lr-record__title {
    margin: var(--lr-space-1) 0 0;
    font-size: var(--lr-type-h1-size);
}

.lr-record__crop {
    color: var(--lr-color-neutral-mute);
}

.lr-record__crop::before {
    content: "\00b7";
    margin: 0 var(--lr-space-2);
    color: var(--lr-color-neutral-line);
}

.lr-record__status {
    flex-shrink: 0;
}

.lr-record__section {
    padding: var(--lr-space-4) 0;
    border-top: 1px solid var(--lr-color-neutral-line);
}

.lr-record__section:first-of-type {
    border-top: 0;
}

.lr-record__label {
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    margin: 0 0 var(--lr-space-2);
}

.lr-record__line {
    margin: 0 0 var(--lr-space-1);
}

.lr-record__line:last-child {
    margin-bottom: 0;
}

/* Compact label/value pairs (timestamps, target pest, PHI). */
.lr-record__pairs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--lr-space-3) var(--lr-space-5);
    margin: 0;
}

.lr-record__pairs dt {
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    margin-bottom: var(--lr-space-1);
}

.lr-record__pairs dd {
    margin: 0;
}

/* Tank-mix products table, the PDF's canonical presentation. */
.lr-record__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lr-type-small-size);
}

.lr-record__table th {
    text-align: left;
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--lr-color-neutral-mute);
    padding: 0 var(--lr-space-3) var(--lr-space-2) 0;
    border-bottom: 1px solid var(--lr-color-neutral-line);
}

.lr-record__table td {
    padding: var(--lr-space-2) var(--lr-space-3) var(--lr-space-2) 0;
    border-bottom: 1px solid var(--lr-color-neutral-line);
    vertical-align: top;
}

.lr-record__table tr:last-child td {
    border-bottom: 0;
}

.lr-record__rate {
    text-align: right;
    white-space: nowrap;
}

/* Manual-source weather, the on-screen analog of the PDF left-edge warn rule. */
.lr-record__weather--manual {
    border-left: 2px solid var(--lr-color-warn);
    padding-left: var(--lr-space-3);
}

/* The single interactive block: record a verification outcome. */
.lr-record__action {
    background: var(--lr-color-primary-soft);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-4);
}

.lr-record__action .lr-card__title {
    margin-top: var(--lr-space-1);
}

/* Primitive: lr-confidence-chip (Epic G snap-the-label) */
.lr-confidence-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
    font-weight: var(--lr-type-body-strong-weight);
    min-height: 32px;
}

.lr-confidence-chip__icon {
    font-family: var(--lr-font-mono);
    font-size: 14px;
    line-height: 1;
}

.lr-confidence-chip__value {
    font-size: var(--lr-type-small-size);
    opacity: 0.85;
}

.lr-confidence-chip--high {
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
    border-color: var(--lr-color-primary-strong);
}

.lr-confidence-chip--medium {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-ink);
    border-color: var(--lr-color-neutral-mute);
}

.lr-confidence-chip--low {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-warn);
    border-color: var(--lr-color-warn);
}

.lr-input.lr-is-low-confidence {
    border-color: var(--lr-color-warn);
    box-shadow: inset 0 0 0 1px var(--lr-color-warn);
}

.lr-input__hint {
    margin-top: var(--lr-space-1);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size);
    line-height: var(--lr-type-small-lh);
}

/* Page-level layout: snap-the-label scan page (Epic G).
   Page-only classes per standards section 24, not gallery primitives. */
.lr-scan-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--lr-space-5) var(--lr-space-4) var(--lr-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-5);
}

.lr-scan-page__head {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-scan-page__capture {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-4);
    padding: var(--lr-space-5);
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
}

.lr-scan-page__capture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
}

.lr-scan-page__preview {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: var(--lr-color-neutral-bg);
    border-radius: var(--lr-radius-md);
}

.lr-scan-page__field {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}

.lr-scan-page__field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-2);
}

.lr-scan-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    align-items: center;
}

.lr-scan-page__failure {
    padding: var(--lr-space-4);
    border: 1px solid var(--lr-color-warn);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-ink);
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

.lr-scan-page__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* State primitives. Standards Section 24 ("Required states") and style guide
   Section 3. Every list, table, or feed composes these for the empty, loading,
   and error states; the populated state is the surface's own markup. The empty
   and error states are server-rendered. The skeleton is the documented loading
   variant for any surface that fetches after first paint (the contractor
   New Application weather capture, the manager exports table reload). */
.lr-state {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
    padding: var(--lr-space-5);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
}

.lr-state__title {
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-h3-size);
    font-weight: var(--lr-type-h3-weight);
    line-height: var(--lr-type-h3-lh);
    color: var(--lr-color-neutral-ink);
}

.lr-state__body {
    color: var(--lr-color-neutral-mute);
    max-width: 60ch;
}

.lr-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
    margin-top: var(--lr-space-1);
}

.lr-state--error {
    border-color: var(--lr-color-error);
}

/* Skeleton loading variant. Style guide Section 4 caps motion at 240ms and
   wraps it in prefers-reduced-motion; the shimmer below is opacity-only and
   under that cap, and the global reduced-motion block neutralizes it. */
.lr-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}

.lr-skeleton__row,
.lr-skeleton__line {
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-primary-soft);
    animation: lr-skeleton-pulse 1200ms var(--lr-ease-enter) infinite alternate;
}

.lr-skeleton__row {
    height: 56px;
}

.lr-skeleton__line {
    height: var(--lr-space-4);
}

.lr-skeleton__line--short {
    width: 40%;
}

.lr-skeleton__line--medium {
    width: 65%;
}

@keyframes lr-skeleton-pulse {
    from { opacity: 0.45; }
    to { opacity: 0.9; }
}

/* Loading chip. The compact alternative to the skeleton for an inline async
   action (a button that posts and waits). Carries a label so the state is not
   color-only per the accessibility floor. */
.lr-loading-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    padding: var(--lr-space-1) var(--lr-space-3);
    border-radius: var(--lr-radius-sm);
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-heading);
    font-size: var(--lr-type-eyebrow-size);
    font-weight: var(--lr-type-eyebrow-weight);
    letter-spacing: var(--lr-type-eyebrow-tracking);
    text-transform: uppercase;
}

.lr-loading-chip__dot {
    width: var(--lr-space-2);
    height: var(--lr-space-2);
    border-radius: 50%;
    background: var(--lr-color-primary);
    animation: lr-skeleton-pulse 900ms var(--lr-ease-enter) infinite alternate;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 80ms !important;
    }

    /* Remove the decorative interaction lifts and the tactile press (D-017)
       outright when the user asks for reduced motion. Scoped to these
       selectors on purpose: a blanket transform reset would also cancel the
       layout transforms this system relies on, such as the off-canvas admin
       sidebar (translateX) and the user-menu caret. */
    .lr-btn:active,
    .lr-app-picker__option:hover .lr-card,
    .lr-app-picker__option:focus-visible .lr-card,
    .lr-app-picker__option:active .lr-card {
        transform: none;
    }
}

/* Growers list and the grower/location/field drill-down. Each row is a single
   link with the glyph, name, summary counts, and a chevron that drills one
   level deeper (grower > location > field). */
.lr-grower-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-3);
}
.lr-grower-row {
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
}
.lr-grower-row__link {
    display: flex;
    align-items: center;
    gap: var(--lr-space-4);
    padding: var(--lr-space-4);
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
    transition: background var(--lr-motion-fast) var(--lr-ease-enter),
        border-color var(--lr-motion-fast) var(--lr-ease-enter);
}
.lr-grower-row__link:hover {
    background: var(--lr-color-neutral-bg);
}
.lr-grower-row:hover {
    border-color: var(--lr-color-primary);
}
.lr-grower-row__link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}
.lr-grower-row__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--lr-color-primary);
}
.lr-grower-row__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.lr-grower-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.lr-grower-row__name {
    font-weight: 600;
}
.lr-grower-row__meta {
    font-size: 0.9em;
    opacity: 0.75;
}
.lr-grower-row__chevron {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    color: var(--lr-color-neutral-mute);
}
.lr-grower-row__chevron svg {
    width: 1.25rem;
    height: 1.25rem;
}
.lr-grower-list__empty {
    margin-top: var(--lr-space-4);
    opacity: 0.75;
}

/* Breadcrumb for the drill-down (Growers > grower > location > field). */
.lr-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lr-space-2);
    margin-bottom: var(--lr-space-5);
    font-size: 0.9rem;
}
.lr-crumb a {
    color: var(--lr-color-primary);
    text-decoration: none;
}
.lr-crumb a:hover {
    text-decoration: underline;
}
.lr-crumb__sep {
    color: var(--lr-color-neutral-mute);
}
.lr-crumb [aria-current="page"] {
    color: var(--lr-color-neutral-mute);
}

/* Detail header for grower/location/field pages. */
.lr-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-4);
    margin-bottom: var(--lr-space-6);
}
.lr-detail__title {
    margin: var(--lr-space-1) 0 var(--lr-space-2);
}
.lr-detail__meta {
    margin: 0;
    color: var(--lr-color-neutral-mute);
}
.lr-detail__actions {
    display: inline-flex;
    gap: var(--lr-space-2);
    flex-wrap: wrap;
}
.lr-detail__empty {
    margin: var(--lr-space-3) 0 var(--lr-space-6);
    opacity: 0.75;
}
.lr-sect-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lr-color-neutral-mute);
    margin: var(--lr-space-6) 0 var(--lr-space-3);
}

/* Field "specimen" detail list. */
.lr-spec {
    margin: 0;
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    background: var(--lr-color-neutral-card);
    padding: 0 var(--lr-space-4);
}
.lr-spec__row {
    display: flex;
    justify-content: space-between;
    gap: var(--lr-space-4);
    padding: var(--lr-space-3) 0;
    border-bottom: 1px solid var(--lr-color-neutral-line);
}
.lr-spec__row:last-child {
    border-bottom: none;
}
.lr-spec__key {
    margin: 0;
    color: var(--lr-color-neutral-mute);
}
.lr-spec__val {
    margin: 0;
    text-align: right;
}

/* Slide-in panel (drawer) for create/edit forms. CSS-only open via a hidden
   checkbox toggled by label triggers; the server re-checks it to re-open a
   panel that posted back with validation errors. */
.lr-drawer__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.lr-drawer__trigger {
    cursor: pointer;
}
.lr-drawer {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
}
.lr-drawer__toggle:checked + .lr-drawer {
    display: block;
}
.lr-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(27, 31, 28, 0.4);
    cursor: pointer;
}
.lr-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 92vw);
    background: var(--lr-color-neutral-bg);
    border-left: 1px solid var(--lr-color-neutral-line);
    box-shadow: var(--lr-shadow-elevated);
    padding: var(--lr-space-5);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--lr-motion-slow) var(--lr-ease-enter);
}
.lr-drawer__toggle:checked + .lr-drawer .lr-drawer__panel {
    transform: translateX(0);
}
.lr-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lr-space-4);
    padding-bottom: var(--lr-space-4);
    margin-bottom: var(--lr-space-4);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}
.lr-drawer__title {
    margin: var(--lr-space-1) 0 0;
}
.lr-drawer__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lr-radius-sm);
    color: var(--lr-color-neutral-mute);
    cursor: pointer;
}
.lr-drawer__close:hover {
    background: var(--lr-color-neutral-card);
}
.lr-drawer__close svg {
    width: 1.25rem;
    height: 1.25rem;
}
.lr-drawer__danger {
    margin-top: var(--lr-space-6);
    padding-top: var(--lr-space-4);
    border-top: 1px solid var(--lr-color-neutral-line);
}
.lr-drawer__danger-note {
    margin: var(--lr-space-2) 0 0;
    font-size: 0.85rem;
    color: var(--lr-color-neutral-mute);
}
.lr-btn--danger {
    color: var(--lr-color-error);
    border-color: var(--lr-color-error);
}
.lr-form__hint {
    margin: 0 0 var(--lr-space-4);
    color: var(--lr-color-neutral-mute);
    font-size: 0.9rem;
}

/* Field detail extras: applications and sensitive sites. */
.lr-grower-row__icon--warn {
    color: var(--lr-color-warn);
}
.lr-grower-row__tag {
    margin-left: auto;
    flex: none;
}
.lr-sect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-4);
    margin: var(--lr-space-6) 0 var(--lr-space-3);
}
.lr-sect-head .lr-sect-label {
    margin: 0;
}
.lr-detail__footnote {
    margin: var(--lr-space-3) 0 0;
    font-size: 0.85rem;
    color: var(--lr-color-neutral-mute);
}
.lr-tag--warn {
    background: var(--lr-color-warn);
    color: var(--lr-color-on-primary);
}
.lr-tag--muted {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-mute);
}

/* Filter control row on list pages: breathe between the page title above and
   the results below so the dropdown does not crowd either. */
.lr-filter-bar {
    margin: var(--lr-space-6) 0;
}

/* ============================================================ */
/*  Manager > Products list                                      */
/*  Composed from existing primitives: lr-listing__header,       */
/*  lr-applications-filters, lr-tag, lr-card, lr-btn, lr-input.  */
/*  Only adds layout/glue for product-specific composition.       */
/* ============================================================ */

.lr-product-results {
    margin: var(--lr-space-3) 0 0;
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
    text-align: right;
}
.lr-product-results .lr-mono {
    font-weight: 600;
    color: var(--lr-color-neutral-ink);
}

.lr-product-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    font-size: var(--lr-type-body-size);
    color: var(--lr-color-neutral-ink);
    cursor: pointer;
    white-space: nowrap;
}
.lr-product-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--lr-color-primary);
    cursor: pointer;
}

/* Quick filters row: Search, Status, Pest, Apply.
   On desktop a 4-column grid where Search is wider; collapses to one column on tablet/mobile. */
.lr-product-filters__quick {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    column-gap: var(--lr-space-3);
    row-gap: var(--lr-space-3);
    align-items: end;
}
.lr-product-filters__quick-search { min-width: 0; }
.lr-product-filters__apply {
    display: inline-flex;
    gap: var(--lr-space-2);
    align-items: center;
    align-self: end;
    padding-bottom: 0;
}
.lr-product-filters__apply .lr-btn-primary {
    min-height: 48px;
}

@media (max-width: 960px) {
    .lr-product-filters__quick { grid-template-columns: 1fr; }
    .lr-product-filters__apply { align-self: stretch; }
    .lr-product-filters__apply .lr-btn-primary { flex: 1; }
}

/* Advanced disclosure: a quiet utility strip. Summary on the left, count on the right.
   When opened, expanded grid drops in beneath the strip with a soft top border. */
.lr-product-advanced {
    margin-top: var(--lr-space-3);
}
.lr-product-advanced__summary {
    list-style: none;
    cursor: pointer;
    padding: var(--lr-space-2) 0;
}
.lr-product-advanced__summary::-webkit-details-marker { display: none; }
.lr-product-advanced__summary::marker { display: none; }
.lr-product-advanced__summary-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--lr-space-3);
    width: 100%;
}
.lr-product-advanced__label-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lr-color-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.lr-product-advanced__summary:hover .lr-product-advanced__label-group { color: var(--lr-color-primary-strong); }
.lr-product-advanced__summary:focus-visible { outline: 3px solid var(--lr-color-focus); outline-offset: 2px; border-radius: 2px; }
.lr-product-advanced__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lr-product-advanced__chev {
    width: 14px;
    height: 14px;
    transition: transform var(--lr-motion-fast, 150ms) ease;
}
.lr-product-advanced[open] .lr-product-advanced__chev { transform: rotate(180deg); }

/* Reuse .lr-product-results inside the summary; reset its block margin. */
.lr-product-advanced__summary .lr-product-results {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.lr-product-advanced__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lr-space-5);
    row-gap: var(--lr-space-4);
    margin-top: var(--lr-space-3);
    padding-top: var(--lr-space-4);
    border-top: 1px dashed var(--lr-color-neutral-line);
    align-items: end;
}

/* Toggles span the full grid width and split left / right at desktop sizes. */
.lr-product-advanced__toggles {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--lr-space-3);
}
.lr-product-toggle--end { margin-left: auto; }

.lr-product-advanced__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .lr-product-advanced__grid { grid-template-columns: 1fr; }
    .lr-product-advanced__toggles { flex-direction: column; align-items: flex-start; }
    .lr-product-toggle--end { margin-left: 0; }
}

/* Outer disclosure: wraps the whole filter card. Desktop forces open + hides summary;
   tablet/mobile show the summary as a toggle. */
.lr-product-shell {
    margin: 0 0 var(--lr-space-5);
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-4);
}
.lr-product-shell > .lr-applications-filters {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}
.lr-product-shell__summary {
    list-style: none;
    cursor: pointer;
    display: none;
    padding: var(--lr-space-2) 0;
    margin: 0 0 var(--lr-space-3);
    border-bottom: 1px solid var(--lr-color-neutral-line);
}
.lr-product-shell__summary::-webkit-details-marker { display: none; }
.lr-product-shell__summary::marker { display: none; }
.lr-product-shell__summary-inner {
    display: flex;
    align-items: center;
    gap: var(--lr-space-3);
}
.lr-product-shell__label {
    font-weight: 600;
    font-size: 0.9375rem;
}
.lr-product-shell__hint {
    margin-left: var(--lr-space-2);
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
}
.lr-product-shell__chev {
    width: 18px;
    height: 18px;
    margin-left: auto;
    transition: transform var(--lr-motion-fast, 150ms) ease;
}
.lr-product-shell[open] .lr-product-shell__chev { transform: rotate(180deg); }

@media (max-width: 1023px) {
    .lr-product-shell__summary { display: block; }
}

/* ---- lr-combo: trigger matches lr-select; panel is a quiet white menu ---- */
.lr-combo {
    position: relative;
}
.lr-combo__trigger {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--lr-space-8) 0 var(--lr-space-4);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    background-color: var(--lr-color-neutral-card);
    color: var(--lr-color-neutral-ink);
    font-family: var(--lr-font-body);
    font-size: var(--lr-type-body-size);
    line-height: 48px;
    text-align: left;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%231B1F1C' d='M3.2 5.6h9.6L8 11.2z'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--lr-space-4) center;
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter);
    overflow: hidden;
    white-space: nowrap;
}
.lr-combo__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.lr-combo__trigger:focus,
.lr-combo__trigger:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
    border-color: var(--lr-color-primary);
}
.lr-combo.lr-is-open .lr-combo__trigger {
    border-color: var(--lr-color-primary);
}
.lr-combo__value--empty {
    color: var(--lr-color-neutral-mute);
}

.lr-combo__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    background: #FFFFFF;
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-sm);
    box-shadow: 0 4px 14px rgba(20, 32, 24, 0.08);
    padding: 0;
    flex-direction: column;
}
.lr-combo.lr-is-open .lr-combo__panel {
    display: flex;
}
.lr-combo__search-wrap {
    position: relative;
    padding: var(--lr-space-2) var(--lr-space-2) var(--lr-space-1);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    background: #FFFFFF;
}
.lr-combo__search-icon {
    position: absolute;
    left: calc(var(--lr-space-2) + var(--lr-space-3));
    top: 50%;
    transform: translateY(-50%);
    color: var(--lr-color-neutral-mute);
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.lr-combo__search {
    width: 100%;
    min-height: 38px;
    padding-left: calc(var(--lr-space-4) + var(--lr-space-4));
}
.lr-combo__list {
    list-style: none;
    margin: 0;
    padding: var(--lr-space-1) 0;
    max-height: 18rem;
    overflow-y: auto;
    background: #FFFFFF;
}
.lr-combo__item,
.lr-combo__clear {
    padding: var(--lr-space-2) var(--lr-space-4);
    cursor: pointer;
    color: var(--lr-color-neutral-ink);
    font-size: var(--lr-type-body-size);
    background: transparent;
    border: 0;
}
.lr-combo__clear {
    color: var(--lr-color-neutral-mute);
    border-bottom: 1px solid var(--lr-color-neutral-line);
    margin-bottom: var(--lr-space-1);
}
.lr-combo__item:hover,
.lr-combo__clear:hover {
    background: var(--lr-color-neutral-bg);
    color: var(--lr-color-neutral-ink);
}
.lr-combo__item--active {
    background: var(--lr-color-primary-soft);
    color: var(--lr-color-primary-strong);
}
.lr-combo__empty {
    padding: var(--lr-space-3) var(--lr-space-4);
    color: var(--lr-color-neutral-mute);
    text-align: left;
}

.lr-product-list {
    list-style: none;
    margin: 0 0 var(--lr-space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lr-space-2);
}
.lr-product-row {
    position: relative;
    background: var(--lr-color-neutral-card);
    border: 1px solid var(--lr-color-neutral-line);
    border-radius: var(--lr-radius-md);
    transition: border-color var(--lr-motion-fast) var(--lr-ease-enter);
}
.lr-product-row:hover {
    border-color: var(--lr-color-primary);
}
.lr-product-row__link {
    display: flex;
    align-items: center;
    gap: var(--lr-space-3);
    padding: var(--lr-space-3) var(--lr-space-4);
    color: var(--lr-color-neutral-ink);
    text-decoration: none;
}
.lr-product-row__link:hover {
    background: var(--lr-color-neutral-bg);
}
.lr-product-row__link:focus-visible {
    outline: 3px solid var(--lr-color-focus);
    outline-offset: 2px;
}
.lr-product-row__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--lr-color-dirt);
}
.lr-product-row__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.lr-product-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lr-product-row__head {
    display: flex;
    align-items: center;
    gap: var(--lr-space-3);
    flex-wrap: wrap;
}
.lr-product-row__name {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.005em;
}
.lr-product-row__meta {
    color: var(--lr-color-neutral-mute);
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lr-product-row__tags {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
    flex-shrink: 0;
}
.lr-product-row__chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--lr-color-neutral-mute);
}
.lr-product-row__chevron svg {
    width: 1.25rem;
    height: 1.25rem;
}
.lr-product-row__approve {
    position: absolute;
    right: var(--lr-space-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.lr-product-row__approve .lr-btn {
    pointer-events: auto;
}
.lr-product-row:has(.lr-product-row__approve) .lr-product-row__chevron {
    display: none;
}

@media (max-width: 720px) {
    .lr-product-row__tags { display: none; }
    .lr-product-row__meta {
        white-space: normal;
        text-overflow: clip;
    }
}

.lr-product-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lr-space-4);
    flex-wrap: wrap;
    padding: var(--lr-space-4) 0;
    margin-bottom: var(--lr-space-6);
    border-top: 1px solid var(--lr-color-neutral-line);
}
.lr-product-pager__legend {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
}
.lr-product-pager__controls {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-3);
    flex-wrap: wrap;
}
.lr-product-pager__jump {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-2);
}
.lr-product-pager__label {
    margin: 0;
}
.lr-product-pager__input {
    width: 5ch;
    min-height: 40px;
    padding: var(--lr-space-2) var(--lr-space-2);
    text-align: center;
}
.lr-product-pager__input::-webkit-outer-spin-button,
.lr-product-pager__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lr-product-pager__input { -moz-appearance: textfield; }
.lr-product-pager__of {
    color: var(--lr-color-neutral-mute);
    font-size: var(--lr-type-small-size, 0.875rem);
}

/* Hide the page-level scrollbar on tablet and phone viewports only. Laptops
   keep the default scrollbar so users have an at-a-glance position cue. */
@media (max-width: 1023px) {
    html, body {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Primitive: lr-view-as-banner */
/* Persistent read-only indicator while a platform admin holds an active view-as
   session. Sticky to the top of the platform layout so it stays visible while
   the admin browses, and amber-toned to flag posture without alarming. */
.lr-view-as-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--lr-color-warn);
    color: var(--lr-color-on-primary);
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    font-size: 0.9375rem;
    line-height: 1.3;
}

.lr-view-as-banner strong {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lr-view-as-banner__end {
    margin: 0;
    flex: 0 0 auto;
}

.lr-view-as-banner__end .lr-btn {
    background: var(--lr-color-on-primary);
    color: var(--lr-color-warn);
    border-color: transparent;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

.lr-view-as-banner__end .lr-btn:hover,
.lr-view-as-banner__end .lr-btn.lr-is-hover {
    background: var(--lr-color-neutral-card);
    color: var(--lr-color-primary-strong);
}