/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Phase 4g (A8) — the chrome-less auth shell. Component-scoped + token-only: no raw
   colour literals, every value is a --k9-* custom property. As a shell-tier layout
   (Components/Layout/, alongside MainLayout/NavMenu) this file IS covered by the
   design-system-hex invariant (Design_system_stylesheet_uses_tokens_not_raw_hex) as
   of the 2026-07-10 audit. doc 25 §6.1 / §8.2. */

.auth-shell[b-lymehjinph] {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 48px 20px 72px;
    background: var(--k9-bg);
}

/* ---- top-right corner controls: language selector + theme toggle ---- */
.auth-corner[b-lymehjinph] {
    position: absolute;
    top: 20px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-theme-form[b-lymehjinph] {
    display: inline-flex;
    margin: 0;
}

.auth-icon-btn[b-lymehjinph] {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface);
    color: var(--k9-text-2);
    cursor: pointer;
    box-shadow: var(--k9-shadow-sm);
    transition: color .15s, border-color .15s, background .15s;
}

.auth-icon-btn:hover[b-lymehjinph] {
    color: var(--k9-text);
    border-color: var(--k9-hairline-strong);
}

.auth-icon-btn:focus-visible[b-lymehjinph] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
}

.auth-icon-btn .bi[b-lymehjinph] {
    font-size: 1.05rem;
    line-height: 1;
}

/* Light shows "switch to dark" (moon); dark shows "switch to light" (sun). Gated
   ONLY on Bootstrap-native [data-bs-theme] (doc 25 §3.5 / §4.5) — no data-theme. */
.auth-theme--to-light[b-lymehjinph] {
    display: none;
}

[data-bs-theme="dark"] .auth-theme--to-dark[b-lymehjinph] {
    display: none;
}

[data-bs-theme="dark"] .auth-theme--to-light[b-lymehjinph] {
    display: inline-flex;
}

/* ---- centered column: brand + card ---- */
.auth-col[b-lymehjinph] {
    width: min(100%, 30rem);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.auth-brand[b-lymehjinph] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-brand-mark[b-lymehjinph] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--k9-avatar-grad);
    color: var(--k9-on-accent);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.02em;
    box-shadow: 0 4px 12px var(--k9-ring);
}

.auth-brand-name[b-lymehjinph] {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--k9-text);
}

.auth-card[b-lymehjinph] {
    background: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-lg);
    padding: 26px;
    box-shadow: var(--k9-shadow-md);
}

/* ---- typography + layout of the page content that renders inside the card.
   ::deep reaches into the child page (its elements don't carry this component's
   scope attribute); pages stay minimal and only declare these semantic hooks. ---- */
.auth-card[b-lymehjinph]  h1 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

.auth-card[b-lymehjinph]  .auth-sub {
    color: var(--k9-text-2);
    font-size: 13.5px;
    margin: 8px 0 0;
    text-align: center;
}

.auth-card[b-lymehjinph]  .auth-note {
    color: var(--k9-text-3);
    font-size: 12px;
    margin: 8px 0 0;
    text-align: center;
}

.auth-card[b-lymehjinph]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 22px;
}

.auth-card[b-lymehjinph]  .forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -3px;
}

.auth-card[b-lymehjinph]  .auth-link {
    color: var(--k9-accent-text);
    font-weight: 600;
    text-decoration: none;
}

.auth-card[b-lymehjinph]  .auth-link:hover {
    text-decoration: underline;
}

.auth-card[b-lymehjinph]  .auth-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--k9-text-2);
    cursor: pointer;
}

.auth-card[b-lymehjinph]  .auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--k9-accent);
}

.auth-card[b-lymehjinph]  .auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.auth-card[b-lymehjinph]  .auth-actions .k9-btn {
    width: 100%;
}

.auth-card[b-lymehjinph]  .auth-alt {
    text-align: center;
    font-size: 13px;
    color: var(--k9-text-2);
    margin: 20px 0 0;
}

.auth-card[b-lymehjinph]  .auth-foot {
    text-align: center;
    font-size: 12.5px;
    color: var(--k9-text-3);
    margin: 16px 0 0;
}

/* ---- #588: the footer under the card (the privacy-notice link) ---- */
.auth-footer[b-lymehjinph] {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 12.5px;
}

.auth-footer-link[b-lymehjinph] {
    color: var(--k9-text-3);
    text-decoration: none;
}

.auth-footer-link:hover[b-lymehjinph] {
    color: var(--k9-text);
    text-decoration: underline;
}

.auth-footer-link:focus-visible[b-lymehjinph] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 520px) {
    .auth-card[b-lymehjinph] {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-icon-btn[b-lymehjinph] {
        transition: none;
    }
}
/* /Components/Layout/BetaBanner.razor.rz.scp.css */
.beta-banner[b-ltk4sz4nlx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.45rem 2rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
    border-bottom: 1px solid var(--bs-warning-border-subtle);
}

.beta-banner__badge[b-ltk4sz4nlx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-border-subtle);
}

.beta-banner__text[b-ltk4sz4nlx] {
    min-width: 0;
}

/* #588 — the privacy-notice link in the production (Durable) text: the banner's own colour,
   underlined so it reads as a link without a second hue on the amber strip. */
.beta-banner__link[b-ltk4sz4nlx] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.beta-banner__link:hover[b-ltk4sz4nlx] {
    text-decoration-thickness: 2px;
}

.beta-banner__link:focus-visible[b-ltk4sz4nlx] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Pin directly beneath the sticky top bar (Phase 2 — the top bar is sticky at all
   widths now). top = the shell's --k9-topbar-h (set on .page in MainLayout.razor.css,
   inherited here). z-index: 1 keeps the banner above scrolling page content but BELOW
   the .top-row (z-index: 1020) so the top-right dropdowns open over it. */
.beta-banner[b-ltk4sz4nlx] {
    position: sticky;
    top: var(--k9-topbar-h, 64px);
    z-index: 1;
}

@media (max-width: 680px) {
    .beta-banner[b-ltk4sz4nlx] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Components/Layout/DogShell.razor.rz.scp.css */
/* DogShell sticky header + scroll-collapse (doc 25 § 6.3). Token-only, shell glue.
   The reusable compact-hero look (frame + fact/mini collapse) lives in the primitive layer
   (k9-components.css, `.k9-hero.k9-compact`); this scoped sheet adds the shell's sticky
   positioning, the child-avatar box resize (::deep, since the xl DogAvatar chip is 192px and
   must resize its real box rather than transform-scale), and the pure-CSS scroll-collapse to a
   NARROW BAND. ZERO JavaScript.

   Three hero states:
   - At top (resting)      → Overview = full hero; sub-pages = `.k9-compact` (Pic·Name·Breed·Sex·Age·Colour).
   - Scrolled / stuck      → a NARROW BAND: tiny avatar + name + status only (breed / facts / mini all
                             collapse). Scroll-driven (Chromium/Firefox); Safari keeps the resting state
                             pinned (no collapse). Disabled under prefers-reduced-motion. */

.dog-shell-head[b-5b0ak3pyxd] {
    position: sticky;
    top: var(--k9-topbar-h, 64px);   /* pins just under the sticky MainLayout top bar (top:0, height 64px) */
    z-index: 20;
    background: transparent;   /* the frosted veil lives on ::before so it can fade WITH the blur */
    padding: 8px 0 12px;
    margin-bottom: 16px;
}

/* Frosted veil (tint + light blur) on a ::before layer, faded out at the bottom by a mask so the
   BLUR fades too (a plain backdrop-filter would leave a hard blurred/sharp edge). The hero + tabs
   are real children painted ABOVE this layer, so they stay crisp. `black`/`transparent` here are
   mask alpha stops (opaque→shown, transparent→hidden), not design colours. */
.dog-shell-head[b-5b0ak3pyxd]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--k9-bg) 30%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(5px);
    backdrop-filter: saturate(140%) blur(5px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
}

/* The floating cards carry their own lift so they read as hovering over the content. */
.dog-shell-head .k9-hero[b-5b0ak3pyxd],
.dog-shell-head .k9-subtabs[b-5b0ak3pyxd] { box-shadow: var(--k9-shadow-md); }
.dog-shell-head .k9-hero[b-5b0ak3pyxd] { margin-bottom: 12px; }
.dog-shell-head .k9-subtabs[b-5b0ak3pyxd] { margin-bottom: 0; }

/* Avatar box resize — ::deep reaches into the child <DogAvatar> (its xl chip is 12rem/192px).
   Resizing width/height/font-size shrinks the real box cleanly (no fragile negative margins). */
.k9-hero-avatar[b-5b0ak3pyxd]  .dog-avatar {
    transition: width .26s cubic-bezier(.4, 0, .2, 1), height .26s cubic-bezier(.4, 0, .2, 1), font-size .26s ease;
}
/* Sub-page resting state (route `.k9-compact`): a medium chip. */
.k9-hero.k9-compact .k9-hero-avatar[b-5b0ak3pyxd]  .dog-avatar {
    width: 78px;
    height: 78px;
    font-size: 1.7rem;
}

