@import '_content/ClientCommon/ClientCommon.rvh83ggni2.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;
}

/* Below 640px the sidebar is a fixed 56px bar along the foot of the window (Sidebar.razor.css), so the
   page keeps that much clear under its last line. */
@media (width < 640px) {
    .shell-main[b-fq3qcrodmt] {
        padding-bottom: 56px;
    }
}

#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;
}
/* /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;
}


#components-reconnect-modal[b-h8fjlhc62a] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    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: rgba(0, 0, 0, 0.4);
    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: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-h8fjlhc62a] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-h8fjlhc62a] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-h8fjlhc62a] {
        position: absolute;
        border: 3px solid #0087ff;
        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/Conversations/Conversation.razor.rz.scp.css */
/*
  The conversation page, from design/"Conversation page - issue 34.dc.html": 1a the page mid-turn — the
  turn rail on the left, earlier turns collapsed above the live one, both cards side by side, the
  secretary offer and the composer; 1c the composer's mention states; 1d the stack below the
  breakpoint, with the composer pinned to the bottom. The title, the turn and the hub link sit in the
  shell's top bar (ShellPage), from design/"App shell - issue 32.dc.html".

  v1-accurate: two seats, one phase, no rounds and no branching. Tokens come from ClientCommon's nocturne.css.
*/

.session-frame[b-28vp4ox56z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 20px;
    max-width: 1180px;
    margin: 0 auto;
}

.session-frame.has-rail[b-28vp4ox56z] {
    grid-template-columns: 44px minmax(0, 1fr);
}

/* 1a's rail: T1, T2… with the current turn lit and a dot under it. Sticky, so it keeps tracking
   position while the reader scrolls a long turn. */
.turn-rail[b-28vp4ox56z] {
    position: sticky;
    top: 12px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    border-right: 1px solid var(--nocturne-line-soft);
}

.turn-rail-item[b-28vp4ox56z] {
    position: relative;
    padding: 3px 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
    cursor: pointer;
}

.turn-rail-item + .turn-rail-item[b-28vp4ox56z] {
    margin-top: 28px;
}

.turn-rail-item + .turn-rail-item[b-28vp4ox56z]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -25px;
    width: 1px;
    height: 22px;
    background: var(--nocturne-line);
}

.turn-rail-item.is-current[b-28vp4ox56z] {
    color: var(--nocturne-accent-text);
}

.turn-rail-item.is-current[b-28vp4ox56z]::after {
    content: "";
    position: absolute;
    left: calc(50% - 2.5px);
    bottom: -9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nocturne-accent);
}

.turn-rail-item:hover[b-28vp4ox56z],
.turn-rail-item:focus-visible[b-28vp4ox56z] {
    color: var(--nocturne-text);
    background: var(--nocturne-hover-wash);
}

.session[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

/* Beside the title in the top bar: which turn the session is on. */
.session-turn[b-28vp4ox56z] {
    font-family: var(--font-mono);
    letter-spacing: .04em;
}

/*
  The hub link, always shown. A banner appears only when something is wrong, so without this there is
  nowhere that says the feed is healthy.
*/
.session-link[b-28vp4ox56z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--nocturne-line);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-muted);
}

.session-link-pip[b-28vp4ox56z] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nocturne-text-faint);
}

.session-link-live[b-28vp4ox56z] {
    border-color: var(--nocturne-line-strong);
    background: var(--nocturne-accent-wash);
    color: var(--nocturne-accent-text);
}

.session-link-live .session-link-pip[b-28vp4ox56z] {
    background: var(--nocturne-accent);
    animation: session-pulse-b-28vp4ox56z 1.1s steps(1, end) infinite;
}

.session-link-connecting .session-link-pip[b-28vp4ox56z],
.session-link-reconnecting .session-link-pip[b-28vp4ox56z] {
    background: var(--nocturne-accent-faded);
    animation: session-pulse-b-28vp4ox56z 1.1s steps(1, end) infinite;
}

/* The round trip from a saved decision: where the reader came from, and the way back. */
.session-banner[b-28vp4ox56z] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 9px;
    background: var(--nocturne-accent-wash);
}

.banner-text[b-28vp4ox56z] {
    font-size: 12.5px;
    color: var(--nocturne-text-dim);
}

.session-error[b-28vp4ox56z] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--nocturne-line);
    border-left: 2px solid var(--nocturne-accent);
    border-radius: 8px;
    background: var(--nocturne-raised);
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

/* 1a's earlier turns: one dimmed line each, the question cut to one line, a fading rule after it.
   Opening one draws its answers in place. */
.past-turn[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 16px;
}

.past-turn-head[b-28vp4ox56z] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    opacity: .5;
    cursor: pointer;
}

.past-turn-head:hover[b-28vp4ox56z],
.past-turn-head:focus-visible[b-28vp4ox56z],
.past-turn.is-open .past-turn-head[b-28vp4ox56z],
.past-turn.is-saved .past-turn-head[b-28vp4ox56z] {
    opacity: 1;
}

.past-turn-number[b-28vp4ox56z] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--nocturne-text-muted);
}

.past-turn-question[b-28vp4ox56z] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--nocturne-text-muted);
}

.past-turn-mark[b-28vp4ox56z] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--nocturne-accent-text);
}

.past-turn-rule[b-28vp4ox56z] {
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--nocturne-line-soft), transparent);
}

.past-turn-body[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 6px 0 10px;
    padding: 14px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 10px;
    background: var(--nocturne-surface);
}

/* The exchange the reader came for from the journal. */
.past-turn.is-saved .past-turn-body[b-28vp4ox56z] {
    border-color: var(--nocturne-accent-edge);
}

.past-turn-full[b-28vp4ox56z] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--nocturne-text);
    white-space: pre-wrap;
    text-wrap: pretty;
}

.past-answers[b-28vp4ox56z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.answer[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 8px;
    background: var(--nocturne-raised);
}

.answer.is-failed[b-28vp4ox56z] {
    border-style: dashed;
}

.answer-head[b-28vp4ox56z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mark[b-28vp4ox56z] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
    font-family: var(--font-mono);
    font-size: 8px;
}

.answer-name[b-28vp4ox56z] {
    font-size: 12px;
    font-weight: 500;
    color: var(--nocturne-text-dim);
}

.answer-position[b-28vp4ox56z] {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--nocturne-accent-faded);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .02em;
    color: var(--nocturne-accent-text);
}

.answer-text[b-28vp4ox56z],
.answer-failure[b-28vp4ox56z],
.secretary-text[b-28vp4ox56z] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--nocturne-text-dim);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.answer-failure[b-28vp4ox56z] {
    color: var(--nocturne-text-faint);
}

/* What the secretary concluded, as it was written into the transcript — a rendering of the decision,
   never the record. What was kept is on the decision itself. */
.turn-secretary[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border: 1px dashed var(--nocturne-line-mid);
    border-radius: 8px;
}

.turn-secretary-head[b-28vp4ox56z] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--nocturne-text-faint);
}

/* The live question: 1a's "YOU" line, with the chip when the server routed it. */
.session-question[b-28vp4ox56z] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 4px 0;
    scroll-margin-top: 16px;
}

.session-question-who[b-28vp4ox56z] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-muted);
}

.session-question-body[b-28vp4ox56z] {
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--nocturne-text);
}

.session-question.is-unrouted .session-question-body[b-28vp4ox56z] {
    color: var(--nocturne-text-dim);
}

.session-question-text[b-28vp4ox56z] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mention-chip[b-28vp4ox56z] {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--nocturne-accent-deep);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--nocturne-accent-text);
}

/* Dashed and drained of colour: the handle was written, and nothing answers to it. */
.mention-chip.is-unmatched[b-28vp4ox56z] {
    border: 1px dashed var(--nocturne-text-faint);
    background: transparent;
    color: var(--nocturne-text-dim);
}

.session-notice[b-28vp4ox56z] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
}

.session-notice-icon[b-28vp4ox56z] {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    color: var(--nocturne-accent-text);
}

.session-notice-body[b-28vp4ox56z] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.session-notice-headline[b-28vp4ox56z] {
    font-size: 12.5px;
    color: var(--nocturne-accent-text);
}

.session-notice-detail[b-28vp4ox56z] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

/* 1b: each card keeps its own height — the faster model does not drag the slower one's box. */
.session-seats[b-28vp4ox56z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

/* 1a's secretary offer, between the cards and the composer. */
.secretary-offer[b-28vp4ox56z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
}

.secretary-offer-mark[b-28vp4ox56z] {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    color: var(--nocturne-accent-text);
}

.secretary-offer-text[b-28vp4ox56z] {
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--nocturne-text-dim);
}

.mono-handle[b-28vp4ox56z] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nocturne-accent-text);
}

.secretary-offer-action[b-28vp4ox56z] {
    flex: none;
    margin-left: auto;
    padding: 6px 11px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--nocturne-text);
    cursor: pointer;
}

.secretary-offer-action:hover[b-28vp4ox56z],
.secretary-offer-action:focus-visible[b-28vp4ox56z] {
    border-color: var(--nocturne-accent);
    background: var(--nocturne-accent-wash-strong);
}

/* The synthesis sits under the seats and is marked out from them — see SecretaryPanel.razor.css. */

.session-ask[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.session-composer[b-28vp4ox56z] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised-alt);
}

.session-composer:focus-within[b-28vp4ox56z] {
    border-color: var(--nocturne-accent-edge);
}

/* While a handle is being typed the composer is a routing control, and says so. */
.session-composer.is-routing[b-28vp4ox56z] {
    border-color: var(--nocturne-accent);
    box-shadow: 0 0 0 3px var(--nocturne-accent-wash);
}

/* 1c: a message going to one seat carries the accent; one that falls back to both does not. */
.session-composer.is-routed[b-28vp4ox56z] {
    border-color: var(--nocturne-line-strong);
}

.session-composer.is-unmatched[b-28vp4ox56z] {
    border-color: var(--nocturne-line-mid);
}

.session-composer textarea[b-28vp4ox56z] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    resize: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nocturne-text);
}

.session-composer textarea:focus[b-28vp4ox56z] {
    outline: none;
}

.session-composer textarea[b-28vp4ox56z]::placeholder {
    color: var(--nocturne-text-faint);
}

.session-route[b-28vp4ox56z] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--nocturne-text-dim);
}

.session-route .mention-chip[b-28vp4ox56z] {
    font-size: 10.5px;
}

.session-route.is-unmatched[b-28vp4ox56z] {
    color: var(--nocturne-text);
}

.session-composer-foot[b-28vp4ox56z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-composer-hint[b-28vp4ox56z] {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--nocturne-text-muted);
}

.session-send[b-28vp4ox56z],
.session-stop[b-28vp4ox56z] {
    flex: none;
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
}

.session-send[b-28vp4ox56z] {
    border: 1px solid var(--nocturne-accent);
    color: var(--nocturne-accent-text);
}

