/* /Components/Design/FolderRow.razor.rz.scp.css */
/* Spec 5a: row height 22px, font 13px, no row borders. */

.fr-row[b-1uzqpy2o1s] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    text-decoration: none;
    color: inherit;
    border: var(--rule-row) solid transparent;
}

.fr-row:hover[b-1uzqpy2o1s] {
    background: var(--tint-hover);
}

/* Spec: selected row is a 22% accent tint with a 1px accent border — a focus ring, not a fill. */
.fr-on[b-1uzqpy2o1s] {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-color: var(--color-accent);
}

.fr-twisty[b-1uzqpy2o1s] {
    width: 14px;
    height: 14px;
    flex: none;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* Spec: glyph colour encodes type; folders are accent-2-600. */
.fr-glyph[b-1uzqpy2o1s] {
    color: var(--color-accent-2-600);
    flex: none;
}

.fr-name[b-1uzqpy2o1s] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-health[b-1uzqpy2o1s] {
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--color-accent-2);
}

.fr-count[b-1uzqpy2o1s] {
    flex: none;
}

/* Spec: indent guides as a 1px left border on nested containers, padding-left 18px. */
.fr-children[b-1uzqpy2o1s] {
    margin-left: 12px;
    padding-left: 18px;
    border-left: var(--rule-row) solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
/* /Components/Design/JobDrawer.razor.rz.scp.css */
/* 6c — Job drawer. Spec: 620px over the queue, surface, border-left 2px, shadow-lg. */

.drawer[b-2njkbp13it] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 620px;
    max-width: 100%;
    z-index: 20;
    background: var(--color-surface);
    border-left: var(--rule-section) solid var(--color-divider);
    display: flex;
    flex-direction: column;
}

.drawer-head[b-2njkbp13it] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.drawer-ref[b-2njkbp13it] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h5);
}

.drawer-close[b-2njkbp13it] {
    margin-left: auto;
}

.drawer-sub[b-2njkbp13it] {
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.drawer-tabs[b-2njkbp13it] {
    display: flex;
    border-bottom: var(--rule-section) solid var(--color-divider);
    overflow-x: auto;
}

.drawer-tab[b-2njkbp13it] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.drawer-tab-on[b-2njkbp13it] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

.drawer-body[b-2njkbp13it] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.drawer-caption[b-2njkbp13it] {
    margin: 0 0 var(--space-3);
}

.drawer-attempts[b-2njkbp13it] {
    display: flex;
    flex-direction: column;
}

/* Spec row grid: 34px 92px 1fr 74px. */
.drawer-attempt[b-2njkbp13it] {
    display: grid;
    grid-template-columns: 34px 92px 1fr 74px;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: var(--rule-row) solid var(--color-divider);
    font-size: var(--text-sm);
}

/* Spec: the final row is accent-tinted and reads "— gave up". */
.drawer-attempt-last[b-2njkbp13it] {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.drawer-attempt-what[b-2njkbp13it] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-gaveup[b-2njkbp13it] {
    color: var(--muted);
}

.drawer-attempt-status[b-2njkbp13it] {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--color-accent);
}

.drawer-pre[b-2njkbp13it] {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Spec: the response gets a 3px accent left border. */
.drawer-pre-response[b-2njkbp13it] {
    border-left: 3px solid var(--color-accent);
}

.drawer-note[b-2njkbp13it] {
    margin: 0;
    font-size: var(--text-sm);
}

.drawer-foot[b-2njkbp13it] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--rule-section) solid var(--color-divider);
}

.drawer-foot-end[b-2njkbp13it] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}
/* /Components/Design/PickerNode.razor.rz.scp.css */
/* Spec 6a: folder rows 26px, account rows 24px. */

.pn-row[b-rlrkvx9ef4],
.pn-account[b-rlrkvx9ef4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 26px;
    font-size: var(--text-sm);
}

.pn-account[b-rlrkvx9ef4] {
    height: 24px;
}

/* Spec: an excluded account stays visible at .55 with its reason. Never hidden. */
.pn-account-out[b-rlrkvx9ef4] {
    opacity: 0.55;
}

.pn-check[b-rlrkvx9ef4] {
    position: static;
    opacity: 1;
    width: 14px;
    height: 14px;
    flex: none;
    accent-color: var(--color-accent);
}

.pn-twisty[b-rlrkvx9ef4] {
    width: 14px;
    height: 14px;
    flex: none;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.pn-glyph[b-rlrkvx9ef4] {
    color: var(--color-accent-2-600);
}

.pn-name[b-rlrkvx9ef4] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-count[b-rlrkvx9ef4] {
    flex: none;
}

/* Spec: partial counts are accent-coloured. */
.pn-partial[b-rlrkvx9ef4] {
    color: var(--color-accent);
}

.pn-reason[b-rlrkvx9ef4] {
    flex: none;
    color: var(--color-accent-2-800);
}

/* Spec: indentation is a padding-left step on a container with a 1px indent guide. */
.pn-children[b-rlrkvx9ef4] {
    margin-left: 10px;
    padding-left: 26px;
    border-left: var(--rule-row) solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page-main[b-gebv325hpp] {
    min-height: 100vh;
    background: var(--color-bg);
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Two panes: sidebar fixed at 300px, main fluid.

   The mockups are drawn at a fixed 1280px, which tells us proportions and minimums, not a hard
   layout — so the sidebar keeps its 300px and the main pane takes the rest. Below the point where
   both no longer fit, the sidebar stacks above the content rather than squeezing. Mobile proper is
   explicitly not designed; this is a graceful minimum, not a mobile layout. */

.pub[b-al0bhi88h3] {
    min-height: 100vh;
    display: flex;
    background: var(--color-bg);
    color: var(--color-text);
}

@media (max-width: 720px) {
    .pub[b-al0bhi88h3] {
        flex-direction: column;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zx4prgwc1e],
.components-reconnect-repeated-attempt-visible[b-zx4prgwc1e],
.components-reconnect-failed-visible[b-zx4prgwc1e],
.components-pause-visible[b-zx4prgwc1e],
.components-resume-failed-visible[b-zx4prgwc1e],
.components-rejoining-animation[b-zx4prgwc1e] {
    display: none;
}

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


/* Themed onto the token set. This overlay appears over the workspace when the circuit drops —
   which is precisely when an operator is watching the queue — so it cannot be the framework default.
   It is a sheet, so it is one of the few things allowed to be elevated. */
#components-reconnect-modal[b-zx4prgwc1e] {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    width: 20rem;
    margin: 20vh auto;
    padding: var(--space-8);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--edge-hairline);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zx4prgwc1e 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-zx4prgwc1e]::backdrop {
    background-color: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    animation: components-reconnect-modal-fadeInOpacity-b-zx4prgwc1e 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zx4prgwc1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

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

/* Matches .btn-primary, including its padding. */
#components-reconnect-modal button[b-zx4prgwc1e] {
    border: 0;
    background-color: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-ui);
    padding: var(--space-2) calc(var(--space-3) * 1.2);
    border-radius: var(--radius-md);
    cursor: pointer;
}

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/WorkspaceLayout.razor.rz.scp.css */
/* Workspace shell. Every value is a token — see wwwroot/css/tokens.css. */

.ws[b-mnazvw9fis] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

/* Spec: gap 24px. (The mockup markup carries an inline gap:26px; the spec's prose is the 24 the
   scale actually defines, and that is what this uses.) */
.ws-nav[b-mnazvw9fis] {
    gap: var(--space-6);
    flex-wrap: wrap;
}

.ws-brand[b-mnazvw9fis] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 0;
}

