@import '_content/ClientUi/ClientUi.jwcr19r7gs.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
  The shell's frame: the rail and the page side by side. Tokens come from ClientCommon's nocturne.css.
*/

.shell[b-fq3qcrodmt] {
    display: flex;
    min-height: 100vh;
}

.shell-main[b-fq3qcrodmt] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

#blazor-error-ui[b-fq3qcrodmt] {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: .6rem 1.25rem .7rem;
    border-top: 1px solid var(--nocturne-accent-edge);
    background: var(--nocturne-raised);
    color: var(--nocturne-text);
    font: 400 12.5px var(--font-sans);
}

#blazor-error-ui .reload[b-fq3qcrodmt] {
    color: var(--nocturne-accent-text);
}

#blazor-error-ui .dismiss[b-fq3qcrodmt] {
    position: absolute;
    top: .5rem;
    right: .75rem;
    cursor: pointer;
}

/* Print (#224): the page alone, from the top of the sheet. The sidebar hides itself. */
@media print {
    .shell[b-fq3qcrodmt] {
        display: block;
        min-height: 0;
    }

    .shell-main[b-fq3qcrodmt] {
        display: block;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-h8fjlhc62a],
.components-reconnect-repeated-attempt-visible[b-h8fjlhc62a],
.components-reconnect-failed-visible[b-h8fjlhc62a],
.components-pause-visible[b-h8fjlhc62a],
.components-resume-failed-visible[b-h8fjlhc62a],
.components-rejoining-animation[b-h8fjlhc62a] {
    display: none;
}

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


/* The template's dialog, painted from the Nocturne tokens (#328) so it follows the theme like the page under it. */
#components-reconnect-modal[b-h8fjlhc62a] {
    background-color: var(--nocturne-surface);
    color: var(--nocturne-text);
    font-family: var(--font-sans);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--nocturne-line);
    border-radius: 0.5rem;
    box-shadow: var(--nocturne-shadow);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-h8fjlhc62a 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-h8fjlhc62a] {
    border: 1px solid var(--nocturne-accent-edge);
    background-color: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-h8fjlhc62a] {
        background-color: var(--nocturne-accent-wash-strong);
    }

    #components-reconnect-modal button:focus-visible[b-h8fjlhc62a] {
        outline: 2px solid var(--nocturne-accent-bright);
        outline-offset: 2px;
    }

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

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

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

@keyframes components-rejoining-animation-b-h8fjlhc62a {
    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;
    }
}
/* /Features/Shell/ShellPage.razor.rz.scp.css */
/*
  The top bar and the page container, from design/"App shell - issue 32.dc.html" 1a: a 48px bar that
  holds only where-you-are — who-you-are moved to the navigation with #394 — and a 22px / 26px gutter
  every signed-in route shares.
  Tokens come from ClientCommon's nocturne.css.
*/

.page-bar[b-qgcgivc1um] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 22px;
    border-bottom: 1px solid var(--nocturne-line-soft);
    background: var(--nocturne-ground);
    font-family: var(--font-sans);
}

.page-bar-context[b-qgcgivc1um] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-bar-title[b-qgcgivc1um],
.page-bar-crumbs[b-qgcgivc1um] {
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}