.session-send:hover:not(:disabled)[b-28vp4ox56z] {
    background: var(--nocturne-accent-wash-strong);
}

.session-send:disabled[b-28vp4ox56z] {
    border-color: var(--nocturne-line);
    color: var(--nocturne-text-faint);
    cursor: default;
}

.session-stop[b-28vp4ox56z] {
    border: 1px solid var(--nocturne-line);
    color: var(--nocturne-text-muted);
}

.session-stop:hover[b-28vp4ox56z] {
    border-color: var(--nocturne-accent);
    color: var(--nocturne-accent-text);
}

.session-hint[b-28vp4ox56z] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 1em;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faintest);
}

/* Loading and failure, drawn in the space the conversation will take. */
.session-loading[b-28vp4ox56z] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
}

/* LoadingState paints the bars; their sizes are the page's. */
.skeleton-line[b-28vp4ox56z] {
    width: 48%;
    height: 11px;
}

.skeleton-pair[b-28vp4ox56z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.skeleton-block[b-28vp4ox56z] {
    height: 180px;
    --skeleton-radius: 8px;
}

/* ReadFailure draws the failure; the page keeps only where it sits. */
.session-state[b-28vp4ox56z] {
    max-width: 1180px;
    margin: 22px auto 0;
}

/* The banner's way back to a saved decision, and a past turn's link to one. */
.state-link[b-28vp4ox56z] {
    color: var(--nocturne-text-muted);
    font-size: 12px;
    text-decoration: none;
}

.state-link:hover[b-28vp4ox56z] {
    color: var(--nocturne-text);
}

.visually-hidden[b-28vp4ox56z] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@keyframes session-pulse-b-28vp4ox56z {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

/*
  Narrow, below 1024px — the defined breakpoint of design/"Responsive pass - issue 36.dc.html" 1a, set
  by the cards themselves: below it, two columns beside the sidebar leave neither card readable. The
  cards stack, each keeping its own status strip so a failure still reads as its model's (1b); the turn
  rail goes; and the composer pins to the bottom. This is #34's 1d stack, moved from 780px to where the
  cards actually stop fitting.
*/
@media (width < 1024px) {
    .session-frame.has-rail[b-28vp4ox56z] {
        grid-template-columns: minmax(0, 1fr);
    }

    .turn-rail[b-28vp4ox56z] {
        display: none;
    }

    .session-seats[b-28vp4ox56z],
    .past-answers[b-28vp4ox56z],
    .skeleton-pair[b-28vp4ox56z] {
        grid-template-columns: 1fr;
    }

    .session-ask[b-28vp4ox56z] {
        position: sticky;
        bottom: 0;
        z-index: 1;
        padding: 10px 0 12px;
        background: var(--nocturne-surface);
    }

    .secretary-offer[b-28vp4ox56z] {
        flex-wrap: wrap;
    }
}

/* Compact, below 640px: every control is thumb-sized — the 44px that 1d says must not shrink — and
   the pinned composer sits above the shell's 56px bottom bar rather than under it. */
@media (width < 640px) {
    .session-ask[b-28vp4ox56z] {
        bottom: 56px;
    }

    .session-send[b-28vp4ox56z],
    .session-stop[b-28vp4ox56z] {
        min-height: 44px;
        padding-inline: 18px;
    }

    .past-turn-head[b-28vp4ox56z],
    .secretary-offer-action[b-28vp4ox56z],
    .session-composer textarea[b-28vp4ox56z] {
        min-height: 44px;
    }

    .state-link[b-28vp4ox56z] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .session-link-pip[b-28vp4ox56z] {
        animation: none;
    }
}
/* /Features/Conversations/MentionMenu.razor.rz.scp.css */
/*
  The routing menu from design/"Conversation streaming - issues 21-22.dc.html", artboard 1c: a raised
  panel above the composer, a monospaced header, one row per addressable thing, and an inset accent
  bar on the row the keyboard is on.
*/

.mention-menu[b-ptscnizmsq] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    border: 1px solid var(--nocturne-line-mid);
    border-radius: 8px;
    background: var(--nocturne-raised);
    box-shadow: 0 12px 28px rgb(0 0 0 / .45);
    overflow: hidden;
    z-index: 2;
}

.mention-menu-head[b-ptscnizmsq] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--nocturne-line-soft);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--nocturne-text-faint);
}

.mention-option[b-ptscnizmsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mention-option + .mention-option[b-ptscnizmsq] {
    border-top: 1px solid var(--nocturne-line-soft);
}

.mention-menu-keys[b-ptscnizmsq] {
    letter-spacing: .04em;
    text-transform: none;
}

/* The row the arrow keys are on, lit the way a hovered row is, with 1c's Enter mark at its end. */
.mention-option.is-active[b-ptscnizmsq],
.mention-option:hover[b-ptscnizmsq],
.mention-option:focus-visible[b-ptscnizmsq] {
    background: var(--nocturne-accent-wash-strong);

    /* Inset rather than a left border, so the row does not shift by a pixel when it lights up. */
    box-shadow: inset 2px 0 0 var(--nocturne-accent);
    outline: none;
}

.mention-avatar[b-ptscnizmsq] {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--nocturne-line-strong);
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
    font-family: var(--font-mono);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mention-avatar.is-secretary[b-ptscnizmsq] {
    border-color: var(--nocturne-line-mid);
    background: transparent;
    color: var(--nocturne-text-muted);
}

.mention-identity[b-ptscnizmsq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mention-title[b-ptscnizmsq] {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

.mention-option:hover .mention-title[b-ptscnizmsq],
.mention-option:focus-visible .mention-title[b-ptscnizmsq] {
    color: var(--nocturne-text);
}

.mention-subtitle[b-ptscnizmsq] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

/* Compact, below 640px: each row is thumb-sized (design/"Responsive pass - issue 36.dc.html" 1d). */
@media (width < 640px) {
    .mention-option[b-ptscnizmsq] {
        min-height: 44px;
    }
}

/* /Features/Conversations/NewSession.razor.rz.scp.css */
/*
  The new-session form, from design/"New conversation - issue 33.dc.html" 1a–1d. Tokens come from
  ClientCommon's nocturne.css: the board's --color-accent-700 is --nocturne-line-strong, --color-accent-900 is
  --nocturne-accent-deep, and --color-neutral-900 is --nocturne-line-soft. The primary action is the
  shell's outlined accent (see .sidebar-new) rather than the board's filled button, so the page's two
  ways into a session look like the same control.
*/

.new-session[b-3ias79nvr9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 620px;
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

.new-session-heading[b-3ias79nvr9] {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.new-session-lede[b-3ias79nvr9] {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--nocturne-text-muted);
    text-wrap: pretty;
}

.new-session-block[b-3ias79nvr9] {
    display: flex;
    flex-direction: column;
}

.new-session-label[b-3ias79nvr9] {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--nocturne-text-faint);
}

/* The question */

.question-box[b-3ias79nvr9] {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px;
    padding: 13px 15px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised);
    resize: vertical;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--nocturne-text);
}

.question-box[b-3ias79nvr9]::placeholder {
    color: var(--nocturne-text-faintest);
}

.question-box:focus[b-3ias79nvr9] {
    border-color: var(--nocturne-line-strong);
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.question-box.is-invalid[b-3ias79nvr9] {
    border-color: var(--nocturne-text-faint);
}

.question-box:disabled[b-3ias79nvr9] {
    color: var(--nocturne-text-muted);
}

.question-foot[b-3ias79nvr9] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 7px;
}

.question-help[b-3ias79nvr9] {
    font-size: 10.5px;
    color: var(--nocturne-text-faint);
}

.question-count[b-3ias79nvr9] {
    flex: none;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

/* What is missing, said where it is missing (1c). Neutral rather than alarming: nothing has gone
   wrong, something has not been done yet. */
.form-problem[b-3ias79nvr9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--nocturne-text-dim);
}

.form-problem-icon[b-3ias79nvr9],
.council-note-icon[b-3ias79nvr9] {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 12px;
    text-align: center;
}

/* The council */

.council-head[b-3ias79nvr9] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.council-count[b-3ias79nvr9] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

.seat-options[b-3ias79nvr9] {
    display: flex;
    gap: 12px;
}

.seat-option[b-3ias79nvr9] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.seat-option:hover:not(:disabled)[b-3ias79nvr9] {
    border-color: var(--nocturne-line-strong);
}

.seat-option:focus-visible[b-3ias79nvr9] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.seat-option.is-seated[b-3ias79nvr9] {
    border-color: var(--nocturne-line-strong);
    background: var(--nocturne-accent-wash);
}

.seat-option:disabled[b-3ias79nvr9] {
    cursor: default;
}

/* Absent but accounted for (1b): dashed and drained, never removed. */
.seat-option.is-off[b-3ias79nvr9] {
    border-style: dashed;
    background: var(--nocturne-raised);
    opacity: .6;
}

/* A seat's shape while the catalog is read. LoadingState paints it. */
.seat-placeholder[b-3ias79nvr9] {
    flex: 1;
    min-height: 88px;
    --skeleton-radius: 8px;
}

.seat-option-head[b-3ias79nvr9] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.seat-mark[b-3ias79nvr9] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--nocturne-accent-text);
}

.seat-mark.is-off[b-3ias79nvr9] {
    border-color: var(--nocturne-line);
    background: transparent;
    font-size: 11px;
    color: var(--nocturne-text-dim);
}

.seat-option-name[b-3ias79nvr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.seat-model[b-3ias79nvr9] {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    color: var(--nocturne-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seat-option.is-off .seat-model[b-3ias79nvr9] {
    font-weight: 400;
    color: var(--nocturne-text-dim);
}

.seat-provider[b-3ias79nvr9] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

.seat-check[b-3ias79nvr9] {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--nocturne-accent);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    color: var(--nocturne-ground);
}

.seat-off[b-3ias79nvr9] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--nocturne-text-faint);
}

.seat-price[b-3ias79nvr9] {
    padding-top: 9px;
    border-top: 1px solid var(--nocturne-line-soft);
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

.seat-warning[b-3ias79nvr9] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 9px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--nocturne-line);
    border-left: 2px solid var(--nocturne-text-faint);
    border-radius: 8px;
    background: var(--nocturne-raised);
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--nocturne-text-dim);
}

.seat-warning .form-problem-icon[b-3ias79nvr9] {
    margin-top: 1px;
}

.council-note[b-3ias79nvr9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 0;
    font-size: 10.5px;
    color: var(--nocturne-text-faint);
}

/* Start */

.new-session-foot[b-3ias79nvr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.start[b-3ias79nvr9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 17px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--nocturne-accent-text);
    cursor: pointer;
}

.start:hover:not(:disabled)[b-3ias79nvr9] {
    background: var(--nocturne-accent-wash-strong);
}