.ws-brand-tail[b-mnazvw9fis] {
    /* The mono metadata register: 11px, uppercase, wide tracking, accent. */
    text-transform: none;
}

/* ::deep is required, not stylistic. NavLink renders the <a> itself, so Blazor's scope attribute is
   never stamped on it and a plain `.ws-link` selector silently matches nothing — taking the current
   item's 600 weight with it. */
.ws-nav[b-mnazvw9fis]  .ws-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    font-size: var(--text-sm);
}

.ws-nav[b-mnazvw9fis]  .ws-link:hover {
    color: var(--color-accent);
}

/* NavLink adds `active` to the current item. Spec: current item is 600 weight and accent-coloured. */
.ws-nav[b-mnazvw9fis]  .ws-link.active {
    color: var(--color-accent);
    font-weight: 600;
}

.ws-nav-end[b-mnazvw9fis] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ws-user[b-mnazvw9fis] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.ws-avatar[b-mnazvw9fis] {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 10px;
}

.ws-main[b-mnazvw9fis] {
    flex: 1;
    min-width: 0;
}

.ws-signout[b-mnazvw9fis] {
    display: flex;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.err[b-30iskduh2x] {
    padding: var(--space-8) var(--space-4);
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.nf[b-em0ko1aih3] {
    padding: var(--space-8) var(--space-4);
}
/* /Components/Pages/Public/Entry.razor.rz.scp.css */
/* 1c — Reading view. Measurements from docs/design/SPEC.md. */

/* — sidebar middle — */

.side-back[b-ticxr0jppk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 13px 20px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-sm);
}

.side-back:hover[b-ticxr0jppk] {
    background: var(--tint-hover);
}

.side-back:active[b-ticxr0jppk] {
    background: var(--tint-pressed);
}

/* Spec: "a topic label in accent (SELF-HOSTING · 9)". */
.side-topic-label[b-ticxr0jppk] {
    padding: var(--space-4) 20px var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

.side-siblings[b-ticxr0jppk] {
    display: flex;
    flex-direction: column;
}

/* Spec: "Siblings sit at opacity .75." */
.side-sibling[b-ticxr0jppk] {
    padding: var(--space-3) 20px;
    text-decoration: none;
    color: inherit;
    font-size: 13.5px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    opacity: 0.75;

    /* The current entry gains a 3px left border; siblings reserve the space so the list does not
       shift sideways as you move between entries. */
    border-left: 3px solid transparent;
}

.side-sibling:hover[b-ticxr0jppk] {
    opacity: 1;
    background: var(--tint-hover);
}

.side-sibling:active[b-ticxr0jppk] {
    opacity: 1;
    background: var(--tint-pressed);
}

/* Spec: "Current entry: 12% accent tint + border-left: 3px solid accent, 600 weight." */
.side-sibling.current[b-ticxr0jppk] {
    opacity: 1;
    color: var(--color-text);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-left-color: var(--color-accent);
}

/* — main pane — */

.read[b-ticxr0jppk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Spec: a thin breadcrumb strip above the article, 11px mono, border-bottom 1px. */
.read-crumb[b-ticxr0jppk] {
    padding: var(--space-3) 36px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-crumb);
    color: var(--muted);
}

.read-crumb-end[b-ticxr0jppk] {
    margin-left: auto;
}

/* Spec: article max-width 760px, padding 44px 56px. */
.read-article[b-ticxr0jppk] {
    max-width: 760px;
    padding: 44px 56px;
}

.read-kicker[b-ticxr0jppk] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-kicker);
    color: var(--color-accent);
}

/* Spec: h1 46px, line-height 1.04, text-wrap: pretty. */
.read-title[b-ticxr0jppk] {
    margin: 14px 0 0;
    font-size: 46px;
    line-height: 1.04;
    text-wrap: pretty;
}

.read-byline[b-ticxr0jppk] {
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* — article body —
   These style authored HTML, so they are element selectors rather than classes: the editor emits
   <p>, <h3>, <pre>, <blockquote> and has no way to add class names.

   ::deep is REQUIRED here. The body arrives as a MarkupString, and Blazor only stamps its scope
   attribute on elements it compiled — never on raw HTML injected at runtime. Without ::deep these
   rules match nothing and the article silently renders as unstyled prose: no code block, no
   blockquote rule. Same trap as NavLink in the workspace shell. */

.read-body[b-ticxr0jppk] {
    font-size: var(--text-body);
    line-height: 1.65;
}

/* Spec: lede 17.5px/1.6 — the first paragraph. */
.read-body[b-ticxr0jppk]  > p:first-of-type {
    font-size: 17.5px;
    line-height: 1.6;
}

.read-body[b-ticxr0jppk]  h3 {
    margin: 30px 0 10px;
}

.read-body[b-ticxr0jppk]  p {
    line-height: 1.65;
}

/* Spec: code block — neutral-100 bg, border-left 3px accent, 12.5px mono. */
.read-body[b-ticxr0jppk]  pre {
    margin: 22px 0;
    background: var(--color-neutral-100);
    border-left: 3px solid var(--color-accent);
    padding: 14px var(--space-4);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--color-neutral-900);
    white-space: pre;
    overflow-x: auto;
}