@supports (animation-timeline: scroll()) {
    /* Scroll → collapse to a NARROW BAND. Applies on EVERY route (root + sub); the keyframes
       fill from each page's resting state (full on Overview, `.k9-compact` on sub-pages) down to
       the band, so both end at: tiny avatar + name + status, everything else collapsed. */
    .dog-shell-head .k9-hero[b-5b0ak3pyxd] {
        animation: k9HeroFrame-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
    .dog-shell-head .k9-hero .k9-hero-avatar[b-5b0ak3pyxd]  .dog-avatar {
        animation: k9HeroAvatar-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
    .dog-shell-head .k9-hero .k9-hero-name[b-5b0ak3pyxd] {
        animation: k9HeroName-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
    .dog-shell-head .k9-hero .k9-hero-breed[b-5b0ak3pyxd] {
        animation: k9HeroCollapseRows-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }
    .dog-shell-head .k9-hero .k9-hero-collapse[b-5b0ak3pyxd] {
        animation: k9HeroCollapseRows-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }
    .dog-shell-head .k9-hero .k9-hero-mini[b-5b0ak3pyxd] {
        animation: k9HeroCollapseRows-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }
    /* Inverse of the collapse: reveal the one-line Breed·Age·Sex summary as the band minimizes
       (slightly delayed so it cross-fades in as breed/facts fold away). */
    .dog-shell-head .k9-hero .k9-hero-narrow[b-5b0ak3pyxd] {
        animation: k9HeroNarrowReveal-b-5b0ak3pyxd linear both;
        animation-timeline: scroll(root);
        animation-range: 20px 110px;
    }

    @keyframes k9HeroFrame-b-5b0ak3pyxd { to { padding: 8px 16px; gap: 14px; } }
    @keyframes k9HeroAvatar-b-5b0ak3pyxd { to { width: 44px; height: 44px; font-size: 1rem; } }
    @keyframes k9HeroName-b-5b0ak3pyxd { to { font-size: 16px; } }
    /* Shared collapse: breed, full facts, and mini facts all tween their grid-rows to 0. */
    @keyframes k9HeroCollapseRows-b-5b0ak3pyxd { to { grid-template-rows: 0fr; opacity: 0; margin-top: 0; } }
    @keyframes k9HeroNarrowReveal-b-5b0ak3pyxd { to { grid-template-rows: 1fr; opacity: 1; margin-top: 3px; } }

    @media (prefers-reduced-motion: reduce) {
        .dog-shell-head[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero .k9-hero-avatar[b-5b0ak3pyxd]  .dog-avatar,
        .dog-shell-head .k9-hero .k9-hero-name[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero .k9-hero-breed[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero .k9-hero-collapse[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero .k9-hero-mini[b-5b0ak3pyxd],
        .dog-shell-head .k9-hero .k9-hero-narrow[b-5b0ak3pyxd] { animation: none; }
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   App shell (UI overhaul epic #835, Phase 2 — doc 25 § 4).
   Fixed left sidebar + sticky frosted top bar + responsive off-canvas drawer.
   Token-driven: every color references a --k9-* custom property from the
   Phase-1 token sheet (css/k9-design-system.css) so one theme switch recolors
   the whole shell. The doc-25 § 4.4 drawer scrim (a fixed, theme-independent
   overlay) is the token --k9-scrim. The only remaining literals are inside the
   Blazor framework dev-error chrome block (#blazor-error-ui), which is not
   design-system content and is excluded from the token invariant.
   ============================================================================ */

.page[b-5pdqntd8t2] {
    /* Shell dimensions. The sidebar width drives both the sidebar itself and the
       content gutter; html.sidebar-collapsed overrides it (desktop only).
       272 (not the mockup's 256): the longest HU/FR nav labels ("Szervezeti
       tréningtípusok", "Mes types d'entraînement") need ~16px more to fit — a
       documented i18n label-fit deviation, paired with the .nav-label ellipsis
       net for genuinely-too-long labels + the mobile drawer (#1041). */
    --k9-sidebar-w: 272px;
    --k9-topbar-h: 64px;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar[b-5pdqntd8t2] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--k9-sidebar-w);
    z-index: 1085;
    display: flex;
    flex-direction: column;
    background-color: var(--k9-surface);
    border-right: 1px solid var(--k9-hairline);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .2s ease;
}

/* ===== MOBILE DRAWER SCRIM ===== */
.overlay[b-5pdqntd8t2] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    /* doc 25 § 4.4 scrim — a fixed dark veil, theme-independent by design
       (--k9-scrim, defined once in the token sheet). */
    background: var(--k9-scrim);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ===== CONTENT AREA ===== */
.content-area[b-5pdqntd8t2] {
    margin-left: var(--k9-sidebar-w);
    min-height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

/* ===== STICKY FROSTED TOP BAR ===== */
.top-row[b-5pdqntd8t2] {
    position: sticky;
    top: 0;
    /* Sticky-header layer. Out-ranks page content (DogCard actions z-index:2) and
       the BetaBanner (z-index:1); the bell/user/language dropdowns (z-index:1050)
       live inside this element's stacking context, so the bar's own z-index is what
       competes with page content. Kept at 1020 (the pre-Phase-2 value) so floating
       picker/hovercard layers (1040+) still overlay it. The mobile drawer + scrim
       deliberately sit above (1085 / 1080) so an open drawer covers the bar. */
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--k9-topbar-h);
    padding: 0 30px;
    background: color-mix(in srgb, var(--k9-bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--k9-hairline);
}

.hamburger[b-5pdqntd8t2] {
    display: none;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--k9-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--k9-text-2);
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.hamburger:hover[b-5pdqntd8t2] {
    background: var(--k9-surface-2);
    color: var(--k9-text);
}

.hamburger .bi[b-5pdqntd8t2] {
    font-size: 1.3rem;
    line-height: 1;
}

.topbar-title[b-5pdqntd8t2] {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--k9-text);
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-spacer[b-5pdqntd8t2] {
    flex: 1;
}

/* ===== TOP-BAR ICON BUTTONS (theme toggle) ===== */
.icon-btn[b-5pdqntd8t2] {
    width: 38px;
    height: 38px;
    border-radius: var(--k9-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--k9-text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.icon-btn:hover[b-5pdqntd8t2] {
    background: var(--k9-surface);
    color: var(--k9-text);
    border-color: var(--k9-hairline);
}

.icon-btn .bi[b-5pdqntd8t2] {
    font-size: 1.05rem;
    line-height: 1;
}

/* Visible accent focus ring on the new top-bar buttons (doc 25 § 7) — they are bare
   <button>s (no .btn class), so the global app.css ring does not reach them. */
.hamburger:focus-visible[b-5pdqntd8t2],
.icon-btn:focus-visible[b-5pdqntd8t2] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 1px;
}

.theme-toggle-form[b-5pdqntd8t2] {
    display: inline-flex;
    align-items: center;
}

/* Light shows "switch to dark" (moon); dark shows "switch to light" (sun). Gated
   ONLY on Bootstrap-native [data-bs-theme] (doc 25 § 3.5 / § 4.5) — no data-theme,
   no localStorage. */
.theme-toggle--to-light[b-5pdqntd8t2] {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle--to-dark[b-5pdqntd8t2] {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle--to-light[b-5pdqntd8t2] {
    display: grid;
}

.topbar-login[b-5pdqntd8t2] {
    color: var(--k9-text-2);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    padding: 0 .5rem;
}

.topbar-login:hover[b-5pdqntd8t2] {
    color: var(--k9-text);
    text-decoration: underline;
}

/* ===== MAIN CONTENT ===== */
.content[b-5pdqntd8t2] {
    flex: 1;
    padding: 28px 30px 56px;
}

.main-inner[b-5pdqntd8t2] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ===== DESKTOP COLLAPSE (real k9ToggleSidebar — sidebar-collapsed on <html>) ===== */
@media (min-width: 901px) {
    html.sidebar-collapsed .page[b-5pdqntd8t2] {
        --k9-sidebar-w: 68px;
    }
}

/* ===== RESPONSIVE (doc 25 § 4.4) ===== */
@media (max-width: 1024px) {
    .top-row[b-5pdqntd8t2] {
        padding: 0 22px;
    }

    .content[b-5pdqntd8t2] {
        padding: 24px 22px 48px;
    }
}

@media (max-width: 900px) {
    /* Sidebar becomes an off-canvas drawer; body.nav-open slides it in + shows the
       scrim (wwwroot/js/shell.js). Collapse is desktop-only, so force the full width. */
    .sidebar[b-5pdqntd8t2] {
        width: 256px;
        transform: translateX(-100%);
        box-shadow: var(--k9-shadow-lift);
    }

    body.nav-open .sidebar[b-5pdqntd8t2] {
        transform: translateX(0);
    }

    body.nav-open .overlay[b-5pdqntd8t2] {
        display: block;
    }

    .content-area[b-5pdqntd8t2] {
        margin-left: 0;
    }

    .hamburger[b-5pdqntd8t2] {
        display: grid;
    }
}

@media (max-width: 680px) {
    .top-row[b-5pdqntd8t2] {
        padding: 0 16px;
        gap: 10px;
    }

    .content[b-5pdqntd8t2] {
        padding: 20px 16px 44px;
    }
}

@media (max-width: 460px) {
    .content[b-5pdqntd8t2] {
        padding: 18px 12px 40px;
    }
}

/* Honor reduced-motion for the drawer slide + collapse glide (doc 25 § 7). */
@media (prefers-reduced-motion: reduce) {
    .sidebar[b-5pdqntd8t2],
    .content-area[b-5pdqntd8t2] {
        transition: none;
    }
}

#blazor-error-ui[b-5pdqntd8t2] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5pdqntd8t2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================================
   Sidebar navigation (UI overhaul epic #835, Phase 2 — doc 25 § 4.1 / § 4.2).
   Light, token-driven (--k9-surface sidebar, the Phase-1 re-home off the old dark
   --k9-nav-bg). Owns the INTERNAL look (brand, grouped nav items, pinned bottom);
   the sidebar frame (width / fixed position / drawer transform) lives in
   MainLayout.razor.css.
   ============================================================================ */

.brand[b-9ykx45ohip] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--k9-topbar-h, 64px);
    padding: 0 0.75rem 0 1rem;
    border-bottom: 1px solid var(--k9-hairline);
    flex-shrink: 0;
}

.brand-link[b-9ykx45ohip] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--k9-text);
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.brand-mark[b-9ykx45ohip] {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--k9-accent), color-mix(in srgb, var(--k9-accent) 55%, white));
    color: var(--k9-on-accent);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--k9-ring);
}

.brand-name[b-9ykx45ohip] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-collapse[b-9ykx45ohip] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--k9-text-3);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.brand-collapse:hover[b-9ykx45ohip] {
    background: var(--k9-surface-2);
    color: var(--k9-text);
}

.brand-collapse:focus-visible[b-9ykx45ohip] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 1px;
}

.brand-collapse .bi[b-9ykx45ohip] {
    font-size: 0.95rem;
    line-height: 1;
}

.collapse-icon-collapsed[b-9ykx45ohip] {
    display: none;
}

/* ===== SCROLLABLE GROUPED NAV ===== */
.nav-scrollable[b-9ykx45ohip] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.75rem 0.5rem;
}

.nav-scrollable[b-9ykx45ohip]::-webkit-scrollbar {
    width: 8px;
}

.nav-scrollable[b-9ykx45ohip]::-webkit-scrollbar-thumb {
    background: var(--k9-hairline-strong);
    border-radius: 8px;
}

.nav[b-9ykx45ohip] {
    flex-wrap: nowrap;
}

.nav-group-header[b-9ykx45ohip] {
    /* 0.5rem horizontal to match the trimmed nav-link inset (#1041) — keeps the
       uppercase section headers left-aligned with the item icons directly below. */
    padding: 0.85rem 0.5rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--k9-text-3);
    white-space: nowrap;
    overflow: hidden;
}

.nav-item[b-9ykx45ohip] {
    font-size: 0.9rem;
    padding: 0;
    margin: 0.1rem 0;
}

.nav-item[b-9ykx45ohip]  .nav-link {
    color: var(--k9-text-2);
    background: none;
    border: none;
    border-radius: var(--k9-radius-sm);
    min-height: 2.4rem;
    /* 0.5rem horizontal (was 0.75rem): the label ellipsizes at the nav-link content box, so
       the pill's right padding was a ~12px dead zone the label couldn't use — long HU/FR labels
       truncated with empty space beside them. Trimming 12px→8px hands that space back (dead zone
       12→8) while keeping the pill's left/right padding SYMMETRIC, so no active/hover pill reads
       lopsided. This closes the truncation CLASS the rail-widen only relocated; pairs with the
       widen + the .nav-label ellipsis net (#1041). Collapsed rail re-sets padding below (unaffected). */
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.2;
    width: 100%;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item[b-9ykx45ohip]  .nav-link .bi {
    font-size: 1.02rem;
    width: 1.2rem;
    text-align: center;
    color: var(--k9-text-3);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

/* A nav label longer than the rail (some FR / long-locale strings, e.g.
   "Nouvelle séance d'éducation") wraps onto a second line instead of being cut
   (owner decision 2026-10-20, #1445 Cowork O2; it replaces the one-line ellipsis of
   #1041, which read "Nouvelle séance d'éducat…"). Past two lines it is clamped with an
   ellipsis as the net, and the NavLink `title=` tooltip keeps the full text. min-width:0
   lets this flex item shrink below its content width so the wrap engages. The collapsed
   rail hides the label below (unaffected). */
.nav-item[b-9ykx45ohip]  .nav-link .nav-label {
    min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* #1445 — the "Coming soon" badge (ComingSoonBadge) on Browse / New organization sits UNDER its
   label (.nav-label-stack), not beside it: beside it, the badge (about 80px in en, 115px for the
   French "Bientôt disponible") left the label too little room and "Browse organizations" read
   "Browse or…" in every locale (Cowork D1). Stacked, the label keeps the row's full width and the
   #1041 ellipsis stays only as the net. Hidden in the collapsed rail below; the link's title then
   names the entry and its state. */
.nav-item[b-9ykx45ohip]  .nav-link .nav-label-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-item[b-9ykx45ohip]  .nav-link .nav-label-stack .nav-label {
    max-width: 100%;
}

.nav-item[b-9ykx45ohip]  .nav-link .nav-badge {
    flex-shrink: 0;
}

.nav-item[b-9ykx45ohip]  .nav-link:hover {
    background-color: var(--k9-surface-2);
    color: var(--k9-text);
}

.nav-item[b-9ykx45ohip]  .nav-link:hover .bi {
    color: var(--k9-text-2);
}

.nav-item[b-9ykx45ohip]  a.active {
    background-color: var(--k9-accent-soft);
    color: var(--k9-accent);
    font-weight: 600;
}

/* 3px left accent rail on the active item (doc 25 § 4.2). */
.nav-item[b-9ykx45ohip]  a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--k9-accent);
    border-radius: 0 3px 3px 0;
}

.nav-item[b-9ykx45ohip]  a.active .bi {
    color: var(--k9-accent);
}

/* ===== PINNED BOTTOM UTILITY GROUP ===== */
.nav-bottom[b-9ykx45ohip] {
    flex: 0 0 auto;
    border-top: 1px solid var(--k9-hairline);
    padding: 0.5rem 0.75rem;
}

.nav-bottom .nav-item[b-9ykx45ohip] {
    margin: 0.1rem 0;
}

/* ============================================================================
   DESKTOP COLLAPSE (real k9ToggleSidebar → html.sidebar-collapsed). Desktop only;
   on the ≤900px drawer the sidebar is always full-width.
   ============================================================================ */
@media (min-width: 901px) {
    /* Collapsed: hide the logo + name, keep ONLY the toggle (now showing the expand
       chevron) centered, so the rail can always be re-expanded. */
    html.sidebar-collapsed .brand[b-9ykx45ohip] {
        justify-content: center;
        padding: 0;
    }

    html.sidebar-collapsed .brand-link[b-9ykx45ohip] {
        display: none;
    }

    html.sidebar-collapsed .collapse-icon-expanded[b-9ykx45ohip] {
        display: none;
    }

    html.sidebar-collapsed .collapse-icon-collapsed[b-9ykx45ohip] {
        display: inline-flex;
    }

    html.sidebar-collapsed .nav-group-header[b-9ykx45ohip] {
        height: 1px;
        padding: 0;
        margin: 0.75rem 0.5rem 0.25rem;
        background: var(--k9-hairline);
        color: transparent;
        overflow: hidden;
    }

    html.sidebar-collapsed .nav-item[b-9ykx45ohip]  .nav-link {
        justify-content: center;
        padding: 0.5rem;
        gap: 0;
    }

    html.sidebar-collapsed .nav-item[b-9ykx45ohip]  .nav-link .nav-label,
    html.sidebar-collapsed .nav-item[b-9ykx45ohip]  .nav-link .nav-label-stack,
    html.sidebar-collapsed .nav-item[b-9ykx45ohip]  .nav-link .nav-badge {
        display: none;
    }
}

/* On the mobile drawer the brand collapse control is irrelevant. */
@media (max-width: 900px) {
    .brand-collapse[b-9ykx45ohip] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-idtycfgloo],
.components-reconnect-repeated-attempt-visible[b-idtycfgloo],
.components-reconnect-failed-visible[b-idtycfgloo],
.components-pause-visible[b-idtycfgloo],
.components-resume-failed-visible[b-idtycfgloo],
.components-rejoining-animation[b-idtycfgloo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-retrying[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-failed[b-idtycfgloo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-idtycfgloo] {
    display: block;
}


#components-reconnect-modal[b-idtycfgloo] {
    background-color: var(--k9-surface);
    color: var(--k9-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-lg);
    box-shadow: var(--k9-shadow-lift);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-idtycfgloo 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-idtycfgloo 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-idtycfgloo 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-idtycfgloo]::backdrop {
    background-color: var(--k9-scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-idtycfgloo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-idtycfgloo {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-idtycfgloo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-idtycfgloo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-idtycfgloo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-idtycfgloo] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-idtycfgloo] {
    border: 0;
    background-color: var(--k9-accent);
    color: var(--k9-on-accent);
    padding: 8px 22px;
    border-radius: var(--k9-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    #components-reconnect-modal button:hover[b-idtycfgloo] {
        background-color: var(--k9-accent-press);
    }

    #components-reconnect-modal button:active[b-idtycfgloo] {
        background-color: var(--k9-accent);
    }

.components-rejoining-animation[b-idtycfgloo] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-idtycfgloo] {
        position: absolute;
        border: 3px solid var(--k9-accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-idtycfgloo 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-idtycfgloo] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-idtycfgloo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/VersionFooter.razor.rz.scp.css */
/* Version footer — pinned at the sidebar bottom (UI overhaul #835 Phase 2).
   Light, token-driven (the sidebar is now --k9-surface). */
.version-footer[b-5iy2hl15bw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    border-top: 1px solid var(--k9-hairline);
    background-color: var(--k9-surface);
}

/* #588 — one row for the links (Help · Privacy), one for the build (version · commit). */
.version-footer-row[b-5iy2hl15bw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.version-footer-link[b-5iy2hl15bw] {
    color: var(--k9-text-3);
    text-decoration: none;
}

.version-footer-link:hover[b-5iy2hl15bw],
.version-footer-link:focus[b-5iy2hl15bw] {
    color: var(--k9-text);
    text-decoration: underline;
}

.version-footer-sep[b-5iy2hl15bw] {
    color: var(--k9-hairline-strong);
}

/* Build provenance (#1024) — muted, monospaced-numeral short commit; branch + build time in the title. */
.version-footer-commit[b-5iy2hl15bw] {
    color: var(--k9-text-3);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

/* In the collapsed desktop rail (68px, icons only) the footer text can't fit — it
   wrapped and shaved the first "Help"/"Aide" glyph. Hide it there, consistent with the
   hidden nav labels; Help stays reachable via the pinned nav icon. (#1041) */
@media (min-width: 901px) {
    html.sidebar-collapsed .version-footer[b-5iy2hl15bw] {
        display: none;
    }
}
/* /Components/Pages/Admin/AdminReport.razor.rz.scp.css */
/* Theme the three Blazor-ApexCharts SVGs to the design-system tokens.
   ApexCharts renders its SVG via JS *inside* the .ar-chart wrapper; ::deep turns the
   AdminReport-scoped selector into a plain descendant selector, so it reaches the
   JS-injected nodes. Everything references --k9-* tokens, so the chart chrome tracks
   light/dark automatically ([data-bs-theme] swaps the vars — no theme-mode plumbing).
   The series colour itself is set on the ApexChartOptions (theme-invariant brand accent). */

.ar-chart[b-c6lpuncjai] {
    min-height: 280px;
}

/* Gridlines + axis rules → hairline. */
.ar-chart[b-c6lpuncjai]  .apexcharts-gridline,
.ar-chart[b-c6lpuncjai]  .apexcharts-grid-borders line {
    stroke: var(--k9-hairline);
}

/* Axis + legend + any chart text → secondary text token. */
.ar-chart[b-c6lpuncjai]  .apexcharts-text,
.ar-chart[b-c6lpuncjai]  .apexcharts-xaxis-label,
.ar-chart[b-c6lpuncjai]  .apexcharts-yaxis-label,
.ar-chart[b-c6lpuncjai]  .apexcharts-legend-text {
    fill: var(--k9-text-3) !important;
    color: var(--k9-text-3) !important;
}

/* Tooltip popover → surface card, hairline border, text token. */
.ar-chart[b-c6lpuncjai]  .apexcharts-tooltip {
    background: var(--k9-surface) !important;
    border: 1px solid var(--k9-hairline) !important;
    color: var(--k9-text) !important;
    box-shadow: var(--k9-shadow-md) !important;
}

.ar-chart[b-c6lpuncjai]  .apexcharts-tooltip-title {
    background: var(--k9-surface-2) !important;
    border-bottom: 1px solid var(--k9-hairline) !important;
    color: var(--k9-text-2) !important;
}

/* xaxis tooltip (the little date bubble under the cursor). */
.ar-chart[b-c6lpuncjai]  .apexcharts-xaxistooltip {
    background: var(--k9-surface) !important;
    border: 1px solid var(--k9-hairline) !important;
    color: var(--k9-text) !important;
}

.ar-chart[b-c6lpuncjai]  .apexcharts-xaxistooltip::before {
    border-bottom-color: var(--k9-hairline) !important;
}

.ar-chart[b-c6lpuncjai]  .apexcharts-xaxistooltip::after {
    border-bottom-color: var(--k9-surface) !important;
}
/* /Components/Pages/Admin/SecurityLog.razor.rz.scp.css */
/* Security log — A3 Data table (doc 25 §6). Admin-only diagnostic. Page-scoped, token-only
   (page-local .razor.css is not scanned by the design-system hex invariant). */

/* Ten-column forensic table: give it a wide min-width so it scrolls horizontally inside
   .k9-table-scroll (doc 25 §4.4), and tighten the primitive's padding/size back to the dense
   admin-grid feel the old `table-sm ... small` had. */
.k9-table[b-6iyh03unlq] {
    min-width: 1100px;
}

.k9-table thead th[b-6iyh03unlq] {
    padding: 10px 12px;
}

.k9-table tbody td[b-6iyh03unlq] {
    padding: 9px 12px;
    font-size: 12.5px;
}
/* /Components/Pages/DogAccess/MyDogAccessGrants.razor.rz.scp.css */
/* Dog access grants — A2 restyle (#845). Token-only page-local styles for the inline edit-grant
   modal (the .k9-* primitives cover the list surface). Hand-rolled overlay + panel + flag rows,
   all referencing --k9-* tokens. */

.dag-modal[b-eahb98ozui] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--k9-scrim);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
}

.dag-modal-panel[b-eahb98ozui] {
    width: min(680px, 100%);
    background: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-lg);
    box-shadow: var(--k9-shadow-lift);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dag-modal-head[b-eahb98ozui] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--k9-hairline);
}

.dag-modal-title[b-eahb98ozui] { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dag-modal-sub[b-eahb98ozui] { color: var(--k9-text-3); font-size: 12.5px; margin-top: 2px; }

.dag-modal-body[b-eahb98ozui] { padding: 18px 22px; overflow-y: auto; }

.dag-modal-foot[b-eahb98ozui] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--k9-hairline);
    background: var(--k9-surface-2);
}

.dag-close[b-eahb98ozui] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--k9-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--k9-text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dag-close:hover[b-eahb98ozui] { background: var(--k9-surface-2); color: var(--k9-text); }
.dag-close:focus-visible[b-eahb98ozui] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.dag-close svg[b-eahb98ozui] { width: 17px; height: 17px; }

/* Permission flag rows: a .k9-toggle button + label + help text. */
.dag-flag[b-eahb98ozui] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dag-flag:last-child[b-eahb98ozui] { margin-bottom: 0; }
.dag-flag-title[b-eahb98ozui] { font-weight: 600; font-size: 14px; }

/* Disabled toggle (page-scoped — the design-system primitive has no disabled state yet). */
.k9-toggle:disabled[b-eahb98ozui] { opacity: .5; cursor: not-allowed; }
/* /Components/Pages/Dogs/DogCard.razor.rz.scp.css */
/* Dogs card view — dog list-item card, two layouts (media / compact) sharing one component.
   The outer element carries the design-system .k9-card .k9-card-flush primitives (border,
   radius, shadow, hover-lift, overflow:hidden); this scoped layer owns only the card-INTERNAL
   layout. All colours reference --k9-* tokens (Phase-4a restyle, #844).

   The card is a Bootstrap stretched-link target; the favourite star (z-index 3) and the action
   links (z-index 2) sit above the stretched-link ::after overlay (z-index 1) so they stay
   independently clickable. */

.dog-card[b-fbocf9erj3] {
    /* .k9-card-flush already clips to the radius (overflow:hidden); display column/row below. */
    display: flex;
}

/* Favourite star — overlaid top-right of the card in both layouts. A translucent dark disc
   (--k9-scrim) keeps the star legible over any photo (and over the body in compact). */
.dog-card__fav[b-fbocf9erj3] {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--k9-scrim);
    color: var(--k9-on-accent);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.dog-card__fav:hover[b-fbocf9erj3],
.dog-card__fav:focus-visible[b-fbocf9erj3] {
    transform: scale(1.08);
}

.dog-card__fav:focus-visible[b-fbocf9erj3] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
}

/* Favourited → the star fills design-system gold. */
.dog-card__fav .bi-star-fill[b-fbocf9erj3] {
    color: var(--k9-fav);
}

@media (prefers-reduced-motion: reduce) {
    .dog-card__fav[b-fbocf9erj3] { transition: background-color 0.15s ease-in-out; }
    .dog-card__fav:hover[b-fbocf9erj3],
    .dog-card__fav:focus-visible[b-fbocf9erj3] { transform: none; }
}

/* Name + badges row. The name link is the stretched-link. Badges are non-interactive text
   rendered by the child <DogStatusBadges> component, so they need no z-index lift. */
.dog-card__name[b-fbocf9erj3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.dog-card__name-link[b-fbocf9erj3] {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--k9-text);
    text-decoration: none;
}

.dog-card__name-link:hover[b-fbocf9erj3] {
    color: var(--k9-accent-text);
}

.dog-card__breed[b-fbocf9erj3] {
    line-height: 1.25;
    font-size: 0.8125rem;
    color: var(--k9-text-2);
}

.dog-card__meta[b-fbocf9erj3] {
    margin-top: 0.35rem;
    font-size: 0.78125rem;
    color: var(--k9-text-3);
}

.dog-card__dot[b-fbocf9erj3] {
    margin: 0 0.35rem;
}

/* Action buttons must out-rank the stretched-link overlay to stay clickable. */
.dog-card__actions[b-fbocf9erj3] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

/* ── Media layout (photo-top grid card) ───────────────────────────────── */
.dog-card--media[b-fbocf9erj3] {
    flex-direction: column;
}

.dog-card--media .dog-card__media[b-fbocf9erj3] {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--k9-surface-2);
}

.dog-card--media .dog-card__body[b-fbocf9erj3] {
    padding: 1rem 1.125rem 1.125rem;
}

/* ── Compact layout (horizontal card) ─────────────────────────────────── */
.dog-card--compact[b-fbocf9erj3] {
    flex-direction: row;
    align-items: stretch;
}

.dog-card--compact .dog-card__media[b-fbocf9erj3] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    padding-right: 0;
}

.dog-card--compact .dog-card__body[b-fbocf9erj3] {
    padding: 0.875rem 1.125rem;
    /* leave room for the top-right star so a long name doesn't run under it */
    padding-right: 2.6rem;
    min-width: 0; /* let long breed/owner text truncate instead of overflowing */
}

.dog-card--compact .dog-card__breed[b-fbocf9erj3],
.dog-card--compact .dog-card__meta[b-fbocf9erj3] {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/Dogs/DogDetail.razor.rz.scp.css */
/* Page-local A4 tweaks for the dog detail overview (UI overhaul Phase 4b, #849).
   Token-only — every value references a --k9-* custom property (doc 25 §8.2). The
   reusable look comes from the .k9-* primitive layer (k9-components.css); these are
   the few page-specific affordances that primitive layer doesn't carry. */

/* Destructive ghost button (Delete / Leave) — a .k9-btn-ghost tinted with the
   semantic red token. The primitive layer has no danger button variant. */
.dd-danger[b-083mjdszev] {
    color: var(--k9-red);
}

.dd-danger:hover[b-083mjdszev] {
    color: var(--k9-red);
    border-color: var(--k9-red);
}

/* Free-text Bio block inside the hero. */
.dd-bio[b-083mjdszev] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
    padding: 10px 12px;
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Disclosure summary (historical owners). */
.dd-summary[b-083mjdszev] {
    color: var(--k9-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.dd-summary:hover[b-083mjdszev] {
    color: var(--k9-text);
}
/* /Components/Pages/DogTransfers/MyDogTransfers.razor.rz.scp.css */
/* Dog ownership transfers — A2 restyle (#845). Token-only page-local styles for the inline
   edit-sharing modal (the .k9-* primitives cover the list surface). */

.dtr-modal[b-85csz8rrdc] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--k9-scrim);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
}

.dtr-modal-panel[b-85csz8rrdc] {
    width: min(560px, 100%);
    background: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-lg);
    box-shadow: var(--k9-shadow-lift);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dtr-modal-head[b-85csz8rrdc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--k9-hairline);
}

.dtr-modal-title[b-85csz8rrdc] { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.dtr-modal-body[b-85csz8rrdc] { padding: 18px 22px; overflow-y: auto; }

.dtr-modal-foot[b-85csz8rrdc] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--k9-hairline);
    background: var(--k9-surface-2);
}

.dtr-close[b-85csz8rrdc] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--k9-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--k9-text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dtr-close:hover[b-85csz8rrdc] { background: var(--k9-surface-2); color: var(--k9-text); }
.dtr-close:focus-visible[b-85csz8rrdc] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.dtr-close svg[b-85csz8rrdc] { width: 17px; height: 17px; }

/* Sharing-flag rows: a .k9-toggle button + label + help text. Nested children indent. */
.dtr-flag[b-85csz8rrdc] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dtr-flag.dtr-nested[b-85csz8rrdc] { margin-left: 28px; }
.dtr-flag-title[b-85csz8rrdc] { font-weight: 600; font-size: 14px; }

/* Disabled toggle (page-scoped — the design-system primitive has no disabled state yet). */
.k9-toggle:disabled[b-85csz8rrdc] { opacity: .5; cursor: not-allowed; }
/* /Components/Pages/EducationSessions/EducationSessionList.razor.rz.scp.css */
/* Education sessions — A3 Data table (doc 25 §6, mockup 13-saas-sessions). Page-scoped,
   token-only (page-local .razor.css is not scanned by the design-system hex invariant). */

/* The seven-column table gets a min-width so it scrolls horizontally inside
   .k9-table-scroll on narrow viewports instead of crushing the columns (doc 25 §4.4). */
.k9-table[b-4n5lazqyxw] {
    min-width: 820px;
}
/* /Components/Pages/EducationSessions/EducationSessionView.razor.rz.scp.css */
/* Page-local A4 affordances for the education-session detail (UI overhaul Phase 4b, #849).
   Token-only — every value references a --k9-* custom property (doc 25 §8.2). Mirrors the
   training-session detail's ViewSession.razor.css; page-scoped .razor.css, like DogDetail's. */

/* Free-text master-comments block inside the hero (mirrors DogDetail's .dd-bio). */
.es-comments[b-9lzsk06hng] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
    padding: 10px 12px;
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Square attachment thumbnail filling its flush tile. */
.es-attach-img[b-9lzsk06hng] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* /Components/Pages/Feedback/FeedbackDetail.razor.rz.scp.css */
/* Page-local A4 affordances for the feedback report detail (UI overhaul Phase 4b, #849).
   Token-only — every value references a --k9-* custom property (doc 25 §8.2). Page-scoped
   .razor.css (Blazor isolates these to this component), like DogDetail's. */

/* Rendered report + comment prose (the .feedback-* hooks were previously unstyled). */
.feedback-body[b-i7wk194oxc] {
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.feedback-comment-body[b-i7wk194oxc] {
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Aspect-preserving attachment thumbnail (replaces Bootstrap's .img-thumbnail). */
.fb-thumb[b-i7wk194oxc] {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
}
/* /Components/Pages/Feedback/FeedbackList.razor.rz.scp.css */
/* Feedback list — A2 restyle (#845). Page-local style for the sortable column-header buttons:
   they must look like the .k9-table uppercase header text (inheriting its colour/size/weight) plus
   a sort caret, so they reset all button chrome and inherit from the <th>. Token-only (the
   design-system raw-hex invariant does not scan page-scoped .razor.css, but we keep it token-clean). */
.fb-sort[b-all6dyjfo4] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fb-sort:hover[b-all6dyjfo4] {
    color: var(--k9-text);
}

.fb-sort:focus-visible[b-all6dyjfo4] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
}
/* /Components/Pages/Help/Help.razor.rz.scp.css */
.help-landing-grid[b-peyx3jnsl4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* Card chrome (surface / hairline / radius / shadow / padding) comes from
   .k9-card .k9-card-static; only the inner heading + link list is scoped here. */
.help-landing-card h2[b-peyx3jnsl4] {
    margin: 0 0 0.5rem;
    color: var(--k9-text);
}

.help-landing-card ul[b-peyx3jnsl4] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-landing-card li[b-peyx3jnsl4] {
    margin-bottom: 0.35rem;
}

.help-landing-card a[b-peyx3jnsl4] {
    color: var(--k9-text-2);
    text-decoration: none;
    font-size: 0.95rem;
}

.help-landing-card a:hover[b-peyx3jnsl4] {
    color: var(--k9-accent-text);
    text-decoration: underline;
}
/* /Components/Pages/Help/HelpFrame.razor.rz.scp.css */
.help-page[b-iq5di1x1j9] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.help-content[b-iq5di1x1j9] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 820px;
}

@media (max-width: 768px) {
    .help-page[b-iq5di1x1j9] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Pages/Help/HelpSidebar.razor.rz.scp.css */
.help-sidebar[b-qwbxwi4zf9] {
    flex: 0 0 260px;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
}

.help-search[b-qwbxwi4zf9] {
    position: relative;
    margin-bottom: 1rem;
}

.help-search-icon[b-qwbxwi4zf9] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--k9-text-3);
    pointer-events: none;
    z-index: 1;
}

/* .k9-input owns the border / bg / radius / focus ring; only the icon insets are scoped. */
.help-search-input[b-qwbxwi4zf9] {
    padding-left: 2rem;
    padding-right: 2rem;
}

.help-search-clear[b-qwbxwi4zf9] {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--k9-text-3);
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

.help-search-clear:hover[b-qwbxwi4zf9] {
    color: var(--k9-text);
}

.help-nav-group + .help-nav-group[b-qwbxwi4zf9] {
    margin-top: 1rem;
}

.help-nav-group-header[b-qwbxwi4zf9] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--k9-text-3);
    margin-bottom: 0.35rem;
}