.start:focus-visible[b-3ias79nvr9] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.start:disabled[b-3ias79nvr9] {
    opacity: .6;
    cursor: default;
}

.start-spinner[b-3ias79nvr9] {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: new-session-spin-b-3ias79nvr9 1s linear infinite;
}

.foot-keys[b-3ias79nvr9] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

.foot-note[b-3ias79nvr9] {
    font-size: 11px;
    color: var(--nocturne-text-faint);
}

.start-failure[b-3ias79nvr9] {
    flex-basis: 100%;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--nocturne-line);
    border-left: 2px solid var(--nocturne-accent);
    border-radius: 8px;
    background: var(--nocturne-raised);
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

.start-reload[b-3ias79nvr9] {
    padding: 7px 12px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--nocturne-text);
    cursor: pointer;
}

.start-reload:hover[b-3ias79nvr9] {
    border-color: var(--nocturne-accent);
}

.start-reload:focus-visible[b-3ias79nvr9] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

@keyframes new-session-spin-b-3ias79nvr9 {
    to {
        transform: rotate(360deg);
    }
}

/* Narrow, below 1024px (design/"Responsive pass - issue 36.dc.html" 1d): the two seats stack. */
@media (width < 1024px) {
    .seat-options[b-3ias79nvr9] {
        flex-direction: column;
        gap: 8px;
    }
}

/* Compact, below 640px (#33's 1d): Start runs the full width at a thumb's 44px, with the shortcut hint
   dropped because there is no keyboard to press it on. The board also pins Start to a bottom bar, but
   the shell's bottom bar is navigation (#36), and pinning Start here — inside a page container that is
   not the scrollport — floats it over the seats instead. */
@media (width < 640px) {
    .new-session-heading[b-3ias79nvr9] {
        font-size: 17px;
    }

    .start-reload[b-3ias79nvr9] {
        min-height: 44px;
    }

    .start[b-3ias79nvr9] {
        flex: 1;
        min-height: 44px;
    }

    .foot-keys[b-3ias79nvr9] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .start-spinner[b-3ias79nvr9] {
        animation: none;
    }
}
/* /Features/Conversations/SecretaryPanel.razor.rz.scp.css */
/*
  The secretary's panel, from design/"Secretary panel - issue 27.dc.html" — artboard 1a for the panel
  in the thread, 1b for the save lifecycle, 1c for the three consensus shapes, 1d for 390px.

  It is drawn as a different kind of object than a seat card on purpose: full width across the two
  columns, its own accent edge, its own ground. The design's phosphor glyphs are not available here,
  so the marks are the app's own square-on-corner and plain characters.

  The nocturne tokens come from ClientCommon's nocturne.css, the one sheet that declares them, and are consumed
  here rather than redeclared.
*/

.secretary[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 10px;
    background: var(--nocturne-raised);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.secretary-head[b-n2sh0u9rvq] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--nocturne-line-soft);
}

/* The product mark, standing in for the design's notebook glyph — the same square on its corner the
   session bar uses, so the panel is marked as this app's rather than iconography it does not have. */
.secretary-glyph[b-n2sh0u9rvq] {
    flex: none;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--nocturne-accent);
    border-radius: 2px;
    transform: rotate(45deg);
}

.secretary-mark[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    color: var(--nocturne-accent-text);
}

.secretary-meta[b-n2sh0u9rvq] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

.secretary-body[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px 18px;
}

.secretary-key[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .10em;
    color: var(--nocturne-text-faint);
}

/* The positions the arithmetic was counted over. */
.secretary-stances[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stance-list[b-n2sh0u9rvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stance[b-n2sh0u9rvq] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-surface);
}

/* A seat that stated nothing keeps its place and loses its edge — it was asked and had no position,
   which is not the same as agreeing with the others. */
.stance-absent[b-n2sh0u9rvq],
.stance.is-absent[b-n2sh0u9rvq] {
    color: var(--nocturne-text-faint);
}

.stance.is-absent[b-n2sh0u9rvq] {
    border-style: dashed;
    background: transparent;
}

.stance-name[b-n2sh0u9rvq] {
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

.stance-tag[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    padding: 2px 7px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 4px;
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
}

.stance-absent[b-n2sh0u9rvq] {
    font-size: 11px;
    line-height: 1.5;
}

/* The attribution mark. The handle itself rather than an initial: it is the string on the wire, the
   string in the composer, and the word a reader types to address that seat.

   The base is shape only; every mark also carries the class for its place in the council, so a seat
   is told apart by colour without any of them falling back to an unstated default. */
.mark[b-n2sh0u9rvq] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.mark-0[b-n2sh0u9rvq] {
    border-color: var(--nocturne-accent-faded);
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
}

.mark-1[b-n2sh0u9rvq] {
    border-color: var(--nocturne-line-mid);
    background: var(--nocturne-raised-alt);
    color: var(--nocturne-text-dim);
}

.mark-2[b-n2sh0u9rvq] {
    border-color: var(--nocturne-accent-edge);
    background: var(--nocturne-accent-wash);
    color: var(--nocturne-accent-bright);
}

.mark-3[b-n2sh0u9rvq] {
    border-color: var(--nocturne-line);
    background: transparent;
    color: var(--nocturne-text-muted);
}

/* A handle no seat answers to. Kept and drawn as unfamiliar rather than dropped with its line. */
.mark-unseated[b-n2sh0u9rvq] {
    border-style: dashed;
    border-color: var(--nocturne-line-mid);
    background: transparent;
    color: var(--nocturne-text-faint);
}

/* The arithmetic, and the sentence that must travel with it. */
.secretary-figures[b-n2sh0u9rvq] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}

.figure[b-n2sh0u9rvq] {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 5px;
    min-width: 168px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-surface);
}

.figure-key[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .10em;
    color: var(--nocturne-text-faint);
}

.figure-value[b-n2sh0u9rvq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.figure-number[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--nocturne-text);
}

.figure-note[b-n2sh0u9rvq] {
    font-size: 12px;
    color: var(--nocturne-text-muted);
}

.figure-computed[b-n2sh0u9rvq] {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faintest);
}

/* The verdict on the count, in one word. */
.figure-verdict[b-n2sh0u9rvq] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--nocturne-accent-faded);
    color: var(--nocturne-accent-text);
}

.verdict-agreed[b-n2sh0u9rvq] {
    border-color: var(--nocturne-accent);
    background: var(--nocturne-accent-deep);
}

.verdict-split[b-n2sh0u9rvq],
.verdict-majority[b-n2sh0u9rvq] {
    background: transparent;
}

.verdict-no-consensus[b-n2sh0u9rvq],
.verdict-no-positions[b-n2sh0u9rvq] {
    border-color: var(--nocturne-line-mid);
    background: transparent;
    color: var(--nocturne-text-muted);
}

/* The fraction drawn: one segment per seat that was asked. */
.figure-meter[b-n2sh0u9rvq] {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.figure-meter span[b-n2sh0u9rvq] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--nocturne-line-soft);
}

.figure-meter .on[b-n2sh0u9rvq] {
    background: var(--nocturne-accent);
}

.figure-meter .dim[b-n2sh0u9rvq] {
    background: var(--nocturne-accent-faded);
}

.figure-meter .out[b-n2sh0u9rvq] {
    background: repeating-linear-gradient(90deg, var(--nocturne-line-mid) 0 4px, transparent 4px 8px);
}

/* Beside the number, in the panel's own text, in every state that draws a figure or its placeholder.
   It is never a tooltip: the whole point of the sentence is that it cannot be missed. */
.secretary-caveat[b-n2sh0u9rvq] {
    display: flex;

    /* Wraps onto a row of its own rather than being squeezed by the two figures beside it. The
       sentence is the one thing on the panel that may not become unreadable to fit. */
    flex: 1 1 clamp(240px, 100%, 420px);
    align-items: flex-start;
    gap: 8px;
    min-width: 240px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--nocturne-text-dim);
    text-wrap: pretty;
}

.secretary-caveat-icon[b-n2sh0u9rvq] {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    color: var(--nocturne-accent-text);
}

.secretary-caveat-text[b-n2sh0u9rvq] {
    color: var(--nocturne-accent-text);
}

.secretary-waiting[b-n2sh0u9rvq] {
    margin: 0;
    font-size: 12.5px;
    color: var(--nocturne-text-muted);
}

.secretary-partial[b-n2sh0u9rvq] {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

.secretary-block[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.secretary-recommendation[b-n2sh0u9rvq] {
    padding: 14px 16px;
    border: 1px solid var(--nocturne-line);
    border-left: 2px solid var(--nocturne-accent);
    border-radius: 8px;
    background: var(--nocturne-ground);
}

.secretary-recommendation-text[b-n2sh0u9rvq] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--nocturne-text);
    text-wrap: pretty;
}