.read-body[b-ticxr0jppk]  code {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.read-body[b-ticxr0jppk]  pre code {
    font-size: inherit;
}

/* Spec: blockquote — border-left 2px divider, 17px, 78% text. */
.read-body[b-ticxr0jppk]  blockquote {
    margin: 26px 0;
    padding-left: 18px;
    border-left: var(--rule-section) solid var(--color-divider);
    font-size: 17px;
    font-style: normal;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.read-body[b-ticxr0jppk]  figure {
    margin: var(--space-6) 0;
}

.read-body[b-ticxr0jppk]  img {
    width: 100%;
}

.read-tags[b-ticxr0jppk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.read-state[b-ticxr0jppk] {
    padding: 44px 56px;
}

.read-state-action[b-ticxr0jppk] {
    margin-top: var(--space-2);
}

@media (max-width: 720px) {
    .read-article[b-ticxr0jppk],
    .read-state[b-ticxr0jppk] {
        padding: var(--space-6) var(--space-4);
    }

    .read-crumb[b-ticxr0jppk] {
        padding: var(--space-3) var(--space-4);
    }
}
/* /Components/Pages/Public/Index.razor.rz.scp.css */
/* 1a — Public index. Measurements from docs/design/SPEC.md. */

/* — sidebar middle — */

/* Spec: search row 14px 20px, border-bottom 1px. */
.side-search[b-sjuoumi6g9] {
    padding: 14px 20px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Borderless: the row's own rule is the boundary, so the input must not draw a second one. */
.side-search-input[b-sjuoumi6g9] {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 22px;
}

/* Spec: TOPICS label 16px 20px 8px, 11px mono, .16em, 50% text. */
.side-label[b-sjuoumi6g9] {
    padding: var(--space-4) 20px var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    line-height: 1;
    letter-spacing: var(--tracking-wide);
    color: var(--muted);
}

.side-topics[b-sjuoumi6g9] {
    display: flex;
    flex-direction: column;
}

/* Spec: topic rows padding 11px 20px, border-bottom 1px, 10px dot + name 14px + count 11px mono. */
.side-topic[b-sjuoumi6g9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.side-topic:hover[b-sjuoumi6g9] {
    background: var(--tint-hover);
}

.side-topic:active[b-sjuoumi6g9] {
    background: var(--tint-pressed);
}

/* Spec: "Active row is a solid accent fill with bg-coloured text." */
.side-topic.current[b-sjuoumi6g9] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.side-topic.current:hover[b-sjuoumi6g9] {
    background: var(--color-accent);
}

.side-topic-name[b-sjuoumi6g9] {
    flex: 1;
    font-size: var(--text-ui);
}

.side-topic.current .side-topic-name[b-sjuoumi6g9] {
    font-weight: 600;
}

.side-topic-count[b-sjuoumi6g9] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
}

/* On the accent fill the count is bg-coloured like the label, held back a little. */
.side-topic.current .side-topic-count[b-sjuoumi6g9] {
    color: var(--color-bg);
    opacity: 0.85;
}

/* — main pane — */

.idx[b-sjuoumi6g9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Spec: header padding 30px 36px 22px, border-bottom 2px. */
.idx-head[b-sjuoumi6g9] {
    padding: 30px 36px 22px;
    border-bottom: var(--rule-section) solid var(--color-divider);
    display: flex;
    align-items: flex-end;
    gap: var(--space-6);
}

.idx-head-text[b-sjuoumi6g9] {
    flex: 1;
    min-width: 0;
}

/* Spec: INDEX at h1 44px. The type scale's h1 is 42px; this screen overrides to the drawn size. */
.idx-title[b-sjuoumi6g9] {
    margin: 0;
    font-size: 44px;
}

.idx-sub[b-sjuoumi6g9] {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Spec: entry rows are a grid 52px 1fr 150px 108px, gap 16px, baseline, padding 20px 36px. */
.idx-rows[b-sjuoumi6g9] {
    flex: 1;
}

.idx-row[b-sjuoumi6g9] {
    display: grid;
    grid-template-columns: 52px 1fr 150px 108px;
    gap: var(--space-4);
    align-items: baseline;
    padding: 20px 36px;
    text-decoration: none;
    color: inherit;
    border-bottom: var(--rule-row) solid var(--color-divider);
}

/* Spec: "First row carries a 4% text-tint background (hover uses the same)." */
.idx-row:first-child[b-sjuoumi6g9],
.idx-row:hover[b-sjuoumi6g9] {
    background: var(--tint-row-hover);
}

.idx-row:active[b-sjuoumi6g9] {
    background: var(--tint-pressed);
}

.idx-num[b-sjuoumi6g9] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-accent);
}

.idx-entry-title[b-sjuoumi6g9] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 19px;
}

.idx-dek[b-sjuoumi6g9] {
    display: block;
    margin-top: 5px;
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.idx-topic[b-sjuoumi6g9] {
    justify-self: start;
}

.idx-date[b-sjuoumi6g9] {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Spec: footer SHOWING 01–06 OF 42 + ghost Older button. */
.idx-foot[b-sjuoumi6g9] {
    padding: var(--space-4) 36px;
    border-top: var(--rule-section) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.idx-foot-newer[b-sjuoumi6g9] {
    margin-left: auto;
}

/* When there is no Newer button, Older still sits right. */
.idx-foot-older:first-of-type[b-sjuoumi6g9] {
    margin-left: auto;
}

/* Empty, loading and error all share this block. */
.idx-state[b-sjuoumi6g9] {
    flex: 1;
    padding: 30px 36px;
}

.idx-state-action[b-sjuoumi6g9] {
    margin-top: var(--space-2);
}

@media (max-width: 900px) {
    /* The topic and date columns fold under the title rather than crushing it. */
    .idx-row[b-sjuoumi6g9] {
        grid-template-columns: 52px 1fr;
    }

    .idx-topic[b-sjuoumi6g9],
    .idx-date[b-sjuoumi6g9] {
        grid-column: 2;
    }
}

/* First-run notice. Present only until somebody claims the installation, then never again. Drawn as
   a section, so it is separated by the 2px rule like every other major block. */
.idx-claim[b-sjuoumi6g9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border: var(--rule-section) solid var(--color-accent);
}

.idx-claim-label[b-sjuoumi6g9] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-kicker);
    color: var(--color-accent);
}

.idx-claim-copy[b-sjuoumi6g9] {
    margin: 0;
    max-width: 60ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
/* /Components/Pages/Workspace/Accounts.razor.rz.scp.css */
/* 5a — Accounts tree. Measurements from docs/design/SPEC.md. */

.acc[b-vl7qz4rmiy] {
    display: flex;
    min-height: calc(100vh - 53px);
}

/* Spec: explorer 340px on surface. */
.acc-explorer[b-vl7qz4rmiy] {
    width: 340px;
    flex: none;
    background: var(--color-surface);
    border-right: var(--rule-section) solid var(--color-divider);
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 0;
}

/* Spec: header sections at 10.5px mono, .16em. */
.acc-section[b-vl7qz4rmiy] {
    padding: var(--space-2) var(--space-3);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
}

.acc-tree[b-vl7qz4rmiy] {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-2);
}

.acc-explorer-foot[b-vl7qz4rmiy] {
    padding: var(--space-2) var(--space-3);
    border-top: var(--rule-row) solid var(--color-divider);
}

.acc-detail[b-vl7qz4rmiy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.acc-crumb[b-vl7qz4rmiy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
    font-size: var(--text-sm);
}

.acc-folder-glyph[b-vl7qz4rmiy] {
    color: var(--color-accent-2-600);
}

.acc-crumb-end[b-vl7qz4rmiy] {
    margin-left: auto;
}

.acc-head[b-vl7qz4rmiy] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4) var(--space-4);
    border-bottom: var(--rule-section) solid var(--color-divider);
    flex-wrap: wrap;
}

.acc-head-text[b-vl7qz4rmiy] {
    flex: 1;
    min-width: 0;
}

.acc-title[b-vl7qz4rmiy] {
    margin: 0;
    font-size: var(--text-h3);
}

.acc-sub[b-vl7qz4rmiy] {
    margin-top: 6px;
}

.acc-inherits[b-vl7qz4rmiy] {
    margin-top: 6px;
    color: var(--color-accent);
}

.acc-table[b-vl7qz4rmiy] {
    table-layout: fixed;
}

.a-platform[b-vl7qz4rmiy] { width: 150px; }
.a-handle[b-vl7qz4rmiy] { width: 190px; }
.a-lang[b-vl7qz4rmiy] { width: 70px; }
.a-status[b-vl7qz4rmiy] { width: 110px; }
.a-last[b-vl7qz4rmiy] { width: 120px; }

.acc-platform[b-vl7qz4rmiy] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.acc-mono[b-vl7qz4rmiy] {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
}

.acc-state[b-vl7qz4rmiy] {
    padding: var(--space-8) var(--space-4);
}

@media (max-width: 900px) {
    .acc[b-vl7qz4rmiy] {
        flex-direction: column;
    }

    .acc-explorer[b-vl7qz4rmiy] {
        width: 100%;
        border-right: 0;
        border-bottom: var(--rule-section) solid var(--color-divider);
    }
}
/* /Components/Pages/Workspace/Connectors.razor.rz.scp.css */
/* 3b — Connectors. */

.con[b-t9ux5liypc] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 53px);
}

.con-head[b-t9ux5liypc] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 26px 30px 18px;
    border-bottom: var(--rule-section) solid var(--color-divider);
    flex-wrap: wrap;
}