.help-nav-list[b-qwbxwi4zf9] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-nav-list li[b-qwbxwi4zf9] {
    margin-bottom: 0.15rem;
}

.help-nav-list a[b-qwbxwi4zf9] {
    display: block;
    padding: 0.35rem 0.6rem;
    border-radius: var(--k9-radius-sm);
    color: var(--k9-text);
    text-decoration: none;
    font-size: 0.95rem;
}

.help-nav-list a:hover[b-qwbxwi4zf9] {
    background: var(--k9-surface-2);
}

.help-nav-list li.active a[b-qwbxwi4zf9] {
    background: var(--k9-accent-soft);
    color: var(--k9-accent-text);
    font-weight: 600;
}

.help-search-results[b-qwbxwi4zf9] {
    margin-top: 0.5rem;
}

.help-search-count[b-qwbxwi4zf9] {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.help-search-empty[b-qwbxwi4zf9] {
    font-size: 0.9rem;
}

.help-search-list[b-qwbxwi4zf9] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-search-list li[b-qwbxwi4zf9] {
    margin-bottom: 0.35rem;
}

.help-search-list a[b-qwbxwi4zf9] {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: var(--k9-radius-sm);
    text-decoration: none;
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
}

.help-search-list a:hover[b-qwbxwi4zf9] {
    border-color: var(--k9-accent);
}

.help-search-title[b-qwbxwi4zf9] {
    display: block;
    font-weight: 600;
    color: var(--k9-text);
    margin-bottom: 0.15rem;
}

.help-search-snippet[b-qwbxwi4zf9] {
    display: block;
    font-size: 0.85rem;
    color: var(--k9-text-2);
}

@media (max-width: 768px) {
    .help-sidebar[b-qwbxwi4zf9] {
        flex: 0 0 auto;
        position: static;
        max-height: none;
        width: 100%;
        padding-right: 0;
    }
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* Notifications list — A2 restyle (#845). Token-only page-local styles for the notification rows
   (the .k9-* primitives cover everything else). The clickable row reads as a link: the title
   underlines on hover/focus. Unread rows carry an accent tint; a deep-linked (?subjectId=) row
   gets an accent ring. */

.notif-row[b-ihz1e283f3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface);
    margin-bottom: 10px;
    transition: border-color .15s, background .15s;
}

.notif-row:last-child[b-ihz1e283f3] {
    margin-bottom: 0;
}

.notif-row:hover[b-ihz1e283f3] {
    border-color: var(--k9-hairline-strong);
}

/* Unread → accent-tinted fill (the standard inbox "needs attention" signal, alongside the bold
   title the markup sets). */
.notif-row.unread[b-ihz1e283f3] {
    background: var(--k9-accent-soft);
    border-color: color-mix(in srgb, var(--k9-accent) 22%, transparent);
}

/* Deep-linked row (?subjectId=) → accent ring. */
.notif-row.highlight[b-ihz1e283f3] {
    border-color: var(--k9-accent);
    box-shadow: 0 0 0 1px var(--k9-accent);
}

/* Full-width clickable title region — a real <button> reset to inherit the row text. */
.notification-open[b-ihz1e283f3] {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-open:focus-visible[b-ihz1e283f3] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
    border-radius: var(--k9-radius-sm);
}

.notification-open:hover .notification-open-title[b-ihz1e283f3],
.notification-open:focus-visible .notification-open-title[b-ihz1e283f3] {
    text-decoration: underline;
}
/* /Components/Pages/Reports/ReportsPage.razor.rz.scp.css */
/* Reports — A6 Analytics / Reports (doc 25 §6, mockup 14-saas-reports). Page-scoped,
   token-only (a page-local .razor.css is not scanned by the design-system hex invariant —
   same as SessionList.razor.css). */

/* The seven-column results table gets a min-width so it scrolls horizontally inside
   .k9-table-scroll on narrow viewports instead of crushing the columns (doc 25 §4.4). */
.k9-table[b-w90rouvq60] {
    min-width: 760px;
}

/* Deleted sessions read dimmed — the token equivalent of the old Bootstrap
   .table-secondary greying; the in-row "Deleted" badge is the primary signal. */
.rp-row-deleted td[b-w90rouvq60] {
    color: var(--k9-text-3);
}

/* Dogs / Participants multi-select pick-lists — a scrollable, token-bordered container of
   full-width selectable checkbox rows. The .k9-* layer has no list primitive, so this is a
   component-scoped, token-only surface (same pattern as ParticipantPicker's .pp-list and the
   taxonomy .tx-list). Replaces the old Bootstrap `.border.rounded` + `.list-group-flush`. */
.rp-picklist[b-w90rouvq60] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
}

.rp-item[b-w90rouvq60] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--k9-hairline);
    transition: background .12s;
}