.page-bar-title[b-qgcgivc1um],
.page-bar-current[b-qgcgivc1um] {
    overflow: hidden;
    color: var(--nocturne-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-bar-crumbs[b-qgcgivc1um] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.page-bar-parent[b-qgcgivc1um] {
    flex: none;
    color: var(--nocturne-text-muted);
    text-decoration: none;
}

.page-bar-parent:hover[b-qgcgivc1um] {
    color: var(--nocturne-text);
}

.page-bar-parent:focus-visible[b-qgcgivc1um] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.page-bar-sep[b-qgcgivc1um] {
    color: var(--nocturne-text-faintest);
}

.page-bar-meta[b-qgcgivc1um] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

.page-container[b-qgcgivc1um] {
    flex: 1;
    padding: 22px 26px;
}

/* The navigation's menu button and New session: only below 640px, where the navigation is a drawer (#394). */
.page-bar-menu[b-qgcgivc1um],
.page-bar-new[b-qgcgivc1um] {
    display: none;
}

/*
  The way back up, from design/"Conversation drawer - issue 85.dc.html" 2a: below 1024px only. At full
  width the sidebar sits beside the page.
*/
.page-bar-back[b-qgcgivc1um] {
    display: none;
}

/* "Back to", for assistive technology only: the eye reads the caret as the "back". */
.page-bar-back-hint[b-qgcgivc1um] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Narrow, below 1024px (design/"Responsive pass - issue 36.dc.html" 1b, 1c): an 18px gutter, which is
   part of what leaves the stacked cards their width beside the icon rail. */
@media (width < 1024px) {
    .page-bar[b-qgcgivc1um] {
        padding: 0 18px;
    }

    .page-container[b-qgcgivc1um] {
        padding: 18px;
    }

    /* A 44px target, name included, pulled into the gutter so the caret sits where the mark did. It
       never shrinks: the title beside it truncates first (2b). */
    .page-bar-back[b-qgcgivc1um] {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 3px;
        min-width: 44px;
        min-height: 44px;
        margin-left: -8px;
        padding: 0 8px 0 6px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        font: inherit;
        font-size: 14px;
        color: var(--nocturne-accent-text);
        text-decoration: none;
        cursor: pointer;
    }

    .page-bar-back-caret[b-qgcgivc1um] {
        display: flex;
        color: var(--nocturne-accent);
    }

    .page-bar-back:hover[b-qgcgivc1um] {
        background: var(--nocturne-accent-wash);
    }

    .page-bar-back:focus-visible[b-qgcgivc1um] {
        outline: 2px solid var(--nocturne-accent);
        outline-offset: -2px;
    }
}

/* Compact, below 640px: the menu that opens the navigation on the left, New session on the right, as the app's top
   bar has them, and the gutter tightens again. */
@media (width < 640px) {
    .page-bar[b-qgcgivc1um] {
        gap: 10px;
        padding: 0 14px;
    }

    .page-bar-menu[b-qgcgivc1um],
    .page-bar-new[b-qgcgivc1um] {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--nocturne-text-dim);
        cursor: pointer;
    }

    .page-bar-menu[b-qgcgivc1um] {
        margin-left: -10px;
    }

    .page-bar-new[b-qgcgivc1um] {
        margin-right: -10px;
        margin-left: auto;
    }

    .page-bar-menu:hover[b-qgcgivc1um],
    .page-bar-new:hover[b-qgcgivc1um] {
        background: var(--nocturne-hover-wash);
        color: var(--nocturne-text);
    }

    .page-bar-menu:focus-visible[b-qgcgivc1um],
    .page-bar-new:focus-visible[b-qgcgivc1um] {
        outline: 2px solid var(--nocturne-accent);
        outline-offset: -2px;
    }

    /* A detail page's way back up, thumb-sized like every other control at this width. */
    .page-bar-parent[b-qgcgivc1um] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .page-container[b-qgcgivc1um] {
        padding: 14px;
    }
}

/* Under 340px the destination's name goes before the title does (2b): the caret stays, and the name
   stays for assistive technology. */
@media (width < 340px) {
    .page-bar-back[b-qgcgivc1um] {
        justify-content: center;
        padding: 0;
    }

    .page-bar-back-label[b-qgcgivc1um] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Print (#224): where-you-are is the screen's, and the sheet keeps its own margins. */
@media print {
    .page-bar[b-qgcgivc1um] {
        display: none;
    }

    .page-container[b-qgcgivc1um] {
        padding: 0;
    }
}
/* /Features/Shell/Sidebar.razor.rz.scp.css */
/*
  The navigation, from design/"Unified nav drawer - issue 394.dc.html". Tokens come from ClientUi's nocturne.css.

  One element, three layouts:
  - 1024px and up: a 232px sidebar (1a, 1b), or the 56px rail (1c) while .is-collapsed.
  - 640px to 1023px: the rail, always; .is-expanded (nav.js) lays the full sidebar over the page.
  - Below 640px: out of the layout, and a full-screen drawer while open as a popover (1d, 1e).

  The element is a popover so the drawer is the browser's to open, close on Escape and put in the top layer. Where it
  is docked, it is not open as one, so the user agent's popover sheet — display: none, position: fixed, a border, a
  padding, Canvas colours — is overridden here for every state.

  The rail's rules are written twice, once per media query (1024px and up while collapsed; 640px to 1023px while not
  expanded): CSS has no way to say "this width or that class" in one selector.
*/

.sidebar[b-0b9sq5crdm] {
    position: sticky;
    top: 0;
    inset-inline: auto;
    bottom: auto;

    /* Above the page's own bar (z-index 10), so a flyout or the account menu is never painted under it. */
    z-index: 30;
    display: flex;
    flex: none;
    flex-direction: column;
    box-sizing: border-box;
    width: 232px;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-right: 1px solid var(--nocturne-line-soft);
    background: var(--nocturne-rail);
    color: var(--nocturne-text);
    font-family: var(--font-sans);
}

/* The head: the mark and the name, and the control that folds the sidebar to its rail. */
.nav-head[b-0b9sq5crdm] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 8px 4px 16px;
}

/* The drawer's way out; only below 640px. */
.nav-close[b-0b9sq5crdm] {
    display: none;
}

.nav-brand[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--nocturne-text);
    text-decoration: none;
}

.nav-collapse[b-0b9sq5crdm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--nocturne-text-muted);
    cursor: pointer;
}