.secretary-grounding[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.secretary-columns[b-n2sh0u9rvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Wide enough to read a sentence in, or the pair stacks. The media query below is what the app's own
   narrow layout hits; this is what keeps the two columns honest anywhere else the panel is put. */
.secretary-column[b-n2sh0u9rvq] {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.secretary-column + .secretary-column[b-n2sh0u9rvq] {
    padding-left: 14px;
    border-left: 1px solid var(--nocturne-line-soft);
}

.secretary-line[b-n2sh0u9rvq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

.secretary-line-text[b-n2sh0u9rvq] {
    font-size: 12px;
    line-height: 1.55;
    color: var(--nocturne-text-dim);
}

.secretary-ordinal[b-n2sh0u9rvq] {
    flex: none;
    width: 16px;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

/* The secretary was asked and wrote nothing usable. The positions above it are the reason this is a
   state to recover from rather than a turn to buy again. */
.secretary-unwritten[b-n2sh0u9rvq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-line);
    border-left: 2px solid var(--nocturne-line-mid);
    border-radius: 8px;
    background: var(--nocturne-surface);
}

.secretary-unwritten-icon[b-n2sh0u9rvq] {
    flex: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--nocturne-line-mid);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    color: var(--nocturne-text-muted);
}

.secretary-unwritten-body[b-n2sh0u9rvq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.secretary-unwritten-head[b-n2sh0u9rvq] {
    font-size: 12px;
    color: var(--nocturne-text);
}

.secretary-unwritten-detail[b-n2sh0u9rvq] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

.secretary-unavailable[b-n2sh0u9rvq] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nocturne-text-muted);
}

.secretary-foot[b-n2sh0u9rvq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.secretary-foot-note[b-n2sh0u9rvq] {
    margin-left: auto;
    max-width: 340px;
    font-size: 10.5px;
    line-height: 1.45;
    text-align: right;
    color: var(--nocturne-text-faint);
}

.secretary-foot-mark[b-n2sh0u9rvq] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    color: var(--nocturne-text-faintest);
}

.secretary-save[b-n2sh0u9rvq],
.secretary-secondary[b-n2sh0u9rvq],
.secretary-retry[b-n2sh0u9rvq],
.secretary-ghost[b-n2sh0u9rvq],
.secretary-link[b-n2sh0u9rvq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    cursor: pointer;
}

.secretary-save[b-n2sh0u9rvq] {
    padding: 9px 15px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    background: var(--nocturne-accent-deep);
    font-size: 12.5px;
    color: var(--nocturne-accent-text);
}

.secretary-save:hover:not(:disabled)[b-n2sh0u9rvq] {
    background: var(--nocturne-accent-wash-strong);
}

.secretary-save:disabled[b-n2sh0u9rvq] {
    border-color: var(--nocturne-line);
    background: transparent;
    color: var(--nocturne-text-faint);
    cursor: default;
}

.secretary-secondary[b-n2sh0u9rvq],
.secretary-retry[b-n2sh0u9rvq] {
    padding: 7px 12px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

.secretary-retry[b-n2sh0u9rvq] {
    margin-left: auto;
    flex: none;
}

.secretary-secondary:hover[b-n2sh0u9rvq],
.secretary-retry:hover[b-n2sh0u9rvq] {
    border-color: var(--nocturne-accent-edge);
    color: var(--nocturne-accent-text);
}

.secretary-ghost[b-n2sh0u9rvq],
.secretary-link[b-n2sh0u9rvq] {
    padding: 7px 4px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--nocturne-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.secretary-ghost:hover[b-n2sh0u9rvq],
.secretary-link:hover[b-n2sh0u9rvq] {
    color: var(--nocturne-accent-text);
}

.secretary-saved[b-n2sh0u9rvq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
    font-size: 12px;
    color: var(--nocturne-text);
}

.secretary-saved-icon[b-n2sh0u9rvq] {
    color: var(--nocturne-accent);
}

.secretary-spinner[b-n2sh0u9rvq] {
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--nocturne-line-mid);
    border-top-color: var(--nocturne-accent);
    border-radius: 50%;
    animation: secretary-spin-b-n2sh0u9rvq 1s linear infinite;
}

@keyframes secretary-spin-b-n2sh0u9rvq {
    to {
        transform: rotate(360deg);
    }
}

/* The word "Saving…" carries the state on its own, so the motion beside it is decoration a reader
   who has asked for less of it can do without. Same opt-out as the seat spinner and the link pip. */
@media (prefers-reduced-motion: reduce) {
    .secretary-spinner[b-n2sh0u9rvq] {
        animation: none;
    }
}

/* Narrow, below 1024px (design/"Responsive pass - issue 36.dc.html" 1d, "2 + 1 wrap"): the two figures
   share a row and the caveat takes the next one whole — still attached to the number it qualifies,
   wrapped rather than shrunk. The columns become rows. */
@media (width < 1024px) {
    .secretary-figures[b-n2sh0u9rvq] {
        flex-wrap: wrap;
    }

    .figure[b-n2sh0u9rvq] {
        flex: 1;
        min-width: 140px;
    }

    .secretary-caveat[b-n2sh0u9rvq] {
        flex-basis: 100%;
    }

    .secretary-columns[b-n2sh0u9rvq] {
        flex-direction: column;
    }

    .secretary-column + .secretary-column[b-n2sh0u9rvq] {
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid var(--nocturne-line-soft);
    }

    .secretary-foot-note[b-n2sh0u9rvq] {
        margin-left: 0;
        max-width: none;
        text-align: left;
    }
}

/* Compact, below 640px: every action on the panel is thumb-sized (1d's 44px). */
@media (width < 640px) {
    .secretary-save[b-n2sh0u9rvq],
    .secretary-secondary[b-n2sh0u9rvq],
    .secretary-retry[b-n2sh0u9rvq],
    .secretary-ghost[b-n2sh0u9rvq],
    .secretary-link[b-n2sh0u9rvq] {
        min-height: 44px;
    }
}
/* /Features/Conversations/StreamConnectionNotice.razor.rz.scp.css */
/*
  The hub connection's own banner, from design/"Conversation streaming - issues 21-22.dc.html",
  artboard 1b. Accent-washed rather than red: the feed stopped, the council did not.

  Tokens come from ClientCommon's nocturne.css — see the note in StreamingAnswer.razor.css.
*/

.stream-notice[b-7b4swyhgl8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
}

/* Retries are over, so the accent comes off: nothing is happening on its own any more. */
.stream-notice-lost[b-7b4swyhgl8],
.stream-notice-sessionexpired[b-7b4swyhgl8] {
    border-color: var(--nocturne-line-mid);
    background: var(--nocturne-raised);
}

.stream-icon[b-7b4swyhgl8] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

.stream-pip[b-7b4swyhgl8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nocturne-accent);
    animation: stream-pulse-b-7b4swyhgl8 1.3s ease-in-out infinite;
}

/* A broken link, drawn rather than iconised: no webfont or CDN request is made on any page of this
   app — see the note in App.razor. */
.stream-plug[b-7b4swyhgl8] {
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--nocturne-text-faint);
    border-right-color: transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.stream-body[b-7b4swyhgl8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stream-headline[b-7b4swyhgl8] {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--nocturne-accent-text);
}

.stream-notice-lost .stream-headline[b-7b4swyhgl8],
.stream-notice-sessionexpired .stream-headline[b-7b4swyhgl8] {
    color: var(--nocturne-text-dim);
}

.stream-detail[b-7b4swyhgl8] {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

.stream-retry[b-7b4swyhgl8] {
    flex: none;
    align-self: center;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--nocturne-accent-text);
    cursor: pointer;
}

.stream-retry:hover[b-7b4swyhgl8],
.stream-retry:focus-visible[b-7b4swyhgl8] {
    background: var(--nocturne-accent-wash-strong);
}

@keyframes stream-pulse-b-7b4swyhgl8 {
    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stream-pip[b-7b4swyhgl8] {
        animation: none;
    }
}

/* Compact, below 640px: the retry is thumb-sized (design/"Responsive pass - issue 36.dc.html" 1d). */
@media (width < 640px) {
    .stream-retry[b-7b4swyhgl8] {
        min-height: 44px;
    }
}
/* /Features/Conversations/StreamingAnswer.razor.rz.scp.css */
/*
  One seat's card, from design/"Conversation page - issue 34.dc.html" — 1a for the card's three bands
  (header, answer, status strip) and 1b for the states a pair of cards can be in at once. The seat an
  @mention left out keeps its dashed frame from design/"Conversation streaming - issues 21-22.dc.html"
  1c.

  The nocturne tokens come from ClientCommon's nocturne.css, the one sheet that declares them, and are consumed
  here rather than redeclared.
*/

.seat[b-gwltuorhdp] {
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised-alt);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The card still being written is the one the reader is waiting on, so it carries the accent edge. */
.seat-streaming[b-gwltuorhdp],
.seat-waiting[b-gwltuorhdp] {
    border-color: var(--nocturne-line-strong);
}

.seat-head[b-gwltuorhdp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--nocturne-line-soft);
}

.seat-avatar[b-gwltuorhdp] {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--nocturne-line-strong);
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seat-identity[b-gwltuorhdp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.seat-name[b-gwltuorhdp] {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--nocturne-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seat-provider[b-gwltuorhdp] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--nocturne-text-faint);
}

.seat-status[b-gwltuorhdp] {
    margin-left: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .04em;
    color: var(--nocturne-text-faint);
}

.seat-streaming .seat-status[b-gwltuorhdp] {
    color: var(--nocturne-accent-text);
}

/* 1b's FAILED tag: a neutral chip, not an alarm — the other card is unaffected, and says so by
   carrying on. */
.seat-failed .seat-status[b-gwltuorhdp] {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--nocturne-line);
    color: var(--nocturne-text);
}

/* The recorded position, 1a's "FAVOR · 71" chip. */
.seat-position[b-gwltuorhdp] {
    margin-left: auto;
    flex: none;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--nocturne-accent-faded);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .02em;
    color: var(--nocturne-accent-text);
}

.seat-body[b-gwltuorhdp] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 13px;
}

.seat-text[b-gwltuorhdp] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.65;
    color: var(--nocturne-text-dim);
    text-wrap: pretty;

    /* Fragments arrive mid-word and mid-token; without this a long unbroken run from a provider
       widens the card instead of wrapping in it. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/*
  Appended to the text rather than positioned over it, so it sits after the last glyph wherever the
  text happens to wrap to.
*/
.seat-caret[b-gwltuorhdp] {
    display: inline-block;
    width: 1.5px;
    height: 13px;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--nocturne-accent);
    animation: seat-blink-b-gwltuorhdp 1.1s step-end infinite;
}

.seat-empty[b-gwltuorhdp] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--nocturne-text-faint);
    font-style: italic;
}

/* The card keeps its frame and its header when a seat fails, and loses only its text — a failed
   seat still has to read as a seat. */
.seat-failed[b-gwltuorhdp] {
    border-color: var(--nocturne-line-mid);
}

.seat-skeleton[b-gwltuorhdp] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 2px;
}

.seat-skeleton span[b-gwltuorhdp] {
    height: 9px;
    border-radius: 3px;
    background: var(--nocturne-line-soft);
}

.seat-skeleton span:nth-child(2)[b-gwltuorhdp] {
    width: 92%;
}

.seat-skeleton span:nth-child(3)[b-gwltuorhdp] {
    width: 64%;
}

.seat-foot[b-gwltuorhdp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 13px;
    border-top: 1px solid var(--nocturne-line-soft);
    min-height: 38px;
}

/*
  One tick per recent slice of time, filled where a fragment landed in it. The gap left by a dropped
  connection stays visible as the slots covering it age out, which is the point: nothing is replayed
  after a reconnect, so the bar is the only place the outage shows.
*/
.seat-cadence[b-gwltuorhdp] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
    flex: none;
    width: 58px;
}

.seat-cadence span[b-gwltuorhdp] {
    flex: 1;
    height: 4px;
    border-radius: 1px;
    background: var(--nocturne-line);
}

.seat-cadence span.on[b-gwltuorhdp] {
    height: 9px;
    background: var(--nocturne-accent);
}

.seat-chunks[b-gwltuorhdp] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--nocturne-text-muted);
}

.seat-done-mark[b-gwltuorhdp] {
    flex: none;
    font-size: 11px;
    color: var(--nocturne-accent);
}

.seat-copy[b-gwltuorhdp],
.seat-ask-too[b-gwltuorhdp] {
    padding: 4px 9px;
    border: 1px solid var(--nocturne-line);
    border-radius: 7px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 10.5px;
    color: var(--nocturne-text-muted);
    cursor: pointer;
}

.seat-copy[b-gwltuorhdp] {
    margin-left: auto;
    border-color: transparent;
    color: var(--nocturne-accent-text);
}