.rp-item:last-child[b-w90rouvq60] {
    border-bottom: none;
}

.rp-item:hover[b-w90rouvq60] {
    background: var(--k9-surface-2);
}
/* /Components/Pages/Sessions/AwaitingSignature.razor.rz.scp.css */
/* Awaiting my signature — A3 Data table (doc 25 §6), #1253. Page-scoped, token-only
   (page-local .razor.css is not scanned by the design-system hex invariant). */

/* The seven-column table gets a min-width so it scrolls horizontally inside
   .k9-table-scroll on narrow viewports instead of crushing the columns (doc 25 §4.4). */
.k9-table[b-j1wr23jry6] {
    min-width: 900px;
}
/* /Components/Pages/Sessions/GroupSessionDetail.razor.rz.scp.css */
/* Page-local A4 affordance for the group-session detail (UI overhaul Phase 4b, #849).
   Token-only — every value references a --k9-* custom property (doc 25 §8.2). Mirrors the
   session-detail twins' page CSS; page-scoped .razor.css, like DogDetail's. */

/* Free-text master-comments block inside the hero (mirrors DogDetail's .dd-bio). */
.gs-comments[b-beeap3u3ny] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
    padding: 10px 12px;
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Per-row inline "remove dog" confirm (#1144) — the guarded twin of the page's
   Delete-group confirm, scaled to sit inside the Dogs table's actions cell. Token-only
   (doc 25 §8.2). NOT a native confirm(); it is a plain Blazor panel per the dev-and-
   verification playbook. */
.gs-remove-confirm[b-beeap3u3ny] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 15rem;
    margin-left: auto;
}