.con-head-text[b-t9ux5liypc] {
    flex: 1;
    min-width: 0;
}

.con-title[b-t9ux5liypc] {
    margin: 0;
    font-size: 34px;
}

.con-sub[b-t9ux5liypc] {
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

/* Spec: 4-column tile grid, gap 1px on a divider background. */
.con-grid[b-t9ux5liypc] {
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.con-tile[b-t9ux5liypc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    min-height: 170px;
}

.con-tile-head[b-t9ux5liypc] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.con-name[b-t9ux5liypc] {
    flex: 1;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h5);
}

/* Spec: a 4px health bar, neutral-200 track with an accent fill. */
.con-bar[b-t9ux5liypc] {
    display: block;
    width: 100%;
    height: 4px;
    appearance: none;
    border: 0;
    background: var(--color-neutral-200);
}

.con-bar[b-t9ux5liypc]::-webkit-progress-bar { background: var(--color-neutral-200); }
.con-bar[b-t9ux5liypc]::-webkit-progress-value { background: var(--color-accent); }
.con-bar[b-t9ux5liypc]::-moz-progress-bar { background: var(--color-accent); }

.con-status[b-t9ux5liypc] {
    flex: 1;
}

.con-actions[b-t9ux5liypc] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.con-tile-add[b-t9ux5liypc] {
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    border: var(--rule-row) dashed var(--color-divider);
}

.con-state[b-t9ux5liypc] {
    padding: var(--space-8) 30px;
}

.con-state-action[b-t9ux5liypc] {
    margin-top: var(--space-2);
}

@media (max-width: 1200px) {
    .con-grid[b-t9ux5liypc] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .con-grid[b-t9ux5liypc] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Workspace/ConnectSheet.razor.rz.scp.css */
/* 3c / 3d — Connect sheet. Spec: an 880x890 sheet. */

.sheet[b-pxzz9y96p4] {
    width: 880px;
    max-width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: var(--rule-section) solid var(--color-divider);
}

.sheet-head[b-pxzz9y96p4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-section) solid var(--color-divider);
}

.sheet-title[b-pxzz9y96p4] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h5);
    letter-spacing: var(--tracking-label);
}

.sheet-close[b-pxzz9y96p4] {
    margin-left: auto;
}

.sheet-tabs[b-pxzz9y96p4] {
    display: flex;
    border-bottom: var(--rule-section) solid var(--color-divider);
    overflow-x: auto;
}

.sheet-tab[b-pxzz9y96p4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.sheet-tab-on[b-pxzz9y96p4] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

.sheet-body[b-pxzz9y96p4] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.sheet-note[b-pxzz9y96p4] {
    margin-bottom: var(--space-4);
    color: var(--color-accent);
}

/* Spec: numbered steps, display flex with gap 16px and an accent number in a 24px column. */
.step[b-pxzz9y96p4] {
    display: flex;
    gap: var(--space-4);
}

.step-no[b-pxzz9y96p4] {
    width: 24px;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
}

.step-body[b-pxzz9y96p4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.step-title[b-pxzz9y96p4] {
    margin: 0;
}

.sheet-secret[b-pxzz9y96p4] {
    display: flex;
    gap: var(--space-2);
}

.sheet-copy[b-pxzz9y96p4] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted-strong);
}

.sheet-provenance[b-pxzz9y96p4] {
    margin: 0;
}

.sheet-result[b-pxzz9y96p4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--rule-row) solid var(--color-divider);
    background: var(--color-bg);
}

.sheet-result-ok[b-pxzz9y96p4] {
    border-left: 3px solid var(--color-accent);
}

.sheet-result-bad[b-pxzz9y96p4] {
    border-left: 3px solid var(--color-accent-2);
}

.sheet-foot[b-pxzz9y96p4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: var(--rule-section) solid var(--color-divider);
}

.sheet-error[b-pxzz9y96p4] {
    color: var(--color-accent-2-800);
}

.sheet-foot-end[b-pxzz9y96p4] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}
/* /Components/Pages/Workspace/Editor.razor.rz.scp.css */
/* 3e — Post editor. Measurements from docs/design/SPEC.md. */

.ed[b-meg0o94at5] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 53px);
    min-height: 0;
}

/* Spec: breadcrumb row 14px 26px, border-bottom 1px. */
.ed-crumb[b-meg0o94at5] {
    padding: 14px 26px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ed-crumb-link[b-meg0o94at5] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    text-decoration: none;
}

.ed-crumb-link:hover[b-meg0o94at5] {
    color: var(--color-accent);
}

.ed-crumb-title[b-meg0o94at5] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 2px 4px;
    min-width: 18ch;
    width: min(48ch, 40vw);
}

.ed-crumb-title:hover[b-meg0o94at5] {
    background: var(--tint-hover);
}

.ed-crumb-end[b-meg0o94at5] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

/* Spec: variant tabs, border-bottom 2px, padding-left 26px. */
.ed-tabs[b-meg0o94at5] {
    display: flex;
    align-items: stretch;
    padding-left: 26px;
    border-bottom: var(--rule-section) solid var(--color-divider);
    overflow-x: auto;
}