.nav-collapse:hover[b-0b9sq5crdm] {
    background: var(--nocturne-accent-wash);
    color: var(--nocturne-accent-text);
}

/* The client's primary action is the accent outline (StateAction's is-primary). */
.nav-new[b-0b9sq5crdm] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 4px 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--nocturne-accent-text);
    text-decoration: none;
}

.nav-new:hover[b-0b9sq5crdm] {
    background: var(--nocturne-accent-wash-strong);
}

/* The two sections, which scroll between New session and the account when both are open on a short window. */
.nav-sections[b-0b9sq5crdm] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    padding: 14px 8px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-section > summary[b-0b9sq5crdm] {
    list-style: none;
}

.nav-section > summary[b-0b9sq5crdm]::-webkit-details-marker {
    display: none;
}

.nav-section-head[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px 0 11px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nocturne-text-dim);
    cursor: pointer;
}

.nav-section-head[b-0b9sq5crdm]  svg {
    flex: none;
    color: var(--nocturne-text-muted);
}

.nav-section-head:hover[b-0b9sq5crdm] {
    background: var(--nocturne-hover-wash);
}

/* The section the page on screen is in: its icon in the accent, its name at full strength (1a). */
.nav-section-head.is-current[b-0b9sq5crdm] {
    color: var(--nocturne-text);
}

.nav-section-head.is-current[b-0b9sq5crdm]  svg {
    color: var(--nocturne-accent);
}

.nav-count[b-0b9sq5crdm] {
    font: 400 10px var(--font-mono);
    color: var(--nocturne-text-faint);
}

.nav-caret[b-0b9sq5crdm] {
    display: inline-flex;
    margin-left: auto;
    color: var(--nocturne-text-faint);
    transition: transform .12s ease;
}

.nav-section[open] > summary .nav-caret[b-0b9sq5crdm] {
    transform: rotate(90deg);
}

/* Only on the rail, where the line it stands for is in the flyout. */
.nav-due-dot[b-0b9sq5crdm] {
    display: none;
}

.nav-rows[b-0b9sq5crdm] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-row[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px 0 34px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--nocturne-text-muted);
    text-decoration: none;
}

.nav-row:hover[b-0b9sq5crdm] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

/* The page on screen: a tint and a 2px accent edge, not colour alone, so it survives a high-contrast mode. */
.nav-row.is-current[b-0b9sq5crdm] {
    background: var(--nocturne-accent-wash-strong);
    box-shadow: inset 2px 0 0 var(--nocturne-accent);
    color: var(--nocturne-text);
}

.nav-row.is-see-all[b-0b9sq5crdm] {
    gap: 5px;
    font-size: 12px;
    color: var(--nocturne-accent-text);
}

/* "n due for review" (#219): the one count here that asks for something, in the accent. */
.nav-row.is-due[b-0b9sq5crdm] {
    color: var(--nocturne-accent-text);
}

.nav-due-mark[b-0b9sq5crdm] {
    flex: none;
    width: 6px;
    height: 6px;
    margin-left: -14px;
    border-radius: 50%;
    background: var(--nocturne-accent);
}

.nav-row-name[b-0b9sq5crdm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A recommendation's preview is the renderer's markup; it keeps to the row's one line. */
.nav-row-name[b-0b9sq5crdm]  * {
    display: inline;
    margin: 0;
}

/* A conversation the council is answering now. */
.nav-live[b-0b9sq5crdm] {
    flex: none;
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--nocturne-accent);
    animation: nav-live-b-0b9sq5crdm 1.6s ease-in-out infinite;
}

@keyframes nav-live-b-0b9sq5crdm {
    50% {
        opacity: .35;
    }
}