.gs-remove-confirm-prompt[b-beeap3u3ny] {
    color: var(--k9-text);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: right;
}

.gs-remove-confirm-actions[b-beeap3u3ny] {
    display: flex;
    gap: 6px;
}
/* /Components/Pages/Sessions/SessionList.razor.rz.scp.css */
/* Training sessions — A3 Data table (doc 25 §6, mockup 13-saas-sessions). Page-scoped,
   token-only (page-local .razor.css is not scanned by the design-system hex invariant). */

/* The ten-column table (#1253 added Status) gets a min-width so it scrolls horizontally
   inside .k9-table-scroll on narrow viewports instead of crushing the columns (doc 25 §4.4). */
.k9-table[b-e9fxdpgmij] {
    min-width: 1100px;
}

/* Deleted sessions read dimmed — the token equivalent of the old Bootstrap
   .table-secondary greying; the in-row "Deleted" badge is the primary signal. */
.sl-row-deleted td[b-e9fxdpgmij] {
    color: var(--k9-text-3);
}
/* /Components/Pages/Sessions/ViewSession.razor.rz.scp.css */
/* Page-local A4 affordances for the training-session detail (UI overhaul Phase 4b, #849).
   Token-only — every value references a --k9-* custom property (doc 25 §8.2). The reusable
   look comes from the .k9-* primitive layer (k9-components.css); these are the few
   page-specific bits that layer doesn't carry. Page-scoped .razor.css, like DogDetail's. */