.ed-tab[b-meg0o94at5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.ed-tab:hover[b-meg0o94at5] {
    color: var(--color-text);
}

/* Spec: active tab is full-opacity text with a 3px accent underline; inactive sits at 55%. */
.ed-tab-on[b-meg0o94at5] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* A detached variant is marked on its tab, so the operator can see which versions have been taken
   over by hand without opening each one. */
.ed-tab-dot[b-meg0o94at5] {
    width: 5px;
    height: 5px;
    background: var(--color-accent-2);
}

.ed-tabs-note[b-meg0o94at5] {
    margin-left: auto;
    align-self: center;
    padding: 0 26px 0 var(--space-4);
    white-space: nowrap;
}

.ed-body[b-meg0o94at5] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.ed-pane[b-meg0o94at5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: var(--rule-section) solid var(--color-divider);
}

/* Spec: editor pane 520px fixed. */
.ed-editor[b-meg0o94at5] {
    width: 520px;
    flex: none;
}

.ed-preview[b-meg0o94at5] {
    flex: 1;
}

/* Spec: pane header strip on surface, 11px mono. */
.ed-pane-head[b-meg0o94at5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: var(--rule-row) solid var(--color-divider);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.ed-pane-head-end[b-meg0o94at5] {
    margin-left: auto;
}

/* Spec: code at 12.5px/1.75 mono. A plain textarea rather than a syntax-highlighted editor: it is
   keyboard-native, works without JavaScript beyond the circuit, and never fights an IME. Syntax
   colouring would need an editor component and is not what makes this screen work. */
.ed-code[b-meg0o94at5] {
    flex: 1;
    width: 100%;
    resize: none;
    border: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.75;
    tab-size: 2;
}

.ed-code:focus-visible[b-meg0o94at5] {
    outline-offset: calc(var(--focus-ring-offset) * -1);
}

.ed-detached[b-meg0o94at5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-accent-2) 12%, transparent);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.ed-detached .meta[b-meg0o94at5] {
    color: var(--color-accent-2-800);
}

.ed-warnings[b-meg0o94at5] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: var(--rule-row) solid var(--color-divider);
    flex-wrap: wrap;
}

/* Spec: preview body padding 24px 28px. */
.ed-preview-body[b-meg0o94at5] {
    flex: 1;
    overflow: auto;
    padding: var(--space-6) 28px;
    background: var(--color-bg);
    color: var(--color-text);
}

.ed-preview-card[b-meg0o94at5] {
    max-width: 680px;
    border: var(--rule-row) solid var(--color-divider);
    padding: var(--space-6);
    background: var(--color-bg);
}

.ed-preview-kicker[b-meg0o94at5] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-kicker);
    color: var(--color-accent);
    text-transform: uppercase;
}

.ed-preview-title[b-meg0o94at5] {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.04;
    text-wrap: pretty;
}

.ed-preview-dek[b-meg0o94at5] {
    margin-top: var(--space-3);
    font-size: 17px;
    color: var(--muted-strong);
}

.ed-preview-html[b-meg0o94at5]  pre {
    background: var(--color-neutral-100);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: 12.5px;
    overflow-x: auto;
}

.ed-preview-html[b-meg0o94at5]  blockquote {
    margin: var(--space-6) 0;
    padding-left: 18px;
    border-left: var(--rule-section) solid var(--color-divider);
    font-size: 17px;
}

.ed-preview-html[b-meg0o94at5]  img {
    width: 100%;
}