.nav-note[b-0b9sq5crdm] {
    margin: 0;
    padding: 6px 10px 6px 34px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

.nav-retry[b-0b9sq5crdm] {
    color: var(--nocturne-accent-text);
}

.nav-divider[b-0b9sq5crdm] {
    flex: none;
    height: 1px;
    margin: 8px 4px;
    background: linear-gradient(90deg, var(--nocturne-line), transparent);
}

/* Who is signed in. The menu unfolds upward over the sections, never over the page (1b). */
.nav-account[b-0b9sq5crdm] {
    position: relative;
    flex: none;
    padding: 8px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.nav-account[open][b-0b9sq5crdm] {
    background: var(--nocturne-surface);
}

.nav-account > summary[b-0b9sq5crdm] {
    list-style: none;
}

.nav-account > summary[b-0b9sq5crdm]::-webkit-details-marker {
    display: none;
}

.nav-account-row[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--nocturne-text);
    cursor: pointer;
}

.nav-account-row:hover[b-0b9sq5crdm],
.nav-account[open] .nav-account-row[b-0b9sq5crdm] {
    background: var(--nocturne-hover-wash);
}

.nav-account[open] .nav-caret[b-0b9sq5crdm] {
    transform: rotate(180deg);
}

.nav-avatar[b-0b9sq5crdm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    font: 400 9.5px var(--font-mono);
    color: var(--nocturne-accent-text);
}

.nav-account-name[b-0b9sq5crdm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-panel[b-0b9sq5crdm] {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 8px;
    border-top: 1px solid var(--nocturne-line-soft);
    background: var(--nocturne-surface);
}

.nav-identity[b-0b9sq5crdm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--nocturne-line-soft);
}

.nav-identity-name[b-0b9sq5crdm] {
    font-size: 13px;
    font-weight: 500;
    color: var(--nocturne-text);
}

.nav-identity-email[b-0b9sq5crdm] {
    overflow: hidden;
    font-size: 11.5px;
    color: var(--nocturne-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-form[b-0b9sq5crdm] {
    margin: 0;
}

.nav-account-item[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: 400 12.5px var(--font-sans);
    color: var(--nocturne-text-dim);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.nav-account-item[b-0b9sq5crdm]  svg {
    flex: none;
    color: var(--nocturne-text-muted);
}

.nav-account-item:hover[b-0b9sq5crdm] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

/* Signed out: the way in, labelled at every width. */
.nav-anonymous[b-0b9sq5crdm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 10px 0;
}

.nav-link[b-0b9sq5crdm] {
    padding: 8px 11px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--nocturne-text-dim);
    text-decoration: none;
}

.nav-link:hover[b-0b9sq5crdm] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

.nav-close:focus-visible[b-0b9sq5crdm],
.nav-brand:focus-visible[b-0b9sq5crdm],
.nav-collapse:focus-visible[b-0b9sq5crdm],
.nav-new:focus-visible[b-0b9sq5crdm],
.nav-section-head:focus-visible[b-0b9sq5crdm],
.nav-row:focus-visible[b-0b9sq5crdm],
.nav-retry:focus-visible[b-0b9sq5crdm],
.nav-account-row:focus-visible[b-0b9sq5crdm],
.nav-account-item:focus-visible[b-0b9sq5crdm],
.nav-link:focus-visible[b-0b9sq5crdm] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-caret[b-0b9sq5crdm] {
        transition: none;
    }

    .nav-live[b-0b9sq5crdm] {
        animation: none;
    }
}

/*
  The rail, 1024px and up, once its reader collapsed it (1c): 56px, icons only, in the same order — expand, the
  mark, New session, Councils, Decisions, the avatar. A label leaves the eye but not the markup, and New session's
  comes back as a tooltip. A section's rows come back as a flyout beside its icon, on hover or keyboard focus; the
  account's menu opens beside the avatar.
*/
@media (width >= 1024px) {
    .sidebar.is-collapsed:not(.is-anonymous)[b-0b9sq5crdm] {
        align-items: center;
        width: 56px;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-head[b-0b9sq5crdm] {
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding: 8px 0 4px;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-collapse[b-0b9sq5crdm] {
        order: -1;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-new[b-0b9sq5crdm] {
        position: relative;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        margin: 10px 0 0;
        padding: 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-sections[b-0b9sq5crdm] {
        align-items: center;
        gap: 2px;
        padding: 14px 0 0;
        overflow: visible;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-section[b-0b9sq5crdm] {
        position: relative;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-section-head[b-0b9sq5crdm] {
        position: relative;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 0;
        box-sizing: border-box;
        padding: 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-section-head.is-current[b-0b9sq5crdm] {
        background: var(--nocturne-accent-wash-strong);
        box-shadow: inset 2px 0 0 var(--nocturne-accent);
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-count[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-caret[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-account-name[b-0b9sq5crdm] {
        display: none;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-due-dot[b-0b9sq5crdm] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--nocturne-accent);
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-wordmark[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-label[b-0b9sq5crdm] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-new:hover .nav-label[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-new:focus-visible .nav-label[b-0b9sq5crdm] {
        top: 50%;
        left: calc(100% + 12px);
        width: auto;
        height: auto;
        margin: 0;
        padding: 4px 8px;
        overflow: visible;
        clip-path: none;
        border: 1px solid var(--nocturne-line);
        border-radius: 6px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow);
        font-size: 13px;
        color: var(--nocturne-text);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-rows[b-0b9sq5crdm] {
        position: absolute;
        top: 0;
        left: calc(100% + 10px);
        z-index: 1;
        display: none;
        box-sizing: border-box;
        width: 248px;
        padding: 6px;
        border: 1px solid var(--nocturne-line);
        border-radius: 10px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow-menu);
    }

    /* The gap between the icon and its flyout still counts as the section, so the pointer can cross it. */
    .sidebar.is-collapsed:not(.is-anonymous) .nav-rows[b-0b9sq5crdm]::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
        content: "";
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-section:hover > .nav-rows[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-section:focus-within > .nav-rows[b-0b9sq5crdm] {
        display: flex;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-row[b-0b9sq5crdm],
    .sidebar.is-collapsed:not(.is-anonymous) .nav-note[b-0b9sq5crdm] {
        padding-left: 10px;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-due-mark[b-0b9sq5crdm] {
        margin-left: 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-divider[b-0b9sq5crdm] {
        width: 24px;
        margin: 6px 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-account[b-0b9sq5crdm] {
        align-self: stretch;
        padding: 8px 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-account-row[b-0b9sq5crdm] {
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 0;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-account-row .nav-caret[b-0b9sq5crdm] {
        display: none;
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-account-panel[b-0b9sq5crdm] {
        right: auto;
        bottom: 8px;
        left: calc(100% + 10px);
        width: 232px;
        box-sizing: border-box;
        border: 1px solid var(--nocturne-line);
        border-radius: 10px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow-menu);
    }

    .sidebar.is-collapsed:not(.is-anonymous) .nav-account[open][b-0b9sq5crdm] {
        background: transparent;
    }
}

/*
  640px to 1023px: the rail, whatever was chosen at full width, because the page needs the room. Its expand control
  lays the full sidebar over the page (.is-expanded) — wider, but still 56px in the layout, so nothing beside it
  moves — until the next navigation, Escape or a click outside it (nav.js). Signed out, the rail keeps its labels.
*/
@media (640px <= width < 1024px) {
    .sidebar.is-expanded:not(.is-anonymous)[b-0b9sq5crdm] {
        z-index: 40;
        margin-right: -176px;
        box-shadow: var(--nocturne-shadow-drawer);
    }

    .sidebar:not(.is-anonymous):not(.is-expanded)[b-0b9sq5crdm] {
        align-items: center;
        width: 56px;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-head[b-0b9sq5crdm] {
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding: 8px 0 4px;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-collapse[b-0b9sq5crdm] {
        order: -1;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-new[b-0b9sq5crdm] {
        position: relative;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        margin: 10px 0 0;
        padding: 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-sections[b-0b9sq5crdm] {
        align-items: center;
        gap: 2px;
        padding: 14px 0 0;
        overflow: visible;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-section[b-0b9sq5crdm] {
        position: relative;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-section-head[b-0b9sq5crdm] {
        position: relative;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 0;
        box-sizing: border-box;
        padding: 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-section-head.is-current[b-0b9sq5crdm] {
        background: var(--nocturne-accent-wash-strong);
        box-shadow: inset 2px 0 0 var(--nocturne-accent);
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-count[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-caret[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-account-name[b-0b9sq5crdm] {
        display: none;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-due-dot[b-0b9sq5crdm] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--nocturne-accent);
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-wordmark[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-label[b-0b9sq5crdm] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-new:hover .nav-label[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-new:focus-visible .nav-label[b-0b9sq5crdm] {
        top: 50%;
        left: calc(100% + 12px);
        width: auto;
        height: auto;
        margin: 0;
        padding: 4px 8px;
        overflow: visible;
        clip-path: none;
        border: 1px solid var(--nocturne-line);
        border-radius: 6px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow);
        font-size: 13px;
        color: var(--nocturne-text);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-rows[b-0b9sq5crdm] {
        position: absolute;
        top: 0;
        left: calc(100% + 10px);
        z-index: 1;
        display: none;
        box-sizing: border-box;
        width: 248px;
        padding: 6px;
        border: 1px solid var(--nocturne-line);
        border-radius: 10px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow-menu);
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-rows[b-0b9sq5crdm]::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
        content: "";
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-section:hover > .nav-rows[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-section:focus-within > .nav-rows[b-0b9sq5crdm] {
        display: flex;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-row[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-note[b-0b9sq5crdm] {
        padding-left: 10px;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-due-mark[b-0b9sq5crdm] {
        margin-left: 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-divider[b-0b9sq5crdm] {
        width: 24px;
        margin: 6px 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-account[b-0b9sq5crdm] {
        align-self: stretch;
        padding: 8px 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-account-row[b-0b9sq5crdm] {
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 0;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0;
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-account-panel[b-0b9sq5crdm] {
        right: auto;
        bottom: 8px;
        left: calc(100% + 10px);
        width: 232px;
        box-sizing: border-box;
        border: 1px solid var(--nocturne-line);
        border-radius: 10px;
        background: var(--nocturne-raised);
        box-shadow: var(--nocturne-shadow-menu);
    }

    .sidebar:not(.is-anonymous):not(.is-expanded) .nav-account[open][b-0b9sq5crdm] {
        background: transparent;
    }
}

/*
  Below 640px (1d, 1e): the app's drawer. Out of the layout until the page bar's menu button opens it, then the whole
  screen, with 44px targets and one section open at a time (nav.js). Opening the account folds both sections, as the
  app does, so its menu has the room.
*/
@media (width < 640px) {
    .sidebar:not(:popover-open)[b-0b9sq5crdm] {
        display: none;
    }

    .sidebar:popover-open[b-0b9sq5crdm] {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        border-right: 0;
        background: var(--nocturne-ground);
        overflow: hidden;
        animation: nav-in-b-0b9sq5crdm 160ms ease-out;
    }

    .nav-head[b-0b9sq5crdm] {
        gap: 2px;
        min-height: 52px;
        padding: 0 4px;
    }

    .nav-close[b-0b9sq5crdm] {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--nocturne-text-dim);
        cursor: pointer;
    }

    .nav-brand[b-0b9sq5crdm] {
        min-height: 44px;
        padding: 0 4px;
        font-size: 14px;
    }

    .nav-collapse[b-0b9sq5crdm] {
        display: none;
    }

    .nav-new[b-0b9sq5crdm] {
        min-height: 44px;
        box-sizing: border-box;
        margin: 6px 12px 12px;
        padding: 0 14px;
    }

    .nav-sections[b-0b9sq5crdm] {
        gap: 2px;
        padding: 0 8px 8px;
    }

    .nav-section-head[b-0b9sq5crdm] {
        gap: 10px;
        min-height: 48px;
        padding: 0 12px 0 14px;
        font-size: 14px;
    }

    .nav-section[open] > .nav-section-head[b-0b9sq5crdm] {
        background: var(--nocturne-hover-wash);
    }

    .nav-row[b-0b9sq5crdm] {
        min-height: 44px;
        padding: 0 12px 0 44px;
        font-size: 13px;
    }

    .nav-note[b-0b9sq5crdm] {
        padding: 8px 12px 8px 44px;
        font-size: 12.5px;
    }

    .nav-retry[b-0b9sq5crdm] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .nav-account[b-0b9sq5crdm] {
        padding: 6px 8px 8px;
    }

    .nav-account-row[b-0b9sq5crdm],
    .nav-account-item[b-0b9sq5crdm] {
        min-height: 44px;
        padding: 0 12px 0 14px;
        font-size: 13px;
    }

    .nav-avatar[b-0b9sq5crdm] {
        width: 26px;
        height: 26px;
        font-size: 9px;
    }

    .nav-account-panel[b-0b9sq5crdm] {
        padding: 6px 8px 4px;
    }

    .nav-link[b-0b9sq5crdm] {
        display: flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
    }
}

@keyframes nav-in-b-0b9sq5crdm {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
}

@media (width < 640px) and (prefers-reduced-motion: reduce) {
    .sidebar:popover-open[b-0b9sq5crdm] {
        animation: none;
    }
}

/* Print (#224): navigation has no place on paper. */
@media print {
    .sidebar[b-0b9sq5crdm] {
        display: none;
    }
}