/* Free-text master-comments block inside the hero (mirrors DogDetail's .dd-bio). */
.vs-comments[b-fcmjtyvwo6] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
    padding: 10px 12px;
    color: var(--k9-text);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    /* #832 D15 — break a single unbroken run (a pasted URL, base64 blob, or key-repeat) so one
       long word can't stretch the document (68,525px in the report) and drag every card out with
       it. Scoped to this page; the free-text comment blocks are the only unbounded-length fields
       on the session view (Location is capped at 100). */
    overflow-wrap: anywhere;
}

/* #832 D15 — same for the per-sub-type comment (free text, unbounded length). Scoped .razor.css,
   so this does not touch .k9-feed-sub anywhere else in the app. */
.k9-feed-sub[b-fcmjtyvwo6] {
    overflow-wrap: anywhere;
}

/* Square attachment thumbnail filling its flush tile. */
.vs-attach-img[b-fcmjtyvwo6] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* /Components/Shared/BreedPicker.razor.rz.scp.css */
/* The picker uses Bootstrap row+col layout internally for the note + form
   columns; sizing is handled by col-md-5 / col-md-7. Token-only (--k9-*):
   de-bridged in the Phase-4d shared-picker sunset (#873). */

.breed-picker-note dl > dt[b-je1bt60ir0] {
    font-weight: 600;
    margin-top: 0.25rem;
}

.breed-picker-note dl > dt:first-child[b-je1bt60ir0] {
    margin-top: 0;
}

.breed-picker-note dl > dd[b-je1bt60ir0] {
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .breed-picker-note[b-je1bt60ir0] {
        border-left: 1px solid var(--k9-hairline);
        padding-left: 1rem;
    }
}

/* Breed search-result list — token-only surface the .k9-* primitives don't
   provide (a scrollable list of selectable rows). Component-scoped, so it sits
   outside the design-system-layer scans; token-driven regardless. */
.bp-list[b-je1bt60ir0] {
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface);
}

.bp-item[b-je1bt60ir0] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--k9-hairline);
    padding: 9px 13px;
    color: var(--k9-text);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.12s;
}

.bp-item:last-child[b-je1bt60ir0] {
    border-bottom: 0;
}

.bp-item:hover:not(:disabled)[b-je1bt60ir0] {
    background: var(--k9-surface-2);
}

.bp-item:focus-visible[b-je1bt60ir0] {
    outline: 2px solid var(--k9-accent);
    outline-offset: -2px;
}

.bp-item:disabled[b-je1bt60ir0] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Shared/DogAvatar.razor.rz.scp.css */
/* Dog profile chip (#610) — a rounded SQUARE, the dog counterpart to the circular
   PersonAvatar (docs/18 §16). The 16% corner radius matches the cropper's live
   preview so the framing is WYSIWYG. */
.dog-avatar[b-6v64x35srl] {
    position: relative;
    /* Contain the inner image/initials z-index (0/1) in the avatar's own stacking
       context so it can't paint over page chrome (the sticky .beta-banner / .top-row).
       Without this the absolutely-positioned img's z-index:1 escapes to the root
       stacking context and overlaps the banner when the page scrolls under it —
       visible once the xl detail-header chip got large. */
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 16%;
    overflow: hidden;
    /* Per-identity hue is the inline --dog-avatar-bg (a deterministic HSL — a deliberate
       per-dog signal, NOT tokenised). The fallback + the on-hue text colour ride design
       tokens (#842 Phase-4a avatar reconciliation; the fallback is unreachable today since
       the component always sets --dog-avatar-bg inline, so this is a colour-equivalent pass). */
    background-color: var(--dog-avatar-bg, var(--k9-neutral));
    color: var(--k9-on-accent);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
}

.dog-avatar-sm[b-6v64x35srl] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.9rem;
}

.dog-avatar-md[b-6v64x35srl] {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
}

.dog-avatar-lg[b-6v64x35srl] {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.6rem;
}

/* Detail-header hero chip — a prominent, much larger render than the list/picker
   sizes. Backed by the dedicated, larger `chip` variant (ChipMaxEdgePx) so it stays
   crisp at this size on high-DPI screens. */
.dog-avatar-xl[b-6v64x35srl] {
    width: 12rem;
    height: 12rem;
    font-size: 4rem;
}

/* Dogs card view — fills its container (a square media box) instead of a fixed
   rem size. The media box rounds the card's top corners, so the avatar itself
   drops the 16% corner radius and fills edge-to-edge. */
.dog-avatar-card[b-6v64x35srl] {
    width: 100%;
    height: 100%;
    font-size: 3rem;
    border-radius: 0;
}

.dog-avatar-initials[b-6v64x35srl] {
    z-index: 0;
}

/* The image sits over the initials; on a 404 the inline onerror removes it,
   revealing the initials underneath. */