.seat-copy:hover[b-gwltuorhdp],
.seat-copy:focus-visible[b-gwltuorhdp],
.seat-ask-too:hover[b-gwltuorhdp],
.seat-ask-too:focus-visible[b-gwltuorhdp] {
    border-color: var(--nocturne-accent);
    color: var(--nocturne-accent-text);
}

/*
  A seat an @mention left out. Dashed all the way through — frame and avatar — so it reads as a place
  at the table that is empty this turn rather than as a card that failed or is still filling.
*/
.seat-idle[b-gwltuorhdp] {
    border: 1px dashed var(--nocturne-line-mid);
    background: transparent;
}

.seat-idle .seat-head[b-gwltuorhdp] {
    border-bottom-style: dashed;
}

.seat-idle .seat-name[b-gwltuorhdp] {
    color: var(--nocturne-text-muted);
    font-weight: 400;
}

.seat-avatar-idle[b-gwltuorhdp] {
    border: 1px dashed var(--nocturne-line-mid);
    background: transparent;
    color: var(--nocturne-text-faint);
}

.seat-tag[b-gwltuorhdp] {
    margin: 0;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--nocturne-line-soft);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nocturne-text-muted);
}

.seat-aside[b-gwltuorhdp] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
}

.seat-ask-too[b-gwltuorhdp] {
    align-self: flex-start;
}

@keyframes seat-blink-b-gwltuorhdp {
    50% {
        opacity: .25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seat-caret[b-gwltuorhdp] {
        animation: none;
    }
}

/* Compact, below 640px: the card's own actions are thumb-sized (design/"Responsive pass - issue
   36.dc.html" 1d's 44px); the status strip grows around them. */
@media (width < 640px) {
    .seat-copy[b-gwltuorhdp],
    .seat-ask-too[b-gwltuorhdp] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Features/Decisions/Journal.razor.rz.scp.css */
/*
  The journal, from design/"Decisions list - issue 30.dc.html": four fixed columns so consensus and
  confidence can be scanned down the page, date breaks doing the grouping, and the three states a
  list has before it is a list. The heading sits in the shell's top bar (ShellPage). Tokens come from
  ClientCommon's nocturne.css.

  Below 1024px (design/"Responsive pass - issue 36.dc.html" 1a, 1c) the columns become a two-line row
  — title above; consensus · confidence · recommendation · date on one metric line — which keeps all
  four values visible without a horizontal scroll. No width drops a value to fit; only the
  recommendation may truncate.
*/

.journal[b-djqkxn2xov] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

.journal-sub[b-djqkxn2xov] {
    margin: 0;
    font-size: 12px;
    color: var(--nocturne-text-muted);
}

/* Chips. A chip with nothing behind it stays in place and goes quiet rather than disappearing,
   so the row does not reflow under the reader's cursor as decisions are saved. */
.journal-chips[b-djqkxn2xov] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.chip[b-djqkxn2xov] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 6px;
    background: transparent;
    color: var(--nocturne-text-muted);
    font: 400 12px var(--font-sans);
    cursor: pointer;
}

.chip:hover:not(:disabled)[b-djqkxn2xov] {
    border-color: var(--nocturne-line-mid);
    color: var(--nocturne-text);
}

.chip.is-on[b-djqkxn2xov] {
    border-color: var(--nocturne-accent-edge);
    background: var(--nocturne-accent-wash-strong);
    color: var(--nocturne-text);
}

.chip:disabled[b-djqkxn2xov] {
    opacity: .45;
    cursor: default;
}

.chip-count[b-djqkxn2xov] {
    font: 500 10.5px var(--font-mono);
    color: var(--nocturne-text-faint);
}

.journal-table[b-djqkxn2xov] {
    display: flex;
    flex-direction: column;
}

/* The one grid the heads, the rows and the skeleton all share — which is what keeps a row from
   shifting into place when the read lands. */
.journal-heads[b-djqkxn2xov],
.journal-row[b-djqkxn2xov] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 104px 76px;
    gap: 16px;
    align-items: baseline;
    padding: 13px 8px;
}

.journal-heads[b-djqkxn2xov] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nocturne-line-soft);
    font: 400 9.5px var(--font-mono);
    letter-spacing: .10em;
    color: var(--nocturne-text-faint);
}

.journal-caveat[b-djqkxn2xov] {
    display: flex;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 8px 9px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 7px;
    background: var(--nocturne-accent-wash);
    font-size: 12px;
    line-height: 1.5;
    color: var(--nocturne-text-dim);
}

.caveat-icon[b-djqkxn2xov] {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 50%;
    font: 500 9px/13px var(--font-mono);
    text-align: center;
    color: var(--nocturne-accent-text);
}

.journal-break[b-djqkxn2xov] {
    margin: 18px 0 0;
    padding: 0 8px 6px;
    font: 400 9.5px var(--font-mono);
    letter-spacing: .12em;
    color: var(--nocturne-text-faintest);
}

.journal-row[b-djqkxn2xov] {
    border-bottom: 1px solid var(--nocturne-line-soft);
}

/* The row is a link to the entry (#31). It keeps the page's own colour rather than a link colour —
   a list where every row is blue reads as a page of links, not as a journal — and says so on hover
   and to the keyboard instead. */
a.journal-row[b-djqkxn2xov] {
    color: inherit;
    text-decoration: none;
}

a.journal-row:hover[b-djqkxn2xov] {
    background: var(--nocturne-accent-wash);
}

a.journal-row:focus-visible[b-djqkxn2xov] {
    outline: 1px solid var(--nocturne-accent-edge);
    outline-offset: -1px;
}

.row-decision[b-djqkxn2xov] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.row-title[b-djqkxn2xov] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--nocturne-text);
    text-wrap: pretty;
}

.row-recommendation[b-djqkxn2xov] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--nocturne-text-muted);
    text-wrap: pretty;
}

.row-consensus[b-djqkxn2xov] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.consensus-fraction[b-djqkxn2xov] {
    font: 500 12.5px var(--font-mono);
    color: var(--nocturne-text);
}

.consensus-shape[b-djqkxn2xov] {
    font-size: 11px;
    color: var(--nocturne-text-muted);
}

.row-confidence[b-djqkxn2xov] {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 12.5px var(--font-mono);
    color: var(--nocturne-text);
}

/* The figure's name, for the row's accessible name at every width (Journal.razor). Visually hidden
   while the CONFIDENCE column head is on screen; shown below 1024px, where the heads go. */
.row-confidence-key[b-djqkxn2xov] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The median drawn as a 52px bar beside its figure (design/"Decisions list - issue 30.dc.html" 1a,
   and "Responsive pass - issue 36.dc.html" 1c). */
.confidence-meter[b-djqkxn2xov] {
    flex: none;
    width: 52px;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--nocturne-line);
}

.confidence-fill[b-djqkxn2xov] {
    display: block;
    height: 100%;
    background: var(--nocturne-accent);
}

.confidence-meter.is-single .confidence-fill[b-djqkxn2xov] {
    background: repeating-linear-gradient(90deg, var(--nocturne-accent) 0 4px, transparent 4px 8px);
}

.row-date[b-djqkxn2xov] {
    font: 400 10.5px var(--font-mono);
    letter-spacing: .04em;
    color: var(--nocturne-text-faint);
}

.journal-none[b-djqkxn2xov] {
    margin: 14px 0 6px;
}

/* Empty, and failed: StatePanel and ReadFailure draw both. The page keeps only where they sit. */
.journal-state[b-djqkxn2xov] {
    margin-top: 22px;
}

/* The handle in the empty state's body, which is this page's markup rather than the panel's. */
.state-handle[b-djqkxn2xov] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nocturne-accent-text);
}

/* Loading. The same grid, filled with nothing, so the read lands into the layout the reader is
   already looking at. LoadingState paints the bars; their sizes are the grid's. */
.journal-row.is-skeleton[b-djqkxn2xov] {
    border-bottom-color: var(--nocturne-line-soft);
}

.skeleton-line[b-djqkxn2xov],
.skeleton-pill[b-djqkxn2xov] {
    height: 11px;
}

.skeleton-line[b-djqkxn2xov] {
    width: 62%;
}

.skeleton-pill[b-djqkxn2xov] {
    width: 46px;
}

@media (width < 1024px) {
    /* Title above, then consensus · confidence · date on one metric line. The heads go with the
       columns they named — a header row over a two-line row labels nothing. */
    .journal-heads[b-djqkxn2xov] {
        display: none;
    }

    /* Flex rather than the grid above: the title claims a whole line and the metrics then sit
       together on the next one, which is the shape 1c draws. */
    .journal-row[b-djqkxn2xov] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        padding: 14px 6px;
    }

    /* The skeleton's placeholder keeps its own line. */
    .row-decision[b-djqkxn2xov] {
        flex: 1 0 100%;
    }

    /* A loaded row lets its title and recommendation join the row itself, so the recommendation can
       move onto the metric line and truncate there (1c): the one value in the row allowed to lose
       characters, and never its place. */
    a.journal-row .row-decision[b-djqkxn2xov] {
        display: contents;
    }

    a.journal-row .row-title[b-djqkxn2xov] {
        flex: 1 0 100%;
    }

    .row-consensus[b-djqkxn2xov] {
        order: 1;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .row-confidence[b-djqkxn2xov] {
        order: 2;
        padding-left: 14px;
        border-left: 1px solid var(--nocturne-line-soft);
    }

    .row-recommendation[b-djqkxn2xov] {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row-date[b-djqkxn2xov] {
        order: 4;
        margin-left: auto;
    }

    /* The column head is gone at this width, so the confidence figure's own name comes into view —
       real text rather than generated content, so it is the same word a screen reader hears. The
       skeleton has none: a label beside a placeholder is the one piece of a loading row not loading. */
    .row-confidence-key[b-djqkxn2xov] {
        position: static;
        width: auto;
        height: auto;
        margin: 0 -3px 0 0;
        overflow: visible;
        clip-path: none;
        font-family: var(--font-sans);
        font-size: 10.5px;
        font-weight: 400;
        color: var(--nocturne-text-faint);
    }

    .skeleton-line[b-djqkxn2xov] {
        width: 78%;
    }
}

/* Compact, below 640px: the chips are thumb-sized (1d's 44px). */
@media (width < 640px) {
    .chip[b-djqkxn2xov] {
        align-items: center;
        min-height: 44px;
    }
}
/* /Features/Decisions/JournalEntry.razor.rz.scp.css */
/*
  One saved decision, from design/"Decision detail - issue 31.dc.html" 1a: the question as the
  heading, the figures under it with their caveat, the synthesis body, and a rail holding the record
  and the way back to the exchange. The breadcrumb sits in the shell's top bar (ShellPage). Tokens
  come from ClientCommon's nocturne.css.

  Below 1024px the rail gives way to one RECORD strip under the entry (design/"Responsive pass - issue
  36.dc.html" 1c): the conversation and turn, the stance count and the date as tags, and the way back
  to the exchange at its end — still the page's one navigational promise, still in view.
*/

.entry[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

.entry-body[b-05m0o0e4f7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 26px;
    align-items: start;
}

.entry-main[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.entry-kicker[b-05m0o0e4f7],
.section-head[b-05m0o0e4f7],
.rail-head[b-05m0o0e4f7] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--nocturne-text-faint);
}

.entry-question[b-05m0o0e4f7] {
    margin: 7px 0 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-wrap: pretty;
}

/* The two figures, then the sentence that qualifies the second one — under both rather than beside
   the number, because it is the number's meaning and not a footnote to it. */
.entry-figures[b-05m0o0e4f7] {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    padding: 14px 16px 12px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 10px 10px 0 0;
    background: var(--nocturne-surface);
}

.figure[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.figure-key[b-05m0o0e4f7] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--nocturne-text-faint);
}