/* Spec: settings rail 290px on surface. */
.ed-rail[b-meg0o94at5] {
    width: 290px;
    flex: none;
    background: var(--color-surface);
    padding: var(--space-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ed-field[b-meg0o94at5] {
    display: flex;
    flex-direction: column;
}

.ed-dek[b-meg0o94at5] {
    min-height: 64px;
}

.ed-field-error[b-meg0o94at5] {
    margin-top: var(--space-1);
    color: var(--color-accent-2-800);
}

.ed-drop[b-meg0o94at5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border: var(--rule-row) dashed var(--color-divider);
    min-height: 80px;
    text-align: center;
}

.ed-tags[b-meg0o94at5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.ed-tag-remove[b-meg0o94at5] {
    margin-left: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.ed-tag-add[b-meg0o94at5] {
    display: flex;
    gap: var(--space-2);
}

/* Spec: publish footer, border-top 2px, surface, padding 14px 26px. Docked rather than modal so a
   blocked target surfaces its blocker while writing, not at publish time. */
.ed-publish[b-meg0o94at5] {
    border-top: var(--rule-section) solid var(--color-divider);
    background: var(--color-surface);
    padding: 14px 26px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ed-targets[b-meg0o94at5] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ed-chip[b-meg0o94at5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: var(--text-meta);
}

/* Spec: a selected chip is 1px solid accent with accent text. */
.ed-chip-on[b-meg0o94at5] {
    border: var(--rule-row) solid var(--color-accent);
    color: var(--color-accent);
}

/* Spec: a blocked chip is divider-bordered at opacity .6 and states its reason inline. */
.ed-chip-blocked[b-meg0o94at5] {
    border: var(--rule-row) solid var(--color-divider);
    opacity: 0.6;
}

.ed-chip-reason[b-meg0o94at5] {
    color: var(--muted);
}

.ed-state[b-meg0o94at5] {
    padding: var(--space-8) var(--space-4);
}

@media (max-width: 1200px) {
    .ed-body[b-meg0o94at5] {
        flex-direction: column;
        overflow-y: auto;
    }

    .ed-editor[b-meg0o94at5],
    .ed-rail[b-meg0o94at5] {
        width: 100%;
    }

    .ed-editor[b-meg0o94at5] {
        min-height: 320px;
    }
}
/* /Components/Pages/Workspace/Login.razor.rz.scp.css */
/* 3a — sign in. The shared panel lives in wwwroot/css/door.css; only what is specific to the
   sign-in form is here. */

.door-password[b-l3ii0a7ymk] {
    display: flex;
    gap: var(--space-2);
}

.door-remember[b-l3ii0a7ymk] {
    margin-bottom: 18px;
}

.door-check[b-l3ii0a7ymk] {
    /* A real checkbox rather than the .radio dot: this is a checkbox, and the native control is
       keyboard reachable and announced correctly. accent-color tints it without rebuilding it. */
    position: static;
    opacity: 1;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}
/* /Components/Pages/Workspace/NewPost.razor.rz.scp.css */
.np[b-v8ckgank16] {
    padding: var(--space-8) 30px;
}
/* /Components/Pages/Workspace/Posts.razor.rz.scp.css */
/* 1e — Posts ledger. Measurements from docs/design/SPEC.md. */

.led[b-txq0epbukd] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 53px);
}

/* Spec: page head 26px 30px 18px. */
.led-head[b-txq0epbukd] {
    padding: 26px 30px 18px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    flex-wrap: wrap;
}

.led-head-text[b-txq0epbukd] {
    flex: 1;
    min-width: 0;
}

.led-title[b-txq0epbukd] {
    margin: 0;
    font-size: 34px;
}

.led-sub[b-txq0epbukd] {
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Spec: bordered search box. */
.led-search[b-txq0epbukd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: var(--rule-row) solid var(--color-divider);
    padding: 6px 10px;
    min-width: 220px;
}

.led-search-input[b-txq0epbukd] {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 20px;
    font-size: var(--text-sm);
}

/* Spec: filter bar 14px 30px, border-bottom 2px. */
.led-filters[b-txq0epbukd] {
    padding: 14px 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: var(--rule-section) solid var(--color-divider);
    flex-wrap: wrap;
}

/* The status filter is a set of links, not radios — each state is a real URL, so the ledger stays
   static SSR and a filtered view can be bookmarked and shared. .seg-opt styles the shape; .seg-on
   stands in for :has(input:checked), which has no input to check. */
.led-filters .seg-opt[b-txq0epbukd] {
    text-decoration: none;
    color: inherit;
}

.led-filters .seg-on[b-txq0epbukd] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.led-drop[b-txq0epbukd] {
    position: relative;
}

.led-drop summary[b-txq0epbukd] {
    list-style: none;
    cursor: pointer;
}

.led-drop summary[b-txq0epbukd]::-webkit-details-marker {
    display: none;
}

.led-drop-menu[b-txq0epbukd] {
    position: absolute;
    z-index: 10;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 200px;
    background: var(--color-surface);
    border: var(--rule-row) solid var(--color-divider);
    box-shadow: var(--shadow-md), var(--edge-hairline);
    display: flex;
    flex-direction: column;
}

.led-drop-menu a[b-txq0epbukd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-sm);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.led-drop-menu a:last-child[b-txq0epbukd] {
    border-bottom: 0;
}

.led-drop-menu a:hover[b-txq0epbukd] {
    background: var(--tint-hover);
}

.led-selected[b-txq0epbukd] {
    margin-left: auto;
}

.led-table-wrap[b-txq0epbukd] {
    flex: 1;
    padding: 0 30px;
    overflow-x: auto;
}

.led-table[b-txq0epbukd] {
    table-layout: fixed;
}

/* Spec column widths. */
.c-check[b-txq0epbukd] { width: 36px; }
.c-num[b-txq0epbukd] { width: 48px; }
.c-topic[b-txq0epbukd] { width: 130px; }
.c-status[b-txq0epbukd] { width: 110px; }
.c-targets[b-txq0epbukd] { width: 200px; }
.c-updated[b-txq0epbukd] { width: 120px; }
.c-actions[b-txq0epbukd] { width: 88px; }

.led-table td.c-num[b-txq0epbukd] {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--color-accent);
}

.led-table td.c-updated[b-txq0epbukd] {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
}

.led-title-cell[b-txq0epbukd] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.led-link[b-txq0epbukd] {
    color: inherit;
    text-decoration: none;
}

.led-link:hover[b-txq0epbukd] {
    color: var(--color-accent);
}

.led-check[b-txq0epbukd] {
    position: static;
    opacity: 1;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.led-targets[b-txq0epbukd] {
    display: flex;
    gap: 7px;
    align-items: center;
}

.led-actions[b-txq0epbukd] {
    display: flex;
    gap: 6px;
}

/* Spec: two 28px icon buttons. */
.led-action[b-txq0epbukd] {
    width: 28px;
    height: 28px;
}

.led-foot[b-txq0epbukd] {
    padding: 14px 30px;
    border-top: var(--rule-section) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.led-foot-end[b-txq0epbukd] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

.led-state[b-txq0epbukd] {
    flex: 1;
    padding: 26px 30px;
}

.led-state-action[b-txq0epbukd] {
    margin-top: var(--space-2);
}
/* /Components/Pages/Workspace/Previews.razor.rz.scp.css */
/* 5b — Platform previews. Spec: a wrapping tile grid on neutral-100. */

.pv[b-hf8d3edxx5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 53px);
}

.pv-bar[b-hf8d3edxx5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-section) solid var(--color-divider);
    flex-wrap: wrap;
}

.pv-title[b-hf8d3edxx5] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
}

.pv-check[b-hf8d3edxx5] {
    position: static;
    opacity: 1;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.pv-note[b-hf8d3edxx5] {
    margin-left: auto;
}

.pv-grid[b-hf8d3edxx5] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-neutral-100);
}

.pv-tile[b-hf8d3edxx5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 320px;
}

.pv-label[b-hf8d3edxx5] {
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: var(--tracking-label);
}

/* The image keeps its aspect ratio from its width and height attributes; the tile just bounds it. */
.pv-image[b-hf8d3edxx5] {
    width: 100%;
    height: auto;
    border: var(--rule-row) solid var(--color-divider);
    background: var(--color-bg);
}

.pv-foot[b-hf8d3edxx5] {
    color: var(--color-accent-2-800);
}

.pv-state[b-hf8d3edxx5] {
    padding: var(--space-8) var(--space-4);
}
/* /Components/Pages/Workspace/PublishPicker.razor.rz.scp.css */
/* 6a — Publish picker. Spec: a 900x880 sheet on surface, border 2px, shadow-lg. */

.pick-backdrop[b-7wk6gvps3a] {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    overflow: auto;
}

.pick[b-7wk6gvps3a] {
    width: 900px;
    max-width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: var(--rule-section) solid var(--color-divider);
}

.pick-head[b-7wk6gvps3a] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-section) solid var(--color-divider);
}

.pick-title[b-7wk6gvps3a] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h5);
    letter-spacing: var(--tracking-label);
}

.pick-close[b-7wk6gvps3a] {
    margin-left: auto;
}

.pick-body[b-7wk6gvps3a] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.pick-tree[b-7wk6gvps3a] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
}

.pick-side[b-7wk6gvps3a] {
    width: 300px;
    flex: none;
    border-left: var(--rule-row) solid var(--color-divider);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
}

.pick-resolution[b-7wk6gvps3a] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pick-count[b-7wk6gvps3a] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h2);
    color: var(--color-accent);
}

.pick-platforms[b-7wk6gvps3a],
.pick-excluded[b-7wk6gvps3a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pick-platform[b-7wk6gvps3a],
.pick-excluded-row[b-7wk6gvps3a] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.pick-platform-name[b-7wk6gvps3a],
.pick-excluded-handle[b-7wk6gvps3a] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick-reason[b-7wk6gvps3a] {
    color: var(--color-accent-2-800);
}

.pick-fanout[b-7wk6gvps3a] {
    margin-top: auto;
}

.pick-foot[b-7wk6gvps3a] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: var(--rule-section) solid var(--color-divider);
}