.dog-avatar-img[b-6v64x35srl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* /Components/Shared/DogHovercard.razor.rz.scp.css */
/* Dog hovercard preview tile (#476).
   Component-scoped via Blazor's CSS isolation — selectors only target
   elements rendered by DogHovercard.razor. */

.dog-hovercard-wrapper[b-oo641mta3x] {
    position: relative;
    display: inline;
}

.dog-hovercard[b-oo641mta3x] {
    /* `position: fixed` escapes any ancestor with overflow: hidden|auto|scroll
       (e.g. Bootstrap's .table-responsive). Coordinates are computed in JS
       from the trigger's bounding rect — see wwwroot/js/dog-hovercard.js. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080; /* same layer as Bootstrap tooltips, above modals' backdrop content */
    width: 280px;
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: 0.5rem;
    box-shadow: var(--k9-shadow-md);
    padding: 0.75rem;
    pointer-events: auto;
    /* Start hidden — the JS positioner reveals the card after writing top/left,
       so users never see a 0,0-anchored flash. */
    visibility: hidden;
    animation: dog-hovercard-fade-in-b-oo641mta3x 120ms ease-out;
}

@keyframes dog-hovercard-fade-in-b-oo641mta3x {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dog-hovercard-card-link[b-oo641mta3x] {
    display: flex;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.dog-hovercard-card-link:hover[b-oo641mta3x],
.dog-hovercard-card-link:focus-visible[b-oo641mta3x] {
    text-decoration: none;
    color: inherit;
}

/* The hovercard photo is now the shared <DogAvatar> (rounded-square chip, #610) —
   Size="lg" = 72px with an initials fallback, replacing the former
   .dog-hovercard-photo block. */

.dog-hovercard-body[b-oo641mta3x] {
    flex: 1 1 auto;
    min-width: 0;
}

.dog-hovercard-name[b-oo641mta3x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.125rem;
    word-break: break-word;
}

.dog-hovercard-breed[b-oo641mta3x],
.dog-hovercard-owner[b-oo641mta3x],
.dog-hovercard-age[b-oo641mta3x] {
    line-height: 1.25;
    margin-top: 0.125rem;
    word-break: break-word;
}

.dog-hovercard-label[b-oo641mta3x] {
    font-weight: 500;
    margin-right: 0.25rem;
}

.dog-hovercard-loading[b-oo641mta3x] {
    display: flex;
    align-items: center;
    color: var(--k9-text-2);
    font-size: 0.875rem;
}

.dog-hovercard-empty[b-oo641mta3x] {
    text-align: center;
    padding: 0.5rem 0;
}

/* Pointer-coarse devices (touch screens) — bypass entirely. The wrapper
   still renders the child link, but the popup never appears. We hide it
   defensively in case the CSS hover state activated it. */
@media (pointer: coarse) {
    .dog-hovercard[b-oo641mta3x] {
        display: none !important;
    }
}
/* /Components/Shared/DogPicker.razor.rz.scp.css */
/* Dog picker — custom dropdown so each row can wrap <DogHovercard>.
   Component-scoped via Blazor's CSS isolation. Token-only (--k9-*): de-bridged in
   the Phase-4d shared-picker sunset (#873). */

.dog-picker[b-innep7a33o] {
    position: relative;
}

/* The trigger reuses the .k9-select primitive (border / height / radius / padding)
   + the shared .k9-select-wrap > .k9-chev dropdown caret. As a <button> it needs
   flex-centering — a native <select>/<input> auto-centers its value, a button does
   not (its .k9-select height would otherwise top-align the label). */
.dog-picker-trigger[b-innep7a33o] {
    display: flex;
    align-items: center;
}

.dog-picker-backdrop[b-innep7a33o] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.dog-picker-menu[b-innep7a33o] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    box-shadow: var(--k9-shadow-md);
    max-height: 22rem;
    overflow-y: auto;
}

.dog-picker-search[b-innep7a33o] {
    height: 38px;
    margin: 0.4rem 0.5rem 0.25rem;
    width: calc(100% - 1rem);
}

.dog-picker-list[b-innep7a33o] {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

.dog-picker-group-header[b-innep7a33o] {
    padding: 0.35rem 0.9rem 0.15rem;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.dog-picker-separator[b-innep7a33o] {
    height: 0;
    margin: 0.25rem 0;
    border-top: 1px solid var(--k9-hairline);
}

.dog-picker-item[b-innep7a33o] {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.4rem 0.9rem;
    color: var(--k9-text);
    cursor: pointer;
}

.dog-picker-item:hover[b-innep7a33o],
.dog-picker-item:focus-visible[b-innep7a33o] {
    background-color: var(--k9-surface-2);
    outline: none;
}

.dog-picker-item.active[b-innep7a33o] {
    background-color: var(--k9-accent-soft);
    font-weight: 500;
}

.dog-picker-empty[b-innep7a33o] {
    padding: 0.5rem 0.9rem;
}

/* Selected-dog summary tile — same shape as DogHovercard so the inline
   preview and the hover preview read as the same artefact. */
.dog-picker-tile[b-innep7a33o] {
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    padding: 0.6rem;
}

.dog-picker-tile-link[b-innep7a33o] {
    display: flex;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.dog-picker-tile-link:hover[b-innep7a33o],
.dog-picker-tile-link:focus-visible[b-innep7a33o] {
    text-decoration: none;
    color: inherit;
}

/* The tile photo is now the shared <DogAvatar> (rounded-square chip, #610) — its
   own sizing (Size="md" = 56px) + initials fallback replace the former
   .dog-picker-tile-photo block. */

.dog-picker-tile-body[b-innep7a33o] {
    flex: 1 1 auto;
    min-width: 0;
}

.dog-picker-tile-name[b-innep7a33o] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dog-picker-tile-breed[b-innep7a33o],
.dog-picker-tile-meta[b-innep7a33o] {
    line-height: 1.25;
    margin-top: 0.125rem;
    word-break: break-word;
}

.dog-picker-tile-label[b-innep7a33o] {
    font-weight: 500;
    margin-right: 0.25rem;
}

.dog-picker-tile-loading[b-innep7a33o] {
    display: flex;
    align-items: center;
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
/* Language selector — top-bar control (UI overhaul #835 Phase 2, doc 25 § 4.3).
   Token-driven compact pill; restyles the Bootstrap btn-outline base. */
.language-dropdown[b-nm6buqaxmf] {
    position: relative;
    display: inline-block;
}

.language-dropdown-toggle[b-nm6buqaxmf] {
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 38px;
    padding: 0 0.7rem;
    border-radius: var(--k9-radius-md);
    border: 1px solid var(--k9-hairline);
    background: var(--k9-surface);
    color: var(--k9-text-2);
    font-weight: 600;
    font-size: 0.8rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.language-dropdown-toggle:hover[b-nm6buqaxmf],
.language-dropdown[open] > .language-dropdown-toggle[b-nm6buqaxmf] {
    color: var(--k9-text);
    border-color: var(--k9-hairline-strong);
    background: var(--k9-surface);
}

.language-dropdown-toggle[b-nm6buqaxmf]::-webkit-details-marker {
    display: none;
}

.language-dropdown-toggle[b-nm6buqaxmf]::marker {
    content: "";
}

.language-dropdown-toggle .chevron[b-nm6buqaxmf] {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--k9-text-3);
}

.language-dropdown-menu[b-nm6buqaxmf] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1050;
    min-width: 12rem;
    max-height: 18rem;
    overflow-y: auto;
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    box-shadow: var(--k9-shadow-md);
    padding: 0.3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 680px) {
    .language-dropdown-menu[b-nm6buqaxmf] {
        right: auto;
        left: 0;
    }
}

.language-dropdown-item[b-nm6buqaxmf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--k9-radius-sm);
    background: transparent;
    text-align: left;
    width: 100%;
    color: var(--k9-text-2);
    cursor: pointer;
}

.language-dropdown-item:hover:not(:disabled)[b-nm6buqaxmf],
.language-dropdown-item:focus:not(:disabled)[b-nm6buqaxmf] {
    background-color: var(--k9-surface-2);
    color: var(--k9-text);
    outline: none;
}

.language-dropdown-item.active[b-nm6buqaxmf],
.language-dropdown-item:disabled[b-nm6buqaxmf] {
    background-color: var(--k9-accent-soft);
    color: var(--k9-accent);
    font-weight: 600;
    cursor: default;
}

.language-dropdown-item .code[b-nm6buqaxmf] {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    min-width: 2.25rem;
}

.language-dropdown-item .native[b-nm6buqaxmf] {
    flex: 1 1 auto;
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* Notification bell — top-bar icon button + dropdown (UI overhaul #835 Phase 2,
   doc 25 § 4.3). Token-driven icon-btn shell; keeps the unread count badge. */
.notification-bell[b-gg9mwq0knq] {
    position: relative;
    display: inline-block;
}

.notification-bell-toggle[b-gg9mwq0knq] {
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--k9-radius-md);
    border: 1px solid transparent;
    position: relative;
    color: var(--k9-text-2);
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.notification-bell-toggle[b-gg9mwq0knq]::-webkit-details-marker {
    display: none;
}

.notification-bell-toggle[b-gg9mwq0knq]::marker {
    content: "";
}

.notification-bell-toggle:hover[b-gg9mwq0knq],
.notification-bell-toggle:focus[b-gg9mwq0knq],
.notification-bell[open] > .notification-bell-toggle[b-gg9mwq0knq] {
    background-color: var(--k9-surface);
    color: var(--k9-text);
    border-color: var(--k9-hairline);
}

/* Visible accent focus ring for keyboard users (doc 25 § 7) — replaces the old blanket
   outline:none, which removed the indicator without a substitute. */
.notification-bell-toggle:focus-visible[b-gg9mwq0knq] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 1px;
}

.notification-badge[b-gg9mwq0knq] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--k9-accent);
    color: var(--k9-on-accent);
    border: 2px solid var(--k9-surface);
    border-radius: 999px;
    font-size: 0.65rem;
    line-height: 1;
    min-width: 1.05rem;
    padding: 0.1rem 0.25rem;
    font-weight: 700;
    text-align: center;
}

.notification-dropdown[b-gg9mwq0knq] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1050;
    min-width: 22rem;
    max-width: 28rem;
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    box-shadow: var(--k9-shadow-md);
    display: flex;
    flex-direction: column;
}

.notification-dropdown-header[b-gg9mwq0knq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--k9-hairline);
}

.notification-dropdown-title[b-gg9mwq0knq] {
    font-weight: 700;
    color: var(--k9-text);
}

.notification-dropdown-actions[b-gg9mwq0knq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-dropdown-body[b-gg9mwq0knq] {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.notification-dropdown-footer[b-gg9mwq0knq] {
    border-top: 1px solid var(--k9-hairline);
    text-align: center;
    padding: 0.5rem;
}

.notification-list[b-gg9mwq0knq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-item[b-gg9mwq0knq] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--k9-hairline);
}

.notification-item:last-child[b-gg9mwq0knq] {
    border-bottom: none;
}

/* Unread tint on the whole row (incl. the dismiss column). #744 */
.notification-item.unread[b-gg9mwq0knq] {
    background-color: var(--k9-accent-soft);
}

.notification-item-button[b-gg9mwq0knq] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--k9-text);
}

.notification-item-dismiss[b-gg9mwq0knq] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--k9-text-3);
    font-size: 0.8rem;
    line-height: 1;
}

.notification-item-dismiss:hover[b-gg9mwq0knq],
.notification-item-dismiss:focus[b-gg9mwq0knq] {
    background-color: var(--k9-surface-2);
    color: var(--k9-text);
    outline: none;
}

.notification-item-content[b-gg9mwq0knq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.notification-item-button:hover[b-gg9mwq0knq],
.notification-item-button:focus[b-gg9mwq0knq] {
    background-color: var(--k9-surface-2);
    outline: none;
}

.notification-item-title[b-gg9mwq0knq] {
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--k9-text);
}

.notification-item.unread .notification-item-title[b-gg9mwq0knq] {
    font-weight: 600;
}

.notification-item-time[b-gg9mwq0knq] {
    font-size: 0.75rem;
    color: var(--k9-text-3);
}
/* /Components/Shared/OrganizationLogo.razor.rz.scp.css */
/* Organization logo chip (#590) — a rounded SQUARE, the workspace-entity counterpart
   to the circular PersonAvatar (docs/18 §16: people = circle, dogs/orgs = rounded
   square; the Slack/GitHub "workspace = rounded square" convention). The 16% corner
   radius matches the cropper's live preview so the framing is WYSIWYG. */
.org-logo[b-i2d5rq9dh9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 16%;
    overflow: hidden;
    /* Per-identity hue is the inline --org-logo-bg (deterministic HSL — a deliberate
       per-org signal, NOT tokenised). Fallback + on-hue text ride design tokens
       (#842 Phase-4a avatar reconciliation; colour-equivalent — the fallback is unreachable). */
    background-color: var(--org-logo-bg, var(--k9-neutral));
    color: var(--k9-on-accent);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
}

.org-logo-sm[b-i2d5rq9dh9] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.9rem;
}

.org-logo-md[b-i2d5rq9dh9] {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
}

.org-logo-lg[b-i2d5rq9dh9] {
    width: 5rem;
    height: 5rem;
    font-size: 1.8rem;
}

.org-logo-initials[b-i2d5rq9dh9] {
    z-index: 0;
}

/* The image sits over the initials; on a 404 the inline onerror removes it, revealing
   the initials underneath. White backing so a transparent brand mark renders on a
   clean surface rather than the deterministic initials hue. */
.org-logo-img[b-i2d5rq9dh9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--k9-on-accent);
    z-index: 1;
}
/* /Components/Shared/ParticipantPicker.razor.rz.scp.css */
/* Participant search-result list — token-only surface the .k9-* primitive layer
   doesn't provide (a scrollable list of selectable rows). Component-scoped, so it
   sits outside the design-system-layer hex/namespace scans; token-driven regardless. */
.pp-list[b-zljtf8p2n6] {
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface);
}

.pp-item[b-zljtf8p2n6] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--k9-hairline);
    padding: 9px 13px;
    color: var(--k9-text);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.12s;
}

.pp-item:last-child[b-zljtf8p2n6] {
    border-bottom: 0;
}

.pp-item:hover:not(:disabled)[b-zljtf8p2n6] {
    background: var(--k9-surface-2);
}

.pp-item:focus-visible[b-zljtf8p2n6] {
    outline: 2px solid var(--k9-accent);
    outline-offset: -2px;
}