.figure-value[b-05m0o0e4f7] {
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--nocturne-text);
}

.figure-shape[b-05m0o0e4f7] {
    font-size: 12px;
    color: var(--nocturne-text-muted);
}

.entry-disclaimer[b-05m0o0e4f7] {
    margin: -18px 0 0;
    padding: 10px 16px 12px;
    border: 1px solid var(--nocturne-line-soft);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--nocturne-surface);
    font-size: 12px;
    line-height: 1.6;
    color: var(--nocturne-text-muted);
}

.entry-section[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.entry-recommendation[b-05m0o0e4f7] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--nocturne-text);
    text-wrap: pretty;
}

.section-empty[b-05m0o0e4f7] {
    margin: 0;
    font-size: 12.5px;
    color: var(--nocturne-text-muted);
}

.point-list[b-05m0o0e4f7],
.action-list[b-05m0o0e4f7],
.stance-list[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.point[b-05m0o0e4f7],
.action[b-05m0o0e4f7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--nocturne-text-dim);
}

.point-marks[b-05m0o0e4f7] {
    display: inline-flex;
    flex: none;
    gap: 4px;
}

/* One mark per advisor a line was attributed to. Taken from the handle, which is what the
   attribution actually holds — a mark from a display name would stop matching when the catalog
   moved. */
.mark[b-05m0o0e4f7] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
    font-family: var(--font-mono);
    font-size: 8.5px;
}

.action[b-05m0o0e4f7] {
    counter-increment: action;
    justify-content: space-between;
}

.action[b-05m0o0e4f7]::before {
    flex: none;
    order: -1;
    content: counter(action, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

.action-list[b-05m0o0e4f7] {
    counter-reset: action;
}

.action-text[b-05m0o0e4f7] {
    flex: 1;
}

.stance[b-05m0o0e4f7] {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 9px;
    background: var(--nocturne-surface);
}

/* A seat that stated nothing reads as an absence rather than as an opinion — it keeps its card, and
   the card goes quiet. */
.stance.is-silent[b-05m0o0e4f7] {
    border-style: dashed;
    background: transparent;
}

.stance-body[b-05m0o0e4f7] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.stance-head[b-05m0o0e4f7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.stance-name[b-05m0o0e4f7] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--nocturne-text-dim);
}

.stance-position[b-05m0o0e4f7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--nocturne-accent-text);
}

.stance.is-silent .stance-position[b-05m0o0e4f7] {
    color: var(--nocturne-text-faint);
}

.stance-reason[b-05m0o0e4f7],
.stance-failure[b-05m0o0e4f7] {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--nocturne-text-muted);
}

.stance-failure[b-05m0o0e4f7] {
    color: var(--nocturne-text-faint);
}

.entry-rail[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rail-card[b-05m0o0e4f7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 15px;
    border: 1px solid var(--nocturne-line-soft);
    border-radius: 10px;
    background: var(--nocturne-surface);
}

.rail-title[b-05m0o0e4f7] {
    margin: 0;
    font-size: 13px;
    color: var(--nocturne-text);
}

.rail-meta[b-05m0o0e4f7] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--nocturne-text-faint);
}

.rail-note[b-05m0o0e4f7] {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--nocturne-text-muted);
}

/* The ledger 1a draws: what is on the row, said plainly. There is no "last updated" here because
   there is no such column — a re-save replaces the content and leaves the decision's date alone. */
.rail-record[b-05m0o0e4f7] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin: 2px 0 4px;
    font-size: 12px;
}

.rail-record dt[b-05m0o0e4f7] {
    color: var(--nocturne-text-muted);
}

.rail-record dd[b-05m0o0e4f7] {
    margin: 0;
    font-family: var(--font-mono);
    color: var(--nocturne-text-dim);
    text-align: right;
}

/* ReadFailure draws the failure; the page keeps only where it sits. */
.entry-state[b-05m0o0e4f7] {
    margin-top: 22px;
}

.entry-action[b-05m0o0e4f7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border: 1px solid var(--nocturne-accent-edge);
    border-radius: 7px;
    background: var(--nocturne-accent-wash-strong);
    color: var(--nocturne-text);
    font: 400 12.5px var(--font-sans);
    text-decoration: none;
    cursor: pointer;
}

.entry-action:hover[b-05m0o0e4f7] {
    background: var(--nocturne-accent-deep);
}

.entry-link[b-05m0o0e4f7] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nocturne-text-muted);
    font: 400 12.5px var(--font-sans);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.entry-link:hover[b-05m0o0e4f7] {
    color: var(--nocturne-text);
}

/* LoadingState paints the bars; their sizes are the entry's. */
.skeleton-heading[b-05m0o0e4f7] {
    width: 70%;
    height: 26px;
}

.skeleton-figures[b-05m0o0e4f7] {
    height: 62px;
    --skeleton-radius: 10px;
}

.skeleton-line[b-05m0o0e4f7] {
    width: 88%;
    height: 11px;
}

.skeleton-line.is-short[b-05m0o0e4f7] {
    width: 54%;
}

.skeleton-card[b-05m0o0e4f7] {
    height: 168px;
    --skeleton-radius: 10px;
}

/* The record strip, which stands in for the rail below 1024px (JournalEntry.razor). */
.entry-strip[b-05m0o0e4f7] {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
}

/* Every tag keeps its size except the conversation's name, which truncates when it is long — the one
   value here allowed to lose characters. The turn is a tag of its own, so it is never what goes. */
.strip-tag[b-05m0o0e4f7] {
    flex: none;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--nocturne-accent-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strip-title[b-05m0o0e4f7] {
    flex: 0 1 auto;
    min-width: 0;
}

/* The way back ends the strip, where the eye finishes reading the record. */
.strip-open[b-05m0o0e4f7] {
    margin-left: auto;
}

.strip-note[b-05m0o0e4f7] {
    flex-basis: 100%;
}

@media (width < 1024px) {
    .entry-body[b-05m0o0e4f7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-rail[b-05m0o0e4f7] {
        display: none;
    }

    .entry-strip[b-05m0o0e4f7] {
        display: flex;
    }
}

/* Compact, below 640px: the way back and the copy action are thumb-sized (1d's 44px). */
@media (width < 640px) {
    .entry-action[b-05m0o0e4f7],
    .entry-link[b-05m0o0e4f7] {
        min-height: 44px;
    }

    .entry-link[b-05m0o0e4f7] {
        display: inline-flex;
        align-items: center;
    }
}
/* /Features/Shell/ConversationDrawer.razor.rz.scp.css */
/*
  The conversation drawer, from design/"Conversation drawer - issue 85.dc.html". Tokens come from
  ClientCommon's nocturne.css: the board's #14161f is --nocturne-rail, --color-neutral-800 is --nocturne-line,
  --color-neutral-900 is --nocturne-line-soft, --color-neutral-400 is --nocturne-text-dim,
  --color-neutral-500 is --nocturne-text-muted, --color-neutral-600 is --nocturne-text-faint, and the
  seat mark is the board's .mk: --color-accent-900 ground, --color-accent-700 edge, --color-accent-300
  letter.

  It is a popover, so the UA sheet would centre it in a framed box: every property that sheet sets is
  taken back here. And it is drawn only while open — a display on the bare class would override the
  UA's [popover]:not(:popover-open) { display: none } and show it at every width.
*/

/* Narrow, 640px to 1023px (1a): 264px beside the 56px rail, full height, over the page rather than
   beside it — so opening it moves nothing. */
.drawer[b-r2em84v47w] {
    position: fixed;
    inset: 0 auto 0 56px;
    box-sizing: border-box;
    width: 264px;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-right: 1px solid var(--nocturne-line);
    background: var(--nocturne-rail);
    box-shadow: 16px 0 40px rgba(0, 0, 0, .5);
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

.drawer:popover-open[b-r2em84v47w] {
    display: flex;
    flex-direction: column;
}

/* The panel takes focus when it opens only so Escape has focus to give back; it is not a control. */
.drawer:focus[b-r2em84v47w],
.drawer:focus-visible[b-r2em84v47w] {
    outline: none;
}

/* The page dimmed behind it, and not the rail: 1a keeps the rail bright, above the scrim. The ground
   colour at 55%, which has no token of its own. Its z-index sits over the sticky top bar (10) and under
   the rail (20, Sidebar.razor.css). */
.drawer-scrim[b-r2em84v47w] {
    display: none;
}

.drawer:popover-open + .drawer-scrim[b-r2em84v47w] {
    position: fixed;
    inset: 0 0 0 56px;
    z-index: 15;
    display: block;
    background: rgba(15, 17, 25, .55);
}

.drawer-head[b-r2em84v47w] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nocturne-line-soft);
}

.drawer-title[b-r2em84v47w] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--nocturne-text);
}

.drawer-count[b-r2em84v47w] {
    font: 400 9.5px var(--font-mono);
    color: var(--nocturne-text-muted);
}

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

.drawer-close:hover[b-r2em84v47w] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

.drawer-close:focus-visible[b-r2em84v47w] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: -2px;
}

.drawer-search[b-r2em84v47w] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px;
    margin: 10px 12px 0;
    padding: 7px 10px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-surface);
    color: var(--nocturne-text-faint);
}

.drawer-search:focus-within[b-r2em84v47w] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 1px;
}

.drawer-search-input[b-r2em84v47w] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 11px;
    color: var(--nocturne-text);
}

.drawer-search-input[b-r2em84v47w]::placeholder {
    color: var(--nocturne-text-faint);
}

.drawer-body[b-r2em84v47w] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer-list[b-r2em84v47w] {
    padding: 12px 8px;
}

.drawer-group:not(:first-child) .drawer-break[b-r2em84v47w] {
    padding-top: 14px;
}

.drawer-break[b-r2em84v47w] {
    margin: 0;
    padding: 0 10px 7px;
    font: 400 9.5px var(--font-mono);
    letter-spacing: .1em;
    color: var(--nocturne-text-faint);
}