.pick-foot-end[b-7wk6gvps3a] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

.pick-empty[b-7wk6gvps3a] {
    padding: var(--space-6) 0;
}

@media (max-width: 820px) {
    .pick-body[b-7wk6gvps3a] {
        flex-direction: column;
    }

    .pick-side[b-7wk6gvps3a] {
        width: 100%;
        border-left: 0;
        border-top: var(--rule-row) solid var(--color-divider);
    }
}
/* /Components/Pages/Workspace/Queue.razor.rz.scp.css */
/* 2a — Queue. Measurements from docs/design/SPEC.md. */

.q[b-9f5r7fimj5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 53px);
}

/* The drawer is over this; the list behind drops back so it reads as context, not content. */
.q-dimmed[b-9f5r7fimj5] {
    opacity: 0.5;
}

/* Spec: five cells, grid with gap 1px on divider — the gaps are the rules. */
.q-health[b-9f5r7fimj5] {
    grid-template-columns: repeat(5, 1fr);
    border-bottom: var(--rule-section) solid var(--color-divider);
}

.q-cell[b-9f5r7fimj5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
}

.q-cell-value[b-9f5r7fimj5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
}

.q-alert[b-9f5r7fimj5] {
    color: var(--color-accent-2-800);
}

.q-dot[b-9f5r7fimj5] {
    width: 8px;
    height: 8px;
    flex: none;
}

.q-dot-ok[b-9f5r7fimj5] {
    background: var(--color-accent);
}

.q-dot-down[b-9f5r7fimj5] {
    background: var(--color-accent-2);
}

/* Spec: a 5px progress bar. A native <progress>, restyled — the browser default is a rounded,
   platform-coloured pill, which breaks both the radius rule and the token set. */
.q-bar[b-9f5r7fimj5] {
    display: block;
    width: 100%;
    height: 5px;
    appearance: none;
    border: 0;
    background: var(--color-neutral-200);
}

.q-bar[b-9f5r7fimj5]::-webkit-progress-bar {
    background: var(--color-neutral-200);
}

.q-bar[b-9f5r7fimj5]::-webkit-progress-value {
    background: var(--color-accent);
}

.q-bar[b-9f5r7fimj5]::-moz-progress-bar {
    background: var(--color-accent);
}

.q-body[b-9f5r7fimj5] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.q-ledger[b-9f5r7fimj5] {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Spec: each group introduced by a surface band with an 11px/800 label. */
.q-group-head[b-9f5r7fimj5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-bottom: var(--rule-row) solid var(--color-divider);
    flex-wrap: wrap;
}

.q-group-label[b-9f5r7fimj5] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
}

.q-group-accent[b-9f5r7fimj5] {
    color: var(--color-accent);
}

.q-group-alert .q-group-label[b-9f5r7fimj5] {
    color: var(--color-accent-2-800);
}

.q-group-note[b-9f5r7fimj5] {
    margin-left: var(--space-3);
}

.q-group-action[b-9f5r7fimj5] {
    margin-left: auto;
}

/* Spec: posted rows sit back at .72. */
.q-rows-done[b-9f5r7fimj5] {
    opacity: 0.72;
}

/* Spec row grid: 78px 1fr 232px 132px 64px 118px 92px. */
.q-row[b-9f5r7fimj5] {
    display: grid;
    grid-template-columns: 78px 1fr 232px 132px 64px 118px 92px;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
    text-decoration: none;
    color: inherit;
}

.q-row:hover[b-9f5r7fimj5] {
    background: var(--tint-row-hover);
}

.q-row:active[b-9f5r7fimj5] {
    background: var(--tint-pressed);
}

.q-time[b-9f5r7fimj5] {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.q-post[b-9f5r7fimj5] {
    min-width: 0;
}

.q-post-title[b-9f5r7fimj5] {
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spec: a failed row puts the error under the title in accent mono. */
.q-error[b-9f5r7fimj5] {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--color-accent-2-800);
}

.q-target[b-9f5r7fimj5] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    min-width: 0;
}

.q-target span[b-9f5r7fimj5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q-attempts[b-9f5r7fimj5] {
    text-align: right;
}

.q-action[b-9f5r7fimj5] {
    text-align: right;
}

/* Spec: 320px log rail. */
.q-log[b-9f5r7fimj5] {
    width: 320px;
    flex: none;
    border-left: var(--rule-section) solid var(--color-divider);
    background: var(--color-surface);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.q-log-head[b-9f5r7fimj5] {
    letter-spacing: var(--tracking-wide);
}

.q-limits[b-9f5r7fimj5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.q-limit[b-9f5r7fimj5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.q-limit-name[b-9f5r7fimj5] {
    flex: 1;
}

.q-limits-empty[b-9f5r7fimj5],
.q-limits-note[b-9f5r7fimj5] {
    margin: 0;
}

.q-limits-note[b-9f5r7fimj5] {
    margin-top: auto;
}

.q-state[b-9f5r7fimj5] {
    padding: var(--space-8) var(--space-4);
}

@media (max-width: 1100px) {
    .q-health[b-9f5r7fimj5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .q-body[b-9f5r7fimj5] {
        flex-direction: column;
    }

    .q-log[b-9f5r7fimj5] {
        width: 100%;
        border-left: 0;
        border-top: var(--rule-section) solid var(--color-divider);
    }

    .q-row[b-9f5r7fimj5] {
        grid-template-columns: 78px 1fr 132px;
    }

    .q-variant[b-9f5r7fimj5],
    .q-attempts[b-9f5r7fimj5],
    .q-action[b-9f5r7fimj5] {
        display: none;
    }
}

.q-views[b-9f5r7fimj5] {
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.q-views .seg-opt[b-9f5r7fimj5] {
    text-decoration: none;
    color: inherit;
}

.q-views .seg-on[b-9f5r7fimj5] {
    background: var(--color-accent);
    color: var(--color-bg);
}
/* /Components/Pages/Workspace/Settings.razor.rz.scp.css */
/* 6d — Settings. Spec: a 220px section nav on surface, active item a solid accent fill. */

.set[b-0zxeixb3ah] {
    display: flex;
    min-height: calc(100vh - 53px);
}

.set-nav[b-0zxeixb3ah] {
    width: 220px;
    flex: none;
    background: var(--color-surface);
    border-right: var(--rule-section) solid var(--color-divider);
    display: flex;
    flex-direction: column;
    padding: var(--space-3) 0;
}

.set-nav-item[b-0zxeixb3ah] {
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-sm);
}

.set-nav-item:hover[b-0zxeixb3ah] {
    background: var(--tint-hover);
}

.set-nav-on[b-0zxeixb3ah] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.set-nav-on:hover[b-0zxeixb3ah] {
    background: var(--color-accent);
}

.set-content[b-0zxeixb3ah] {
    flex: 1;
    min-width: 0;
    padding: var(--space-6) var(--space-8);
    max-width: 900px;
}

.set-title[b-0zxeixb3ah] {
    margin: 0 0 var(--space-3);
}

.set-intro[b-0zxeixb3ah] {
    margin: 0 0 var(--space-6);
    color: var(--muted-strong);
}

.set-note[b-0zxeixb3ah] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted-strong);
    max-width: 62ch;
}

/* Spec: a 3-cell state strip. */
.set-state[b-0zxeixb3ah] {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--space-6);
    border: var(--rule-row) solid var(--color-divider);
}

.set-cell[b-0zxeixb3ah] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3);
}