.pp-item:disabled[b-zljtf8p2n6] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Shared/PasswordInput.razor.rz.scp.css */
/* Phase 4g (A8) — PasswordInput on the design system. Component-scoped + token-only.
   The trailing show/hide toggle is overlaid INSIDE a .k9-input (Modern-SaaS eye-in-field)
   rather than an .input-group appendage. Behaviour is unchanged: the button keeps its
   data-password-toggle-target contract and the .password-toggle-eye / -eye-slash SVGs the
   inline script targets. Consumers: the auth Login/Register/ResetPassword pages + the
   already-migrated /my/profile change-password card. */

.pw-wrap[b-woo3gi9sc7] {
    position: relative;
}

/* Leave room on the right for the overlaid toggle (the .k9-input shorthand sets
   padding: 0 14px; this longhand wins by specificity + source order). */
.pw-input[b-woo3gi9sc7] {
    padding-right: 46px;
}

.pw-toggle[b-woo3gi9sc7] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--k9-text-3);
    border-radius: var(--k9-radius-sm);
    cursor: pointer;
    transition: color .15s, background .15s;
}

.pw-toggle:hover[b-woo3gi9sc7] {
    color: var(--k9-text);
    background: var(--k9-surface-2);
}

.pw-toggle:focus-visible[b-woo3gi9sc7] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 2px;
}

.pw-toggle svg[b-woo3gi9sc7] {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .pw-toggle[b-woo3gi9sc7] {
        transition: none;
    }
}
/* /Components/Shared/PersonAvatar.razor.rz.scp.css */
.person-avatar[b-blho231z7u] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    /* Per-identity hue is the inline --person-avatar-bg (deterministic HSL — a deliberate
       per-person signal, NOT tokenised). Fallback + on-hue text ride design tokens
       (#842 Phase-4a avatar reconciliation; colour-equivalent — the fallback is unreachable). */
    background-color: var(--person-avatar-bg, var(--k9-neutral));
    color: var(--k9-on-accent);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
}

.person-avatar-sm[b-blho231z7u] {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6rem;
}

.person-avatar-md[b-blho231z7u] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.9rem;
}

.person-avatar-lg[b-blho231z7u] {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
}

.person-avatar-initials[b-blho231z7u] {
    z-index: 0;
}

/* The image sits over the initials; on a 404 the inline onerror removes it,
   revealing the initials underneath. */
.person-avatar-img[b-blho231z7u] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* /Components/Shared/Sessions/SubTypeRowEditor.razor.rz.scp.css */
/* Sub-type row collapse toggle — styled as the row card's title (the ▼/▶ glyph +
   "Sub-type N"). A button so it stays keyboard-focusable; token-only, so both
   design-system CSS invariants hold (component-scoped, outside the scanned layer). */
.str-toggle[b-74itr28ryz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--k9-text);
    cursor: pointer;
    text-align: left;
}

.str-toggle:hover[b-74itr28ryz] {
    color: var(--k9-accent-text);
}

.str-toggle:focus-visible[b-74itr28ryz] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 3px;
    border-radius: var(--k9-radius-sm);
}
/* /Components/Shared/Taxonomy/LinkedItemChip.razor.rz.scp.css */
/* LinkedItemChip — token-scoped chip (Modern-SaaS design system). The chip body
   rides the token palette; the inline favourite / reorder / remove controls are
   bare icon-buttons coloured from --k9-* tokens so both themes track. */

.linked-item-chip[b-a3447y4gbz] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-pill);
    color: var(--k9-text);
    font-size: 12.5px;
}

.lic-btn[b-a3447y4gbz] {
    background: none;
    border: none;
    padding: 0 1px;
    line-height: 1;
    cursor: pointer;
    color: var(--k9-text-3);
}

.lic-btn:hover:not(:disabled)[b-a3447y4gbz] { color: var(--k9-text); }
.lic-btn:focus-visible[b-a3447y4gbz] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.lic-btn:disabled[b-a3447y4gbz] { opacity: .4; cursor: default; }

.lic-star.lic-on[b-a3447y4gbz] { color: var(--k9-fav); }
.lic-remove[b-a3447y4gbz] { color: var(--k9-red); }
/* /Components/Shared/Taxonomy/TaxonomyEditor.razor.rz.scp.css */
/* TaxonomyEditor — component-scoped styling (token-only, Modern-SaaS design system).
   Covers the selectable master list, the hierarchy tree, the favourite star, inline
   reorder icon-buttons, and small inset panels — surfaces the shared .k9-* primitive
   layer does not provide. Every colour is a --k9-* token so both themes track. */

/* Master list (left pane) — selectable rows with an active state. */
.tx-list[b-yjx0iswa51] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tx-item[b-yjx0iswa51] {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-sm);
    padding: 9px 12px;
    color: var(--k9-text);
    font: inherit;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

.tx-item:hover[b-yjx0iswa51] {
    background: var(--k9-surface-2);
    border-color: var(--k9-hairline-strong);
}

.tx-item:focus-visible[b-yjx0iswa51] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 1px;
}

.tx-item.tx-active[b-yjx0iswa51] {
    background: var(--k9-accent-soft);
    border-color: color-mix(in srgb, var(--k9-accent) 42%, transparent);
    color: var(--k9-accent-text);
}

.tx-empty-row[b-yjx0iswa51] {
    color: var(--k9-text-3);
    font-size: 13px;
    padding: 9px 2px;
}

/* Favourite star toggle. */
.tx-star[b-yjx0iswa51] {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: var(--k9-text-3);
    font-size: 15px;
}

.tx-star:hover:not(:disabled)[b-yjx0iswa51] { color: var(--k9-text-2); }
.tx-star:focus-visible[b-yjx0iswa51] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.tx-star.tx-on[b-yjx0iswa51] { color: var(--k9-fav); }
.tx-star:disabled[b-yjx0iswa51] { opacity: .5; cursor: default; }

/* Inline reorder / small icon buttons in the detail pane. */
.tx-iconbtn[b-yjx0iswa51] {
    background: none;
    border: none;
    padding: 0 2px;
    line-height: 1;
    cursor: pointer;
    color: var(--k9-text-3);
}

.tx-iconbtn:hover:not(:disabled)[b-yjx0iswa51] { color: var(--k9-text); }
.tx-iconbtn:focus-visible[b-yjx0iswa51] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.tx-iconbtn:disabled[b-yjx0iswa51] { opacity: .4; cursor: default; }

/* Small inset panel (inline add forms + history body). */
.tx-inset[b-yjx0iswa51] {
    background: var(--k9-surface-2);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    padding: 12px 14px;
}

.tx-hist-row[b-yjx0iswa51] { border-bottom: 1px solid var(--k9-hairline); padding: 5px 0; }
.tx-hist-row:last-child[b-yjx0iswa51] { border-bottom: none; }
.tx-hist-strike[b-yjx0iswa51] { text-decoration: line-through; color: var(--k9-text-3); }

/* Read-only hierarchy tree. */
.tx-tree[b-yjx0iswa51] { list-style: none; margin: 0; padding: 0; }
.tx-tree > li[b-yjx0iswa51] { margin-bottom: 8px; }

.tx-tree summary[b-yjx0iswa51] {
    cursor: pointer;
    font-weight: 600;
    color: var(--k9-text);
    padding: 4px 0;
}

.tx-tree summary:focus-visible[b-yjx0iswa51] { outline: 2px solid var(--k9-accent); outline-offset: 2px; }
.tx-tree ul[b-yjx0iswa51] { list-style: none; margin: 4px 0 0; padding-left: 26px; }
.tx-tree ul li[b-yjx0iswa51] { padding: 2px 0; color: var(--k9-text-2); }
/* /Components/Shared/UserMenu.razor.rz.scp.css */
/* User chip + menu — top-bar account control (UI overhaul #835 Phase 2, doc 25 § 4.3).
   Token-driven pill chip (avatar + name + caret). */
.user-menu[b-73om6wy3nn] {
    position: relative;
    display: inline-block;
}

.user-menu-toggle[b-73om6wy3nn] {
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 4px 10px 4px 4px;
    border-radius: var(--k9-radius-pill);
    border: 1px solid var(--k9-hairline);
    background: var(--k9-surface);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.user-menu-toggle[b-73om6wy3nn]::-webkit-details-marker {
    display: none;
}

.user-menu-toggle[b-73om6wy3nn]::marker {
    content: "";
}

.user-menu-toggle:hover[b-73om6wy3nn],
.user-menu[open] > .user-menu-toggle[b-73om6wy3nn] {
    box-shadow: var(--k9-shadow-sm);
    border-color: var(--k9-hairline-strong);
}

/* Visible accent focus ring (doc 25 § 7) — the chip is a bare <summary>, no .btn class. */
.user-menu-toggle:focus-visible[b-73om6wy3nn] {
    outline: 2px solid var(--k9-accent);
    outline-offset: 1px;
}

.user-menu-toggle .user-display-name[b-73om6wy3nn] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--k9-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.user-menu-toggle .chevron[b-73om6wy3nn] {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--k9-text-3);
}

.user-menu-dropdown[b-73om6wy3nn] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1050;
    min-width: 12rem;
    background-color: var(--k9-surface);
    border: 1px solid var(--k9-hairline);
    border-radius: var(--k9-radius-md);
    box-shadow: var(--k9-shadow-md);
    padding: 0.3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.user-menu-item[b-73om6wy3nn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--k9-radius-sm);
    color: var(--k9-text-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.user-menu-item .bi[b-73om6wy3nn] {
    color: var(--k9-text-3);
}

.user-menu-item:hover[b-73om6wy3nn],
.user-menu-item:focus[b-73om6wy3nn] {
    background-color: var(--k9-surface-2);
    color: var(--k9-text);
    text-decoration: none;
    outline: none;
}

.user-menu-divider[b-73om6wy3nn] {
    height: 1px;
    background-color: var(--k9-hairline);
    margin: 0.3rem 0;
}

/* ≤680px: collapse the chip to avatar-only (doc 25 § 4.4). */
@media (max-width: 680px) {
    .user-menu-toggle[b-73om6wy3nn] {
        padding: 0;
        border: none;
        background: transparent;
    }

    .user-menu-toggle:hover[b-73om6wy3nn],
    .user-menu[open] > .user-menu-toggle[b-73om6wy3nn] {
        box-shadow: none;
    }

    .user-menu-toggle .user-display-name[b-73om6wy3nn],
    .user-menu-toggle .chevron[b-73om6wy3nn] {
        display: none;
    }
}