.drawer-rows[b-r2em84v47w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.drawer-row[b-r2em84v47w] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--nocturne-text-dim);
    text-decoration: none;
}

.drawer-row:hover[b-r2em84v47w] {
    background: var(--nocturne-hover-wash);
}

/* The open conversation: a tint plus the 2px accent edge, as the rail marks its active item. The row
   the reader just came back from is marked the same way (2b), so the list lands where it was left. */
.drawer-row.is-current[b-r2em84v47w],
.drawer-row.is-returned[b-r2em84v47w] {
    background: var(--nocturne-accent-wash-strong);
    box-shadow: inset 2px 0 0 var(--nocturne-accent);
}

/* Inset: the list scrolls, and a ring drawn outside a full-width row would be clipped at its edges. */
.drawer-row:focus-visible[b-r2em84v47w] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: -2px;
}

.drawer-row-title[b-r2em84v47w] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.drawer-row-name[b-r2em84v47w] {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    color: var(--nocturne-text-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-row:hover .drawer-row-name[b-r2em84v47w],
.drawer-row.is-current .drawer-row-name[b-r2em84v47w],
.drawer-row.is-returned .drawer-row-name[b-r2em84v47w] {
    color: var(--nocturne-text);
}

/* The sheet's way-in arrow (1d); the drawer's rows are compact enough without it. */
.drawer-row-go[b-r2em84v47w] {
    display: none;
    flex: none;
    margin-left: auto;
    color: var(--nocturne-text-faint);
}

.drawer-row-metrics[b-r2em84v47w] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--nocturne-text-muted);
}

.drawer-row.is-current .metric-turns[b-r2em84v47w] {
    color: var(--nocturne-accent-text);
}

.metric-seats[b-r2em84v47w] {
    display: flex;
    gap: 2px;
}

.metric-mark[b-r2em84v47w] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 50%;
    background: var(--nocturne-accent-deep);
    font-size: 7px;
    color: var(--nocturne-accent-text);
}

/* Accent whenever a decision came out of it (1c): the journal is what brings someone back, so the
   threads that fed it are the ones worth finding. */
.metric-decisions[b-r2em84v47w] {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--nocturne-accent-text);
}

/* A turn still being answered (2b), drawn as the conversation page's own live pip: the accent, blinking. */
.metric-live[b-r2em84v47w] {
    flex: none;
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--nocturne-accent);
    animation: drawer-live-b-r2em84v47w 1.1s steps(1, end) infinite;
}

.metric-live + .metric-time[b-r2em84v47w] {
    margin-left: 0;
}

@keyframes drawer-live-b-r2em84v47w {
    50% {
        opacity: .3;
    }
}

.metric-time[b-r2em84v47w] {
    margin-left: auto;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .metric-live[b-r2em84v47w] {
        animation: none;
    }
}

.drawer-row-spoken[b-r2em84v47w] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.drawer-no-matches[b-r2em84v47w] {
    padding: 0 2px;
}

.drawer-foot[b-r2em84v47w] {
    flex: none;
    padding: 11px 12px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.drawer-foot[b-r2em84v47w]  .state-action {
    box-sizing: border-box;
    width: 100%;
}

/* Full width: the list is in the sidebar again, and a drawer left open by a window that has since
   widened would cover it. drawer.js closes it; this keeps it out of sight until it does. */
@media (width >= 1024px) {
    .drawer:popover-open[b-r2em84v47w],
    .drawer:popover-open + .drawer-scrim[b-r2em84v47w] {
        display: none;
    }
}

/*
  Compact, below 640px (1d): the same list as a full sheet above the 56px bottom bar, which stays in
  view with its Conversations tab marked. No scrim — there is no page left beside it to dim. Rows and
  the search field are 44px targets, and each row keeps all four of its values.
*/
@media (width < 640px) {
    .drawer[b-r2em84v47w] {
        inset: 0 0 56px;
        width: auto;
        border-right: 0;
        box-shadow: none;
    }

    .drawer:popover-open + .drawer-scrim[b-r2em84v47w] {
        display: none;
    }

    .drawer-head[b-r2em84v47w] {
        gap: 10px;
        padding: 6px 6px 6px 16px;
    }

    .drawer-title[b-r2em84v47w] {
        gap: 10px;
        font-size: 13px;
    }

    .drawer-count[b-r2em84v47w] {
        font-size: 10px;
    }

    .drawer-close[b-r2em84v47w] {
        width: 44px;
        height: 44px;
    }

    .drawer-search[b-r2em84v47w] {
        box-sizing: border-box;
        gap: 8px;
        min-height: 44px;
        margin: 12px 16px 0;
        padding: 0 11px;
    }

    .drawer-search-input[b-r2em84v47w] {
        align-self: stretch;
        font-size: 12px;
    }

    .drawer-body[b-r2em84v47w] {
        padding: 14px 16px;
    }

    .drawer-group:not(:first-child) .drawer-break[b-r2em84v47w] {
        padding-top: 16px;
    }

    .drawer-break[b-r2em84v47w] {
        padding: 0 0 8px;
    }

    .drawer-rows[b-r2em84v47w] {
        gap: 0;
    }

    .drawer-row[b-r2em84v47w] {
        box-sizing: border-box;
        gap: 6px;
        min-height: 44px;
        padding: 11px 0;
        border-bottom: 1px solid var(--nocturne-line-soft);
        border-radius: 0;
    }

    /* The edge needs room beside the text, so the open row reaches into the gutter for it rather than
       pushing its title out of line with the others. */
    .drawer-row.is-current[b-r2em84v47w] {
        margin-inline: -10px;
        padding-inline: 10px;
    }

    .drawer-row-name[b-r2em84v47w] {
        font-size: 13px;
        color: var(--nocturne-text);
    }

    .drawer-row-go[b-r2em84v47w] {
        display: flex;
    }

    .drawer-row-metrics[b-r2em84v47w] {
        gap: 9px;
        font-size: 10px;
    }

    .metric-seats[b-r2em84v47w] {
        gap: 3px;
    }

    .metric-mark[b-r2em84v47w] {
        width: 15px;
        height: 15px;
        font-size: 7.5px;
    }

    .drawer-foot[b-r2em84v47w] {
        padding: 12px 16px;
    }
}
/* /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 and who-you-are, 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: 12.5px;
    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;
}

.page-bar-mark[b-qgcgivc1um] {
    display: none;
    flex: none;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--nocturne-accent);
    border-radius: 3px;
    transform: rotate(45deg);
}

/*
  The way back up, from design/"Conversation drawer - issue 85.dc.html" 2a: below 1024px only. At full
  width the list sits in the sidebar beside the page, so there is nothing to go back up to (2b).
*/
.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: 12px;
        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 mark moves up here from the sidebar, and the gutter tightens again. */
@media (width < 640px) {
    .page-bar[b-qgcgivc1um] {
        gap: 10px;
        padding: 0 14px;
    }

    .page-bar-mark[b-qgcgivc1um] {
        display: block;
    }

    /* 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;
    }
}
/* /Features/Shell/Sidebar.razor.rz.scp.css */
/*
  The left rail, from design/"App shell - issue 32.dc.html" 1a and the nav states in 1c. Tokens come
  from ClientCommon's nocturne.css.

  NavLink renders its own <a>, which this component's scope attribute does not reach — hence ::deep
  under the <nav> for every rule about a nav item.
*/

.sidebar[b-0b9sq5crdm] {
    position: sticky;
    top: 0;
    display: flex;
    flex: none;
    flex-direction: column;
    width: 216px;
    height: 100vh;
    border-right: 1px solid var(--nocturne-line-soft);
    background: var(--nocturne-rail);
    font-family: var(--font-sans);
}

.sidebar-brand[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nocturne-text);
    text-decoration: none;
}

/* The product mark: a square on its corner, as drawn in every artboard. */
.sidebar-mark[b-0b9sq5crdm] {
    flex: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--nocturne-accent);
    border-radius: 3px;
    transform: rotate(45deg);
}

.sidebar-new[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 8px 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    font-size: 12px;
    color: var(--nocturne-accent-text);
    text-decoration: none;
}

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

.sidebar-brand:focus-visible[b-0b9sq5crdm],
.sidebar-new:focus-visible[b-0b9sq5crdm] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.sidebar-nav[b-0b9sq5crdm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 10px 0;
}

.sidebar-nav[b-0b9sq5crdm]  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--nocturne-text-dim);
    text-decoration: none;
}

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

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

.sidebar-nav[b-0b9sq5crdm]  .sidebar-link:focus-visible {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

/* Active is a tint plus a 2px accent edge, not colour alone (1c), so the highlight survives a glance
   and a high-contrast mode that flattens the tint. NavLink sets the class from the route. */
.sidebar-nav[b-0b9sq5crdm]  .sidebar-link.active {
    background: var(--nocturne-accent-wash-strong);
    box-shadow: inset 2px 0 0 var(--nocturne-accent);
    color: var(--nocturne-text);
}

.sidebar-nav[b-0b9sq5crdm]  .sidebar-link.active svg {
    color: var(--nocturne-accent);
}

/* The drawer's rail item (design/"Conversation drawer - issue 85.dc.html" 1b). Not drawn at full width,
   where the Conversations link stands in its place and RECENT is under it. */
.drawer-trigger[b-0b9sq5crdm] {
    display: none;
}

.sidebar-recent[b-0b9sq5crdm] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 20px 10px 0;
}

.sidebar-recent-head[b-0b9sq5crdm] {
    margin: 0;
    padding: 0 11px 8px;
    font: 400 9.5px var(--font-mono);
    letter-spacing: .1em;
    color: var(--nocturne-text-faintest);
}

.sidebar-recent-list[b-0b9sq5crdm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.recent-link[b-0b9sq5crdm] {
    display: block;
    padding: 7px 11px;
    overflow: hidden;
    border-radius: 6px;
    font-size: 12px;
    color: var(--nocturne-text-muted);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Inset, unlike the other rail controls: the list scrolls, and a ring drawn outside a full-width
   link would be clipped at the list's edges. The accent reads clearly on the faint row wash. */
.recent-link:focus-visible[b-0b9sq5crdm] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: -2px;
}

.sidebar-account[b-0b9sq5crdm] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 12px 19px;
    border-top: 1px solid var(--nocturne-line-soft);
}

.sidebar-avatar[b-0b9sq5crdm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    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);
}