.set-cell-value[b-0zxeixb3ah] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
}

/* Spec: a 2-column field grid. */
.set-grid[b-0zxeixb3ah] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.set-grid .field[b-0zxeixb3ah] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Spec: a 5px fill bar beside concurrency. */
.set-bar[b-0zxeixb3ah] {
    display: block;
    width: 100%;
    height: 5px;
    appearance: none;
    border: 0;
    background: var(--color-neutral-200);
}

.set-bar[b-0zxeixb3ah]::-webkit-progress-bar { background: var(--color-neutral-200); }
.set-bar[b-0zxeixb3ah]::-webkit-progress-value { background: var(--color-accent); }
.set-bar[b-0zxeixb3ah]::-moz-progress-bar { background: var(--color-accent); }

.set-actions[b-0zxeixb3ah] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.set-table[b-0zxeixb3ah] {
    table-layout: fixed;
}

.l-ceiling[b-0zxeixb3ah] { width: 150px; }
.l-used[b-0zxeixb3ah] { width: 180px; }

.set-platform[b-0zxeixb3ah] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.set-number[b-0zxeixb3ah] {
    max-width: 110px;
}

/* Accent when at the ceiling — the one number on this screen that changes behaviour. */
.set-at-ceiling[b-0zxeixb3ah] {
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 900px) {
    .set[b-0zxeixb3ah] {
        flex-direction: column;
    }

    .set-nav[b-0zxeixb3ah] {
        width: 100%;
        border-right: 0;
        border-bottom: var(--rule-section) solid var(--color-divider);
        flex-direction: row;
        overflow-x: auto;
    }

    .set-grid[b-0zxeixb3ah] {
        grid-template-columns: 1fr;
    }

    .set-content[b-0zxeixb3ah] {
        padding: var(--space-4);
    }
}
/* /Components/Pages/Workspace/Setup.razor.rz.scp.css */
/* First-run setup. The shared panel lives in wwwroot/css/door.css; only what is specific to this
   form is here. */

.setup-lede[b-i75www6345] {
    margin: var(--space-4) 0 var(--space-4);
    font-size: 13.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.setup-hint[b-i75www6345] {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted-weak);
}
/* /Components/Pages/Workspace/Week.razor.rz.scp.css */
/* 2b — Queue, week view. */

.wk[b-8ykc6kbp21] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 53px);
}

.wk-head[b-8ykc6kbp21] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-section) solid var(--color-divider);
    flex-wrap: wrap;
}

.wk-head .seg-opt[b-8ykc6kbp21] {
    text-decoration: none;
    color: inherit;
}

.wk-head .seg-on[b-8ykc6kbp21] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.wk-range[b-8ykc6kbp21] {
    margin-left: var(--space-3);
}

.wk-nav[b-8ykc6kbp21] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

/* Spec: 176px then seven equal columns, rows sharing height. */
.wk-grid[b-8ykc6kbp21] {
    flex: 1;
    display: grid;
    grid-template-columns: 176px repeat(7, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--rule-row);
    background: var(--color-divider);
    border-bottom: var(--rule-section) solid var(--color-divider);
}

.wk-corner[b-8ykc6kbp21],
.wk-day[b-8ykc6kbp21],
.wk-lane[b-8ykc6kbp21],
.wk-cell[b-8ykc6kbp21] {
    background: var(--color-bg);
    padding: var(--space-2) var(--space-3);
}

.wk-day[b-8ykc6kbp21] {
    background: var(--color-surface);
    letter-spacing: var(--tracking-label);
}

.wk-corner[b-8ykc6kbp21] {
    background: var(--color-surface);
}

.wk-lane[b-8ykc6kbp21] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.wk-lane-name[b-8ykc6kbp21] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-cell[b-8ykc6kbp21] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 56px;
}

.wk-block[b-8ykc6kbp21] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
}

/* Spec: solid accent is part of the current run; 1px divider is scheduled; 1px dashed accent is
   blocked, and states its reason. */
.wk-run[b-8ykc6kbp21] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.wk-scheduled[b-8ykc6kbp21] {
    border: var(--rule-row) solid var(--color-divider);
}

.wk-blocked[b-8ykc6kbp21] {
    border: var(--rule-row) dashed var(--color-accent);
    color: var(--color-accent);
}

.wk-block-reason[b-8ykc6kbp21] {
    color: var(--color-accent-2-800);
}

.wk-foot[b-8ykc6kbp21] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.wk-key[b-8ykc6kbp21] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wk-swatch[b-8ykc6kbp21] {
    width: 14px;
    height: 14px;
    display: inline-block;
}

.wk-hidden[b-8ykc6kbp21] {
    margin-left: auto;
}
/* /Components/Public/PublicSidebar.razor.rz.scp.css */
/* Spec 1a: sidebar 300px fixed, border-right 2px, background surface. */

.side[b-czke70ghid] {
    width: 300px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-right: var(--rule-section) solid var(--color-divider);
}

@media (max-width: 720px) {
    .side[b-czke70ghid] {
        width: 100%;
        border-right: 0;
        border-bottom: var(--rule-section) solid var(--color-divider);
    }
}

/* Brand block: padding 22px 20px, border-bottom 2px.
   Neither 22 nor 20 is on the spacing scale, and both are kept as drawn — as are 11px, 13px, 36px and
   44px elsewhere on these screens. The sidebar's 20px inset is what lines its content up with the
   300px column; rounding it to 16 narrowed the column by 8px a side against a main pane drawn exactly. */
.side-brand[b-czke70ghid] {
    padding: 22px 20px;
    border-bottom: var(--rule-section) solid var(--color-divider);
}

.side-brand-row[b-czke70ghid] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.side-wordmark[b-czke70ghid] {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-h4);
    letter-spacing: -0.01em;
}

.side-strapline[b-czke70ghid] {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    line-height: 1;
    letter-spacing: var(--tracking-kicker);
    color: var(--muted);
}

.side-foot[b-czke70ghid] {
    margin-top: auto;
    padding: var(--space-4) 20px;
    border-top: var(--rule-section) solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.side-feeds[b-czke70ghid] {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted-weak);
}