.sidebar-account-name[b-0b9sq5crdm] {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    color: var(--nocturne-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
  Below 1024px, in both the rail and the bar: the Conversations link gives way to the button that
  opens the drawer (1b), styled as the nav item it replaces — a tint and a 2px accent edge in the
  Conversations section, which it tracks itself because NavLink only marks links.

  Open, the tint strengthens and the caret turns to point back at the rail the drawer closes into. The
  0.2 wash has no token of its own; the design draws it at exactly that.
*/
@media (width < 1024px) {
    .sidebar-nav[b-0b9sq5crdm]  .sidebar-link-conversations {
        display: none;
    }

    .drawer-trigger[b-0b9sq5crdm] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        font: inherit;
        font-size: 12px;
        color: var(--nocturne-text-dim);
        cursor: pointer;
    }

    .drawer-trigger-icon[b-0b9sq5crdm] {
        display: flex;
        color: var(--nocturne-text-muted);
    }

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

    .drawer-trigger:focus-visible[b-0b9sq5crdm] {
        outline: 2px solid var(--nocturne-accent);
        outline-offset: 2px;
    }

    .drawer-trigger.is-section[b-0b9sq5crdm] {
        background: var(--nocturne-accent-wash-strong);
        box-shadow: inset 2px 0 0 var(--nocturne-accent);
        color: var(--nocturne-text);
    }

    .drawer-trigger.is-section .drawer-trigger-icon[b-0b9sq5crdm] {
        color: var(--nocturne-accent);
    }

    body:has(#conversation-drawer:popover-open) .drawer-trigger[b-0b9sq5crdm] {
        background: rgba(145, 132, 217, .2);
        box-shadow: inset 2px 0 0 var(--nocturne-accent);
        color: var(--nocturne-text);
    }

    body:has(#conversation-drawer:popover-open) .drawer-trigger-icon[b-0b9sq5crdm] {
        color: var(--nocturne-accent-text);
    }

    /* The caret that marks the item as a disclosure rather than a destination (1b). */
    .drawer-caret[b-0b9sq5crdm] {
        position: absolute;
        right: 2px;
        bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 11px;
        height: 11px;
        border: 1px solid var(--nocturne-line-strong);
        border-radius: 3px;
        background: var(--nocturne-accent-deep);
        color: var(--nocturne-accent-text);
    }

    body:has(#conversation-drawer:popover-open) .drawer-caret[b-0b9sq5crdm] {
        transform: rotate(180deg);
    }

    .drawer-trigger-count[b-0b9sq5crdm] {
        font: 400 9px var(--font-mono);
        color: var(--nocturne-text-muted);
    }

    .drawer-trigger-keys[b-0b9sq5crdm] {
        padding: 1px 5px;
        border-radius: 3px;
        background: var(--nocturne-line);
        font: 400 9px var(--font-mono);
        color: var(--nocturne-text-dim);
    }
}

/*
  Narrow, 640px to 1023px — design/"Responsive pass - issue 36.dc.html" 1a, with the rail drawn in
  "App shell - issue 32.dc.html" 1d: a 56px icon rail. The labels leave the eye but not the markup —
  each stays its link's accessible name and comes back as a tooltip on hover or keyboard focus. RECENT
  and the account name go with them; there is no room to name a conversation in 56px, so the
  Conversations item opens the drawer that does (ConversationDrawer).

  The order stays the markup's, New first, so the rail reads in the order a keyboard reaches it.
  Signed out, the rail keeps its labels (see Sidebar.razor), hence :not(.is-anonymous).
*/
@media (640px <= width < 1024px) {
    .sidebar:not(.is-anonymous)[b-0b9sq5crdm] {
        z-index: 20;
        align-items: center;
        width: 56px;
    }

    .sidebar:not(.is-anonymous) .sidebar-brand[b-0b9sq5crdm] {
        padding: 14px 0 10px;
    }

    .sidebar-new[b-0b9sq5crdm] {
        position: relative;
        width: 40px;
        height: 36px;
        margin: 8px 0 0;
        padding: 0;
        border-color: transparent;
        color: var(--nocturne-text-muted);
    }

    .sidebar:not(.is-anonymous) .sidebar-nav[b-0b9sq5crdm] {
        align-items: center;
        gap: 6px;
        padding: 12px 0 0;
    }

    .sidebar:not(.is-anonymous) .sidebar-nav[b-0b9sq5crdm]  .sidebar-link {
        position: relative;
        justify-content: center;
        width: 40px;
        height: 36px;
        padding: 0;
    }

    .drawer-trigger[b-0b9sq5crdm] {
        width: 40px;
        height: 36px;
    }

    .sidebar-recent[b-0b9sq5crdm],
    .sidebar-account-name[b-0b9sq5crdm] {
        display: none;
    }

    .sidebar-account[b-0b9sq5crdm] {
        align-self: stretch;
        justify-content: center;
        padding: 12px 0;
    }

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

    /* The label as a tooltip, beside the icon and over the page: on focus as well as hover, because a
       title attribute would show for a mouse only. */
    .sidebar-new:hover .sidebar-label[b-0b9sq5crdm],
    .sidebar-new:focus-visible .sidebar-label[b-0b9sq5crdm],
    .drawer-trigger:hover .sidebar-label[b-0b9sq5crdm],
    .drawer-trigger:focus-visible .sidebar-label[b-0b9sq5crdm],
    .sidebar:not(.is-anonymous) .sidebar-nav[b-0b9sq5crdm]  .sidebar-link:hover .sidebar-label,
    .sidebar:not(.is-anonymous) .sidebar-nav[b-0b9sq5crdm]  .sidebar-link:focus-visible .sidebar-label {
        top: 50%;
        left: calc(100% + 10px);
        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: 12px;
        color: var(--nocturne-text);
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* The drawer's tooltip promises what the item delivers (1b): the count, and the shortcut. */
    .drawer-trigger:hover .sidebar-label[b-0b9sq5crdm],
    .drawer-trigger:focus-visible .sidebar-label[b-0b9sq5crdm] {
        display: flex;
        align-items: center;
        gap: 8px;
        border-color: var(--nocturne-line-strong);
    }
}

/*
  Compact, below 640px (1a): the rail leaves the layout and the same links become a bottom bar, icon
  over label, one column each. The brand, RECENT and the account go — the mark and the account menu are
  in the top bar at this width (ShellPage). The bar is 56px tall: MainLayout reserves that much under
  the page, and the conversation's pinned composer sits that far up. Its Conversations tab opens the
  drawer as a sheet above it (ConversationDrawer, 1d).
*/
@media (width < 640px) {
    .sidebar[b-0b9sq5crdm] {
        position: fixed;
        inset: auto 0 0;
        z-index: 20;
        flex-direction: row;
        align-items: stretch;
        width: auto;
        height: 56px;
        border-top: 1px solid var(--nocturne-line-soft);
        border-right: 0;
    }

    .sidebar-brand[b-0b9sq5crdm],
    .sidebar-recent[b-0b9sq5crdm],
    .sidebar-account[b-0b9sq5crdm] {
        display: none;
    }

    /* Two of the three columns, so New and the two destinations share the width evenly. */
    .sidebar-nav[b-0b9sq5crdm] {
        flex: 2;
        flex-direction: row;
        gap: 0;
        padding: 0;
    }

    .sidebar-new[b-0b9sq5crdm],
    .sidebar-nav[b-0b9sq5crdm]  .sidebar-link,
    .drawer-trigger[b-0b9sq5crdm] {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-height: 44px;
        margin: 0;
        padding: 0 4px;
        border: 0;
        border-radius: 0;
        font-size: 10px;
    }

    .sidebar-new[b-0b9sq5crdm] {
        color: var(--nocturne-text-muted);
    }

    /* The accent edge moves to the top, the side of the item that faces the page. */
    .sidebar-nav[b-0b9sq5crdm]  .sidebar-link.active,
    .drawer-trigger.is-section[b-0b9sq5crdm],
    body:has(#conversation-drawer:popover-open) .drawer-trigger[b-0b9sq5crdm] {
        box-shadow: inset 0 2px 0 var(--nocturne-accent);
    }

    /* The tab is labelled here, and the sheet it opens is headed with the count. */
    .drawer-caret[b-0b9sq5crdm],
    .drawer-trigger-count[b-0b9sq5crdm],
    .drawer-trigger-keys[b-0b9sq5crdm] {
        display: none;
    }

    /* Inset: the bar is flush with the window's edge, where a ring drawn outside would be cut off. */
    .sidebar-new:focus-visible[b-0b9sq5crdm],
    .sidebar-nav[b-0b9sq5crdm]  .sidebar-link:focus-visible,
    .drawer-trigger:focus-visible[b-0b9sq5crdm] {
        outline-offset: -2px;
    }
}
/* /Features/Shell/UserMenu.razor.rz.scp.css */
/*
  The account menu, from design/"App shell - issue 32.dc.html" 1c. Tokens come from ClientCommon's nocturne.css.
*/

.user-menu[b-y5s9jxdyzs] {
    position: relative;
    flex: none;
    margin-left: auto;
}

.user-menu-trigger[b-y5s9jxdyzs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--nocturne-text-muted);
    list-style: none;
    cursor: pointer;
}

.user-menu-trigger[b-y5s9jxdyzs]::-webkit-details-marker {
    display: none;
}

.user-menu-trigger:hover[b-y5s9jxdyzs] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

.user-menu-trigger:focus-visible[b-y5s9jxdyzs] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.user-menu[open] .user-menu-trigger[b-y5s9jxdyzs] {
    border-color: var(--nocturne-line);
    background: var(--nocturne-raised);
    color: var(--nocturne-text);
}

.user-menu[open] .user-menu-trigger[b-y5s9jxdyzs]  svg {
    transform: rotate(180deg);
}

.user-avatar[b-y5s9jxdyzs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    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);
}

.user-menu-panel[b-y5s9jxdyzs] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 214px;
    overflow: hidden;
    border: 1px solid var(--nocturne-line);
    border-radius: 10px;
    background: var(--nocturne-surface);
    box-shadow: var(--nocturne-shadow);
}

.user-menu-identity[b-y5s9jxdyzs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--nocturne-line-soft);
}

.user-menu-name[b-y5s9jxdyzs],
.user-menu-email[b-y5s9jxdyzs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-name[b-y5s9jxdyzs] {
    font-size: 12px;
    color: var(--nocturne-text);
}

.user-menu-email[b-y5s9jxdyzs] {
    font-size: 10.5px;
    color: var(--nocturne-text-faint);
}

.user-menu-actions[b-y5s9jxdyzs] {
    margin: 0;
    padding: 5px;
}

.user-menu-item[b-y5s9jxdyzs] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: 400 11.5px var(--font-sans);
    color: var(--nocturne-text-dim);
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover[b-y5s9jxdyzs] {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

.user-menu-item:focus-visible[b-y5s9jxdyzs] {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: -2px;
}

/* Compact, below 640px: the trigger is the only way to the account, and sign-out is behind it, so
   both are thumb-sized (design/"Responsive pass - issue 36.dc.html" 1d's 44px). */
@media (width < 640px) {
    .user-menu-trigger[b-y5s9jxdyzs] {
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .user-menu-item[b-y5s9jxdyzs] {
        min-height: 44px;
    }
}