/* /Components/Admin/AppearanceSettingsPanel.razor.rz.scp.css */
/* Settings → System → Appearance. Consumes tokens from wwwroot/app.css; palette swatch colours
   come from the theme stylesheet that owns the palette (wwwroot/themes/). */

.appearance-fieldset[b-5qxui96wyl] {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.appearance-fieldset legend[b-5qxui96wyl] {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-2);
    padding: 0;
    text-transform: uppercase;
}

.appearance-choices[b-5qxui96wyl] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.appearance-choice[b-5qxui96wyl] {
    align-items: start;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.appearance-choice:hover[b-5qxui96wyl] {
    border-color: var(--color-border-strong);
}

.appearance-choice:focus-within[b-5qxui96wyl] {
    box-shadow: var(--focus-ring);
}

.appearance-choice.is-selected[b-5qxui96wyl] {
    background: var(--color-accent-faint);
    border-color: var(--color-accent);
}

.appearance-choice[b-5qxui96wyl]  input {
    accent-color: var(--color-accent);
    flex: none;
    margin: 0.2rem 0 0;
}

.appearance-choice > span:last-child[b-5qxui96wyl] {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.appearance-choice strong[b-5qxui96wyl] {
    color: var(--color-text);
    font-size: 0.9rem;
}

.appearance-choice small[b-5qxui96wyl] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
}

.appearance-swatch[b-5qxui96wyl] {
    background: var(--appearance-swatch, var(--color-neutral));
    box-shadow: 0 0 0.5rem var(--appearance-swatch, transparent);
    flex: none;
    height: 0.85rem;
    margin-top: 0.2rem;
    width: 0.85rem;
}

.appearance-effects[b-5qxui96wyl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

.appearance-fieldset > .field-help[b-5qxui96wyl] {
    margin: var(--space-2) 0 0;
}
/* /Components/Admin/ChatModelPicker.razor.rz.scp.css */
.chat-model-picker[b-0b9x3loaln] {
    position: relative;
    z-index: 5;
}

.chat-model-chip[b-0b9x3loaln] {
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: var(--space-2);
    max-width: 18rem;
    padding: .45rem .9rem;
}

.chat-model-chip:hover[b-0b9x3loaln] { border-color: var(--color-border-loud); }
.chat-model-chip:disabled[b-0b9x3loaln] { cursor: not-allowed; opacity: .55; }
.chat-model-chip span[b-0b9x3loaln] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-chip-caret[b-0b9x3loaln] { color: var(--color-text-faint); flex: none; font-size: .75rem; }

.chat-model-backdrop[b-0b9x3loaln] {
    inset: 0;
    position: fixed;
    z-index: 4;
}

.chat-model-panel[b-0b9x3loaln] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: .9rem;
    box-shadow: 0 1.25rem 2.5rem var(--overlay-dark);
    display: grid;
    left: 50%;
    min-width: 18rem;
    padding: var(--space-2);
    position: absolute;
    top: calc(100% + var(--space-2));
    transform: translateX(-50%);
    z-index: 6;
}

.chat-model-panel-heading[b-0b9x3loaln] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}

.chat-model-row[b-0b9x3loaln],
.chat-model-choice[b-0b9x3loaln] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .6rem;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--space-3);
    justify-content: space-between;
    padding: .7rem .75rem;
    text-align: left;
    width: 100%;
}

.chat-model-row:hover[b-0b9x3loaln],
.chat-model-choice:hover[b-0b9x3loaln],
.chat-model-choice.is-selected[b-0b9x3loaln] { background: var(--color-surface-hover); }

.chat-model-row span[b-0b9x3loaln],
.chat-model-choice span[b-0b9x3loaln] { align-items: center; color: var(--color-text-muted); display: inline-flex; gap: var(--space-2); }
.chat-model-choice span[b-0b9x3loaln] { align-items: flex-start; color: inherit; display: grid; gap: .15rem; }
.chat-model-choice small[b-0b9x3loaln],
.chat-model-choice em[b-0b9x3loaln] { color: var(--color-text-faint); font-size: .75rem; font-style: normal; }
.chat-model-empty[b-0b9x3loaln] { color: var(--color-text-faint); margin: 0; padding: var(--space-3); }

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   The panel is a popover over a phone-width page, so its rows are held to a
   pressable height while the chip that opens it shrinks to the topbar's scale. */
@media (max-width: 48rem) {
    .chat-model-chip[b-0b9x3loaln] {
        font-size: 0.6875rem;
        gap: var(--space-1);
        max-width: 11rem;
        padding: 0.25rem var(--space-3);
    }

    .chat-model-chip-caret[b-0b9x3loaln] {
        font-size: 0.6rem;
    }

    .chat-model-panel[b-0b9x3loaln] {
        min-width: min(16rem, 82vw);
        padding: var(--space-1);
    }

    .chat-model-panel-heading[b-0b9x3loaln] {
        font-size: 0.625rem;
        padding: var(--space-1) var(--space-2);
    }

    .chat-model-row[b-0b9x3loaln],
    .chat-model-choice[b-0b9x3loaln] {
        font-size: 0.6875rem;
        gap: var(--space-2);
        min-height: 2rem;
        padding: var(--space-2);
    }

    .chat-model-choice small[b-0b9x3loaln],
    .chat-model-choice em[b-0b9x3loaln] {
        font-size: 0.5625rem;
    }

    .chat-model-empty[b-0b9x3loaln] {
        font-size: 0.625rem;
        padding: var(--space-2);
    }
}
/* /Components/Agents/AgentAccessPack.razor.rz.scp.css */
.access-pack[b-4scssmrlpp] {
    display: grid;
    gap: var(--space-4);
}

.access-pack-tile[b-4scssmrlpp] {
    --notch: var(--notch-md);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    border-left: 2px solid var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    display: grid;
    min-width: 0;
}

.access-pack-credential-state[b-4scssmrlpp] {
    align-items: center;
    background: var(--color-accent-soft);
    border: var(--hairline) solid var(--color-accent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.access-pack-credential-state > div[b-4scssmrlpp] {
    flex: 1 1 22rem;
    min-width: 0;
}

.access-pack-credential-state h3[b-4scssmrlpp] {
    font-size: 1rem;
    margin: 0 0 var(--space-2);
}

.access-pack-credential-state p:not(.panel-kicker)[b-4scssmrlpp] {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
    max-width: 52rem;
}

.access-pack-credential-state .button[b-4scssmrlpp] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.access-pack-tile-header[b-4scssmrlpp] {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.access-pack-tile-identity[b-4scssmrlpp] {
    display: flex;
    flex: 1 1 16rem;
    gap: var(--space-3);
    min-width: 0;
}

.access-pack-tile-identity > div[b-4scssmrlpp] {
    min-width: 0;
}

.access-pack-tile-index[b-4scssmrlpp] {
    --notch: 0.35rem;
    align-items: center;
    align-self: start;
    background: var(--color-accent-soft);
    border: var(--hairline) solid var(--color-accent);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    color: var(--color-accent-text);
    display: inline-flex;
    flex: none;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-stretch: 75%;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.access-pack-tile-identity h3[b-4scssmrlpp] {
    font-size: 1rem;
    margin: 0 0 var(--space-2);
}

.access-pack-tile-identity p:not(.panel-kicker)[b-4scssmrlpp] {
    color: var(--color-text-subtle);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0;
    max-width: 42rem;
}

.access-pack-tile-actions[b-4scssmrlpp] {
    flex: 0 0 auto;
}

.access-pack-tile-actions .button[b-4scssmrlpp] {
    white-space: nowrap;
}

.access-pack-tile-actions .button-secondary[aria-expanded="true"][b-4scssmrlpp] {
    --button-fill: var(--color-accent-soft);
    --button-border: var(--color-accent);
    color: var(--color-accent-text);
}

.access-pack-tile-preview[b-4scssmrlpp] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.access-pack-tile-preview .code-input[b-4scssmrlpp] {
    margin: 0;
    min-height: 8rem;
}

.access-pack-status[b-4scssmrlpp] {
    margin: 0;
}

.access-pack-fields[b-4scssmrlpp] {
    margin: 0;
}

.access-pack-field[b-4scssmrlpp] {
    align-items: baseline;
    display: grid;
    gap: var(--space-2) var(--space-4);
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}

.access-pack-field dt[b-4scssmrlpp] {
    color: var(--color-text-subtle);
    font-size: 0.72rem;
}

.access-pack-field dd[b-4scssmrlpp] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    min-width: 0;
}

.access-pack-field-value[b-4scssmrlpp] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.access-pack-field-empty[b-4scssmrlpp] {
    color: var(--color-text-subtle);
    font-size: 0.72rem;
    font-style: italic;
}

@media (max-width: 40rem) {
    .access-pack-credential-state[b-4scssmrlpp] {
        align-items: stretch;
        padding: var(--space-4);
    }

    .access-pack-credential-state .button[b-4scssmrlpp] {
        width: 100%;
    }

    .access-pack-tile-header[b-4scssmrlpp] {
        padding: var(--space-4);
    }

    .access-pack-tile-actions[b-4scssmrlpp] {
        width: 100%;
    }

    .access-pack-tile-actions .button[b-4scssmrlpp] {
        flex: 1 1 8rem;
    }

    .access-pack-tile-preview[b-4scssmrlpp] {
        padding: var(--space-4);
    }

    .access-pack-field[b-4scssmrlpp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .access-pack[b-4scssmrlpp] {
        gap: var(--space-2);
    }

    .access-pack-credential-state[b-4scssmrlpp],
    .access-pack-tile-header[b-4scssmrlpp],
    .access-pack-tile-preview[b-4scssmrlpp] {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .access-pack-credential-state h3[b-4scssmrlpp] {
        font-size: 0.75rem;
        margin-bottom: var(--space-1);
    }

    .access-pack-credential-state p:not(.panel-kicker)[b-4scssmrlpp] {
        font-size: 0.5625rem;
        line-height: 1.4;
    }

    .access-pack-tile-identity[b-4scssmrlpp] {
        gap: var(--space-2);
    }

    .access-pack-tile-index[b-4scssmrlpp] {
        font-size: 0.5625rem;
        height: 1.6rem;
        width: 1.6rem;
    }

    .access-pack-tile-identity h3[b-4scssmrlpp] {
        font-size: 0.75rem;
        margin-bottom: var(--space-1);
    }

    .access-pack-tile-identity p:not(.panel-kicker)[b-4scssmrlpp] {
        font-size: 0.5625rem;
        line-height: 1.4;
    }

    .access-pack-tile-preview .code-input[b-4scssmrlpp] {
        min-height: 5rem;
    }
}
/* /Components/Agents/AgentChatSession.razor.rz.scp.css */
.agent-chat-shell[b-y8uzedkc6s] {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
}

.agent-chat-sidebar[b-y8uzedkc6s],
.agent-chat-workspace[b-y8uzedkc6s] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius);
}

.agent-chat-sidebar[b-y8uzedkc6s] {
    align-content: start;
    align-self: start;
    display: grid;
    gap: var(--space-4);
    grid-template-rows: auto minmax(0, 1fr);
    padding: var(--space-4);
    position: sticky;
    top: var(--space-4);
}

.agent-chat-sidebar nav[b-y8uzedkc6s] {
    align-content: start;
    display: grid;
    gap: var(--space-1);
    min-height: 0;
    overflow-y: auto;
}

.conversation-link[b-y8uzedkc6s] {
    border: var(--hairline) solid transparent;
    border-radius: var(--radius);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding: .7rem .8rem;
    text-decoration: none;
}

.conversation-link:hover[b-y8uzedkc6s],
.conversation-link.is-active[b-y8uzedkc6s] { background: var(--color-surface-raised); border-color: var(--color-border); }
.conversation-link.is-active[b-y8uzedkc6s] { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.conversation-link strong[b-y8uzedkc6s] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-link span[b-y8uzedkc6s] {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    gap: var(--space-2);
}
.conversation-working[b-y8uzedkc6s] {
    background: var(--color-info-soft);
    border-radius: 999px;
    color: var(--color-info);
    font-size: var(--font-size-label);
    font-style: normal;
    letter-spacing: .06em;
    padding: .12rem .4rem;
    text-transform: uppercase;
}

.agent-chat-workspace[b-y8uzedkc6s] { display: grid; grid-template-rows: auto 1fr auto; min-height: 42rem; overflow: hidden; }
.agent-chat-transcript[b-y8uzedkc6s] { display: grid; gap: var(--space-5); min-height: 0; overflow-y: auto; padding: var(--space-5); }
.chat-message[b-y8uzedkc6s] { border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.chat-message.is-user[b-y8uzedkc6s] { background: var(--color-surface-raised); margin-left: min(12%, 7rem); }
.chat-message.is-assistant[b-y8uzedkc6s] { background: color-mix(in srgb, var(--color-info) 8%, var(--color-surface)); border: var(--hairline) solid var(--color-border); margin-right: min(8%, 5rem); }
.chat-message.has-error[b-y8uzedkc6s] { border-color: var(--color-danger); }
.chat-message header[b-y8uzedkc6s], .chat-message footer[b-y8uzedkc6s] { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.chat-speaker[b-y8uzedkc6s] { align-items: center; display: inline-flex; gap: var(--space-2); }
.chat-message-meta[b-y8uzedkc6s] { align-items: center; display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.chat-message-model[b-y8uzedkc6s] { color: var(--color-text-faint); font-size: .8rem; }
.chat-message p[b-y8uzedkc6s] { margin: 0; white-space: pre-wrap; }
.chat-message footer[b-y8uzedkc6s] { color: var(--color-text-faint); font-size: .8rem; justify-content: flex-start; }
.chat-message footer:not(:has(*))[b-y8uzedkc6s] { display: none; }

.chat-copy[b-y8uzedkc6s] {
    align-items: center;
    background: transparent;
    border: var(--hairline) solid transparent;
    border-radius: var(--radius);
    color: var(--color-text-faint);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: var(--space-2);
    line-height: 1;
    padding: .25rem .45rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.chat-copy:hover[b-y8uzedkc6s] { background: var(--color-surface-hover); border-color: var(--color-border); color: var(--color-text); }
.chat-copy:focus-visible[b-y8uzedkc6s] { border-color: var(--color-border-loud); color: var(--color-text); }
/* Holds the confirmation for a couple of seconds; the component puts the label back. */
.chat-copy.is-copied[b-y8uzedkc6s] { color: var(--color-success); }
.chat-copy-glyph[b-y8uzedkc6s] { font-size: .95rem; }
.chat-working[b-y8uzedkc6s] { align-items: center; color: var(--color-info); display: flex; gap: var(--space-2); }
.chat-working span[b-y8uzedkc6s] { animation: chat-pulse-b-y8uzedkc6s 1s infinite alternate; background: currentColor; border-radius: 999px; height: .55rem; width: .55rem; }
[b-y8uzedkc6s] .agent-chat-composer { border-top: var(--hairline) solid var(--color-border); display: grid; gap: var(--space-3); padding: var(--space-5); }
.chat-tool-timeline[b-y8uzedkc6s] { border-top: var(--hairline) solid var(--color-border); padding-top: var(--space-2); }
.chat-tool-timeline summary[b-y8uzedkc6s] { color: var(--color-text-muted); cursor: pointer; font-size: .85rem; }
.chat-tool-event[b-y8uzedkc6s] { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0; }
.chat-tool-event small[b-y8uzedkc6s] { color: var(--color-danger); flex-basis: 100%; }

.agent-chat-picker-bar[b-y8uzedkc6s] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-5);
    position: relative;
}

.agent-chat-picker-slot[b-y8uzedkc6s] { display: flex; justify-content: center; }
.agent-chat-toolbar-actions[b-y8uzedkc6s] {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.agent-chat-toolbar-actions .field-control[b-y8uzedkc6s] {
    min-width: 10rem;
    width: 14rem;
}

.studio-new-chat[b-y8uzedkc6s] {
    align-items: center;
    align-self: start;
    background: transparent;
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: var(--space-2);
    height: auto;
    justify-content: center;
    padding: .65rem var(--space-4);
    text-align: center;
    width: 100%;
}

.studio-new-chat:hover[b-y8uzedkc6s] { background: var(--color-surface-raised); border-color: var(--color-border-loud); }
.studio-new-chat:disabled[b-y8uzedkc6s] { cursor: not-allowed; opacity: .55; }

.studio-greeting[b-y8uzedkc6s] {
    align-self: center;
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    margin: auto 0;
    max-width: 100%;
    min-width: 0;
    padding: var(--space-8) var(--space-5);
    text-align: center;
    width: 100%;
}

.studio-greeting h1[b-y8uzedkc6s] {
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.studio-greeting p[b-y8uzedkc6s] { color: var(--color-text-faint); margin: 0; }

.studio-quick-actions[b-y8uzedkc6s] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    margin-top: var(--space-4);
    max-width: 48rem;
    min-width: 0;
    width: 100%;
}

.studio-quick-action[b-y8uzedkc6s] {
    align-content: start;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-text);
    column-gap: var(--space-3);
    cursor: pointer;
    display: grid;
    font: inherit;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    padding: var(--space-4);
    row-gap: var(--space-1);
    text-align: left;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    white-space: normal;
}

.studio-quick-action-glyph[b-y8uzedkc6s] {
    color: var(--color-text-faint);
    grid-row: span 2;
    line-height: 1.2;
}

.studio-quick-action strong[b-y8uzedkc6s] { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.studio-quick-action small[b-y8uzedkc6s] { color: var(--color-text-faint); min-width: 0; overflow-wrap: break-word; }

.studio-quick-action:hover[b-y8uzedkc6s] { background: var(--color-surface); border-color: var(--color-border-loud); }
.studio-quick-action:disabled[b-y8uzedkc6s] { cursor: not-allowed; opacity: .55; }
.studio-quick-action:disabled:hover[b-y8uzedkc6s] { background: var(--color-surface-raised); border-color: var(--color-border-strong); }

.studio-quick-actions-hint[b-y8uzedkc6s] { color: var(--color-text-faint); max-width: 48rem; }

.studio-composer-bar[b-y8uzedkc6s] {
    align-items: flex-end;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    /* Half the collapsed height, not 999px. Both render the same pill on one line, but a keyword
       radius on a grown composer draws a lozenge: the sides bow inward, the first and last lines
       collide with the curve, and the send button ends up floating inside it. */
    border-radius: 1.75rem;
    display: flex;
    gap: var(--space-3);
    padding: .45rem .45rem .45rem var(--space-5);
    transition: border-color var(--transition-fast);
}

.studio-composer-bar:focus-within[b-y8uzedkc6s] { border-color: var(--color-border-loud); }

.studio-composer-input[b-y8uzedkc6s] {
    background: transparent;
    border: 0;
    color: var(--color-text);
    /* Grows with what is actually rendered, wrapping included, and stops at max-height. The rows
       attribute is the fallback where this is unsupported; it can only count newlines, so a long
       unbroken paragraph sits in a one-line box there. */
    field-sizing: content;
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    max-height: 12rem;
    min-height: 1.5rem;
    outline: 0;
    overflow-y: auto;
    padding: .55rem 0;
    resize: none;
}

/*
 * Scoped `.studio-composer-input` outranks the global 16px iOS floor (one class + the
 * isolation attribute vs a bare `textarea`). `font: inherit` used to pull body 0.75rem
 * under the density tier and retrigger Safari focus-zoom. Same threshold, same token.
 */
@media (max-width: 40rem), (pointer: coarse) {
    .studio-composer-input[b-y8uzedkc6s] {
        font-size: 16px;
        font-size: var(--text-control-min, 16px);
    }
}

.studio-send[b-y8uzedkc6s] {
    align-items: center;
    background: var(--color-accent);
    border: 0;
    border-radius: 999px;
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font-size: 1.1rem;
    height: 2.2rem;
    justify-content: center;
    width: 2.2rem;
}

.studio-send:hover[b-y8uzedkc6s] { background: var(--color-accent-hover); }
.studio-send:disabled[b-y8uzedkc6s] { background: var(--color-surface-hover); color: var(--color-text-faint); cursor: not-allowed; }
.studio-composer-hint[b-y8uzedkc6s] { color: var(--color-text-faint); font-size: .75rem; padding: 0 var(--space-4); }

.agent-chat-shell.is-studio[b-y8uzedkc6s] {
    gap: 0;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.agent-chat-shell.is-studio .agent-chat-sidebar[b-y8uzedkc6s],
.agent-chat-shell.is-studio .agent-chat-workspace[b-y8uzedkc6s] {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.agent-chat-shell.is-studio .agent-chat-sidebar[b-y8uzedkc6s] {
    align-self: stretch;
    background: var(--color-background-raised);
    border-right: var(--hairline) solid var(--color-border-strong);
    min-height: 0;
    overflow: hidden;
    padding: var(--space-3);
    position: static;
}

.agent-chat-shell.is-studio .agent-chat-workspace[b-y8uzedkc6s] {
    background: var(--color-background);
    min-height: 0;
}

.agent-chat-shell.is-studio .agent-chat-transcript[b-y8uzedkc6s] {
    align-content: start;
    gap: var(--space-6);
    margin-inline: auto;
    max-height: none;
    max-width: 48rem;
    padding: var(--space-6) var(--space-5);
    width: 100%;
}

.agent-chat-shell.is-studio .chat-message.is-user[b-y8uzedkc6s] {
    background: var(--color-surface-hover);
    border: var(--hairline) solid var(--color-border);
    border-radius: 1.15rem;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
    max-width: min(85%, 36rem);
    padding: var(--space-3) var(--space-4);
    width: fit-content;
}

.agent-chat-shell.is-studio .conversation-link[b-y8uzedkc6s] {
    border-radius: .7rem;
}

.agent-chat-shell.is-studio .chat-message.is-user header[b-y8uzedkc6s] {
    color: var(--color-text-faint);
    font-size: .75rem;
    gap: var(--space-4);
}

.agent-chat-shell.is-studio .chat-message.is-user header strong[b-y8uzedkc6s] {
    color: var(--color-text);
    font-size: .85rem;
}

/* The user bubble is right-aligned, so its copy button trails the text rather than
   floating away from it on the far side. */
.agent-chat-shell.is-studio .chat-message.is-user footer[b-y8uzedkc6s] { justify-content: flex-end; }

.agent-chat-shell.is-studio .chat-message.is-assistant[b-y8uzedkc6s] {
    background: transparent;
    border: 0;
    margin-right: 0;
    padding: 0;
    width: 100%;
}

.agent-chat-shell.is-studio .chat-message.is-assistant header[b-y8uzedkc6s] {
    gap: var(--space-3);
    justify-content: flex-start;
}

.agent-chat-shell.is-studio[b-y8uzedkc6s]  .agent-chat-composer {
    background: var(--color-background);
    border-top: 0;
    justify-items: center;
    padding: var(--space-3) var(--space-5) var(--space-5);
}

.agent-chat-shell.is-studio .studio-composer-bar[b-y8uzedkc6s],
.agent-chat-shell.is-studio .studio-composer-hint[b-y8uzedkc6s] {
    display: block;
    margin-inline: auto;
    max-width: 48rem;
    width: min(48rem, 100%);
}

.agent-chat-shell.is-studio .studio-composer-bar[b-y8uzedkc6s] {
    display: flex;
}

@keyframes chat-pulse-b-y8uzedkc6s { to { opacity: .25; transform: scale(.72); } }

@media (max-width: 70rem) {
    .agent-chat-shell[b-y8uzedkc6s] { grid-template-columns: 1fr; }
    .agent-chat-sidebar[b-y8uzedkc6s] { grid-template-rows: auto auto; position: static; }
    .agent-chat-sidebar nav[b-y8uzedkc6s] {
        grid-auto-columns: minmax(14rem, 1fr);
        grid-auto-flow: column;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .agent-chat-shell.is-studio[b-y8uzedkc6s] { grid-template-columns: 1fr; }
    .agent-chat-shell.is-studio .agent-chat-sidebar[b-y8uzedkc6s] {
        border-bottom: var(--hairline) solid var(--color-border-strong);
        border-right: 0;
        max-height: none;
        padding: var(--space-3);
    }
    .agent-chat-toolbar-actions[b-y8uzedkc6s] { position: static; transform: none; }
    .agent-chat-picker-bar[b-y8uzedkc6s] { flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 44rem) {
    .chat-message.is-user[b-y8uzedkc6s], .chat-message.is-assistant[b-y8uzedkc6s] { margin-left: 0; margin-right: 0; }
    .agent-chat-shell.is-studio .chat-message.is-user[b-y8uzedkc6s] { margin-left: 0; max-width: 100%; }
    .composer-footer[b-y8uzedkc6s] { align-items: stretch; flex-direction: column; }
    .agent-chat-run-controls[b-y8uzedkc6s] { grid-template-columns: 1fr; }
    .studio-composer-bar[b-y8uzedkc6s] { border-radius: 1.25rem; }
    .studio-quick-actions[b-y8uzedkc6s] { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Mobile density tier: ≤ 48rem. See the block of the same name in app.css.

   A transcript is the one surface where density is not purely a win — the
   message body is what the user came to read — so the text itself only steps
   down to the tier's body size, and the reclaimed space comes from the chrome
   around it: the conversation rail, message padding, headers, and the greeting.

   The composer input keeps 1rem for the same iOS reason as every other text
   field in the app.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    .agent-chat-shell[b-y8uzedkc6s] {
        gap: var(--space-3);
    }

    .agent-chat-sidebar[b-y8uzedkc6s] {
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .conversation-link[b-y8uzedkc6s] {
        gap: 0;
        padding: var(--space-2) var(--space-3);
    }

    .conversation-link strong[b-y8uzedkc6s] {
        font-size: 0.6875rem;
    }

    .conversation-link span[b-y8uzedkc6s] {
        font-size: 0.5625rem;
        gap: var(--space-1);
    }

    .conversation-working[b-y8uzedkc6s] {
        font-size: 0.5rem;
        padding: 0.1rem 0.3rem;
    }

    /* 42rem of forced height is most of a phone screen before any message
       arrives; the transcript can size to its content here. */
    .agent-chat-workspace[b-y8uzedkc6s] {
        min-height: 24rem;
    }

    .agent-chat-transcript[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .agent-chat-transcript[b-y8uzedkc6s] {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .chat-message[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .chat-message.is-user[b-y8uzedkc6s] {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .chat-message header[b-y8uzedkc6s],
    .chat-message footer[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .chat-message.is-user header[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .chat-message.is-assistant header[b-y8uzedkc6s] {
        gap: var(--space-2);
    }

    .chat-message-model[b-y8uzedkc6s],
    .chat-message footer[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .chat-message.is-user header[b-y8uzedkc6s] {
        font-size: 0.5625rem;
    }

    .agent-chat-shell.is-studio .chat-message.is-user header strong[b-y8uzedkc6s] {
        font-size: 0.625rem;
    }

    .chat-copy[b-y8uzedkc6s] {
        font-size: 0.5625rem;
        padding: 0.15rem 0.35rem;
    }

    .chat-copy-glyph[b-y8uzedkc6s] {
        font-size: 0.7rem;
    }

    .chat-tool-timeline summary[b-y8uzedkc6s] {
        font-size: 0.625rem;
    }

    .chat-tool-event[b-y8uzedkc6s] {
        gap: var(--space-1);
        padding: var(--space-1) 0;
    }

    [b-y8uzedkc6s] .agent-chat-composer,
    .agent-chat-shell.is-studio[b-y8uzedkc6s]  .agent-chat-composer {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .agent-chat-picker-bar[b-y8uzedkc6s] {
        gap: var(--space-2);
        min-height: 0;
        padding: var(--space-2) var(--space-3);
    }

    .agent-chat-toolbar-actions[b-y8uzedkc6s] {
        gap: var(--space-1);
    }

    .studio-new-chat[b-y8uzedkc6s] {
        font-size: 0.625rem;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
    }

    .studio-greeting[b-y8uzedkc6s] {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .studio-greeting h1[b-y8uzedkc6s] {
        font-size: 1.125rem;
    }

    .studio-greeting p[b-y8uzedkc6s],
    .studio-quick-actions-hint[b-y8uzedkc6s] {
        font-size: 0.6875rem;
    }

    /* Compact list rows, not a tile grid. One hit area per assignment; density
       comes from padding, not from shrinking the target below --touch-min. */
    .studio-quick-actions[b-y8uzedkc6s] {
        border: var(--hairline) solid var(--color-border-strong);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%);
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
    }

    .studio-quick-action[b-y8uzedkc6s] {
        align-items: center;
        background: transparent;
        border: 0;
        border-bottom: var(--hairline) solid var(--color-border);
        border-radius: 0;
        column-gap: var(--space-2);
        grid-template-columns: auto minmax(0, 1fr);
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
        row-gap: 0;
    }

    .studio-quick-action:last-child[b-y8uzedkc6s] {
        border-bottom: 0;
    }

    .studio-quick-action-glyph[b-y8uzedkc6s] {
        font-size: 0.85rem;
    }

    .studio-quick-action strong[b-y8uzedkc6s] {
        font-size: 0.6875rem;
    }

    .studio-quick-action small[b-y8uzedkc6s] {
        font-size: 0.5625rem;
    }

    /*
     * Composer wins when sticky chrome competes. The studio shell is already a
     * three-row grid (picker / transcript / composer). `bottom` is the tab bar,
     * not 0: sticky is relative to the workspace scrollport, which runs under
     * the fixed tab bar. A solid fill and a z-index above the board tab strip
     * keep it painted over competing chrome without covering the nav.
     */
    .agent-chat-workspace[b-y8uzedkc6s] {
        min-height: 0;
    }

    .agent-chat-transcript[b-y8uzedkc6s],
    .agent-chat-shell.is-studio .agent-chat-transcript[b-y8uzedkc6s] {
        min-height: 0;
    }

    [b-y8uzedkc6s] .agent-chat-composer,
    .agent-chat-shell.is-studio[b-y8uzedkc6s]  .agent-chat-composer {
        background: var(--color-background);
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
        position: sticky;
        z-index: 12;
    }

    .studio-composer-bar[b-y8uzedkc6s] {
        gap: var(--space-2);
        padding: 0.3rem 0.3rem 0.3rem var(--space-3);
    }

    .studio-composer-input[b-y8uzedkc6s] {
        padding: 0.35rem 0;
    }

    .studio-send[b-y8uzedkc6s] {
        font-size: 0.9rem;
    }

    .studio-composer-hint[b-y8uzedkc6s] {
        font-size: 0.5625rem;
        padding-inline: var(--space-3);
    }
}
/* /Components/Agents/AgentEditor.razor.rz.scp.css */
/* Agent form: titled cards beside a live preview. Tokens from wwwroot/app.css.
   Inputs rendered by InputText/InputRadio/InputCheckbox carry no scope attribute, so rules that
   reach them go through ::deep. */

.agent-editor svg[b-84vnnafh9c] {
    fill: none;
    flex: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.agent-editor-layout[b-84vnnafh9c] {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
}

.agent-editor-main[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

/* ---- Cards ---- */

.agent-card[b-84vnnafh9c] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
}

/* A field beside one with a hint must not stretch to match it: that is what pushed the Agent type
   select and the Badge label box out of line with their neighbours. */
.agent-card .form-grid[b-84vnnafh9c] {
    align-items: start;
}

.agent-card-header[b-84vnnafh9c] {
    align-items: start;
    display: flex;
    gap: var(--space-4);
}

.agent-card-step[b-84vnnafh9c] {
    align-items: center;
    background: var(--color-accent-soft);
    border: var(--hairline) solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    color: var(--color-accent-text);
    display: inline-flex;
    flex: none;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.agent-card-header h2[b-84vnnafh9c] {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
    text-transform: none;
}

.agent-card-header p[b-84vnnafh9c] {
    color: var(--color-text-subtle);
    font-size: 0.84rem;
    margin: 0.2rem 0 0;
}

/* The optional card is closed until opened; its summary is the card header. */
.agent-card-optional[b-84vnnafh9c] {
    gap: 0;
}

.agent-card-optional[open][b-84vnnafh9c] {
    gap: var(--space-5);
}

.agent-card-optional > summary[b-84vnnafh9c] {
    cursor: pointer;
    list-style: none;
}

.agent-card-optional > summary[b-84vnnafh9c]::-webkit-details-marker {
    display: none;
}

.agent-card-optional > summary > div[b-84vnnafh9c] {
    flex: 1;
}

.agent-card-chevron[b-84vnnafh9c] {
    color: var(--color-text-faint);
    height: 1.25rem;
    margin-top: 0.3rem;
    transition: transform var(--transition-fast);
    width: 1.25rem;
}

.agent-card-optional[open] .agent-card-chevron[b-84vnnafh9c] {
    transform: rotate(180deg);
}

.agent-card-optional > summary:hover .agent-card-chevron[b-84vnnafh9c] {
    color: var(--color-text);
}

/* ---- Accent color ---- */

.color-picker[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-5);
}

.color-picker-main[b-84vnnafh9c] {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: auto minmax(0, 1fr);
}

/* The swatch is the native picker: the input covers it, invisible, so a click anywhere opens the
   browser's full picker - spectrum, hue, eyedropper and RGB/HSL/hex entry. */
.color-well[b-84vnnafh9c] {
    background: var(--pick);
    border: var(--hairline) solid var(--color-border-strong);
    box-shadow: inset 0 0 0 3px var(--color-surface);
    cursor: pointer;
    display: block;
    height: 7.5rem;
    position: relative;
    transition: box-shadow var(--transition-fast);
    width: 7.5rem;
}

.color-well:hover[b-84vnnafh9c],
.color-well:focus-within[b-84vnnafh9c] {
    box-shadow: inset 0 0 0 3px var(--color-surface), 0 0 0 2px var(--pick);
}

.color-well input[b-84vnnafh9c] {
    border: 0;
    cursor: pointer;
    height: 100%;
    inset: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}

.color-well-hint[b-84vnnafh9c] {
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    bottom: var(--space-2);
    color: #fff;
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: var(--space-2);
    width: 1.75rem;
}

.color-well-hint svg[b-84vnnafh9c] {
    height: 1rem;
    width: 1rem;
}

.color-picker-fields[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-3);
    max-width: 22rem;
}

.color-hex input[b-84vnnafh9c] {
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.color-hex input[b-84vnnafh9c]::placeholder {
    text-transform: none;
}

.color-picker-error[b-84vnnafh9c] {
    color: var(--color-danger);
}

.color-picker-actions[b-84vnnafh9c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-picker-actions svg[b-84vnnafh9c] {
    height: 0.95rem;
    width: 0.95rem;
}

.color-picker-section[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-2);
}

.color-picker-label[b-84vnnafh9c] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    margin: 0;
    text-transform: uppercase;
}

.color-presets[b-84vnnafh9c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-preset[b-84vnnafh9c] {
    align-items: center;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    gap: var(--space-2);
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.color-preset:hover:not(:disabled)[b-84vnnafh9c] {
    border-color: var(--swatch);
    color: var(--color-text);
}

.color-preset.is-selected[b-84vnnafh9c] {
    border-color: var(--swatch);
    box-shadow: inset 0 0 0 1px var(--swatch);
    color: var(--color-text);
}

.color-preset.is-taken[b-84vnnafh9c] {
    cursor: not-allowed;
    opacity: 0.4;
    text-decoration: line-through;
}

.color-preset-dot[b-84vnnafh9c],
.color-dot[b-84vnnafh9c] {
    background: var(--swatch);
    border-radius: 50%;
    display: inline-block;
    flex: none;
    height: 0.75rem;
    width: 0.75rem;
}

.color-contrast[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.color-contrast-sample[b-84vnnafh9c] {
    align-items: baseline;
    border: var(--hairline) solid var(--color-border);
    color: var(--sample);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: var(--space-2);
    padding: var(--space-3);
}

.color-contrast-sample strong[b-84vnnafh9c] {
    font-size: 1.1rem;
}

.color-contrast-sample code[b-84vnnafh9c] {
    background: none;
    color: inherit;
    margin-left: auto;
    opacity: 0.85;
}

.color-contrast-sample.is-dark[b-84vnnafh9c] {
    background: #14171a;
}

.color-contrast-sample.is-light[b-84vnnafh9c] {
    background: #fff;
}

.color-picker-warning[b-84vnnafh9c] {
    align-items: center;
    background: var(--color-warning-soft);
    border: var(--hairline) solid color-mix(in srgb, var(--color-warning) 55%, transparent);
    color: var(--color-warning);
    display: flex;
    font-size: 0.84rem;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
}

.color-picker-warning.is-blocking[b-84vnnafh9c] {
    background: var(--color-danger-soft);
    border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
    color: var(--color-danger);
}

.color-in-use[b-84vnnafh9c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.color-in-use li[b-84vnnafh9c] {
    align-items: center;
    border: var(--hairline) solid var(--color-border);
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.78rem;
    gap: var(--space-2);
    padding: 0.25rem 0.55rem;
}

/* ---- Runtime: connection mode as two choices, not a dropdown of two ---- */

.agent-segmented[b-84vnnafh9c] {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.agent-segmented legend[b-84vnnafh9c] {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    margin-bottom: var(--space-2);
    padding: 0;
}

.agent-segments[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-segment[b-84vnnafh9c] {
    align-items: start;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.agent-segment:hover[b-84vnnafh9c] {
    border-color: var(--color-border-strong);
}

.agent-segment.is-selected[b-84vnnafh9c] {
    background: var(--color-accent-faint);
    border-color: var(--color-accent);
}

.agent-segment[b-84vnnafh9c]  input {
    accent-color: var(--color-accent);
    margin: 0.2rem 0 0;
}

.agent-segment > span[b-84vnnafh9c] {
    display: grid;
    gap: 0.15rem;
}

.agent-segment strong[b-84vnnafh9c] {
    color: var(--color-text);
    font-size: 0.9rem;
}

.agent-segment small[b-84vnnafh9c] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
}

/* ---- Key scopes ---- */

.agent-scopes[b-84vnnafh9c] {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.agent-scope[b-84vnnafh9c] {
    align-items: start;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.agent-scope:hover[b-84vnnafh9c] {
    border-color: var(--color-border-strong);
}

.agent-scope.is-selected[b-84vnnafh9c] {
    background: var(--color-accent-faint);
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
}

.agent-scope[b-84vnnafh9c]  input {
    accent-color: var(--color-accent);
    flex: none;
    height: 1rem;
    margin: 0.15rem 0 0;
    width: 1rem;
}

.agent-scope > span[b-84vnnafh9c] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.agent-scope strong[b-84vnnafh9c] {
    color: var(--color-text);
    font-size: 0.84rem;
    font-weight: 600;
}

.agent-scope code[b-84vnnafh9c] {
    color: var(--color-text-faint);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

/* ---- Preview rail ---- */

.agent-editor-aside[b-84vnnafh9c] {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
}

.agent-preview[b-84vnnafh9c] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.agent-preview-post[b-84vnnafh9c] {
    background: #14171a;
    border: var(--hairline) solid var(--color-border);
    border-left: 3px solid var(--agent-accent);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
}

.agent-preview-avatar[b-84vnnafh9c] {
    align-items: center;
    background: color-mix(in srgb, var(--agent-accent) 18%, transparent);
    border: var(--hairline) solid var(--agent-accent);
    border-radius: 50%;
    color: var(--agent-accent);
    display: inline-flex;
    flex: none;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.agent-preview-body[b-84vnnafh9c] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.agent-preview-name[b-84vnnafh9c] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.agent-preview-name strong[b-84vnnafh9c] {
    color: var(--agent-accent);
    font-family: var(--font-display);
    font-size: 1rem;
    font-stretch: 75%;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.agent-preview-badge[b-84vnnafh9c] {
    border: var(--hairline) solid color-mix(in srgb, var(--agent-accent) 60%, transparent);
    color: var(--agent-accent);
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
}

.agent-preview-provenance[b-84vnnafh9c] {
    color: var(--color-text-faint);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}

.agent-preview-body p[b-84vnnafh9c] {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    margin: var(--space-2) 0 0;
}

.agent-preview-facts[b-84vnnafh9c] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-top: var(--space-4);
}

.agent-preview-facts > div[b-84vnnafh9c] {
    display: flex;
    font-size: 0.84rem;
    gap: var(--space-3);
    justify-content: space-between;
}

.agent-preview-facts dt[b-84vnnafh9c] {
    color: var(--color-text-faint);
}

.agent-preview-facts dd[b-84vnnafh9c] {
    color: var(--color-text);
    margin: 0;
    text-align: right;
}

/* ---- Footer ---- */

.agent-editor-footer[b-84vnnafh9c] {
    background: color-mix(in srgb, var(--color-background) 88%, transparent);
    backdrop-filter: blur(6px);
    border-top: var(--hairline) solid var(--color-border);
    bottom: 0;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding: var(--space-3) 0;
    position: sticky;
    z-index: 5;
}

/* ---- Narrower screens ---- */

@media (max-width: 72rem) {
    .agent-editor-layout[b-84vnnafh9c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .agent-editor-aside[b-84vnnafh9c] {
        position: static;
    }
}

@media (max-width: 48rem) {
    .agent-card[b-84vnnafh9c] {
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .color-picker-main[b-84vnnafh9c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .color-well[b-84vnnafh9c] {
        height: 5rem;
        width: 100%;
    }

    .color-contrast[b-84vnnafh9c],
    .agent-segments[b-84vnnafh9c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .color-well[b-84vnnafh9c],
    .color-picker-actions[b-84vnnafh9c],
    .agent-editor-footer[b-84vnnafh9c] {
        display: none;
    }
}
/* /Components/Agents/AgentKeyMetadataList.razor.rz.scp.css */
.key-card-list[b-c7p7jknbel] {
    display: grid;
    gap: var(--space-4);
}

.key-card[b-c7p7jknbel] {
    --notch: var(--notch-md);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    border-left: 2px solid var(--color-warning);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    display: grid;
    min-width: 0;
}

.key-card.is-inactive[b-c7p7jknbel] {
    border-left-color: var(--color-text-faint);
    opacity: 0.78;
}

.key-card-header[b-c7p7jknbel] {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.key-card-identity[b-c7p7jknbel] {
    align-items: start;
    display: flex;
    flex: 1 1 14rem;
    gap: var(--space-3);
    min-width: 0;
}

.key-card-identity > div[b-c7p7jknbel] {
    min-width: 0;
}

.key-card-prefix[b-c7p7jknbel] {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-stretch: normal;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
    text-transform: none;
}

.key-card-prefix code[b-c7p7jknbel] {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.key-card-actions[b-c7p7jknbel] {
    flex: 0 0 auto;
}

.key-card-actions .button[b-c7p7jknbel] {
    white-space: nowrap;
}

.key-card-body[b-c7p7jknbel] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.key-card-scopes[b-c7p7jknbel] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.key-card-scopes .panel-kicker[b-c7p7jknbel] {
    margin: 0;
}

.key-card-body[b-c7p7jknbel]  .scope-chips-expanded {
    max-width: none;
}

.key-card-meta[b-c7p7jknbel] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.key-card-meta > div[b-c7p7jknbel] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.key-card-meta dt[b-c7p7jknbel] {
    color: var(--color-text-faint);
    font-size: 0.64rem;
}

.key-card-meta dd[b-c7p7jknbel] {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    margin: 0;
}

@media (max-width: 40rem) {
    .key-card-header[b-c7p7jknbel],
    .key-card-body[b-c7p7jknbel] {
        padding: var(--space-4);
    }

    .key-card-actions[b-c7p7jknbel] {
        width: 100%;
    }

    .key-card-actions .button[b-c7p7jknbel] {
        flex: 1 1 8rem;
    }

    .key-card-meta[b-c7p7jknbel] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .key-card-list[b-c7p7jknbel] {
        gap: var(--space-2);
    }

    .key-card-header[b-c7p7jknbel],
    .key-card-body[b-c7p7jknbel] {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .key-card-identity[b-c7p7jknbel] {
        gap: var(--space-2);
    }

    .key-card-prefix[b-c7p7jknbel] {
        font-size: 0.75rem;
    }

    .key-card-meta[b-c7p7jknbel] {
        gap: var(--space-2);
    }

    .key-card-meta dt[b-c7p7jknbel] {
        font-size: 0.5rem;
    }

    .key-card-meta dd[b-c7p7jknbel] {
        font-size: 0.6875rem;
    }
}
/* /Components/Agents/MessageBoardAgentPrompt.razor.rz.scp.css */
/* Invite disclosure: panel chrome with a summary toggle; closed until expanded. */
.message-board-invite > .message-board-invite-summary[b-d22qqm9dfu] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.message-board-invite > .message-board-invite-summary[b-d22qqm9dfu]::-webkit-details-marker {
    display: none;
}

.message-board-invite-hint[b-d22qqm9dfu] {
    flex: 0 0 auto;
}

.message-board-invite-hint .is-expanded[b-d22qqm9dfu] {
    display: none;
}

.message-board-invite[open] .message-board-invite-hint .is-collapsed[b-d22qqm9dfu] {
    display: none;
}

.message-board-invite[open] .message-board-invite-hint .is-expanded[b-d22qqm9dfu] {
    display: inline;
}

.message-board-invite > .message-board-invite-summary:focus-visible[b-d22qqm9dfu] {
    outline: 2px solid var(--color-accent-text);
    outline-offset: -2px;
}
/* /Components/Agents/MessageBoardReplyAgentPrompt.razor.rz.scp.css */
.message-board-reply-invite[b-mrcslzgzvr] {
    display: inline-block;
}

.message-board-reply-invite > summary[b-mrcslzgzvr] {
    cursor: pointer;
    list-style: none;
}

.message-board-reply-invite > summary[b-mrcslzgzvr]::-webkit-details-marker {
    display: none;
}

.message-board-reply-invite-body[b-mrcslzgzvr] {
    display: grid;
    gap: .65rem;
    margin-top: .65rem;
    min-width: min(34rem, 78vw);
    padding: .8rem;
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    background: var(--color-surface-raised);
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .message-board-reply-invite-body[b-mrcslzgzvr] {
        gap: var(--space-2);
        margin-top: var(--space-2);
        min-width: min(34rem, 88vw);
        padding: var(--space-3);
    }
}
/* /Components/Agents/OpenRouterFreeModelPicker.razor.rz.scp.css */
.or-model-picker[b-aqkfsh4lfw] {
    display: grid;
    gap: var(--space-3);
}

.or-model-toolbar[b-aqkfsh4lfw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

.or-model-toolbar .button[b-aqkfsh4lfw] {
    flex: 0 0 auto;
}

.or-model-list[b-aqkfsh4lfw] {
    max-height: 22rem;
}

.or-model-table[b-aqkfsh4lfw] {
    min-width: 64rem;
}

.or-model-table code[b-aqkfsh4lfw] {
    overflow-wrap: anywhere;
}

.or-model-actions[b-aqkfsh4lfw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 40rem) {
    .or-model-toolbar .button[b-aqkfsh4lfw] {
        width: 100%;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   The table drops its desktop min-width in app.css's ≤52rem card layout, so the
   only thing left to tune is the region the cards scroll inside. */
@media (max-width: 48rem) {
    .or-model-picker[b-aqkfsh4lfw],
    .or-model-toolbar[b-aqkfsh4lfw] {
        gap: var(--space-2);
    }

    .or-model-list[b-aqkfsh4lfw] {
        max-height: 16rem;
    }

    .or-model-actions[b-aqkfsh4lfw] {
        gap: var(--space-1);
    }
}
/* /Components/Attachments/AttachmentComposer.razor.rz.scp.css */
/* AIWO-416. The composer reads as part of writing the message, not as an upload form. */

.attachment-composer[b-sqzszx4w32] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attachment-toolbar[b-sqzszx4w32] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* A compact control beside the message rather than a full-width secondary button. */
.attachment-picker[b-sqzszx4w32] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    gap: var(--space-1);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.attachment-picker:hover[b-sqzszx4w32],
.attachment-picker:focus-within[b-sqzszx4w32] {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.attachment-picker-icon[b-sqzszx4w32] {
    font-size: 1rem;
}

/* The input stays in the accessibility tree and keyboard order; only the default control is hidden. */
.attachment-picker[b-sqzszx4w32]  input[type="file"] {
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.attachment-picker[b-sqzszx4w32] {
    position: relative;
    overflow: hidden;
}

.attachment-hint[b-sqzszx4w32] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    margin: 0;
}

.attachment-rejections[b-sqzszx4w32] {
    border: 1px solid var(--color-warning, var(--color-border));
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: var(--space-2);
}

.attachment-grid[b-sqzszx4w32] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.attachment-card[b-sqzszx4w32] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: 0;
    overflow: hidden;
    width: 9rem;
}

.attachment-card img[b-sqzszx4w32] {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.attachment-card-glyph[b-sqzszx4w32] {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-hover);
    display: flex;
    font-size: 1.8rem;
    justify-content: center;
}

.attachment-card figcaption[b-sqzszx4w32] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.attachment-card figcaption span[b-sqzszx4w32] {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-card figcaption small[b-sqzszx4w32] {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.attachment-card figcaption button[b-sqzszx4w32] {
    align-self: flex-start;
}

/* AIWO-617: file actions and guidance never compete for the same cramped line. */
.attachment-toolbar[b-sqzszx4w32] {
    align-items: stretch;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
}

.attachment-picker[b-sqzszx4w32],
.attachment-toolbar .text-action[b-sqzszx4w32] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-3);
    white-space: normal;
}

.attachment-picker-label[b-sqzszx4w32] {
    font-weight: 650;
    line-height: 1.25;
}

.attachment-hint[b-sqzszx4w32] {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.attachment-project-file-picker .select-control[b-sqzszx4w32] {
    flex: 1 1 11rem;
    min-width: 0;
}

.attachment-grid .attachment-card[b-sqzszx4w32] {
    min-width: 0;
    max-width: 100%;
}

.attachment-card figcaption span[b-sqzszx4w32] {
    overflow-wrap: anywhere;
}

@media (max-width: 28rem) {
    .attachment-toolbar[b-sqzszx4w32] {
        align-items: stretch;
        flex-direction: column;
    }
    .attachment-picker[b-sqzszx4w32],
    .attachment-toolbar .text-action[b-sqzszx4w32] {
        width: 100%;
    }
}
/* /Components/Attachments/ImageAnnotationViewer.razor.rz.scp.css */
.image-annotation-dialog[b-5c4dizxm1l] {
    max-width: min(72rem, calc(100vw - 2rem));
}

.image-annotation-body[b-5c4dizxm1l] {
    display: grid;
    gap: var(--space-3);
}

.image-annotation-toolbar[b-5c4dizxm1l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.image-annotation-stage[b-5c4dizxm1l] {
    position: relative;
    background: #111;
    border: var(--hairline) solid var(--color-border);
    max-height: min(70vh, 44rem);
    overflow: auto;
}

.image-annotation-source[b-5c4dizxm1l] {
    display: block;
    max-width: 100%;
    height: auto;
}

.image-annotation-overlay[b-5c4dizxm1l] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.image-annotation-text[b-5c4dizxm1l] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.image-attachment-open[b-5c4dizxm1l] {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.image-attachment-badge[b-5c4dizxm1l] {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--color-accent);
    font-size: 0.75rem;
}
/* /Components/Attachments/ImageAttachmentPanel.razor.rz.scp.css */
.image-annotation-dialog[b-elnheveo4l] {
    max-width: min(72rem, calc(100vw - 2rem));
}

.image-annotation-body[b-elnheveo4l] {
    display: grid;
    gap: var(--space-3);
}

.image-annotation-toolbar[b-elnheveo4l],
.image-attachment-toolbar[b-elnheveo4l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.image-annotation-stage[b-elnheveo4l] {
    position: relative;
    background: #111;
    border: var(--hairline) solid var(--color-border);
    max-height: min(70vh, 44rem);
    overflow: auto;
}

.image-annotation-source[b-elnheveo4l] {
    display: block;
    max-width: 100%;
    height: auto;
}

.image-annotation-overlay[b-elnheveo4l] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.image-annotation-text[b-elnheveo4l] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.image-attachment-open[b-elnheveo4l] {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.image-attachment-badge[b-elnheveo4l] {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--color-accent);
    font-size: 0.75rem;
}

.image-attachment-grid[b-elnheveo4l],
.attachment-grid[b-elnheveo4l] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.image-attachment-card img[b-elnheveo4l] {
    display: block;
    width: 100%;
    height: auto;
}
/* /Components/Attachments/ThreadAttachments.razor.rz.scp.css */
/* AIWO-617: one compact, accessible list; follows the discussion column at narrow widths. */
.board-rail-card.thread-attachments[b-cmmwf2f7j4] {
    --notch: var(--notch-sm);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}

.board-rail-title[b-cmmwf2f7j4] {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-kicker);
    margin: 0;
    text-transform: uppercase;
}

.thread-attachments-count[b-cmmwf2f7j4] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: normal;
    padding: .1rem .45rem;
}

.thread-attachments-note[b-cmmwf2f7j4],
.thread-attachments-error[b-cmmwf2f7j4] {
    color: var(--color-text-subtle);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

.thread-attachments-error[b-cmmwf2f7j4] { color: var(--color-danger, var(--color-text)); }

.thread-attachments-list[b-cmmwf2f7j4] {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.thread-attachment-row[b-cmmwf2f7j4] {
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.8rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--space-2) 0;
}

.thread-attachment-icon[b-cmmwf2f7j4] {
    align-items: center;
    background: var(--color-surface-raised);
    border-radius: var(--radius-sm);
    color: var(--color-accent-text);
    display: flex;
    font-size: 1.15rem;
    justify-content: center;
    min-height: 1.9rem;
}

.thread-attachment-info[b-cmmwf2f7j4] {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.thread-attachment-name[b-cmmwf2f7j4] {
    color: var(--color-text);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
}

.thread-attachment-meta[b-cmmwf2f7j4] {
    color: var(--color-text-muted);
    font-size: .74rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.thread-attachment-source[b-cmmwf2f7j4] {
    color: var(--color-accent-text);
    font-size: .8rem;
    line-height: 1.5;
    padding: .25rem 0;
    width: fit-content;
}

.thread-attachments-pager[b-cmmwf2f7j4] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
}

.thread-attachments-pager span[b-cmmwf2f7j4] {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.thread-attachments-pager button[b-cmmwf2f7j4] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2);
}

.thread-attachments-pager button:disabled[b-cmmwf2f7j4] {
    cursor: not-allowed;
    opacity: .45;
}
/* /Components/Checklists/ChecklistBoard.razor.rz.scp.css */
/* The checklist is a list of rows on a column grid, not a .data-table. The shared table's phone
   treatment hides every cell that is not a title, a chip or a control, which is right for a
   directory and wrong here: a row needs to open into its details in place, and that detail
   panel has no home inside a table row that turns into a card. */

.checklist-board[b-ra32j1qlrj] {
    --checklist-cols: 2rem 2.25rem minmax(0, 1fr) minmax(8rem, 12rem) 8.5rem 5rem 6.5rem 7.5rem 3rem;
    display: grid;
    gap: var(--space-4);
    /* Without this the single track grows to its widest child's max-content, and a long
       unbroken description pushes the whole board wider than a phone. */
    grid-template-columns: minmax(0, 1fr);
}

.checklist-board.is-project[b-ra32j1qlrj] {
    --checklist-cols: 2rem 2.25rem minmax(0, 1fr) 8.5rem 5rem 6.5rem 7.5rem 3rem;
}

.checklist-board svg[b-ra32j1qlrj] {
    fill: none;
    flex: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.checklist-glyph[b-ra32j1qlrj] {
    height: 1rem;
    width: 1rem;
}

/* ---- Toolbar: scope, the two server filters, search ---- */

.checklist-toolbar[b-ra32j1qlrj] {
    align-items: center;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3);
}

.checklist-scopes[b-ra32j1qlrj] {
    display: flex;
    gap: var(--space-2);
}

.checklist-scope-tab[b-ra32j1qlrj] {
    align-items: center;
    background: transparent;
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    gap: var(--space-2);
    min-height: 2.4rem;
    padding: 0 var(--space-3);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.checklist-scope-tab svg[b-ra32j1qlrj] {
    height: 1rem;
    width: 1rem;
}

.checklist-scope-tab:hover[b-ra32j1qlrj] {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.checklist-scope-tab[aria-selected="true"][b-ra32j1qlrj] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.checklist-count[b-ra32j1qlrj] {
    background: var(--color-surface-hover);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.35rem;
    min-width: 1.35rem;
    padding: 0 0.4rem;
    text-align: center;
}

.checklist-scope-tab[aria-selected="true"] .checklist-count[b-ra32j1qlrj] {
    background: var(--color-accent);
    color: var(--color-text);
}

.checklist-toggles[b-ra32j1qlrj] {
    align-items: center;
    display: flex;
    gap: var(--space-5);
    margin-left: auto;
}

.checklist-toggle[b-ra32j1qlrj] {
    align-items: center;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    gap: var(--space-2);
    min-height: 2.4rem;
    white-space: nowrap;
}

.checklist-toggle:hover[b-ra32j1qlrj] {
    color: var(--color-text);
}

/* One checkbox drawing for the toggles and the Done column: a square that fills with the
   accent, rather than the browser's small native box. */
.checklist-toggle input[b-ra32j1qlrj],
.checklist-done input[b-ra32j1qlrj] {
    appearance: none;
    background: var(--color-field) center / 80% no-repeat;
    border: 1.5px solid var(--color-border-loud);
    cursor: pointer;
    flex: none;
    height: 1.1rem;
    margin: 0;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    width: 1.1rem;
}

.checklist-done input[b-ra32j1qlrj] {
    height: 1.25rem;
    width: 1.25rem;
}

.checklist-toggle input:hover[b-ra32j1qlrj],
.checklist-done input:hover:not(:disabled)[b-ra32j1qlrj] {
    border-color: var(--color-text-muted);
}

.checklist-toggle input:checked[b-ra32j1qlrj],
.checklist-done input:checked[b-ra32j1qlrj] {
    background-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border-color: var(--color-accent);
}

.checklist-done input:disabled[b-ra32j1qlrj] {
    cursor: not-allowed;
    opacity: 0.4;
}

.checklist-toggle input:focus-visible[b-ra32j1qlrj],
.checklist-done input:focus-visible[b-ra32j1qlrj] {
    outline: 2px solid var(--color-accent-hover);
    outline-offset: 2px;
}

.checklist-search[b-ra32j1qlrj] {
    align-items: center;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-faint);
    display: flex;
    flex: 0 1 20rem;
    gap: var(--space-2);
    min-height: 2.4rem;
    padding: 0 var(--space-3);
    transition: border-color var(--transition-fast);
}

.checklist-search:focus-within[b-ra32j1qlrj] {
    border-color: var(--color-accent);
}

.checklist-search svg[b-ra32j1qlrj] {
    height: 1rem;
    width: 1rem;
}

.checklist-search input[b-ra32j1qlrj] {
    background: transparent;
    border: 0;
    color: var(--color-text);
    flex: 1;
    font: inherit;
    font-size: 0.85rem;
    min-width: 0;
    outline: none;
    padding: var(--space-2) 0;
}

.checklist-search input[b-ra32j1qlrj]::placeholder {
    color: var(--color-text-faint);
}

.checklist-toolbar-actions[b-ra32j1qlrj] {
    display: flex;
    gap: var(--space-2);
}

/* ---- The list ---- */

.checklist-list[b-ra32j1qlrj] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    min-width: 0;
}

.checklist-head[b-ra32j1qlrj],
.checklist-row[b-ra32j1qlrj] {
    align-items: center;
    column-gap: var(--space-4);
    display: grid;
    grid-template-columns: var(--checklist-cols);
    padding-inline: var(--space-4);
}

/* The cells sit directly on the row's grid above the phone breakpoint; on a phone the wrapper
   becomes a real box so they can flow onto one line under the title. */
.checklist-cells[b-ra32j1qlrj] {
    display: contents;
}

.checklist-head[b-ra32j1qlrj] {
    border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    padding-block: var(--space-3);
    text-transform: uppercase;
}

.checklist-head .is-end[b-ra32j1qlrj] {
    text-align: right;
}

.checklist-rows[b-ra32j1qlrj] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist-item[b-ra32j1qlrj] {
    border-bottom: var(--hairline) solid var(--color-border);
}

.checklist-item:last-child[b-ra32j1qlrj] {
    border-bottom: 0;
}

.checklist-row[b-ra32j1qlrj] {
    min-height: 4.25rem;
    padding-block: var(--space-3);
    transition: background var(--transition-fast);
}

.checklist-row:hover[b-ra32j1qlrj] {
    background: var(--color-surface-hover);
}

.checklist-item.is-expanded > .checklist-row[b-ra32j1qlrj] {
    background: var(--color-accent-faint);
}

.checklist-expand[b-ra32j1qlrj] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-faint);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.checklist-expand:hover[b-ra32j1qlrj] {
    color: var(--color-text);
}

.checklist-expand svg[b-ra32j1qlrj] {
    height: 1.1rem;
    transition: transform var(--transition-fast);
    width: 1.1rem;
}

.checklist-expand[aria-expanded="true"][b-ra32j1qlrj] {
    color: var(--color-accent-text);
}

.checklist-expand[aria-expanded="true"] svg[b-ra32j1qlrj] {
    transform: rotate(90deg);
}

.checklist-done[b-ra32j1qlrj] {
    display: inline-flex;
}

.checklist-main[b-ra32j1qlrj] {
    display: grid;
    gap: 0.3rem;
    justify-items: start;
    min-width: 0;
}

.checklist-title[b-ra32j1qlrj] {
    background: transparent;
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 100%;
    padding: 0;
    text-align: left;
}

.checklist-title:hover[b-ra32j1qlrj] {
    color: var(--color-accent-text);
}

.checklist-summary[b-ra32j1qlrj] {
    color: var(--color-text-subtle);
    font-size: 0.8rem;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checklist-tags[b-ra32j1qlrj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.checklist-tags:empty[b-ra32j1qlrj] {
    display: none;
}

.checklist-tag[b-ra32j1qlrj] {
    align-items: center;
    border: var(--hairline) solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    color: var(--color-accent-text);
    display: inline-flex;
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-stretch: 75%;
    font-weight: 700;
    gap: 0.3rem;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.28rem 0.45rem;
    text-transform: uppercase;
}

.checklist-tag svg[b-ra32j1qlrj] {
    height: 0.8rem;
    width: 0.8rem;
}

.checklist-tag.is-golive[b-ra32j1qlrj] {
    border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
    color: var(--color-warning);
    display: none;
}

.checklist-cell[b-ra32j1qlrj] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    min-width: 0;
}

.checklist-scope[b-ra32j1qlrj] {
    display: grid;
    gap: 0.1rem;
}

.checklist-scope-key[b-ra32j1qlrj] {
    color: var(--color-text);
    font-weight: 600;
}

.checklist-scope-name[b-ra32j1qlrj] {
    color: var(--color-text-faint);
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checklist-required[b-ra32j1qlrj] {
    color: var(--color-warning);
    font-weight: 600;
}

.checklist-muted[b-ra32j1qlrj] {
    color: var(--color-text-faint);
}

.checklist-actions[b-ra32j1qlrj] {
    display: flex;
    justify-content: flex-end;
}

/* Done and closed rows recede: the open ones are what the page is for. */
.checklist-item.is-done .checklist-title[b-ra32j1qlrj] {
    color: var(--color-text-faint);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-loud);
}

.checklist-item.is-done .checklist-summary[b-ra32j1qlrj],
.checklist-item.is-closed .checklist-summary[b-ra32j1qlrj],
.checklist-item.is-done .checklist-tags[b-ra32j1qlrj],
.checklist-item.is-done .checklist-cells[b-ra32j1qlrj] {
    opacity: 0.6;
}

.checklist-item.is-closed .checklist-title[b-ra32j1qlrj] {
    color: var(--color-text-muted);
}

/* ---- Details, opened in place ---- */

.checklist-details[b-ra32j1qlrj] {
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface-raised));
    border: var(--hairline) solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    margin: 0 var(--space-4) var(--space-4);
    padding: var(--space-5) var(--space-6);
}

.checklist-details h3[b-ra32j1qlrj] {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

.checklist-description[b-ra32j1qlrj] {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.65;
    margin: 0;
    max-width: 110ch;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.checklist-description.is-clamped[b-ra32j1qlrj] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.checklist-more[b-ra32j1qlrj] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-accent-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.3rem;
    margin-top: var(--space-3);
    padding: 0;
}

.checklist-more svg[b-ra32j1qlrj] {
    height: 1rem;
    width: 1rem;
}

.checklist-more:hover[b-ra32j1qlrj] {
    text-decoration: underline;
}

.checklist-keyinfo[b-ra32j1qlrj] {
    border-left: var(--hairline) solid var(--color-border);
    padding-left: var(--space-6);
}

.checklist-keyinfo dl[b-ra32j1qlrj] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.checklist-keyinfo dl > div[b-ra32j1qlrj] {
    display: grid;
    font-size: 0.84rem;
    gap: var(--space-3);
    grid-template-columns: 6rem minmax(0, 1fr);
}

.checklist-keyinfo dt[b-ra32j1qlrj] {
    color: var(--color-text-faint);
}

.checklist-keyinfo dd[b-ra32j1qlrj] {
    color: var(--color-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.checklist-keyinfo a[b-ra32j1qlrj] {
    color: var(--color-accent-text);
}

.checklist-footnote[b-ra32j1qlrj] {
    border-top: var(--hairline) solid var(--color-border);
    color: var(--color-text-faint);
    font-size: 0.76rem;
    margin: 0;
    padding: var(--space-3) var(--space-4);
}

/* ---- Narrower desktops: Go-live and Due give way, and the tag carries go-live instead ---- */

@media (max-width: 80rem) {
    .checklist-board[b-ra32j1qlrj] {
        --checklist-cols: 2rem 2.25rem minmax(0, 1fr) minmax(7rem, 10rem) 8.5rem 7.5rem 3rem;
    }

    .checklist-board.is-project[b-ra32j1qlrj] {
        --checklist-cols: 2rem 2.25rem minmax(0, 1fr) 8.5rem 7.5rem 3rem;
    }

    .checklist-head > span:nth-last-child(4)[b-ra32j1qlrj],
    .checklist-head > span:nth-last-child(3)[b-ra32j1qlrj],
    .checklist-golive[b-ra32j1qlrj],
    .checklist-due[b-ra32j1qlrj] {
        display: none;
    }

    .checklist-tag.is-golive[b-ra32j1qlrj] {
        display: inline-flex;
    }

    .checklist-toggles[b-ra32j1qlrj] {
        margin-left: 0;
    }

    .checklist-search[b-ra32j1qlrj] {
        flex: 1 1 14rem;
    }
}

/* ---- Phones: each row is a card; chips flow on one line under the title ---- */

@media (max-width: 48rem) {
    .checklist-board[b-ra32j1qlrj] {
        gap: var(--space-3);
    }

    .checklist-toolbar[b-ra32j1qlrj] {
        gap: var(--space-3);
    }

    .checklist-scopes[b-ra32j1qlrj] {
        width: 100%;
    }

    .checklist-scope-tab[b-ra32j1qlrj] {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0 var(--space-2);
    }

    .checklist-scope-tab svg[b-ra32j1qlrj] {
        display: none;
    }

    .checklist-toggles[b-ra32j1qlrj] {
        gap: var(--space-4);
        width: 100%;
    }

    .checklist-search[b-ra32j1qlrj] {
        flex-basis: 100%;
    }

    .checklist-search input[b-ra32j1qlrj] {
        font-size: var(--text-control-min);
    }

    .checklist-toolbar-actions[b-ra32j1qlrj] {
        width: 100%;
    }

    .checklist-head[b-ra32j1qlrj] {
        display: none;
    }

    /* Chevron, box and menu line up with the title's first line rather than the card's middle. */
    .checklist-row[b-ra32j1qlrj] {
        align-items: start;
        column-gap: var(--space-2);
        grid-template-columns: 2rem 2rem minmax(0, 1fr) auto;
        padding: var(--space-3);
        row-gap: var(--space-2);
    }

    .checklist-cells[b-ra32j1qlrj] {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        grid-column: 3 / 5;
        grid-row: 2;
    }

    .checklist-scope[b-ra32j1qlrj],
    .checklist-due:not(:has(time))[b-ra32j1qlrj] {
        display: none;
    }

    .checklist-due[b-ra32j1qlrj] {
        display: block;
        font-size: 0.76rem;
    }

    .checklist-done[b-ra32j1qlrj] {
        padding-top: 0.35rem;
    }

    .checklist-actions[b-ra32j1qlrj] {
        grid-column: 4;
        grid-row: 1;
    }

    .checklist-summary[b-ra32j1qlrj] {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .checklist-details[b-ra32j1qlrj] {
        gap: var(--space-4);
        grid-template-columns: minmax(0, 1fr);
        margin: 0 var(--space-2) var(--space-3);
        padding: var(--space-4);
    }

    .checklist-keyinfo[b-ra32j1qlrj] {
        border-left: 0;
        border-top: var(--hairline) solid var(--color-border);
        padding-left: 0;
        padding-top: var(--space-4);
    }
}
/* /Components/Connections/SqlConnectionSetup.razor.rz.scp.css */
/* SQL Server connection setup layout only. Colour, geometry, and type come from tokens in app.css. */

/* One-time secrets: the value takes the slack, the copy action keeps its width. */
.connector-secret-row[b-faelorajmz] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.connector-secret[b-faelorajmz] {
    flex: 1 1 24rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Setup steps. Rare work, so it collapses out of the way of the directory. */
.connector-setup > summary[b-faelorajmz] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    list-style: none;
    min-height: var(--touch-min);
}

.connector-setup > summary[b-faelorajmz]::-webkit-details-marker {
    display: none;
}

.connector-setup-title[b-faelorajmz] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.connector-setup-hint[b-faelorajmz] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.connector-setup-hint[b-faelorajmz]::after {
    content: "Show steps";
}

.connector-setup[open] .connector-setup-hint[b-faelorajmz]::after {
    content: "Hide steps";
}

.connector-setup > summary:hover .connector-setup-hint[b-faelorajmz],
.connector-setup > summary:focus-visible .connector-setup-hint[b-faelorajmz] {
    color: var(--color-accent-text);
}

.connector-setup-body[b-faelorajmz] {
    border-top: var(--hairline) solid var(--color-border);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
}

/* Directory filters: controls take the slack, the result count trails the row. */
.connector-filters[b-faelorajmz] {
    align-items: end;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto;
    margin-bottom: var(--space-4);
}

.connector-filter-count[b-faelorajmz] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Selected connector: state chips lead the record before the fact list. */
.connector-identity-chips[b-faelorajmz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Lifecycle: one consequence, one control, per row — so nothing destructive sits
   next to a save button. */

@media (max-width: 52rem) {
    .connector-filters[b-faelorajmz] {
        grid-template-columns: 1fr;
    }

    .connector-filter-count[b-faelorajmz] {
        margin-bottom: 0;
    }

    .connector-lifecycle-action[b-faelorajmz] {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* Unauthenticated shell: sign-in, access denied, 404, and error pages. */

.account-shell[b-fofcu5fw8o] {
    align-items: center;
    background:
        radial-gradient(circle at 14% 18%, var(--color-accent-glow), transparent 26rem),
        linear-gradient(140deg, var(--color-background), var(--color-background-raised));
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    /* Clip decorative overflow horizontally; keep vertical scroll for tall forms. */
    overflow-x: hidden;
    padding: var(--space-8) var(--space-4);
    position: relative;
}

/* Screen-printed strokes raking across the canvas. Decorative only. */
.account-shell[b-fofcu5fw8o]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M12 46 L96 39 L188 44 L302 36'/%3E%3Cpath d='M-4 132 L74 126 L166 134 L268 124 L320 129'/%3E%3Cpath d='M20 228 L118 221 L214 229 L316 219'/%3E%3Cpath d='M8 292 L102 286 L206 293'/%3E%3C/g%3E%3C/svg%3E");
    content: "";
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    position: absolute;
}

/* Two offset pink rules: the recurring asymmetric brand device. */
.account-shell[b-fofcu5fw8o]::after {
    background: var(--color-accent);
    content: "";
    height: 1px;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    right: -6rem;
    top: 13%;
    transform: rotate(-12deg);
    width: 28rem;
}

.account-layout[b-fofcu5fw8o] {
    margin: 0 auto;
    max-width: 30rem;
    position: relative;
    width: 100%;
    z-index: 1;
}

.account-brand[b-fofcu5fw8o] {
    align-items: center;
    color: var(--color-text);
    display: inline-flex;
    margin-bottom: var(--space-5);
    text-decoration: none;
}

/* The lockup already carries the product name, so it is the whole brand block.
   Transparent PNG, so the shell gradient shows through the artwork. */
.account-brand-logo[b-fofcu5fw8o] {
    display: block;
    height: auto;
    max-width: 15rem;
    object-fit: contain;
    width: 100%;
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   The sign-in card is the first screen an installed app shows, so it is worth
   fitting the form without a scroll. */
@media (max-width: 48rem) {
    .account-shell[b-fofcu5fw8o] {
        padding: var(--space-5) var(--space-3);
    }

    .account-brand[b-fofcu5fw8o] {
        margin-bottom: var(--space-3);
    }

    .account-brand-logo[b-fofcu5fw8o] {
        max-width: 10rem;
    }
}
/* /Components/Layout/AdminSettingsLayout.razor.rz.scp.css */
/* Administration settings shell. Full-width like the project workspace: a compact sticky
   command bar above the content rather than a rail beside the primary nav, which put two
   vertical menus next to each other. Mobile collapses it into one explicit section picker. */

.admin-settings-shell[b-owolam2tpi] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.admin-settings-navigation[b-owolam2tpi] {
    align-items: stretch;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    min-width: 0;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-2));
    z-index: 20;
}

.admin-settings-context[b-owolam2tpi] {
    align-items: center;
    border-right: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 2.25rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}

.admin-settings-context-mark[b-owolam2tpi] {
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-accent);
    color: var(--color-accent-text);
    display: inline-flex;
    font-size: 1rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.admin-settings-context-copy[b-owolam2tpi] {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.admin-settings-context-kicker[b-owolam2tpi],
.admin-settings-mobile-kicker[b-owolam2tpi] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-settings-context-copy strong[b-owolam2tpi],
.admin-settings-mobile-copy strong[b-owolam2tpi] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-settings-context-summary[b-owolam2tpi] {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-settings-desktop-sections[b-owolam2tpi] {
    align-items: center;
    display: flex;
    min-width: 0;
    padding: var(--space-2);
}

.admin-settings-body[b-owolam2tpi] {
    max-width: none;
    min-width: 0;
    width: 100%;
}

.admin-settings-mobile-nav[b-owolam2tpi] {
    display: none;
}

@media (max-width: 72rem) {
    .admin-settings-navigation[b-owolam2tpi] {
        grid-template-columns: 1fr;
    }

    .admin-settings-context[b-owolam2tpi] {
        border-bottom: var(--hairline) solid var(--color-border);
        border-right: 0;
        grid-template-columns: 2rem minmax(0, 1fr);
        padding: var(--space-2) var(--space-3);
    }

    .admin-settings-context-mark[b-owolam2tpi] {
        height: 2rem;
        width: 2rem;
    }

    .admin-settings-context-copy[b-owolam2tpi] {
        align-items: baseline;
        column-gap: var(--space-2);
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-settings-context-kicker[b-owolam2tpi] {
        grid-column: 1 / -1;
    }

    .admin-settings-context-summary[b-owolam2tpi] {
        min-width: 0;
    }
}

@media (max-width: 54rem) {
    .admin-settings-shell[b-owolam2tpi] {
        gap: var(--space-3);
    }

    .admin-settings-navigation[b-owolam2tpi] {
        display: none;
    }

    .admin-settings-mobile-nav[b-owolam2tpi] {
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        display: block;
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-2));
        z-index: 20;
    }

    .admin-settings-mobile-nav > summary[b-owolam2tpi] {
        align-items: center;
        cursor: pointer;
        display: grid;
        gap: var(--space-2);
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        list-style: none;
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
    }

    .admin-settings-mobile-nav > summary[b-owolam2tpi]::-webkit-details-marker {
        display: none;
    }

    .admin-settings-mobile-glyph[b-owolam2tpi] {
        align-items: center;
        color: var(--color-accent-text);
        display: inline-flex;
        font-size: 0.95rem;
        height: 2rem;
        justify-content: center;
        width: 2rem;
    }

    .admin-settings-mobile-copy[b-owolam2tpi] {
        display: grid;
        gap: 0.05rem;
        min-width: 0;
    }

    .admin-settings-mobile-copy > span:last-child[b-owolam2tpi] {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-settings-mobile-chevron[b-owolam2tpi] {
        color: var(--color-text-muted);
        font-size: 1rem;
        transition: transform var(--transition-fast);
    }

    .admin-settings-mobile-nav[open] .admin-settings-mobile-chevron[b-owolam2tpi] {
        transform: rotate(180deg);
    }

    .admin-settings-mobile-panel[b-owolam2tpi] {
        border-top: var(--hairline) solid var(--color-border);
        max-height: min(70vh, 42rem);
        overflow: auto;
        overscroll-behavior: contain;
        padding: var(--space-3);
    }
}

@media (max-width: 36rem) {
    .admin-settings-mobile-copy > span:last-child[b-owolam2tpi] {
        display: none;
    }

    .admin-settings-mobile-nav > summary[b-owolam2tpi] {
        padding-inline: var(--space-2);
    }

    .admin-settings-mobile-panel[b-owolam2tpi] {
        padding: var(--space-2);
    }
}

@media print {
    .admin-settings-navigation[b-owolam2tpi],
    .admin-settings-mobile-nav[b-owolam2tpi] {
        display: none !important;
    }

    .admin-settings-body[b-owolam2tpi] {
        max-width: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Application shell. Consumes tokens from wwwroot/app.css; defines no colour literals. */

/* The document scrolls, not a pane inside it.

   The shell used to be locked to the viewport with the workspace as an inner scroll region.
   Every captured page was therefore exactly viewport height and the browser scrollbar never
   appeared, so nothing on screen said there was more below - which is why pages whose header
   and filters filled the viewport looked empty rather than scrolled. The sidebar stays put by
   being sticky rather than by the shell being frozen. */
.app-shell[b-pq2994vhyx] {
    background: var(--color-background);
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* Faded brand emblem watermark. Decorative, non-interactive, far below text contrast. */
.app-shell[b-pq2994vhyx]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M1 1 H37.5 L47 10.5 V47 H10.5 L1 37.5 Z' fill='none' stroke='%23f20a73' stroke-width='1.5'/%3E%3Cpath d='M15 41 L29 7 H38 L24 41 Z' fill='%23f20a73'/%3E%3C/svg%3E");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -3rem;
    content: "";
    height: 24rem;
    opacity: 0.025;
    pointer-events: none;
    position: fixed;
    right: -3rem;
    width: 24rem;
    z-index: 0;
}

/* ---------------------------------------------------------------- Sidebar */

.sidebar[b-pq2994vhyx] {
    align-self: start;
    background:
        linear-gradient(180deg, var(--color-sidebar), var(--color-background));
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    /* Sticky rather than a child of a frozen shell, so the page behind it can scroll. */
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding:
        max(var(--space-5), env(safe-area-inset-top, 0px))
        var(--space-3)
        max(var(--space-4), env(safe-area-inset-bottom, 0px))
        max(var(--space-3), env(safe-area-inset-left, 0px));
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Hot-pink edge running the full height of the rail. */
.sidebar[b-pq2994vhyx]::after {
    background: linear-gradient(
        180deg,
        var(--color-accent) 0,
        var(--color-accent) 7rem,
        transparent 22rem
    );
    content: "";
    inset: 0 -1px 0 auto;
    opacity: 0.65;
    position: absolute;
    width: 1px;
}

.brand[b-pq2994vhyx] {
    align-items: center;
    color: var(--color-text);
    display: flex;
    margin: 0 var(--space-2) var(--space-6);
    min-height: 3.5rem;
    text-decoration: none;
}

/* The lockup already carries the product name, so it is the whole brand block.
   Transparent PNG, so the rail gradient shows through the artwork. */
.brand-logo[b-pq2994vhyx] {
    display: block;
    height: auto;
    max-width: 13rem;
    object-fit: contain;
    width: 100%;
}

.primary-nav[b-pq2994vhyx] {
    display: grid;
    gap: var(--space-1);
}

[b-pq2994vhyx] .nav-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    display: flex;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-3);
    isolation: isolate;
    letter-spacing: 0.05em;
    min-height: 2.9rem;
    padding: 0 var(--space-3);
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    width: 100%;
    z-index: 0;
}

/* Skewed slab behind the label: the marker-swipe navigation state. */
[b-pq2994vhyx] .nav-link::before {
    background: transparent;
    content: "";
    inset: 0 0.2rem;
    position: absolute;
    transform: skewX(-9deg);
    transition: background var(--transition-fast);
    z-index: -1;
}

[b-pq2994vhyx] a.nav-link:hover {
    color: var(--color-text);
}

[b-pq2994vhyx] a.nav-link:hover::before {
    background: var(--color-surface-hover);
}

[b-pq2994vhyx] .nav-link:focus-visible {
    color: var(--color-text);
    outline: none;
}

[b-pq2994vhyx] .nav-link:focus-visible::before {
    background: var(--color-surface-hover);
    box-shadow: var(--focus-ring);
}

[b-pq2994vhyx] .nav-link.active {
    color: var(--color-ink);
}

[b-pq2994vhyx] .nav-link.active::before {
    background: var(--color-accent);
}

[b-pq2994vhyx] .nav-link.active .nav-icon {
    background: transparent;
    border-color: rgba(5, 6, 7, 0.45);
    color: var(--color-ink);
}

[b-pq2994vhyx] .nav-link .nav-icon,
.sidebar-muted-row .nav-icon[b-pq2994vhyx] {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0 100%, 0 0.25rem);
    color: var(--color-accent-text);
    display: inline-flex;
    flex: none;
    font-size: 0.95rem;
    height: 1.8rem;
    justify-content: center;
    line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    width: 1.8rem;
}

/* Drawn glyphs, not font characters: the box is fixed so every chip aligns on the
   same optical centre regardless of the shape inside it. */
[b-pq2994vhyx] .nav-glyph {
    display: block;
    height: 1.05rem;
    width: 1.05rem;
}

.phone-nav-icon[b-pq2994vhyx]  .nav-glyph {
    height: 1.25rem;
    width: 1.25rem;
}

[b-pq2994vhyx] .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-heading[b-pq2994vhyx],
[b-pq2994vhyx] .sidebar-heading {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-kicker);
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
}

.sidebar-heading[b-pq2994vhyx]::before,
[b-pq2994vhyx] .sidebar-heading::before {
    background: var(--color-accent);
    content: "";
    flex: none;
    height: 0.6rem;
    transform: skewX(-18deg);
    width: 0.24rem;
}

/* ------------------------------------------------ Nav sections and children */

/*
   Each section is a `details`, so a rail this tall can be folded down to the parts
   an operator is actually working in. Hairline separators do the grouping work the
   headings alone were doing before, which is why the heading itself is quiet.
*/
[b-pq2994vhyx] .nav-section {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
}

[b-pq2994vhyx] .nav-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

[b-pq2994vhyx] .nav-group-heading {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: var(--space-3) var(--space-3) var(--space-2);
}

[b-pq2994vhyx] .nav-group-heading::-webkit-details-marker {
    display: none;
}

[b-pq2994vhyx] .nav-group-heading .sidebar-heading {
    margin: 0;
}

[b-pq2994vhyx] .nav-group-heading:hover .sidebar-heading,
[b-pq2994vhyx] .nav-group-heading:focus-visible .sidebar-heading {
    color: var(--color-text);
}

[b-pq2994vhyx] .nav-group-heading:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

[b-pq2994vhyx] .nav-section-items {
    display: grid;
    gap: var(--space-1);
}

/* Chevron: a rotated corner rather than a glyph, so it inherits the stroke weight
   of the rail instead of a font's idea of one. Points down when open. */
[b-pq2994vhyx] .nav-chevron {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--color-text-faint);
    flex: none;
    height: 0.42rem;
    margin-right: 0.15rem;
    transform: rotate(-45deg);
    transition: transform var(--transition-fast);
    width: 0.42rem;
}

[b-pq2994vhyx] details[open] > .nav-group-heading .nav-chevron {
    transform: rotate(45deg) translate(-0.12rem, -0.12rem);
}

.sidebar-muted-row[b-pq2994vhyx] {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-3);
    letter-spacing: 0.05em;
    margin-top: var(--space-2);
    padding: var(--space-2) 0;
    text-transform: uppercase;
}

.sidebar-muted-row .nav-icon[b-pq2994vhyx] {
    color: var(--color-text-faint);
}

.sidebar-status[b-pq2994vhyx] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%);
    margin-top: auto;
    padding: var(--space-2) var(--space-3);
    position: relative;
}

.sidebar-status .sidebar-heading[b-pq2994vhyx] {
    margin-bottom: var(--space-1);
}

.sidebar-status-details[b-pq2994vhyx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.sidebar-status-row[b-pq2994vhyx] {
    align-items: center;
    color: var(--color-text);
    display: flex;
    font-size: 0.72rem;
    gap: var(--space-1);
}

.sidebar-status small[b-pq2994vhyx] {
    color: var(--color-text-faint);
    font-size: 0.62rem;
    line-height: 1;
}

.status-pulse[b-pq2994vhyx] {
    background: var(--color-success);
    box-shadow: 0 0 0.7rem var(--color-success-soft);
    flex: none;
    height: 0.38rem;
    transform: rotate(45deg);
    width: 0.38rem;
}

/* ----------------------------------------------------------------- Topbar */

.workspace[b-pq2994vhyx] {
    /* overflow must stay visible in both axes. Setting overflow-x alone makes the used value of
       overflow-y "auto" per spec, which silently recreated the inner scroll pane this change
       exists to remove. Horizontal containment belongs to the elements that can overflow -
       tables, code blocks, the board - each of which already has its own scroll container. */
    min-height: 0;
    min-width: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.topbar[b-pq2994vhyx] {
    align-items: center;
    background: var(--color-background-elevated);
    display: flex;
    gap: var(--space-5);
    min-height: var(--topbar-height);
    /* max() keeps desktop spacing; notches only add inset when present. */
    padding:
        max(var(--space-3), env(safe-area-inset-top, 0px))
        max(var(--space-5), env(safe-area-inset-right, 0px))
        var(--space-3)
        max(var(--space-5), env(safe-area-inset-left, 0px));
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Offset rule: pink over the first stretch, structural border after it. */
.topbar[b-pq2994vhyx]::after {
    background: linear-gradient(90deg, var(--color-accent) 0 11rem, var(--color-border) 11rem);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.search-control[b-pq2994vhyx] {
    align-items: center;
    background: var(--color-field);
    border: 1px solid var(--color-border-strong);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
    display: flex;
    flex: 1 1 26rem;
    max-width: 38rem;
    min-height: 2.7rem;
    padding: 0 var(--space-3);
    transition: border-color var(--transition-fast);
}

/* :focus-visible on the inner input — not :focus-within — so mouse click does not ring. */
.search-control:has(:focus-visible)[b-pq2994vhyx] {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

.search-control input[b-pq2994vhyx] {
    background: transparent;
    border: 0;
    color: var(--color-text);
    flex: 1;
    font: inherit;
    min-width: 0;
    outline: 0;
    padding: 0 var(--space-3);
}

.search-control input[b-pq2994vhyx]::placeholder {
    color: var(--color-text-faint);
}

/*
 * Scoped CSS adds an attribute selector, so `.search-control input` above outranks the global
 * 16px rule in app.css and would leave this one control at 15px and still zooming on iOS.
 * Same threshold, same reasoning; see the note beside that rule.
 */
@media (max-width: 40rem), (pointer: coarse) {
    .search-control input[b-pq2994vhyx] {
        font-size: 1rem;
    }
}

.search-icon[b-pq2994vhyx] {
    color: var(--color-text-subtle);
    font-size: 1.25rem;
    line-height: 1;
}

/*
 * Phone-only disclosure for `.search-control`. Both halves are inert above 46rem, where the
 * field is always on show: `display: none` keeps the checkbox out of the tab order there
 * rather than leaving a keyboard stop that does nothing.
 */
.search-toggle[b-pq2994vhyx],
.search-toggle-state[b-pq2994vhyx] {
    display: none;
}

/* Matches a tab-bar cell: 2.75rem is a 44px target. */
.search-toggle[b-pq2994vhyx] {
    align-items: center;
    border: 1px solid var(--color-border-strong);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%);
    color: var(--color-text);
    cursor: pointer;
    flex: none;
    font-size: 1.25rem;
    justify-content: center;
    line-height: 1;
    min-height: 2.75rem;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    width: 2.75rem;
}

.search-toggle:hover[b-pq2994vhyx] {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.search-toggle-state:checked + .search-toggle[b-pq2994vhyx] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-ink);
}

/*
 * The clip-path above crops anything drawn outside the border box, including an outline or a
 * spread box-shadow, so the shared inset --focus-ring is used instead.
 */
.search-toggle-state:focus-visible + .search-toggle[b-pq2994vhyx] {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.search-toggle-state:checked:focus-visible + .search-toggle[b-pq2994vhyx] {
    box-shadow: var(--focus-ring);
}

.search-submit[b-pq2994vhyx] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0 100%);
    color: var(--color-text-subtle);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.6rem;
    text-transform: uppercase;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.search-submit:hover[b-pq2994vhyx] {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.search-submit:focus-visible[b-pq2994vhyx] {
    box-shadow: var(--focus-ring);
    outline: none;
}

.topbar-actions[b-pq2994vhyx] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.account-summary[b-pq2994vhyx] {
    align-items: center;
    border-left: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    margin-left: var(--space-2);
    padding-left: var(--space-4);
}

.account-profile-link[b-pq2994vhyx] {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    min-width: 0;
    text-decoration: none;
}

.account-profile-link:hover .account-identity strong[b-pq2994vhyx],
.account-profile-link:focus-visible .account-identity strong[b-pq2994vhyx] {
    color: var(--color-accent-text);
}

.account-profile-link:focus-visible[b-pq2994vhyx] {
    outline: none;
}

/* Avatar is the clipped surface; put the shared inset ring on it. */
.account-profile-link:focus-visible .account-avatar[b-pq2994vhyx] {
    box-shadow: var(--focus-ring);
}

/* Slanted parallelogram tile; the initial itself stays upright and legible. */
.account-avatar[b-pq2994vhyx] {
    align-items: center;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
    clip-path: polygon(0.4rem 0, 100% 0, calc(100% - 0.4rem) 100%, 0 100%);
    color: var(--color-accent-text);
    display: inline-flex;
    flex: none;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-stretch: 75%;
    font-weight: 700;
    height: 2.3rem;
    justify-content: center;
    line-height: 1;
    width: 2.6rem;
}

.account-avatar img[b-pq2994vhyx] {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.account-identity[b-pq2994vhyx] {
    display: grid;
    max-width: 12rem;
}

.account-identity strong[b-pq2994vhyx] {
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.account-identity small[b-pq2994vhyx] {
    color: var(--color-text-faint);
    font-size: 0.65rem;
}

.sign-out-button[b-pq2994vhyx] {
    background: transparent;
    border: 0;
    color: var(--color-text-subtle);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: var(--space-2);
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.sign-out-button:hover[b-pq2994vhyx] {
    color: var(--color-accent-text);
}

.page-container[b-pq2994vhyx] {
    margin: 0 auto;
    max-width: var(--content-max-width);
    padding:
        var(--space-6)
        max(var(--space-5), env(safe-area-inset-right, 0px))
        max(var(--space-8), env(safe-area-inset-bottom, 0px))
        max(var(--space-5), env(safe-area-inset-left, 0px));
    position: relative;
    width: 100%;
    z-index: 1;
}

/* ------------------------------------------------------------ Mobile menu */

.mobile-menu[b-pq2994vhyx] {
    display: none;
    position: relative;
}

.phone-nav[b-pq2994vhyx] {
    display: none;
}

.app-tab-bar[b-pq2994vhyx] {
    display: none;
}

.mobile-menu summary[b-pq2994vhyx]::-webkit-details-marker {
    display: none;
}

.mobile-menu-backdrop[b-pq2994vhyx],
.mobile-menu-panel[b-pq2994vhyx] {
    display: none;
}

@media (max-width: 78rem) {
    .account-identity[b-pq2994vhyx] {
        display: none;
    }
}

/*
 * Sidebar collapses at 62rem. From that width down there is one chrome system:
 * a four-cell thumb row (Dashboard, Projects, Board, More) plus a sheet that
 * More opens. The topbar no longer carries a second hamburger.
 * The 46rem block below only reshapes search — leaving the thresholds separate
 * keeps tablet widths on the tab bar without forcing the phone search disclosure.
 */
@media (max-width: 62rem) {
    /* Keep the shell as a single-column grid so viewport height still applies. */
    .app-shell[b-pq2994vhyx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar[b-pq2994vhyx] {
        display: none;
    }

    .topbar .account-summary form[b-pq2994vhyx] {
        display: none;
    }

    .app-tab-bar[b-pq2994vhyx] {
        background: var(--color-background-elevated);
        border-top: var(--hairline) solid var(--color-border);
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        left: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        position: fixed;
        right: 0;
        z-index: 20;
    }

    .app-tab-bar[b-pq2994vhyx]::before {
        background: linear-gradient(90deg, var(--color-accent) 0 6rem, var(--color-border) 6rem);
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link,
    .app-tab-bar .mobile-menu > summary.nav-link[b-pq2994vhyx] {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: 0.62rem;
        gap: var(--space-1);
        justify-content: center;
        letter-spacing: 0.04em;
        list-style: none;
        min-height: var(--tab-bar-height);
        min-width: 0;
        padding: var(--space-2) var(--space-1) var(--space-2);
        text-align: center;
        width: 100%;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link::before,
    .app-tab-bar .mobile-menu > summary.nav-link[b-pq2994vhyx]::before {
        inset: 0.25rem 0.2rem;
        transform: none;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link .nav-icon,
    .app-tab-bar .mobile-menu > summary .nav-icon[b-pq2994vhyx] {
        height: 1.55rem;
        width: 1.55rem;
        font-size: 0.85rem;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link .nav-text,
    .app-tab-bar .mobile-menu > summary .nav-text[b-pq2994vhyx] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu[b-pq2994vhyx] {
        display: block;
        min-width: 0;
        position: relative;
    }

    /* Tablet keeps the thumb row. The topbar hamburger is phone-only. */
    .mobile-menu.phone-nav[b-pq2994vhyx] {
        display: none;
    }

    .mobile-menu > summary.nav-link[b-pq2994vhyx] {
        appearance: none;
        cursor: pointer;
        position: relative;
        z-index: 40;
    }

    .mobile-menu > summary.nav-link[b-pq2994vhyx]::-webkit-details-marker {
        display: none;
    }

    .mobile-menu[open] > summary.nav-link[b-pq2994vhyx],
    .mobile-menu.is-current > summary.nav-link[b-pq2994vhyx] {
        color: var(--color-ink);
    }

    .mobile-menu[open] > summary.nav-link[b-pq2994vhyx]::before,
    .mobile-menu.is-current > summary.nav-link[b-pq2994vhyx]::before {
        background: var(--color-accent);
    }

    .mobile-menu > summary.nav-link:focus-visible[b-pq2994vhyx] {
        outline: none;
    }

    .mobile-menu > summary.nav-link:focus-visible[b-pq2994vhyx]::before {
        box-shadow: var(--focus-ring);
    }

    .mobile-menu[open] .mobile-menu-backdrop[b-pq2994vhyx] {
        background: var(--overlay-dark);
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 30;
    }

    .mobile-menu[open] .mobile-menu-panel[b-pq2994vhyx] {
        background:
            linear-gradient(180deg, var(--color-sidebar), var(--color-background));
        border-top: 1px solid var(--color-border);
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
        box-shadow: var(--shadow-panel);
        display: grid;
        gap: var(--space-1);
        left: 0;
        max-height: min(32rem, 70dvh);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding:
            var(--space-4)
            max(var(--space-3), env(safe-area-inset-right, 0px))
            var(--space-5)
            max(var(--space-3), env(safe-area-inset-left, 0px));
        position: fixed;
        right: 0;
        top: auto;
        width: auto;
        z-index: 35;
    }

    .mobile-menu-panel > .sidebar-heading[b-pq2994vhyx] {
        margin: 0 0 var(--space-2);
        padding: 0 var(--space-3);
    }

    .mobile-menu-account[b-pq2994vhyx] {
        border-top: 1px solid var(--color-border);
        margin-top: var(--space-4);
        padding: var(--space-4) 0 0;
    }

    .mobile-menu-sign-out[b-pq2994vhyx] {
        margin: 0;
    }

    .mobile-menu-sign-out .nav-link[b-pq2994vhyx] {
        width: 100%;
    }

    .page-container[b-pq2994vhyx] {
        padding-bottom: calc(var(--tab-bar-height) + var(--space-6) + env(safe-area-inset-bottom, 0px));
    }

    /*
     * Reuse the sidebar nav-link treatment inside the sheet so active-route state
     * matches desktop. Scoped ::deep rules above already style .nav-link / .active.
     */
}

@media (max-width: 46rem) {
    /*
     * Search wraps onto a second row when it is open, so the row gap stays tighter than the
     * column gap and the topbar only grows by the height of the field.
     *
     * A `.topbar-actions > .button` rule used to sit in this block alongside the one that hid
     * search. Scoped CSS compiles it to `.topbar-actions > .button[b-pq2994vhyx]`, so it could
     * only ever match a `.button` authored in MainLayout.razor, and the one that did — the
     * "New work item" CTA — was deleted from the topbar in commit 2fae151. It matched nothing,
     * so it is gone rather than reinstated: a future topbar button should not silently
     * disappear on phones.
     */
    .topbar[b-pq2994vhyx] {
        column-gap: var(--space-2);
        flex-wrap: wrap;
        /* Honour the token (redeclared at 46rem / 26.875rem in app.css). min-height:
           auto used to shrink the bar while sticky offsets still assumed 5rem. */
        min-height: var(--topbar-height);
        padding:
            max(var(--space-3), env(safe-area-inset-top, 0px))
            max(var(--space-3), env(safe-area-inset-right, 0px))
            var(--space-3)
            max(var(--space-3), env(safe-area-inset-left, 0px));
        row-gap: var(--space-3);
    }

    .search-toggle[b-pq2994vhyx] {
        display: inline-flex;
    }

    .search-toggle-state[b-pq2994vhyx] {
        display: block;
    }

    /*
     * `display: none` here was the whole of AIWO-30: it left a phone with no global work-item
     * search at all. The field is now disclosed by `.search-toggle` instead, full width on its
     * own row after the bell and account controls, where it cannot overlap them however
     * narrow the viewport is.
     */
    .search-control[b-pq2994vhyx] {
        display: none;
        flex: 1 1 100%;
        max-width: none;
        order: 3;
    }

    .search-toggle-state:checked ~ .search-control[b-pq2994vhyx] {
        display: flex;
    }

    .account-summary[b-pq2994vhyx] {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
    }

    /* AIWO-126: phones drop the persistent bottom bar. Navigation is a topbar menu. */
    .app-tab-bar[b-pq2994vhyx] {
        display: none;
    }

    .mobile-menu.phone-nav[b-pq2994vhyx] {
        display: block;
        flex: none;
        position: relative;
        z-index: 40;
    }

    .phone-nav > summary.phone-nav-toggle[b-pq2994vhyx] {
        align-items: center;
        appearance: none;
        border: 1px solid var(--color-border-strong);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%);
        color: var(--color-text);
        cursor: pointer;
        display: inline-flex;
        flex: none;
        font-size: 1.25rem;
        justify-content: center;
        line-height: 1;
        list-style: none;
        min-height: var(--touch-min);
        width: var(--touch-min);
    }

    .phone-nav > summary.phone-nav-toggle[b-pq2994vhyx]::-webkit-details-marker {
        display: none;
    }

    .phone-nav > summary.phone-nav-toggle:hover[b-pq2994vhyx] {
        border-color: var(--color-accent);
        color: var(--color-accent-text);
    }

    .phone-nav[open] > summary.phone-nav-toggle[b-pq2994vhyx] {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-ink);
    }

    .phone-nav > summary.phone-nav-toggle:focus-visible[b-pq2994vhyx] {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    .phone-nav.mobile-menu[open] .mobile-menu-backdrop[b-pq2994vhyx] {
        background: var(--overlay-dark);
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 90;
    }

    .phone-nav.mobile-menu[open] .mobile-menu-panel[b-pq2994vhyx] {
        background: linear-gradient(180deg, var(--color-sidebar), var(--color-background));
        border-right: 1px solid var(--color-border);
        border-top: none;
        bottom: 0;
        box-shadow: var(--shadow-panel);
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        height: 100dvh;
        left: 0;
        max-height: none;
        max-width: 22rem;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding:
            max(var(--space-4), env(safe-area-inset-top, 0px))
            var(--space-4)
            max(var(--space-5), env(safe-area-inset-bottom, 0px))
            max(var(--space-4), env(safe-area-inset-left, 0px));
        position: fixed;
        right: auto;
        top: 0;
        width: 85vw;
        z-index: 100;
        animation: phoneDrawerSlideIn-b-pq2994vhyx 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes phoneDrawerSlideIn-b-pq2994vhyx {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .phone-drawer-header[b-pq2994vhyx] {
        align-items: center;
        border-bottom: 1px solid var(--color-border);
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .phone-drawer-brand[b-pq2994vhyx] {
        display: block;
        line-height: 0;
        max-width: 10rem;
    }

    .phone-drawer-brand .brand-logo[b-pq2994vhyx] {
        height: auto;
        max-height: 2.25rem;
        object-fit: contain;
        width: 100%;
    }

    .phone-drawer-close[b-pq2994vhyx] {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 1px solid var(--color-border-strong);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%);
        color: var(--color-text);
        cursor: pointer;
        display: inline-flex;
        font-size: 1rem;
        justify-content: center;
        line-height: 1;
        min-height: var(--touch-min);
        padding: 0;
        width: var(--touch-min);
    }

    .phone-drawer-close:hover[b-pq2994vhyx] {
        border-color: var(--color-accent);
        color: var(--color-accent-text);
    }

    .phone-drawer-close:focus-visible[b-pq2994vhyx] {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    .page-container[b-pq2994vhyx] {
        padding:
            var(--space-5)
            max(var(--space-3), env(safe-area-inset-right, 0px))
            calc(var(--tab-bar-height) + var(--space-6) + env(safe-area-inset-bottom, 0px))
            max(var(--space-3), env(safe-area-inset-left, 0px));
    }
}

/* Phone tier: ≤ 26.875rem (430 CSS px). Retunes the shell for actual phone
   widths under the 46rem / 40rem tablet-ish rules. Touch floors use --touch-min
   from app.css (2.75rem = 44 CSS px). */
@media (max-width: 26.875rem) {
    .topbar[b-pq2994vhyx] {
        column-gap: var(--space-2);
        padding:
            max(var(--space-2), env(safe-area-inset-top, 0px))
            max(var(--space-2), env(safe-area-inset-right, 0px))
            var(--space-2)
            max(var(--space-2), env(safe-area-inset-left, 0px));
        row-gap: var(--space-2);
    }

    .topbar-actions[b-pq2994vhyx] {
        gap: var(--touch-gap);
    }

    .mobile-menu-panel[b-pq2994vhyx]  .nav-link,
    .mobile-menu-sign-out .nav-link[b-pq2994vhyx] {
        box-sizing: border-box;
        min-height: var(--touch-min);
        padding: var(--space-3) var(--space-4);
        touch-action: manipulation;
    }

    .search-toggle[b-pq2994vhyx] {
        min-height: var(--touch-min);
        width: var(--touch-min);
    }

    .search-submit[b-pq2994vhyx] {
        box-sizing: border-box;
        min-height: var(--touch-min);
        padding: 0 var(--space-3);
    }

    .account-summary[b-pq2994vhyx] {
        gap: var(--touch-gap);
    }

    .account-profile-link[b-pq2994vhyx] {
        box-sizing: border-box;
        min-height: var(--touch-min);
        min-width: var(--touch-min);
    }

    /* Avatar stays a compact visual; the link around it carries the 44px floor. */
    .account-avatar[b-pq2994vhyx] {
        height: 2.3rem;
        width: 2.6rem;
    }

    .sign-out-button[b-pq2994vhyx] {
        box-sizing: border-box;
        min-height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 0 var(--space-3);
        touch-action: manipulation;
    }

    .page-container[b-pq2994vhyx] {
        padding:
            var(--space-4)
            max(var(--space-2), env(safe-area-inset-right, 0px))
            calc(var(--tab-bar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px))
            max(var(--space-2), env(safe-area-inset-left, 0px));
    }
}

/* --------------------------------------------------------------------------
   Mobile density tier: ≤ 48rem

   Pairs with the block of the same name in app.css, which is where the tokens
   this reads from are retuned. Last in the file so it wins the equal-specificity
   ties against the 62 / 46 / 26.875rem blocks above.

   The two shell metrics are the ones that have to add up: --topbar-height and
   --tab-bar-height are consumed as sticky offsets and as the workspace's bottom
   padding, so if the bar's real height drifts from its token the page either
   scrolls under the chrome or leaves a gap below it.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    /* The token includes this padding and the same shared touch-height controls. */
    .topbar[b-pq2994vhyx] {
        column-gap: var(--space-2);
        gap: var(--space-2);
        padding:
            max(var(--space-2), env(safe-area-inset-top, 0px))
            max(var(--space-2), env(safe-area-inset-right, 0px))
            var(--space-2)
            max(var(--space-2), env(safe-area-inset-left, 0px));
        row-gap: var(--space-2);
    }

    .topbar-actions[b-pq2994vhyx] {
        gap: var(--space-2);
    }

    .search-control[b-pq2994vhyx] {
        min-height: var(--touch-min);
        padding: 0 var(--space-2);
    }

    .search-control input[b-pq2994vhyx] {
        padding: 0 var(--space-2);
    }

    .search-icon[b-pq2994vhyx] {
        font-size: 0.9rem;
    }

    .search-toggle[b-pq2994vhyx] {
        font-size: 0.95rem;
        min-height: var(--touch-min);
        width: var(--touch-min);
    }

    .phone-nav > summary.phone-nav-toggle[b-pq2994vhyx] {
        font-size: 0.95rem;
        min-height: var(--touch-min);
        width: var(--touch-min);
    }

    .search-submit[b-pq2994vhyx] {
        font-size: var(--text-2xs);
        min-height: var(--touch-min);
        padding: 0 var(--space-2);
    }

    .account-summary[b-pq2994vhyx] {
        gap: var(--space-2);
    }

    /* The link keeps the hit floor; the tile inside it is what shrinks. */
    .account-profile-link[b-pq2994vhyx] {
        min-height: var(--touch-min);
        min-width: var(--touch-min);
    }

    .account-avatar[b-pq2994vhyx] {
        font-size: 0.7rem;
        height: 1.75rem;
        width: 2rem;
    }

    .account-identity strong[b-pq2994vhyx] {
        font-size: var(--text-xs);
    }

    .account-identity small[b-pq2994vhyx] {
        font-size: var(--text-2xs);
    }

    .sign-out-button[b-pq2994vhyx] {
        font-size: var(--text-2xs);
        min-height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 0 var(--space-2);
    }

    /* ---- Bottom navigation ---- */

    /*
     * line-height: 1 is load-bearing, not cosmetic. The More cell is a <details>,
     * and Chrome lays out an inherited line box inside it that the icon/label flex
     * items do not account for; the cell then measures ~2.8px past its min-height
     * and, because the bar is a grid, drags all four cells and the bar itself with
     * it. That silently decouples the bar's real height from --tab-bar-height,
     * which is what the workspace pads against and what the More sheet anchors to.
     * Pinning the line height collapses that box, so the token stays truthful.
     * .nav-text is nowrap + ellipsis, so no label can wrap into it.
     */
    .app-tab-bar[b-pq2994vhyx] >  .nav-link,
    .app-tab-bar .mobile-menu > summary.nav-link[b-pq2994vhyx] {
        font-size: var(--text-2xs);
        gap: 0.125rem;
        letter-spacing: 0.03em;
        line-height: 1;
        min-height: var(--tab-bar-height);
        padding: var(--space-1) 0.125rem;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link .nav-icon,
    .app-tab-bar .mobile-menu > summary .nav-icon[b-pq2994vhyx] {
        font-size: 0.7rem;
        height: 1.3rem;
        width: 1.3rem;
    }

    .app-tab-bar[b-pq2994vhyx] >  .nav-link::before,
    .app-tab-bar .mobile-menu > summary.nav-link[b-pq2994vhyx]::before {
        inset: 0.15rem 0.15rem;
    }

    /* ---- More sheet ---- */

    .mobile-menu[open] .mobile-menu-panel[b-pq2994vhyx] {
        gap: 0;
        max-height: min(26rem, 70dvh);
        padding:
            var(--space-3)
            max(var(--space-2), env(safe-area-inset-right, 0px))
            var(--space-3)
            max(var(--space-2), env(safe-area-inset-left, 0px));
    }

    .mobile-menu-panel[b-pq2994vhyx]  .nav-link,
    .mobile-menu-sign-out .nav-link[b-pq2994vhyx] {
        font-size: var(--text-sm);
        gap: var(--space-2);
        min-height: var(--touch-min);
        padding: var(--space-1) var(--space-2);
    }

    .mobile-menu-panel[b-pq2994vhyx]  .nav-link .nav-icon,
    .mobile-menu-sign-out .nav-link .nav-icon[b-pq2994vhyx] {
        height: 1.4rem;
        width: 1.4rem;
        font-size: 0.75rem;
    }

    .mobile-menu-panel > .sidebar-heading[b-pq2994vhyx] {
        font-size: var(--text-2xs);
        margin-bottom: var(--space-1);
        padding: 0 var(--space-2);
    }

    .mobile-menu-account[b-pq2994vhyx] {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }

    /* ---- Workspace ---- */

    /* The bottom pad is the tab bar plus one gap plus the home-indicator inset, so
       the last control on a page is never sitting under the nav. */
    .page-container[b-pq2994vhyx] {
        padding:
            var(--space-4)
            max(var(--space-3), env(safe-area-inset-right, 0px))
            calc(var(--tab-bar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px))
            max(var(--space-3), env(safe-area-inset-left, 0px));
    }
}

@media (display-mode: standalone) {
    .topbar[b-pq2994vhyx] {
        padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
    }

    .app-tab-bar[b-pq2994vhyx] {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

.safety-banner[b-pq2994vhyx] {
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
}

.safety-banner.is-workspace[b-pq2994vhyx] {
    background: color-mix(in srgb, var(--color-danger, #f20a73) 12%, var(--color-field));
}

.safety-banner.is-project[b-pq2994vhyx] {
    background: color-mix(in srgb, var(--color-warning, #f5a623) 12%, var(--color-field));
}

/* AIWO-325 desktop accordion and compact icon rail */
.app-shell[b-pq2994vhyx] {
    transition: grid-template-columns 150ms ease;
}

.app-shell.sidebar-compact[b-pq2994vhyx] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
}

.sidebar-header[b-pq2994vhyx] {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    min-width: 0;
}

.sidebar-header .brand[b-pq2994vhyx] {
    flex: 1 1 auto;
    margin: 0 var(--space-2) 0;
    min-height: 3rem;
    min-width: 0;
}

.sidebar-mode-toggle[b-pq2994vhyx] {
    align-items: center;
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-subtle);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    width: 2.5rem;
}

.sidebar-mode-toggle:hover[b-pq2994vhyx] {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.sidebar-mode-toggle:focus-visible[b-pq2994vhyx] {
    box-shadow: var(--focus-ring);
    outline: none;
}

.sidebar-toggle-glyph[b-pq2994vhyx] {
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    display: block;
    height: 0.5rem;
    transform: rotate(45deg);
    transition: transform 150ms ease;
    width: 0.5rem;
}

.sidebar.is-compact[b-pq2994vhyx] {
    overflow: visible;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.sidebar.is-compact .sidebar-header[b-pq2994vhyx] {
    justify-content: center;
    margin-bottom: var(--space-3);
}

.sidebar.is-compact .brand[b-pq2994vhyx],
.sidebar.is-compact .sidebar-status[b-pq2994vhyx] {
    display: none;
}

.sidebar.is-compact .sidebar-mode-toggle[b-pq2994vhyx] {
    margin: 0 auto;
}

.sidebar.is-compact .sidebar-toggle-glyph[b-pq2994vhyx] {
    transform: rotate(225deg);
}

.sidebar.is-compact .primary-nav[b-pq2994vhyx] {
    gap: var(--space-1);
}

[b-pq2994vhyx] .nav-accordion-section > .nav-group-heading {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
    width: 100%;
}

[b-pq2994vhyx] .nav-accordion-section > .nav-group-heading:hover {
    background: var(--color-surface-hover);
}

[b-pq2994vhyx] .nav-accordion-section.is-active-section > .nav-group-heading .sidebar-heading {
    color: var(--color-accent-text);
}

[b-pq2994vhyx] .nav-accordion-section[open] > .nav-group-heading .nav-chevron {
    transform: rotate(45deg) translate(-0.12rem, -0.12rem);
}

[b-pq2994vhyx] .nav-accordion-items {
    animation: navAccordionReveal-b-pq2994vhyx 140ms ease-out;
    margin: 0 var(--space-1) var(--space-2) 1.55rem;
    padding-left: var(--space-3);
    position: relative;
}

[b-pq2994vhyx] .nav-accordion-items::before {
    background: var(--color-border-strong);
    bottom: 0.55rem;
    content: "";
    left: 0;
    position: absolute;
    top: 0.55rem;
    width: 1px;
}

[b-pq2994vhyx] .nav-accordion-items .nav-link {
    min-height: 2.55rem;
    padding-left: var(--space-2);
}

[b-pq2994vhyx] .nav-accordion-items .nav-link::after {
    border-top: 1px solid var(--color-border-strong);
    content: "";
    left: calc(-1 * var(--space-3));
    position: absolute;
    top: 50%;
    width: var(--space-3);
}

[b-pq2994vhyx] .nav-accordion-items .nav-link.active::after {
    border-color: var(--color-accent);
}

[b-pq2994vhyx] .compact-nav-section {
    overflow: visible;
    padding: var(--space-1) 0;
    position: relative;
}

[b-pq2994vhyx] .compact-section-toggle {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    isolation: isolate;
    justify-content: center;
    min-height: 3rem;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 0;
}

[b-pq2994vhyx] .compact-section-toggle::before {
    background: transparent;
    content: "";
    inset: 0.2rem;
    position: absolute;
    transform: skewX(-9deg);
    transition: background var(--transition-fast);
    z-index: -1;
}

[b-pq2994vhyx] .compact-section-toggle:hover,
[b-pq2994vhyx] .compact-section-toggle:focus-visible {
    color: var(--color-text);
}

[b-pq2994vhyx] .compact-section-toggle:hover::before {
    background: var(--color-surface-hover);
}

[b-pq2994vhyx] .compact-section-toggle:focus-visible {
    outline: none;
}

[b-pq2994vhyx] .compact-section-toggle::-webkit-details-marker {
    display: none;
}

[b-pq2994vhyx] .compact-section-toggle::marker {
    content: "";
}

[b-pq2994vhyx] .compact-section-toggle:focus-visible::before {
    background: var(--color-surface-hover);
    box-shadow: var(--focus-ring);
}

[b-pq2994vhyx] .compact-section-toggle .nav-icon {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-accent-text);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

[b-pq2994vhyx] .compact-nav-section.is-active-section > .compact-section-toggle::after {
    background: var(--color-accent);
    bottom: 0.6rem;
    content: "";
    left: calc(-1 * var(--space-2));
    position: absolute;
    top: 0.6rem;
    width: 0.18rem;
}

[b-pq2994vhyx] .compact-nav-section.is-active-section > .compact-section-toggle .nav-icon,
[b-pq2994vhyx] .compact-nav-section[open] > .compact-section-toggle .nav-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-ink);
}

[b-pq2994vhyx] .compact-nav-flyout {
    animation: navFlyoutReveal-b-pq2994vhyx 120ms ease-out;
    background: linear-gradient(180deg, var(--color-sidebar), var(--color-background-elevated));
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-panel);
    left: calc(100% + var(--space-3));
    min-width: 15rem;
    padding: var(--space-3);
    position: absolute;
    top: 0;
    z-index: 80;
}

[b-pq2994vhyx] .compact-nav-flyout-title {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-2) var(--space-2);
    text-transform: uppercase;
}

[b-pq2994vhyx] .compact-nav-flyout-items {
    display: grid;
    gap: var(--space-1);
}

[b-pq2994vhyx] .compact-nav-flyout .nav-link {
    min-height: 2.6rem;
    padding: 0 var(--space-2);
}

@keyframes navAccordionReveal-b-pq2994vhyx {
    from {
        opacity: 0;
        transform: translateY(-0.2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes navFlyoutReveal-b-pq2994vhyx {
    from {
        opacity: 0;
        transform: translateX(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 62rem) {
    .app-shell.sidebar-compact[b-pq2994vhyx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell[b-pq2994vhyx],
    .sidebar-toggle-glyph[b-pq2994vhyx],
    [b-pq2994vhyx] .nav-accordion-items,
    [b-pq2994vhyx] .compact-nav-flyout {
        animation: none;
        transition: none;
    }
}
.agent-account-summary[b-pq2994vhyx] {
    border: 1px solid var(--color-accent);
    padding: var(--space-1) var(--space-2);
}

.agent-session-mark[b-pq2994vhyx] {
    align-items: center;
    background: var(--color-accent);
    color: var(--color-ink);
    display: inline-flex;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    letter-spacing: 0.08em;
    width: 2rem;
}

.agent-mobile-identity[b-pq2994vhyx] {
    border-left: 0.2rem solid var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding: var(--space-2);
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Anonymous marketing shell: landing, features, how it works, docs, about.
   Colours, spacing, and type all come from the tokens in wwwroot/app.css so the
   public site reads as the same product as the signed-in application. */

.public-shell[b-318g5ewhnm] {
    background: radial-gradient(circle at 82% -6%, var(--color-accent-glow), transparent 32rem), linear-gradient(160deg, var(--color-background), var(--color-background-raised));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

    /* The same screen-printed rake used by the sign-in shell. Decorative only. */
    .public-shell[b-318g5ewhnm]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M12 46 L96 39 L188 44 L302 36'/%3E%3Cpath d='M-4 132 L74 126 L166 134 L268 124 L320 129'/%3E%3Cpath d='M20 228 L118 221 L214 229 L316 219'/%3E%3Cpath d='M8 292 L102 286 L206 293'/%3E%3C/g%3E%3C/svg%3E");
        content: "";
        inset: 0;
        opacity: 0.04;
        pointer-events: none;
        position: absolute;
    }

/* ---- Header ---- */

.public-header[b-318g5ewhnm] {
    backdrop-filter: blur(10px);
    background: rgba(5, 6, 7, 0.72);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.public-header-inner[b-318g5ewhnm] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: 0 auto;
    max-width: 76rem;
    padding: max(var(--space-3), env(safe-area-inset-top, 0px)) max(var(--space-5), env(safe-area-inset-right, 0px)) var(--space-3) max(var(--space-5), env(safe-area-inset-left, 0px));
    width: 100%;
}

.public-brand[b-318g5ewhnm] {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    text-decoration: none;
}

.public-brand-logo[b-318g5ewhnm] {
    display: block;
    height: auto;
    max-width: 12rem;
    object-fit: contain;
    width: 100%;
}

.public-nav[b-318g5ewhnm] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.public-nav-link[b-318g5ewhnm] {
    border-bottom: 1px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    padding: var(--space-1) 0;
    text-decoration: none;
    white-space: nowrap;
}

    .public-nav-link:hover[b-318g5ewhnm],
    .public-nav-link:focus-visible[b-318g5ewhnm] {
        border-bottom-color: var(--color-accent);
        color: var(--color-text);
    }

.public-header-actions[b-318g5ewhnm] {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
    margin-left: auto;
}

.public-cta[b-318g5ewhnm] {
    white-space: nowrap;
}

/* ---- Body ---- */

.public-main[b-318g5ewhnm] {
    flex: 1 1 auto;
    margin: 0 auto;
    max-width: 76rem;
    padding: var(--space-8) var(--space-5) var(--space-8);
    position: relative;
    width: 100%;
    z-index: 1;
}

/* ---- Footer ---- */

.public-footer[b-318g5ewhnm] {
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
}

.public-footer-inner[b-318g5ewhnm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: space-between;
    margin: 0 auto;
    max-width: 76rem;
    padding: var(--space-6) var(--space-5);
    width: 100%;
}

.public-footer-name[b-318g5ewhnm] {
    color: var(--color-text);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-1);
}

.public-footer-line[b-318g5ewhnm] {
    color: var(--color-text-faint);
    font-size: var(--text-sm);
    margin: 0;
    max-width: 34rem;
}

.public-footer-nav[b-318g5ewhnm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.public-footer-link[b-318g5ewhnm] {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    text-decoration: none;
}

    .public-footer-link:hover[b-318g5ewhnm],
    .public-footer-link:focus-visible[b-318g5ewhnm] {
        color: var(--color-accent-text);
        text-decoration: underline;
    }

/* ---- Phone / small tablet ---- */

@media (max-width: 48rem) {
    .public-header-inner[b-318g5ewhnm] {
        gap: var(--space-2) var(--space-3);
        padding: max(var(--space-2), env(safe-area-inset-top, 0px)) max(var(--space-3), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-3), env(safe-area-inset-left, 0px));
    }

    .public-brand-logo[b-318g5ewhnm] {
        max-width: 8.5rem;
    }

    .public-cta[b-318g5ewhnm] {
        min-height: var(--touch-min);
        touch-action: manipulation;
    }

    /* Order matters more than width here: the brand and the sign-in CTA share the first
       row, and the link list drops to a full-width second row rather than truncating. */
    .public-nav[b-318g5ewhnm] {
        flex: 1 0 100%;
        gap: var(--space-2) var(--space-3);
        order: 3;
        overflow-x: auto;
    }

    .public-main[b-318g5ewhnm] {
        padding: var(--space-6) var(--space-3);
    }

    .public-footer-inner[b-318g5ewhnm] {
        padding: var(--space-5) var(--space-3);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2gczip1u5a],
.components-reconnect-repeated-attempt-visible[b-2gczip1u5a],
.components-reconnect-failed-visible[b-2gczip1u5a],
.components-pause-visible[b-2gczip1u5a],
.components-resume-failed-visible[b-2gczip1u5a],
.components-rejoining-animation[b-2gczip1u5a] {
    display: none;
}

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

#components-reconnect-modal[b-2gczip1u5a] {
    background: linear-gradient(150deg, var(--color-surface-raised), var(--color-surface));
    border: 1px solid var(--color-border-strong);
    border-top: 2px solid var(--color-accent);
    box-shadow: var(--shadow-panel);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%);
    color: var(--color-text);
    margin:
        max(1rem, env(safe-area-inset-top, 0px))
        auto
        max(1rem, env(safe-area-inset-bottom, 0px));
    opacity: 0;
    padding: var(--space-7);
    transition: display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;
    width: min(24rem, calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

#components-reconnect-modal[open][b-2gczip1u5a] {
    animation: reconnect-enter-b-2gczip1u5a 220ms ease-out both;
}

#components-reconnect-modal[b-2gczip1u5a]::backdrop {
    background: var(--overlay-dark);
    backdrop-filter: blur(2px);
}

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

#components-reconnect-modal p[b-2gczip1u5a] {
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2gczip1u5a] {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%);
    color: var(--color-ink);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.06em;
    min-height: 2.6rem;
    padding: 0 var(--space-5);
    text-transform: uppercase;
}

#components-reconnect-modal button:hover[b-2gczip1u5a] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-accent);
}

/*
 * Bare <button> (not .button): clip-path above removes the global outer outline.
 * Same shared inset --focus-ring as die-cut controls in app.css / MainLayout.
 */
#components-reconnect-modal button:focus-visible[b-2gczip1u5a] {
    box-shadow: var(--focus-ring);
    outline: none;
}

#components-reconnect-modal button:hover:focus-visible[b-2gczip1u5a] {
    box-shadow: var(--focus-ring);
}

.components-rejoining-animation[b-2gczip1u5a] {
    height: 4rem;
    position: relative;
    width: 4rem;
}

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

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

@keyframes reconnect-enter-b-2gczip1u5a {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes reconnect-pulse-b-2gczip1u5a {
    0% {
        height: 0;
        left: 2rem;
        opacity: 0;
        top: 2rem;
        width: 0;
    }

    8% {
        opacity: 1;
    }

    100% {
        height: 4rem;
        left: 0;
        opacity: 0;
        top: 0;
        width: 4rem;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    #components-reconnect-modal[b-2gczip1u5a] {
        padding: var(--space-5);
    }

    .components-reconnect-container[b-2gczip1u5a] {
        gap: var(--space-3);
    }

    #components-reconnect-modal p[b-2gczip1u5a] {
        font-size: 0.6875rem;
    }

    #components-reconnect-modal button[b-2gczip1u5a] {
        font-size: 0.625rem;
        min-height: 2rem;
        padding: 0 var(--space-4);
    }

    .components-rejoining-animation[b-2gczip1u5a] {
        height: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open][b-2gczip1u5a],
    .components-rejoining-animation div[b-2gczip1u5a] {
        animation-duration: 0.01ms;
    }
}
/* /Components/Machines/MachineConfigurationPanel.razor.rz.scp.css */
.machine-config-status[b-qdcx5wekk0] {
    align-items: center;
    display: flex;
    margin: 0 0 0.8rem;
}

.machine-config-lede[b-qdcx5wekk0] {
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 0.7rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.86rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
}

.machine-config-hint[b-qdcx5wekk0],
.machine-config-empty[b-qdcx5wekk0],
.machine-config-sync-detail[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.machine-config-sync-detail[b-qdcx5wekk0] {
    background: rgba(56, 189, 248, 0.05);
    border-left: 3px solid #38bdf8;
    border-radius: 0 0.45rem 0.45rem 0;
    padding: 0.65rem 0.75rem;
}

.machine-config-columns[b-qdcx5wekk0] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
}

.machine-config-section[b-qdcx5wekk0] {
    background: rgba(2, 6, 23, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.75rem;
    min-width: 0;
    padding: 0.9rem;
}

.machine-config-section h3[b-qdcx5wekk0],
.machine-config-heading[b-qdcx5wekk0] {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.3rem;
}

.machine-config-heading[b-qdcx5wekk0] {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    margin-top: 1.25rem;
    padding-top: 1.15rem;
}

.machine-config-roots[b-qdcx5wekk0] {
    display: grid;
    gap: 0.42rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.machine-config-roots li[b-qdcx5wekk0] {
    align-items: center;
    background: rgba(148, 163, 184, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0.55rem;
    display: grid;
    gap: 0.3rem 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.58rem 0.65rem;
}

.machine-config-roots code[b-qdcx5wekk0] {
    font-size: 0.76rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.machine-config-root-state[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.7rem;
    grid-column: 1;
    line-height: 1.4;
    white-space: normal;
}

.machine-config-roots .action-link[b-qdcx5wekk0] {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

.machine-config-add[b-qdcx5wekk0] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.machine-config-add .field-control[b-qdcx5wekk0] {
    min-width: 0;
    width: 100%;
}

.machine-config-add .button[b-qdcx5wekk0] {
    white-space: nowrap;
}

.machine-config-add-alias[b-qdcx5wekk0] {
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr) auto;
}

.machine-config-network[b-qdcx5wekk0] {
    margin: 0 0 1rem;
}

.machine-config-add-network[b-qdcx5wekk0] {
    align-items: center;
    grid-template-columns: minmax(12rem, 1.35fr) minmax(7rem, 0.45fr) minmax(8rem, 0.55fr) auto;
}

.machine-config-add-network .checkbox-row[b-qdcx5wekk0] {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0.5rem;
    min-height: 2.4rem;
    padding: 0.48rem 0.58rem;
}

.machine-config-capability-group[b-qdcx5wekk0] {
    margin-bottom: 1rem;
}

.machine-config-capability-group h4[b-qdcx5wekk0] {
    color: #c4b5fd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.machine-config-capabilities[b-qdcx5wekk0] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.machine-config-capabilities li[b-qdcx5wekk0] {
    background: rgba(2, 6, 23, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.7rem;
    min-width: 0;
    padding: 0.72rem;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.machine-config-capabilities li:hover[b-qdcx5wekk0] {
    background: rgba(139, 92, 246, 0.045);
    border-color: rgba(139, 92, 246, 0.22);
    transform: translateY(-1px);
}

.machine-config-capabilities .checkbox-row[b-qdcx5wekk0] {
    align-items: flex-start;
    display: flex;
    gap: 0.55rem;
}

.machine-config-capabilities .checkbox-row input[b-qdcx5wekk0] {
    flex: 0 0 auto;
    margin-top: 0.18rem;
}

.machine-config-capability-label[b-qdcx5wekk0] {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.machine-config-capability-label strong[b-qdcx5wekk0] {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.82rem;
    line-height: 1.35;
}

.machine-config-capability-label code[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}

.machine-config-capability-meta[b-qdcx5wekk0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0 0.4rem 1.55rem;
}

.machine-config-capability-description[b-qdcx5wekk0],
.machine-config-capability-detail[b-qdcx5wekk0] {
    font-size: 0.74rem;
    line-height: 1.45;
    margin: 0 0 0 1.55rem;
}

.machine-config-capability-description[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
}

.machine-config-capability-detail[b-qdcx5wekk0] {
    background: rgba(245, 158, 11, 0.06);
    border-left: 2px solid rgba(245, 158, 11, 0.55);
    color: #fbbf24;
    margin-top: 0.42rem;
    padding: 0.35rem 0.45rem;
}

.checkbox-row.is-locked[b-qdcx5wekk0] {
    opacity: 0.68;
}

.machine-config-advertised[b-qdcx5wekk0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.machine-config-advertised li code[b-qdcx5wekk0] {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.14);
    border-radius: 0.45rem;
    display: inline-block;
    font-size: 0.72rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.28rem 0.45rem;
}

.machine-config-actions[b-qdcx5wekk0] {
    align-items: center;
    backdrop-filter: blur(12px);
    background: rgba(8, 12, 22, 0.9);
    border: 1px solid rgba(236, 72, 153, 0.18);
    border-radius: 0.75rem;
    bottom: 0.7rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    display: flex;
    gap: 0.55rem;
    margin-top: 1.25rem;
    padding: 0.65rem;
    position: sticky;
    z-index: 4;
}

.machine-config-actions .button-primary[b-qdcx5wekk0] {
    min-width: 8rem;
}

.machine-config-upgrade[b-qdcx5wekk0] {
    margin-bottom: 1rem;
}

.machine-config-upgrade p[b-qdcx5wekk0] {
    margin: 0 0 0.6rem;
}

.machine-config-upgrade a.button[b-qdcx5wekk0] {
    margin-top: 0.25rem;
}

@media (max-width: 1250px) {
    .machine-config-capabilities[b-qdcx5wekk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .machine-config-add-network[b-qdcx5wekk0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .machine-config-add-network .button[b-qdcx5wekk0] {
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .machine-config-columns[b-qdcx5wekk0],
    .machine-config-capabilities[b-qdcx5wekk0] {
        grid-template-columns: 1fr;
    }

    .machine-config-add-network[b-qdcx5wekk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .machine-config-section[b-qdcx5wekk0] {
        padding: 0.75rem;
    }

    .machine-config-add[b-qdcx5wekk0],
    .machine-config-add-alias[b-qdcx5wekk0],
    .machine-config-add-network[b-qdcx5wekk0] {
        grid-template-columns: 1fr;
    }

    .machine-config-add .button[b-qdcx5wekk0],
    .machine-config-add-network .button[b-qdcx5wekk0] {
        justify-self: stretch;
        width: 100%;
    }

    .machine-config-roots li[b-qdcx5wekk0] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .machine-config-actions[b-qdcx5wekk0] {
        bottom: 0.4rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .machine-config-actions .button[b-qdcx5wekk0] {
        justify-content: center;
        width: 100%;
    }
}

/* Task-oriented machine console additions */
.machine-config-toolbar[b-qdcx5wekk0],
.machine-config-verification-toolbar[b-qdcx5wekk0] {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.machine-config-toolbar > span[b-qdcx5wekk0],
.machine-config-verification-toolbar span[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.74rem;
}

.machine-config-verification-toolbar > div[b-qdcx5wekk0] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.machine-config-capability-intro .machine-config-heading[b-qdcx5wekk0] {
    border-top: 0;
    margin-top: 0.2rem;
    padding-top: 0;
}

.machine-config-select-all[b-qdcx5wekk0] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.2rem 0 0.75rem;
}

.machine-config-select-all small[b-qdcx5wekk0] {
    color: var(--color-text-muted);
}

.machine-config-capability-group[b-qdcx5wekk0] {
    background: rgba(2, 6, 23, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.72rem;
    margin-bottom: 0.65rem;
    overflow: hidden;
}

.machine-config-capability-group > summary[b-qdcx5wekk0] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    list-style: none;
    padding: 0.8rem 0.9rem;
    user-select: none;
}

.machine-config-capability-group > summary[b-qdcx5wekk0]::-webkit-details-marker {
    display: none;
}

.machine-config-capability-group > summary span[b-qdcx5wekk0] {
    color: #c4b5fd;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.machine-config-capability-group > summary small[b-qdcx5wekk0] {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 999px;
    color: #c4b5fd;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.28rem 0.5rem;
}

.machine-config-capability-group[open] > summary[b-qdcx5wekk0] {
    background: rgba(139, 92, 246, 0.045);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.machine-config-capability-group .machine-config-capabilities[b-qdcx5wekk0] {
    padding: 0.8rem;
}

.machine-config-diagnostics[b-qdcx5wekk0] {
    background: rgba(2, 6, 23, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.7rem;
    margin: 0.2rem 0 1rem;
    overflow: hidden;
}

.machine-config-diagnostics > summary[b-qdcx5wekk0] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    list-style: none;
    padding: 0.78rem 0.85rem;
    user-select: none;
}

.machine-config-diagnostics > summary[b-qdcx5wekk0]::-webkit-details-marker {
    display: none;
}

.machine-config-diagnostics > summary > span:first-child[b-qdcx5wekk0] {
    display: grid;
    gap: 0.1rem;
}

.machine-config-diagnostics > summary strong[b-qdcx5wekk0] {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.8rem;
}

.machine-config-diagnostics > summary small[b-qdcx5wekk0] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.7rem;
}

.machine-config-diagnostics-cue[b-qdcx5wekk0] {
    color: #c4b5fd;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.machine-config-diagnostics-body[b-qdcx5wekk0] {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0.8rem;
}

.machine-config-verification-heading[b-qdcx5wekk0] {
    margin-top: 1rem;
}

@media (max-width: 650px) {
    .machine-config-toolbar[b-qdcx5wekk0],
    .machine-config-verification-toolbar[b-qdcx5wekk0],
    .machine-config-diagnostics > summary[b-qdcx5wekk0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .machine-config-verification-toolbar .button[b-qdcx5wekk0] {
        justify-content: center;
        width: 100%;
    }
}


/* Machine configuration site-surface theme */
.machine-config-lede[b-qdcx5wekk0],
.machine-config-sync-detail[b-qdcx5wekk0] {
    background: color-mix(in srgb, var(--color-info) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
    border-radius: 0;
    color: var(--color-text-muted);
}

.machine-config-sync-detail[b-qdcx5wekk0] {
    border-left-color: var(--color-info);
}

.machine-config-hint[b-qdcx5wekk0],
.machine-config-empty[b-qdcx5wekk0],
.machine-config-sync-detail[b-qdcx5wekk0] {
    color: var(--color-text-muted);
}

.machine-config-section[b-qdcx5wekk0],
.machine-config-capability-group[b-qdcx5wekk0],
.machine-config-diagnostics[b-qdcx5wekk0] {
    --machine-config-notch: var(--notch-md);
    --machine-config-accent: var(--color-accent);
    --machine-config-fill: linear-gradient(152deg, var(--color-surface), var(--color-background-raised));
    background: transparent;
    border: 0;
    border-radius: 0;
    filter: drop-shadow(0 .75rem 1.5rem rgba(0, 0, 0, .22));
    isolation: isolate;
    overflow: visible;
    position: relative;
}

.machine-config-section > *[b-qdcx5wekk0],
.machine-config-capability-group > *[b-qdcx5wekk0],
.machine-config-diagnostics > *[b-qdcx5wekk0] {
    position: relative;
    z-index: 1;
}

.machine-config-section[b-qdcx5wekk0]::before,
.machine-config-capability-group[b-qdcx5wekk0]::before,
.machine-config-diagnostics[b-qdcx5wekk0]::before {
    background: var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--machine-config-notch)) 0, 100% var(--machine-config-notch), 100% 100%, var(--machine-config-notch) 100%, 0 calc(100% - var(--machine-config-notch)));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -2;
}

.machine-config-section[b-qdcx5wekk0]::after,
.machine-config-capability-group[b-qdcx5wekk0]::after,
.machine-config-diagnostics[b-qdcx5wekk0]::after {
    background:
        linear-gradient(90deg, var(--machine-config-accent) 0 4rem, transparent 4rem) top left / 100% 2px no-repeat,
        var(--machine-config-fill);
    clip-path: polygon(0 0, calc(100% - var(--machine-config-notch)) 0, 100% var(--machine-config-notch), 100% 100%, var(--machine-config-notch) 100%, 0 calc(100% - var(--machine-config-notch)));
    content: "";
    inset: var(--hairline);
    position: absolute;
    z-index: -1;
}

.machine-config-columns .machine-config-section:nth-child(2)[b-qdcx5wekk0],
.machine-config-capability-group:nth-of-type(even)[b-qdcx5wekk0] {
    --machine-config-accent: var(--color-info);
}

.machine-config-section[b-qdcx5wekk0] {
    padding: var(--space-4);
}

.machine-config-section h3[b-qdcx5wekk0],
.machine-config-heading[b-qdcx5wekk0] {
    color: var(--machine-config-accent, var(--color-accent-text));
    font-family: var(--font-display);
    font-size: .92rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: .03em;
    position: relative;
    text-transform: uppercase;
}

.machine-config-heading[b-qdcx5wekk0] {
    border-top-color: var(--color-border);
}

.machine-config-section h3[b-qdcx5wekk0]::after,
.machine-config-heading[b-qdcx5wekk0]::after {
    background-image: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 9px, currentColor 9px 23px, transparent 23px 24px, currentColor 24px 33px, transparent 33px 37px);
    bottom: -.32rem;
    content: "";
    height: 2px;
    left: 0;
    opacity: .55;
    position: absolute;
    width: 2.6rem;
}

.machine-config-roots li[b-qdcx5wekk0],
.machine-config-capabilities li[b-qdcx5wekk0] {
    background: var(--color-background);
    border-color: var(--color-border);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
}

.machine-config-roots li:hover[b-qdcx5wekk0],
.machine-config-capabilities li:hover[b-qdcx5wekk0] {
    background: var(--color-surface-raised);
    border-color: var(--machine-config-accent);
    transform: translateY(-1px);
}

.machine-config-capability-group > summary[b-qdcx5wekk0],
.machine-config-diagnostics > summary[b-qdcx5wekk0] {
    padding: var(--space-4) var(--space-5);
}

.machine-config-capability-group > summary span[b-qdcx5wekk0] {
    color: var(--machine-config-accent);
    font-family: var(--font-display);
    font-size: .7rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
}

.machine-config-capability-group > summary small[b-qdcx5wekk0],
.machine-config-advertised li code[b-qdcx5wekk0] {
    background: color-mix(in srgb, var(--machine-config-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--machine-config-accent) 30%, transparent);
    border-radius: 0;
    color: var(--machine-config-accent);
}

.machine-config-capability-group[open] > summary[b-qdcx5wekk0] {
    background: color-mix(in srgb, var(--machine-config-accent) 6%, transparent);
    border-bottom-color: var(--color-border);
}

.machine-config-capability-label strong[b-qdcx5wekk0] {
    color: var(--color-text);
}

.machine-config-capability-description[b-qdcx5wekk0] {
    color: var(--color-text-muted);
}

.machine-config-diagnostics[b-qdcx5wekk0] {
    --machine-config-accent: var(--color-purple);
}

.machine-config-diagnostics > summary strong[b-qdcx5wekk0],
.machine-config-diagnostics-cue[b-qdcx5wekk0] {
    color: var(--color-purple-text);
}

.machine-config-diagnostics-body[b-qdcx5wekk0] {
    border-top-color: var(--color-border);
}

.machine-config-actions[b-qdcx5wekk0] {
    background: color-mix(in srgb, var(--color-background-raised) 94%, transparent);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: 0;
    box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.32);
    clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
}

.machine-config-toolbar > span[b-qdcx5wekk0],
.machine-config-verification-toolbar span[b-qdcx5wekk0] {
    color: var(--color-text-muted);
}

@media (max-width: 650px) {
    .machine-config-section[b-qdcx5wekk0],
    .machine-config-capability-group[b-qdcx5wekk0],
    .machine-config-diagnostics[b-qdcx5wekk0] {
        --machine-config-notch: var(--notch-sm);
    }
}
/* /Components/Pages/Admin/Chat.razor.rz.scp.css */
.admin-chat-page[b-99a0smxtch] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topbar-height) - var(--tab-bar-height));
    margin:
        calc(-1 * var(--space-6))
        calc(-1 * max(var(--space-5), env(safe-area-inset-right, 0px)))
        calc(-1 * max(var(--space-8), env(safe-area-inset-bottom, 0px)))
        calc(-1 * max(var(--space-5), env(safe-area-inset-left, 0px)));
    min-height: 0;
    overflow: hidden;
}

.admin-chat-session[b-99a0smxtch] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.admin-chat-session[b-99a0smxtch]  .agent-chat-shell {
    flex: 1;
    min-height: 0;
}

.admin-chat-empty[b-99a0smxtch] {
    align-content: center;
    display: grid;
    gap: var(--space-4);
    height: 100%;
    justify-items: center;
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.admin-chat-empty h1[b-99a0smxtch] {
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    margin: 0;
}

.admin-chat-empty p[b-99a0smxtch] {
    color: var(--color-text-muted);
    margin: 0;
    max-width: 36rem;
}

@media (max-width: 62rem) {
    .admin-chat-page[b-99a0smxtch] {
        height: calc(100dvh - var(--topbar-height) - var(--tab-bar-height));
        margin-bottom: calc(-1 * (var(--tab-bar-height) + var(--space-6) + env(safe-area-inset-bottom, 0px)));
    }
}

@media (max-width: 46rem) {
    .admin-chat-page[b-99a0smxtch] {
        margin:
            calc(-1 * var(--space-5))
            calc(-1 * max(var(--space-3), env(safe-area-inset-right, 0px)))
            calc(-1 * (var(--tab-bar-height) + var(--space-6) + env(safe-area-inset-bottom, 0px)))
            calc(-1 * max(var(--space-3), env(safe-area-inset-left, 0px)));
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   This page cancels .page-container's padding to run the chat full-bleed, so the
   margins here are the exact negatives of what MainLayout sets at this width. Any
   drift and the transcript either inset itself or bleed past the viewport. */
@media (max-width: 48rem) {
    .admin-chat-page[b-99a0smxtch] {
        margin:
            calc(-1 * var(--space-4))
            calc(-1 * max(var(--space-3), env(safe-area-inset-right, 0px)))
            calc(-1 * (var(--tab-bar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px)))
            calc(-1 * max(var(--space-3), env(safe-area-inset-left, 0px)));
    }

    .admin-chat-empty[b-99a0smxtch] {
        gap: var(--space-2);
        padding: var(--space-5) var(--space-4);
    }

    .admin-chat-empty h1[b-99a0smxtch] {
        font-size: 1.125rem;
    }

    .admin-chat-empty p[b-99a0smxtch] {
        font-size: 0.6875rem;
    }
}
/* /Components/Pages/Admin/Settings/Configuration.razor.rz.scp.css */
/* Runtime configuration page.
   Two pieces the design system does not already own: the area board that doubles as the
   section switcher, and the save bar that replaces a Save panel at the bottom of the scroll.
   Everything else is Panel, form-grid, check-grid, and definition-grid from app.css.
   This file replaces a global <style> block the page used to carry, which was also the only
   definition of .checkbox-row anywhere in the app. Tokens only; no colour literals. */

.config-nav[b-76lk1nc3h7] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    margin-bottom: var(--space-4);
}

.config-card[b-76lk1nc3h7] {
    --notch: var(--notch-sm);
    --config-tone: var(--color-neutral);
    align-items: center;
    background:
        linear-gradient(90deg, var(--config-tone) 0 2.5rem, transparent 2.5rem) top left / 100% 2px no-repeat,
        var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: var(--space-3);
    grid-template-columns: 1.75rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--space-4);
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.config-card[data-state="ok"][b-76lk1nc3h7] { --config-tone: var(--color-success); }
.config-card[data-state="warn"][b-76lk1nc3h7] { --config-tone: var(--color-warning); }
.config-card[data-state="off"][b-76lk1nc3h7] { --config-tone: var(--color-neutral); }

.config-card:hover[b-76lk1nc3h7] {
    background:
        linear-gradient(90deg, var(--config-tone) 0 2.5rem, transparent 2.5rem) top left / 100% 2px no-repeat,
        var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.config-card.is-active[b-76lk1nc3h7] {
    background:
        linear-gradient(90deg, var(--config-tone) 0 2.5rem, transparent 2.5rem) top left / 100% 2px no-repeat,
        var(--color-surface-raised);
    border-color: var(--color-accent);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.config-card-glyph[b-76lk1nc3h7] {
    color: var(--config-tone);
    font-size: 1.1rem;
    line-height: 1;
}

.config-card-copy[b-76lk1nc3h7] {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.config-card-copy strong[b-76lk1nc3h7] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.config-card-state[b-76lk1nc3h7] {
    color: var(--config-tone);
    font-size: 0.7rem;
}

.config-card[data-state="off"] .config-card-state[b-76lk1nc3h7] {
    color: var(--color-text-faint);
}

/* Save applies to every area, so it sits above the one on show rather than at the far end
   of the page it happens to be scrolled to. */
.config-savebar[b-76lk1nc3h7] {
    --notch: var(--notch-sm);
    align-items: center;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
}

.config-savebar.is-pending[b-76lk1nc3h7] {
    border-color: var(--color-warning);
}

.config-savebar-copy[b-76lk1nc3h7] {
    display: grid;
    gap: var(--space-1);
    flex: 1 1 24rem;
    min-width: 0;
}

.config-savebar-copy strong[b-76lk1nc3h7] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.config-savebar.is-pending .config-savebar-copy strong[b-76lk1nc3h7] {
    color: var(--color-warning);
}

.config-savebar-copy small[b-76lk1nc3h7] {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
    max-width: 72ch;
}

@media (max-width: 700px) {
    .config-savebar[b-76lk1nc3h7] {
        align-items: stretch;
        flex-direction: column;
    }

    .config-savebar .button[b-76lk1nc3h7] {
        justify-content: center;
        width: 100%;
    }
}
/* /Components/Pages/Admin/Settings/Index.razor.rz.scp.css */
/* The settings rail owns navigation. The overview only shows status and the items an operator
   is most likely to act on, instead of repeating every destination as another directory. */

.admin-stats[b-63wb4x5jcf] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-5);
}

.admin-attention-list[b-63wb4x5jcf] {
    display: grid;
    gap: var(--space-2);
}

.admin-attention-item[b-63wb4x5jcf] {
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-attention-item:hover[b-63wb4x5jcf] {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.admin-attention-item:focus-visible[b-63wb4x5jcf] {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

.admin-attention-value[b-63wb4x5jcf] {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-stretch: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}


.admin-attention-copy[b-63wb4x5jcf] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.admin-attention-copy strong[b-63wb4x5jcf] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-stretch: 75%;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
}

.admin-attention-copy span[b-63wb4x5jcf] {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.admin-attention-arrow[b-63wb4x5jcf] {
    color: var(--color-text-faint);
    font-size: 1rem;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.admin-attention-item:hover .admin-attention-arrow[b-63wb4x5jcf] {
    color: var(--color-accent-text);
    transform: translateX(2px);
}

.admin-more[b-63wb4x5jcf] {
    margin-right: auto;
}

@media (max-width: 70rem) {
    .admin-stats[b-63wb4x5jcf] {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-stats[b-63wb4x5jcf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-attention-item[b-63wb4x5jcf] {
        gap: var(--space-2);
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        padding: var(--space-3);
    }

    .admin-attention-value[b-63wb4x5jcf] {
        font-size: 1.1rem;
    }

    .admin-attention-copy strong[b-63wb4x5jcf] {
        font-size: 0.78rem;
    }

    .admin-attention-copy span[b-63wb4x5jcf] {
        font-size: 0.72rem;
    }
}
/* /Components/Pages/Admin/Settings/ScheduledTasks.razor.rz.scp.css */
.schedule-layout[b-15msjmesly] {
    margin-bottom: var(--space-6);
}

.schedule-prompt[b-15msjmesly] {
    min-height: 12rem;
    resize: vertical;
}

.schedule-fields[b-15msjmesly] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.schedule-list-panel[b-15msjmesly] {
    margin-top: var(--space-5);
}

.table-subtext[b-15msjmesly] {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    max-width: 34rem;
}

.table-actions[b-15msjmesly] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.execution-row td[b-15msjmesly] {
    padding-top: 0;
}

.execution-row summary[b-15msjmesly] {
    cursor: pointer;
    color: var(--text-muted);
}

.execution-list[b-15msjmesly] {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.execution-item[b-15msjmesly] {
    display: grid;
    grid-template-columns: minmax(10rem, auto) minmax(6rem, auto) 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

.execution-item small[b-15msjmesly] {
    grid-column: 1 / -1;
    color: var(--text-muted);
}

.warning-text[b-15msjmesly] {
    color: var(--warning-text);
}

@media (max-width: 720px) {
    .schedule-fields[b-15msjmesly],
    .execution-item[b-15msjmesly] {
        grid-template-columns: 1fr;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .schedule-layout[b-15msjmesly] {
        margin-bottom: var(--space-4);
    }

    .schedule-prompt[b-15msjmesly] {
        min-height: 6rem;
    }

    .schedule-fields[b-15msjmesly] {
        gap: var(--space-3);
    }

    .schedule-list-panel[b-15msjmesly] {
        margin-top: var(--space-3);
    }

    .table-subtext[b-15msjmesly] {
        font-size: 0.5625rem;
    }

    .execution-list[b-15msjmesly] {
        gap: var(--space-1);
        margin-top: var(--space-2);
    }

    .execution-item[b-15msjmesly] {
        gap: var(--space-1);
    }

    .execution-item small[b-15msjmesly] {
        font-size: 0.5625rem;
    }
}
/* /Components/Pages/Admin/Settings/WorkflowConformance.razor.rz.scp.css */
.conformance-metrics[b-2lljcqbuv5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.conformance-metric[b-2lljcqbuv5] {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.conformance-metric strong[b-2lljcqbuv5] {
    font-size: 1.45rem;
}

.conformance-metric span[b-2lljcqbuv5] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

@media (max-width: 48rem) {
    .conformance-metrics[b-2lljcqbuv5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/AgentDetail.razor.rz.scp.css */

/* The agent's picture, shown where a person would see their own on the profile page. */
.agent-portrait-row[b-astq8rh1mm] {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.agent-portrait[b-astq8rh1mm] {
    --notch: 0.4rem;
    border: var(--hairline) solid var(--color-purple);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    flex: 0 0 auto;
    height: 5rem;
    object-fit: cover;
    width: 5rem;
}

.agent-portrait-controls[b-astq8rh1mm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.tone-document-editor[b-astq8rh1mm] {
    font-family: var(--font-mono);
    min-height: 18rem;
    resize: vertical;
}

.tone-document-heading[b-astq8rh1mm],
.tone-document-upload[b-astq8rh1mm],
.tone-document-preview[b-astq8rh1mm] {
    margin-block: 0.75rem;
}

/* Overview quick actions: the same task-card shape the machine console uses, so
   both detail pages hand you the next step in the same visual language. */
.agent-task-grid[b-astq8rh1mm] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-task-card[b-astq8rh1mm] {
    --task-accent: var(--color-accent);
    --notch: var(--notch-sm);
    background:
        linear-gradient(90deg, var(--task-accent) 0 3.5rem, transparent 3.5rem) top left / 100% 2px no-repeat,
        linear-gradient(152deg, var(--color-surface-raised), var(--color-surface));
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-height: 5.3rem;
    padding: var(--space-4);
    text-align: left;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.agent-task-card:nth-child(2)[b-astq8rh1mm] { --task-accent: var(--color-info); }
.agent-task-card:nth-child(3)[b-astq8rh1mm] { --task-accent: var(--color-warning); }
.agent-task-card:nth-child(4)[b-astq8rh1mm] { --task-accent: var(--color-purple); }

.agent-task-card:hover[b-astq8rh1mm] {
    background:
        linear-gradient(90deg, var(--task-accent) 0 3.5rem, transparent 3.5rem) top left / 100% 2px no-repeat,
        linear-gradient(152deg, var(--color-surface-raised), var(--color-background-raised));
    border-color: var(--task-accent);
    transform: translateY(-2px);
}

.agent-task-card strong[b-astq8rh1mm] {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.agent-task-card span[b-astq8rh1mm] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

@media (max-width: 48rem) {
    .agent-task-grid[b-astq8rh1mm] {
        grid-template-columns: 1fr;
    }
}

.accent-color-value[b-astq8rh1mm] {
    align-items: center;
    display: inline-flex;
    font-family: var(--font-mono);
    gap: var(--space-2);
}

.accent-color-dot[b-astq8rh1mm] {
    border-radius: 50%;
    display: inline-block;
    height: 0.8rem;
    width: 0.8rem;
}
/* /Components/Pages/AgentMessages.razor.rz.scp.css */
/* Message Board. Consumes tokens from wwwroot/app.css; defines no colour literals.

   Two views, two shapes. The index is a single-column scanning list. The discussion
   is a reading column paired with a context rail: the post and its comments keep a
   readable measure while votes, participants, and plan state occupy the width that
   a 108rem canvas otherwise wastes. */

/* ----------------------------------------------------------------- Byline */

/* The signed-in name is a fact, not something to edit, so it reads as a byline
   instead of the readonly text input it used to occupy a form column with. */
.board-byline[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.board-byline-label[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.board-byline-name[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow-wrap: break-word;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------- Author */

/* Die-cut glyph tile rather than a circle: the theme is square, and shape comes
   from the CUT-BOTH notch. Human and agent differ in fill, but the chip beside
   the name states which it is, so colour is never the only signal. */
.board-avatar[b-jolcosm62n] {
    --notch: 0.3rem;
    --avatar-size: 2.5rem;
    align-items: center;
    background: var(--color-accent-soft);
    border: var(--hairline) solid var(--color-accent);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    color: var(--color-accent-text);
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: calc(var(--avatar-size) * 0.4);
    font-stretch: 75%;
    font-weight: 700;
    height: var(--avatar-size);
    justify-content: center;
    line-height: 1;
    width: var(--avatar-size);
}

/* An uploaded picture fills the same notched silhouette the initial occupies, so a thread of
   mixed authors keeps one rhythm instead of two shapes. */
.board-avatar.is-portrait[b-jolcosm62n] {
    background: transparent;
    object-fit: cover;
    padding: 0;
}

.board-avatar.is-small[b-jolcosm62n] {
    --avatar-size: 2rem;
}

.board-avatar.is-large[b-jolcosm62n] {
    --avatar-size: 3.25rem;
    --notch: 0.4rem;
}

.board-avatar.is-agent[b-jolcosm62n] {
    background: var(--color-purple-soft);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.board-avatar.is-external[b-jolcosm62n] {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Agent names arrive as provider/model: long, and with no spaces to break on. */
.board-author-name[b-jolcosm62n] {
    color: var(--agent-accent, var(--color-text));
    font-family: var(--font-display);
    font-size: 1rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow-wrap: break-word;
    text-transform: uppercase;
}

.has-agent-accent[b-jolcosm62n] {
    --agent-accent: var(--agent-accent-dark);
    border-left: 3px solid var(--agent-accent, var(--color-border));
    padding-left: calc(var(--space-3) - 3px);
}

@media print {
    .has-agent-accent[b-jolcosm62n] {
        --agent-accent: var(--agent-accent-light);
    }
}

/* Provider/model provenance beside the chosen identity. Quieter than the board name. */
.board-author-provenance[b-jolcosm62n],
.board-agent-identity[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: .8rem;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.board-author-provenance[b-jolcosm62n]::before,
.board-agent-identity[b-jolcosm62n]::before {
    color: var(--color-text-faint);
    content: "·";
    margin-right: var(--space-2);
}

.board-author-meta[b-jolcosm62n] {
    align-items: center;
    column-gap: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

.board-author-meta a[b-jolcosm62n] {
    color: inherit;
    text-decoration: none;
}

.board-time[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-size: 0.78rem;
}

.board-role[b-jolcosm62n] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ Index */

.board-index[b-jolcosm62n] {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-index-more[b-jolcosm62n] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

/* Rows take the CUT-BR notch shared with board cards and alerts; the panel's own
   PANEL cut is reserved for the panel. */
.board-index-item[b-jolcosm62n] {
    --notch: var(--notch-sm);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    padding: var(--space-5);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.board-index-item:hover[b-jolcosm62n],
.board-index-item:focus-within[b-jolcosm62n] {
    background: var(--color-surface-hover);
    border-color: var(--color-border-loud);
}

/* Identity and excerpt are the click target, so the row opens on a comfortable
   press rather than on a 0.76rem link. The count tile closes the row on the
   right, which keeps the excerpt off the full 108rem measure. */
.board-index-link[b-jolcosm62n] {
    align-items: center;
    color: inherit;
    column-gap: var(--space-4);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    text-decoration: none;
}

.board-index-main[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

/* Scanning copy, not the post: the discussion page carries the full text. Newlines
   collapse here by design, so a structured post still previews as one sentence. */
.board-excerpt[b-jolcosm62n] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--color-text-muted);
    line-height: 1.55;
    max-width: 92ch;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.board-index-link:hover .board-excerpt[b-jolcosm62n] {
    color: var(--color-text);
}

.board-index-link:hover .board-author-name[b-jolcosm62n] {
    color: var(--color-accent-text);
}

.board-index-counts[b-jolcosm62n] {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.board-count-tile[b-jolcosm62n] {
    --notch: var(--notch-sm);
    align-content: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    display: grid;
    gap: var(--space-1);
    justify-items: center;
    min-width: 5.5rem;
    padding: var(--space-3) var(--space-4);
}

.board-count-value[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.75rem;
    font-stretch: 75%;
    font-weight: 700;
    line-height: 0.9;
}

.board-count-tile.is-votes[b-jolcosm62n] {
    border-color: var(--color-success);
}

/* The number is the number. State is carried by the tile's border and fill; recolouring the
   digits too gave the board three colours of count with no rule behind any of them. The label
   takes the product's stat-label treatment; the board was the one surface that set it in
   sentence case. */
.board-count-tile .board-count-label[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.board-count-tile.is-plan[b-jolcosm62n] {
    border-color: var(--color-success);
}



/* Secondary actions live outside the row link: an anchor may not contain a
   control, and these are not what the row is for. */
.board-index-actions[b-jolcosm62n] {
    align-items: center;
    border-top: var(--hairline) solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
}

/* --------------------------------------------------- Discussion: headline */

/* Who opened the thread and how big it has grown, stated once at the top so no
   card below has to repeat it. */
.board-headline[b-jolcosm62n] {
    align-items: center;
    column-gap: var(--space-7);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--space-3);
    row-gap: var(--space-4);
}

.board-headline-who[b-jolcosm62n] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.board-headline-text[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.board-facts[b-jolcosm62n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

/* Numeral first and oversized: the counts are the one thing worth reading at a
   glance, and the label rung keeps them from competing with the title. */
.board-fact[b-jolcosm62n] {
    align-items: baseline;
    display: flex;
    gap: var(--space-2);
}

.board-fact-value[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.55rem;
    font-stretch: 75%;
    font-weight: 700;
    line-height: 1;
}

.board-fact-label[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ------------------------------------------------------ Discussion: shell */

/* The section switch belongs under the page title, not between two cards. It
   sticks under the topbar so the answer to "which section am I in" survives a
   long thread. */
.board-tabbar[b-jolcosm62n] {
    background: linear-gradient(180deg, var(--color-background) 72%, transparent);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-2);
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-2));
    z-index: 5;
}

.board-tabbar[b-jolcosm62n]  .tabs {
    margin-bottom: 0;
}

.board-layout[b-jolcosm62n] {
    align-items: start;
    display: grid;
    column-gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
    row-gap: var(--space-6);
}

.board-main[b-jolcosm62n] {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

/* The column spaces its cards with a gap; the global panel stacking margin would
   double it. */
.board-main[b-jolcosm62n]  .panel + .panel {
    margin-top: 0;
}

.board-rail[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

/* -------------------------------------------------- Discussion: lead post */

/* Panel geometry, no panel header: the author line is already in the page
   heading, so the card carries the post itself rather than a second byline. */
.board-lead[b-jolcosm62n] {
    display: block;
}

.board-lead-inner[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.board-lead-kicker[b-jolcosm62n] {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-kicker);
    margin: 0;
    text-transform: uppercase;
}

.board-lead-kicker-sep[b-jolcosm62n] {
    color: var(--color-border-loud);
}

.board-lead-actions[b-jolcosm62n] {
    align-items: center;
    border-top: var(--hairline) solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

/* A measure, not a column width. At 108rem an uncapped paragraph runs past 180
   characters, which is what made the discussion read as a wall. */
.board-body[b-jolcosm62n] {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 78ch;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.board-body.is-lead[b-jolcosm62n] {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.75;
}

.board-lead.is-leading-solution[b-jolcosm62n] {
    --panel-border: var(--color-success);
    --panel-accent: var(--color-success);
}

/* --------------------------------------------------- Discussion: comments */

/* The winning answer, lifted out of the thread and made a jump target rather
   than something you scroll to find. */
.board-pinned[b-jolcosm62n] {
    --notch: var(--notch-sm);
    background: var(--color-success-soft);
    border: var(--hairline) solid var(--color-success);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    color: inherit;
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.board-pinned:hover[b-jolcosm62n] {
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
}

.board-pinned-label[b-jolcosm62n] {
    color: var(--color-success);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.board-pinned-who[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.board-pinned-count[b-jolcosm62n] {
    color: var(--color-success);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.board-pinned-excerpt[b-jolcosm62n] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--color-text);
    line-height: 1.6;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.board-thread[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Avatar rail on the left, everything else in one column beside it. Indent is
   capped at depth 5 by the component so the body keeps its measure; each reply
   also names its parent, since the step is small on phones. */
.board-comment[b-jolcosm62n] {
    --notch: var(--notch-sm);
    align-items: start;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    column-gap: var(--space-3);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-left: calc(var(--thread-depth, 0) * 1.6rem);
    padding: var(--space-4);
    position: relative;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.board-comment:hover[b-jolcosm62n] {
    background: var(--color-field-hover);
    border-color: var(--color-border-strong);
}

/* Depth rail: the reply's connection back up the thread. */
.board-comment[b-jolcosm62n]::before {
    background: var(--color-border-strong);
    bottom: var(--space-3);
    content: "";
    left: calc(var(--space-2) * -1);
    position: absolute;
    top: var(--space-3);
    width: 2px;
}

.board-comment-main[b-jolcosm62n] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.board-comment-head[b-jolcosm62n] {
    align-items: center;
    column-gap: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

/* The comment the composer is aimed at. The composer panel names the same author
   in its title, so this is reinforcement rather than the only cue. */
.board-comment.is-reply-target[b-jolcosm62n] {
    border-color: var(--color-accent);
}

.board-comment.is-reply-target[b-jolcosm62n]::before {
    background: var(--color-accent);
}

.board-comment.is-leading-solution[b-jolcosm62n] {
    border-color: var(--color-success);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--color-success) 22%, transparent);
}

.board-comment.is-leading-solution[b-jolcosm62n]::before {
    background: var(--color-success);
}

/* Arrived here from the vote board or the pinned answer. */
.board-comment:target[b-jolcosm62n] {
    border-color: var(--color-accent);
    box-shadow: 0 0 1.5rem var(--color-accent-glow);
}

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

/* ------------------------------------------------------ Discussion: votes */

/* A tally you can press. Count first and set in the poster face, so the standing
   reads before the verb does. */
.board-vote[b-jolcosm62n] {
    --notch: 0.3rem;
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    color: var(--color-text-subtle);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-label);
    padding: 0.3rem var(--space-3);
    text-transform: uppercase;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.board-vote:hover:not(:disabled)[b-jolcosm62n] {
    border-color: var(--color-success);
    color: var(--color-success);
}

.board-vote:disabled[b-jolcosm62n] {
    cursor: not-allowed;
    opacity: 0.55;
}

.board-vote-mark[b-jolcosm62n] {
    font-size: 0.6rem;
    line-height: 1;
}

.board-vote-count[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1;
}

.board-vote.is-voted[b-jolcosm62n] {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-success);
}

.board-vote.is-voted .board-vote-count[b-jolcosm62n] {
    color: var(--color-success);
}

/* Built by RenderTreeBuilder rather than written as markup, so it never carries the
   component's scope attribute: reach it through an ancestor that does. */
.board-main[b-jolcosm62n]  .board-voted-by {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    margin: 0;
}

/* --------------------------------------------------- Discussion: composer */

.board-composer-top[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.board-composer .board-byline[b-jolcosm62n] {
    margin-bottom: 0;
}

/* Standing reminder of who the reply lands under, and the control that cancels
   it: aiming the composer is otherwise invisible once you scroll past the target. */
.board-reply-chip[b-jolcosm62n] {
    --notch: 0.3rem;
    align-items: center;
    background: var(--color-accent-soft);
    border: var(--hairline) solid var(--color-accent);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    color: var(--color-accent-text);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-label);
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.3rem var(--space-3);
    text-align: left;
    text-transform: uppercase;
}

.board-reply-chip:hover[b-jolcosm62n] {
    background: var(--color-accent-faint);
}

.board-reply-chip-clear[b-jolcosm62n] {
    color: var(--color-text-faint);
}

.board-composer-input[b-jolcosm62n] {
    min-height: 6.5rem;
}

.board-composer-actions[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* ------------------------------------------------------- Discussion: rail */

.board-rail-card[b-jolcosm62n] {
    --notch: var(--notch-sm);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.board-rail-title[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    margin: 0;
    text-transform: uppercase;
}

.board-rail-who[b-jolcosm62n] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.board-rail-meta[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.board-rail-strong[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-stretch: 75%;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.board-rail-note[b-jolcosm62n] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0;
}

.board-rail-excerpt[b-jolcosm62n] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Votes as a standing rather than a list of "who voted for what": the bar is
   relative to the leader, so a 4–1 split is legible without reading counts. */
.board-vote-board[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-vote-row[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.board-vote-target[b-jolcosm62n] {
    align-items: baseline;
    color: inherit;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    text-decoration: none;
}

.board-vote-name[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.board-vote-target:hover .board-vote-name[b-jolcosm62n] {
    color: var(--color-accent-text);
}

.board-vote-tally[b-jolcosm62n] {
    color: var(--color-text);
    flex: 0 0 auto;
    font-family: var(--font-poster);
    font-size: 1.15rem;
    font-stretch: 75%;
    font-weight: 700;
    line-height: 1;
}

.board-vote-meter[b-jolcosm62n] {
    background: var(--color-surface-raised);
    display: block;
    height: 4px;
    overflow: hidden;
}

.board-vote-meter-fill[b-jolcosm62n] {
    background: var(--color-border-loud);
    display: block;
    height: 100%;
}

.board-vote-row.is-leading .board-vote-meter-fill[b-jolcosm62n] {
    background: var(--color-success);
}

.board-vote-row.is-leading .board-vote-tally[b-jolcosm62n] {
    color: var(--color-success);
}

.board-vote-excerpt[b-jolcosm62n] {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.board-vote-voters[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    margin: 0;
    overflow-wrap: anywhere;
}

.board-people[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-person[b-jolcosm62n] {
    align-items: center;
    column-gap: var(--space-3);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.board-person-name[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.board-person-count[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-poster);
    font-size: 0.95rem;
    font-stretch: 75%;
    font-weight: 700;
}

/* ------------------------------------------------------------------- Plan */

.board-plan[b-jolcosm62n] {
    display: grid;
    gap: var(--space-5);
}

.board-plan-head[b-jolcosm62n] {
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}

.board-plan-title[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.6rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: 1.15;
    margin: 0;
    max-width: 32ch;
    text-transform: uppercase;
}

.board-plan-meta[b-jolcosm62n] {
    align-items: center;
    column-gap: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    row-gap: var(--space-2);
}

/* A document, not a dump. The plan is stored as markdown and rendered as blocks,
   so headings and lists carry the structure the author typed. */
.board-plan-doc[b-jolcosm62n] {
    color: var(--color-text-muted);
    display: grid;
    gap: var(--space-4);
    line-height: 1.75;
    max-width: 80ch;
}

.board-plan-h1[b-jolcosm62n],
.board-plan-h2[b-jolcosm62n],
.board-plan-h3[b-jolcosm62n] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.board-plan-h1[b-jolcosm62n] {
    border-bottom: var(--hairline) solid var(--color-border);
    font-size: 1.15rem;
    padding-bottom: var(--space-2);
}

.board-plan-h2[b-jolcosm62n] {
    color: var(--color-accent-text);
    font-size: 1rem;
}

.board-plan-h3[b-jolcosm62n] {
    color: var(--color-text-subtle);
    font-size: 0.85rem;
    letter-spacing: var(--tracking-label);
}

/* Headings own the space above them; the grid gap covers the rest. */
.board-plan-h1:not(:first-child)[b-jolcosm62n],
.board-plan-h2:not(:first-child)[b-jolcosm62n],
.board-plan-h3:not(:first-child)[b-jolcosm62n] {
    margin-top: var(--space-3);
}

.board-plan-p[b-jolcosm62n] {
    margin: 0;
    overflow-wrap: anywhere;
}

.board-plan-list[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-6);
}

.board-plan-list li[b-jolcosm62n] {
    overflow-wrap: anywhere;
    padding-left: var(--space-1);
}

.board-plan-list[b-jolcosm62n]::marker,
.board-plan-list li[b-jolcosm62n]::marker {
    color: var(--color-accent-text);
}

.board-plan-pre[b-jolcosm62n] {
    --notch: var(--notch-sm);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    margin: 0;
    overflow-x: auto;
    padding: var(--space-4);
}

/* Inline spans are emitted by the markdown renderer through RenderTreeBuilder, which
   does not stamp the scope attribute; the document wrapper does. */
.board-plan-doc[b-jolcosm62n]  .board-plan-code {
    background: var(--color-surface-raised);
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1rem 0.3rem;
}

.board-plan-doc[b-jolcosm62n]  strong {
    color: var(--color-text);
}

.board-plan-rule[b-jolcosm62n] {
    background: var(--color-border);
    border: 0;
    height: 1px;
    margin: 0;
}

.board-plan-form[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
}

.board-plan-form-row[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.board-plan-editor[b-jolcosm62n] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    min-height: 24rem;
}

.board-plan-section[b-jolcosm62n] {
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
}

/* ------------------------------------------------------------- Responsive */

/* The rail drops under the reading column before either is squeezed. */
@media (max-width: 76rem) {
    .board-layout[b-jolcosm62n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-rail[b-jolcosm62n] {
        grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    }
}

/* The count tile drops below the identity line before the excerpt is squeezed
   into a two-word column. */
@media (max-width: 62rem) {
    .board-index-link[b-jolcosm62n] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-3);
    }

    .board-index-counts[b-jolcosm62n] {
        grid-column: 2;
        justify-self: start;
    }

    .board-count-tile[b-jolcosm62n] {
        min-width: 0;
        padding: var(--space-2) var(--space-3);
    }

    .board-count-value[b-jolcosm62n] {
        font-size: 1.25rem;
    }
}

@media (max-width: 46rem) {
    .board-plan-form-row[b-jolcosm62n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-headline[b-jolcosm62n] {
        column-gap: var(--space-4);
    }

    .board-facts[b-jolcosm62n] {
        gap: var(--space-4);
    }

    .board-fact-value[b-jolcosm62n] {
        font-size: 1.3rem;
    }
}

@media (max-width: 40rem) {
    .board-index-item[b-jolcosm62n] {
        padding: var(--space-4);
    }

    .board-comment[b-jolcosm62n] {
        column-gap: var(--space-2);
        margin-left: calc(var(--thread-depth, 0) * 0.6rem);
        padding: var(--space-3);
    }

    .board-lead-inner[b-jolcosm62n] {
        padding: var(--space-4);
    }

    .board-index-actions[b-jolcosm62n],
    .board-actions[b-jolcosm62n] {
        gap: var(--touch-gap) var(--space-4);
    }

    .board-avatar.is-large[b-jolcosm62n] {
        --avatar-size: 2.5rem;
    }

    /* The count and the arrow still say what the control does; the verb is what
       gives way when a nested reply has little width left. */
    .board-vote-word[b-jolcosm62n] {
        display: none;
    }

    .board-plan-title[b-jolcosm62n] {
        font-size: 1.3rem;
    }
}

.board-index-item.is-consensus[b-jolcosm62n],
[b-jolcosm62n] .board-consensus-heading,
[b-jolcosm62n] .board-consensus-panel,
.board-plan.is-consensus[b-jolcosm62n] {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success) 28%, transparent),
        0 0.75rem 2rem color-mix(in srgb, var(--color-success) 12%, transparent);
}

.board-index-item.is-consensus[b-jolcosm62n],
.board-plan.is-consensus[b-jolcosm62n] {
    background: color-mix(in srgb, var(--color-success-soft) 68%, var(--color-surface));
}

.board-count-tile.is-agreed[b-jolcosm62n] {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

/* Closed discussions sink visually: muted, not the green “agreed” attention. */
.board-index-item.is-closed[b-jolcosm62n] {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-text-faint));
    box-shadow: none;
    opacity: 0.72;
}

.board-index-item.is-closed:hover[b-jolcosm62n],
.board-index-item.is-closed:focus-within[b-jolcosm62n] {
    opacity: 0.88;
}

.board-index-item.is-closed .board-excerpt[b-jolcosm62n],
.board-index-item.is-closed .board-author-name[b-jolcosm62n],
.board-index-item.is-closed .board-time[b-jolcosm62n] {
    color: var(--color-text-faint);
}

.board-count-tile.is-linked[b-jolcosm62n],
.board-count-tile.is-completed[b-jolcosm62n] {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 70%, var(--color-text-faint));
}

.board-count-tile.is-linked .board-count-label[b-jolcosm62n],
.board-count-tile.is-completed .board-count-label[b-jolcosm62n] {
    color: var(--color-text-faint);
}

/* Thread plan panel keeps a clearer completed cue; index rows stay muted above. */
[b-jolcosm62n] .board-completed-heading,
[b-jolcosm62n] .board-completed-panel {
    border-color: var(--color-border);
    box-shadow: none;
}

.board-plan-work-item[b-jolcosm62n] {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    display: grid;
    gap: var(--space-3);
}

.board-plan-project[b-jolcosm62n] {
    margin-top: 0;
    margin-bottom: var(--space-5);
}

.board-plan-work-item > header[b-jolcosm62n] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.board-plan-work-item h3[b-jolcosm62n] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 1.05rem;
}

.board-plan-work-item-title[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-weight: 500;
}

.board-plan-work-item-note[b-jolcosm62n],
.board-plan-complete[b-jolcosm62n] {
    margin: 0;
}

.board-plan-form-row.is-single[b-jolcosm62n] {
    grid-template-columns: 1fr;
}

.board-plan-warning[b-jolcosm62n] {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-left: 0.2rem solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 9%, transparent);
    color: var(--color-text-muted);
}

.board-consensus-summary[b-jolcosm62n] {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-success-soft) 45%, transparent);
}

.board-consensus-progress[b-jolcosm62n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.board-human-approval[b-jolcosm62n] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--hairline) solid color-mix(in srgb, var(--color-success) 45%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-success-soft) 72%, transparent);
}

.board-human-approval strong[b-jolcosm62n] {
    color: var(--color-success);
}

.board-human-approval span[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.board-plan-disposition[b-jolcosm62n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
}

.board-plan-disposition span[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.board-plan-import[b-jolcosm62n] {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

.board-plan-import > header[b-jolcosm62n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.board-plan-import h3[b-jolcosm62n],
.board-plan-import p[b-jolcosm62n] {
    margin: 0;
}

.board-plan-import-modes[b-jolcosm62n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.board-plan-import-modes .check-control[b-jolcosm62n] {
    align-items: flex-start;
    padding: var(--space-3);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-md);
}

.board-plan-import-modes .check-control span[b-jolcosm62n] {
    display: grid;
    gap: var(--space-1);
}

.board-plan-import-modes small[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.board-consensus-people[b-jolcosm62n],
.board-advisory-votes[b-jolcosm62n] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.board-consensus-people li[b-jolcosm62n] {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--hairline) solid var(--color-border);
}

.board-consensus-mark[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.board-consensus-mark.is-done[b-jolcosm62n] {
    color: var(--color-success);
    font-weight: 700;
}

.board-advisory-votes li[b-jolcosm62n] {
    display: grid;
    gap: var(--space-1);
}

.board-advisory-votes span[b-jolcosm62n] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 40rem) {
    .board-plan-import-modes[b-jolcosm62n] {
        grid-template-columns: 1fr;
    }

    .board-consensus-people li[b-jolcosm62n] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* --------------------------------------------------------------------------
   Mobile density tier: ≤ 48rem

   Pairs with the block of the same name in app.css. The board is the densest
   page in the app on desktop and the least dense on a phone, because almost
   every measurement here is a literal rem rather than a token: avatars, the
   poster-face count tiles, the author line, the vote pills.

   The count tiles are the specific thing the redesign is aimed at. On a phone a
   5.5rem-wide tile holding a 1.75rem numeral is a dashboard widget attached to a
   list row, and two of them plus an avatar leave the excerpt about eight
   characters of width. They stay — nothing is dropped — but they reflow to a
   compact indicator sized to their own content.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    /* ---- Identity ---- */

    .board-avatar[b-jolcosm62n] {
        --avatar-size: 1.75rem;
        --notch: 0.25rem;
    }

    .board-avatar.is-small[b-jolcosm62n] {
        --avatar-size: 1.5rem;
    }

    .board-avatar.is-large[b-jolcosm62n] {
        --avatar-size: 2.25rem;
        --notch: 0.3rem;
    }

    .board-author-name[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-author-provenance[b-jolcosm62n],
    .board-agent-identity[b-jolcosm62n] {
        font-size: var(--text-2xs);
        white-space: normal;
    }

    .board-author-provenance[b-jolcosm62n]::before,
    .board-agent-identity[b-jolcosm62n]::before {
        margin-right: var(--space-1);
    }

    .board-author-meta[b-jolcosm62n] {
        column-gap: var(--space-2);
        row-gap: var(--space-1);
    }

    .board-time[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-role[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-byline[b-jolcosm62n] {
        gap: var(--space-1);
        margin-bottom: var(--space-2);
    }

    .board-byline-label[b-jolcosm62n],
    .board-byline-name[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    /*
     * Sticky composer wins this competition. The tab strip answering "which
     * section am I in" can scroll away; pinning it under the topbar on a 390px
     * viewport steals the transcript the pass is supposed to enlarge.
     */
    .board-tabbar[b-jolcosm62n] {
        position: static;
        top: auto;
        z-index: auto;
    }

    /* Board heading actions: wrap as compact rows, never a horizontal scroller. */
    [b-jolcosm62n] .page-heading-toolbar .page-actions,
    [b-jolcosm62n] .page-heading-toolbar .button-row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: visible;
        padding-bottom: 0;
    }

    [b-jolcosm62n] .page-heading-toolbar .button,
    [b-jolcosm62n] .page-heading-toolbar .page-actions .button,
    [b-jolcosm62n] .page-heading-toolbar .button-row .button {
        justify-content: flex-start;
        min-height: var(--touch-min);
        width: 100%;
    }

    /* ---- Index rows ---- */

    .board-index[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-index-item[b-jolcosm62n] {
        padding: var(--space-3);
    }

    .board-index-link[b-jolcosm62n] {
        column-gap: var(--space-2);
        row-gap: var(--space-2);
    }

    .board-index-main[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-excerpt[b-jolcosm62n] {
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    /* A count indicator, not a tile: sized to its digits, laid out on one line so
       the pair costs a single short row instead of two stacked blocks. */
    .board-count-tile[b-jolcosm62n] {
        align-items: baseline;
        display: flex;
        gap: 0.25rem;
        min-width: 0;
        padding: 0.2rem 0.4rem;
    }

    .board-count-value[b-jolcosm62n] {
        font-size: 0.8125rem;
        line-height: 1;
    }

    .board-count-label[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-index-counts[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-index-actions[b-jolcosm62n] {
        gap: var(--space-1);
        margin-top: var(--space-2);
        padding-top: var(--space-2);
    }

    /* ---- Discussion headline ---- */

    .board-headline[b-jolcosm62n] {
        column-gap: var(--space-4);
        margin-top: var(--space-2);
        row-gap: var(--space-2);
    }

    .board-headline-who[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-headline-text[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-facts[b-jolcosm62n] {
        gap: var(--space-3);
    }

    .board-fact[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-fact-value[b-jolcosm62n] {
        font-size: 1rem;
    }

    .board-fact-label[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    /* ---- Discussion shell ---- */

    .board-tabbar[b-jolcosm62n] {
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-1);
        top: calc(var(--topbar-height) + var(--space-1));
    }

    .board-layout[b-jolcosm62n] {
        row-gap: var(--space-3);
    }

    .board-main[b-jolcosm62n] {
        gap: var(--space-3);
    }

    .board-rail[b-jolcosm62n] {
        gap: var(--space-2);
    }

    /* ---- Lead post ---- */

    .board-lead-inner[b-jolcosm62n] {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .board-lead-kicker[b-jolcosm62n] {
        font-size: var(--text-2xs);
        gap: var(--space-1);
    }

    .board-lead-actions[b-jolcosm62n] {
        gap: var(--space-2);
        padding-top: var(--space-2);
    }

    .board-body[b-jolcosm62n] {
        font-size: var(--text-sm);
        line-height: 1.55;
    }

    /* The opening post stays a step above the replies; it just starts lower. */
    .board-body.is-lead[b-jolcosm62n] {
        font-size: 0.75rem;
        line-height: 1.6;
    }

    /* ---- Comments ---- */

    .board-pinned[b-jolcosm62n] {
        gap: var(--space-1);
        margin-bottom: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .board-pinned-label[b-jolcosm62n],
    .board-pinned-count[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-pinned-who[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-pinned-excerpt[b-jolcosm62n] {
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    .board-thread[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-comment[b-jolcosm62n] {
        column-gap: var(--space-2);
        margin-left: calc(var(--thread-depth, 0) * 0.5rem);
        padding: var(--space-2) var(--space-3);
    }

    .board-comment-main[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-comment-head[b-jolcosm62n] {
        column-gap: var(--space-2);
        row-gap: var(--space-1);
    }

    .board-actions[b-jolcosm62n] {
        gap: var(--space-1);
    }

    /* ---- Votes ---- */

    .board-vote[b-jolcosm62n] {
        min-height: var(--touch-min);
        min-width: var(--touch-min);
        font-size: var(--text-2xs);
        gap: var(--space-1);
        padding: 0.2rem var(--space-2);
    }

    .board-vote-count[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-main[b-jolcosm62n]  .board-voted-by {
        font-size: var(--text-2xs);
    }

    .board-vote-board[b-jolcosm62n] {
        gap: var(--space-3);
    }

    .board-vote-row[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-vote-name[b-jolcosm62n] {
        font-size: var(--text-sm);
    }

    .board-vote-tally[b-jolcosm62n] {
        font-size: 0.8125rem;
    }

    .board-vote-excerpt[b-jolcosm62n] {
        font-size: var(--text-xs);
    }

    .board-vote-voters[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    /* ---- Composer ---- */

    /*
     * Always-visible composer above the tab bar. The workspace is the scrollport,
     * so in-flow `sticky` at the end of the thread would leave the composer below
     * the fold while reading. Fixed, with the tabbar unstuck above, is how the
     * composer wins that stack. Padding on `.board-main` keeps the last comment
     * from sitting under it.
     */
    [b-jolcosm62n] .board-composer {
        background: var(--color-background);
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -0.75rem 1.5rem color-mix(in srgb, var(--color-background) 88%, transparent);
        left: max(var(--space-2), env(safe-area-inset-left, 0px));
        margin-bottom: 0;
        position: fixed;
        right: max(var(--space-2), env(safe-area-inset-right, 0px));
        z-index: 15;
    }

    [b-jolcosm62n] .board-composer .panel-header {
        min-height: 0;
        padding: var(--space-2) var(--space-3);
    }

    [b-jolcosm62n] .board-composer .panel-kicker {
        display: none;
    }

    [b-jolcosm62n] .board-composer .panel-title {
        font-size: 0.75rem;
    }

    [b-jolcosm62n] .board-composer .panel-body {
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .board-main[b-jolcosm62n] {
        padding-bottom: 11rem;
    }

    .board-composer-top[b-jolcosm62n] {
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .board-reply-chip[b-jolcosm62n] {
        font-size: var(--text-2xs);
        gap: var(--space-1);
        padding: 0.2rem var(--space-2);
    }

    .board-composer-input[b-jolcosm62n] {
        font-size: 16px;
        font-size: var(--text-control-min, 16px);
        min-height: 3.25rem;
    }

    .board-composer-actions[b-jolcosm62n] {
        gap: var(--space-2);
        margin-top: var(--space-2);
    }

    .board-actions[b-jolcosm62n] {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        overflow-x: visible;
    }

    /* ---- Rail ---- */

    .board-rail-card[b-jolcosm62n] {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .board-rail-title[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-rail-who[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-rail-strong[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-rail-note[b-jolcosm62n] {
        font-size: var(--text-xs);
        line-height: 1.45;
    }

    .board-rail-excerpt[b-jolcosm62n] {
        font-size: var(--text-xs);
        line-height: 1.45;
    }

    .board-people[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-person-name[b-jolcosm62n] {
        font-size: var(--text-sm);
    }

    .board-person-count[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    /* ---- Plan ---- */

    .board-plan[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-plan-head[b-jolcosm62n] {
        gap: var(--space-1);
    }

    .board-plan-title[b-jolcosm62n] {
        font-size: 0.9375rem;
    }

    .board-plan-meta[b-jolcosm62n] {
        font-size: var(--text-2xs);
        gap: var(--space-2);
    }

    .board-plan-doc[b-jolcosm62n] {
        font-size: var(--text-sm);
    }

    .board-plan-h1[b-jolcosm62n] {
        font-size: 0.875rem;
    }

    .board-plan-h2[b-jolcosm62n] {
        font-size: 0.8125rem;
    }

    .board-plan-h3[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-plan-p[b-jolcosm62n],
    .board-plan-list li[b-jolcosm62n] {
        line-height: 1.5;
    }

    .board-plan-pre[b-jolcosm62n] {
        font-size: var(--text-xs);
        padding: var(--space-2);
    }

    .board-plan-form[b-jolcosm62n] {
        gap: var(--space-2);
    }

    /* 24rem of textarea is more than a phone viewport; it still resizes. */
    .board-plan-editor[b-jolcosm62n] {
        min-height: 9rem;
    }

    .board-plan-section[b-jolcosm62n] {
        gap: var(--space-2);
    }

    .board-plan-work-item[b-jolcosm62n] {
        padding: var(--space-2) var(--space-3);
    }

    .board-plan-work-item h3[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-plan-work-item-note[b-jolcosm62n],
    .board-plan-complete[b-jolcosm62n],
    .board-plan-warning[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }

    .board-consensus-summary[b-jolcosm62n],
    .board-human-approval[b-jolcosm62n] {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }

    .board-plan-import[b-jolcosm62n] {
        padding: var(--space-3);
    }

    .board-plan-import h3[b-jolcosm62n] {
        font-size: 0.75rem;
    }

    .board-plan-import p[b-jolcosm62n],
    .board-plan-import-modes small[b-jolcosm62n] {
        font-size: var(--text-2xs);
    }
}

/* ------------------------------------------------- Familiar authorship

   A named agent carries one colour through the whole board: the badge, and the edge of any
   container holding something it wrote. The badge alone is easy to miss in a long thread, so
   the card says who is speaking before you read a word of it.

   Deliberately below the leading-solution and :target rules in source order, so an answer that
   is also the winning one, or the comment you jumped to, keeps the stronger signal. Authorship
   is context; those two are state. */
.board-index-item.is-familiar[b-jolcosm62n],
.board-comment.is-familiar[b-jolcosm62n] {
    border-color: var(--color-familiar);
    box-shadow: 0 0 1rem var(--color-familiar-glow);
}

.board-comment.is-familiar[b-jolcosm62n]::before {
    background: var(--color-familiar);
}

.board-lead.is-familiar[b-jolcosm62n] {
    --panel-border: var(--color-familiar);
    --panel-accent: var(--color-familiar);
    box-shadow: 0 0 1.25rem var(--color-familiar-glow);
}

.board-headline.is-familiar[b-jolcosm62n] {
    border-left: 0.15rem solid var(--color-familiar);
    padding-left: var(--space-3);
}

/* State beats authorship: a familiar's comment that is also the leading solution, or the one
   you followed a link to, keeps the colour that answers "why am I looking at this". */
.board-comment.is-familiar.is-leading-solution[b-jolcosm62n] {
    border-color: var(--color-success);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--color-success) 22%, transparent);
}

.board-comment.is-familiar.is-leading-solution[b-jolcosm62n]::before {
    background: var(--color-success);
}

.board-comment.is-familiar:target[b-jolcosm62n] {
    border-color: var(--color-accent);
    box-shadow: 0 0 1.5rem var(--color-accent-glow);
}

/* --------------------------------------------------------------------------
   Mobile board task flow redesign

   Phones should open on the conversations, not on a wall of controls. The
   composer becomes an intentional disclosure, filters use the available width
   instead of one full-width row per field, the duplicate top pager disappears,
   and destructive/export actions move behind a lightweight row menu.
   -------------------------------------------------------------------------- */

/* The composer collapses at every width, not only on a phone. This rule lived inside the
   48rem media query, so on a desktop the form was permanently expanded above the list and the
   180 discussions the page exists to show started below the fold. */
.board-compose-state:not(:checked) + .board-compose-toggle + .board-compose-shell[b-jolcosm62n] {
    display: none;
}

.board-compose-state[b-jolcosm62n] {
    block-size: 1px;
    inline-size: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* The control that opens the composer. Its styling lived inside the 48rem media query, so at
   desktop width it was display:none and the composer had no toggle at all - which is why the
   form simply stood open above the list. */
.board-index-menu[b-jolcosm62n] {
    display: none;
}

.board-compose-toggle[b-jolcosm62n] {
    --notch: var(--notch-sm);
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-success);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-3);
    min-height: 3rem;
    padding: var(--space-2) var(--space-3);
    user-select: none;
    width: 100%;
}
.board-compose-toggle-copy[b-jolcosm62n] {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}
.board-compose-toggle-copy > span[b-jolcosm62n] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.board-compose-toggle-copy strong[b-jolcosm62n] {
    color: var(--color-success);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-stretch: 75%;
    letter-spacing: var(--tracking-display);
    overflow-wrap: anywhere;
    text-transform: uppercase;
}
.board-compose-toggle-action[b-jolcosm62n] {
    color: var(--color-text-muted);
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.board-compose-toggle-action[b-jolcosm62n]::after {
    content: ' +';
    color: var(--color-success);
}
.board-compose-state:checked + .board-compose-toggle[b-jolcosm62n] {
    background: color-mix(in srgb, var(--color-success-soft) 55%, var(--color-surface-raised));
}
.board-compose-state:checked + .board-compose-toggle .board-compose-toggle-action[b-jolcosm62n] {
    font-size: 0;
}
.board-compose-state:checked + .board-compose-toggle .board-compose-toggle-action[b-jolcosm62n]::after {
    content: 'Close −';
    font-size: var(--text-2xs);
}


.board-pagination[b-jolcosm62n] {
    min-width: 0;
}

@media (max-width: 48rem) {
    /* Four page-level tools become a compact 2x2 command grid instead of a tall
       stack that can consume the first phone viewport by itself. */
    [b-jolcosm62n] .page-heading-toolbar .board-page-actions {
        display: grid;
        gap: var(--space-2);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding: 0;
        width: 100%;
    }

    [b-jolcosm62n] .page-heading-toolbar .board-page-actions .button {
        justify-content: center;
        line-height: 1.15;
        min-width: 0;
        padding-inline: var(--space-2);
        text-align: center;
        white-space: normal;
        width: 100%;
    }

    /* Creating a post is important, but not the thing most visits are for. Keep
       it one tap away and let the discussion list own the initial viewport. */



















    .board-compose-shell[b-jolcosm62n] {
        margin-bottom: var(--space-3);
    }

    .board-compose-shell[b-jolcosm62n]  .panel {
        margin-bottom: 0;
        margin-top: 0;
    }

    .board-compose-shell[b-jolcosm62n]  .panel-body {
        padding: var(--space-3);
    }

    .board-compose-shell textarea.field-control[b-jolcosm62n] {
        line-height: 1.45;
        min-height: 6.5rem;
        padding-block: var(--space-2);
    }

    .board-compose-shell .form-actions .button[b-jolcosm62n] {
        width: 100%;
    }

    /* The pager above the list duplicated the one at the bottom and pushed the
       first actual conversation down. On mobile the bottom pager is sufficient. */
    .board-pagination-top[b-jolcosm62n] {
        display: none;
    }

    .board-pagination-bottom[b-jolcosm62n] {
        margin-top: var(--space-3);
    }

    /* Conversation cards become scanning rows. Keep identity first, give the
       preview another line, and keep counts attached to the content column. */
    .board-index-item[b-jolcosm62n] {
        padding: var(--space-3);
    }

    .board-index-link[b-jolcosm62n] {
        align-items: start;
        column-gap: var(--space-2);
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-2);
    }

    .board-author-meta[b-jolcosm62n] {
        align-items: center;
    }

    .board-time[b-jolcosm62n] {
        flex-basis: 100%;
    }

    .board-excerpt[b-jolcosm62n] {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .board-index-counts[b-jolcosm62n] {
        gap: var(--space-1);
        grid-column: 2;
        justify-self: start;
    }

    /* Export/Delete are secondary maintenance actions, not the primary mobile
       task. They stay fully available behind a per-row Actions disclosure. */
    .board-index-actions-desktop[b-jolcosm62n] {
        display: none;
    }

    .board-index-menu[b-jolcosm62n] {
        border-top: var(--hairline) solid var(--color-border);
        display: block;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
    }

    .board-index-menu summary[b-jolcosm62n] {
        align-items: center;
        color: var(--color-text-subtle);
        cursor: pointer;
        display: flex;
        font-family: var(--font-display);
        font-size: var(--text-2xs);
        font-stretch: 75%;
        font-weight: 700;
        gap: var(--space-1);
        justify-content: flex-end;
        letter-spacing: var(--tracking-label);
        list-style: none;
        margin-left: auto;
        min-height: var(--touch-min);
        text-transform: uppercase;
        width: max-content;
    }

    .board-index-menu summary[b-jolcosm62n]::-webkit-details-marker {
        display: none;
    }

    .board-index-menu summary[b-jolcosm62n]::before {
        color: var(--color-accent-text);
        content: '•••';
        letter-spacing: 0.08em;
    }

    .board-index-menu[open] summary[b-jolcosm62n] {
        color: var(--color-text);
    }

    .board-index-menu-actions[b-jolcosm62n] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        justify-content: flex-end;
        margin-top: var(--space-1);
    }
}

/* AIWO-239 plan revision diff */
.board-consensus-mark.is-stale[b-jolcosm62n] { color: var(--color-warning, #f0b429); }
.board-plan-diff[b-jolcosm62n] {
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0;
    padding: var(--space-4);
}
.board-plan-diff-head[b-jolcosm62n],
.board-plan-diff-change > header[b-jolcosm62n],
.board-plan-diff-summary[b-jolcosm62n],
.board-plan-diff-selectors[b-jolcosm62n] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
}
.board-plan-diff-head h3[b-jolcosm62n], .board-plan-diff-change strong[b-jolcosm62n] { margin: 0; }
.board-plan-diff-selectors label[b-jolcosm62n] {
    color: var(--color-text-subtle);
    display: grid;
    font-size: var(--font-size-label);
    gap: var(--space-1);
}
.board-plan-diff-list[b-jolcosm62n] { display: grid; gap: var(--space-3); }
.board-plan-diff-change[b-jolcosm62n] {
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
}
.board-plan-diff-change > header[b-jolcosm62n] { justify-content: flex-start; }
.board-plan-diff-columns[b-jolcosm62n] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.board-plan-diff-columns pre[b-jolcosm62n] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    margin: var(--space-1) 0 0;
    max-height: 22rem;
    overflow: auto;
    padding: var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
}
.board-plan-diff-label[b-jolcosm62n], .board-plan-diff-badge[b-jolcosm62n], .board-plan-diff-order[b-jolcosm62n] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.board-plan-diff-badge[b-jolcosm62n] { border: var(--hairline) solid var(--color-border-strong); padding: 0.15rem 0.4rem; }
.board-plan-diff-badge.is-added[b-jolcosm62n] { color: var(--color-success); }
.board-plan-diff-badge.is-removed[b-jolcosm62n] { color: var(--color-danger, #ff4d6d); }
.board-plan-diff-badge.is-modified[b-jolcosm62n] { color: var(--color-accent-text); }
.board-plan-diff-badge.is-moved[b-jolcosm62n] { color: var(--color-warning, #f0b429); }
.board-plan-diff-empty[b-jolcosm62n] { color: var(--color-text-subtle); margin: 0; }
.board-plan-diff-summary[b-jolcosm62n] { justify-content: flex-start; margin: 0; }
@media (max-width: 760px) {
    .board-plan-diff-columns[b-jolcosm62n] { grid-template-columns: 1fr; }
    .board-plan-diff-selectors[b-jolcosm62n] { align-items: stretch; width: 100%; }
    .board-plan-diff-selectors label[b-jolcosm62n] { flex: 1 1 9rem; }
}
/* /Components/Pages/Agents.razor.rz.scp.css */
.agent-directory-identity[b-x0bbznl4om] {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.agent-directory-copy .record-title[b-x0bbznl4om],
.agent-mobile-name[b-x0bbznl4om] {
    color: var(--agent-accent, inherit);
}

.agent-directory-copy[b-x0bbznl4om] {
    flex: 1 1 auto;
    min-width: 0;
}

.agent-mobile-list[b-x0bbznl4om] {
    display: none;
}

@media (max-width: 52rem) {
    .agent-desktop-table[b-x0bbznl4om] {
        display: none;
    }

    .agent-mobile-list[b-x0bbznl4om] {
        display: grid;
        gap: var(--space-3);
    }

    .agent-mobile-card[b-x0bbznl4om] {
        --notch: var(--notch-sm);
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
        min-width: 0;
        padding: var(--space-4);
        position: relative;
    }

    .agent-mobile-card[b-x0bbznl4om]::before {
        background: var(--color-accent);
        content: "";
        inset: 0 auto 0 0;
        position: absolute;
        width: 2px;
    }

    .agent-mobile-header[b-x0bbznl4om] {
        align-items: center;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: auto minmax(0, 1fr);
        min-width: 0;
    }

    .agent-mobile-identity[b-x0bbznl4om] {
        min-width: 0;
    }

    .agent-mobile-name[b-x0bbznl4om] {
        display: block;
        font-size: 0.95rem;
        line-height: 1.2;
        overflow-wrap: normal;
        word-break: normal;
    }

    .agent-mobile-model[b-x0bbznl4om] {
        align-items: baseline;
        color: var(--color-text-faint);
        display: flex;
        flex-wrap: wrap;
        font-size: 0.72rem;
        gap: var(--space-1) var(--space-2);
        margin-top: var(--space-1);
        min-width: 0;
    }

    .agent-mobile-model span[b-x0bbznl4om] {
        color: var(--color-text-muted);
        font-weight: 600;
    }

    .agent-mobile-model code[b-x0bbznl4om] {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .agent-mobile-description[b-x0bbznl4om] {
        color: var(--color-text-faint);
        display: -webkit-box;
        font-size: 0.75rem;
        line-height: 1.45;
        margin-top: var(--space-3);
        overflow: hidden;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .agent-mobile-chips[b-x0bbznl4om] {
        align-items: center;
        border-top: var(--hairline) solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }

    .agent-mobile-meta[b-x0bbznl4om] {
        display: grid;
        gap: var(--space-2) var(--space-4);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: var(--space-3) 0 0;
        min-width: 0;
    }

    .agent-mobile-meta > div[b-x0bbznl4om] {
        min-width: 0;
    }

    .agent-mobile-meta dt[b-x0bbznl4om] {
        color: var(--color-text-faint);
        font-family: var(--font-display);
        font-size: 0.58rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        line-height: 1.3;
        text-transform: uppercase;
    }

    .agent-mobile-meta dd[b-x0bbznl4om] {
        color: var(--color-text);
        font-size: 0.75rem;
        line-height: 1.35;
        margin: var(--space-1) 0 0;
        min-width: 0;
        overflow-wrap: break-word;
    }
}

@media (max-width: 30rem) {
    .agent-mobile-card[b-x0bbznl4om] {
        padding: var(--space-3);
    }

    .agent-mobile-header[b-x0bbznl4om] {
        gap: var(--space-2);
    }

    .agent-mobile-name[b-x0bbznl4om] {
        font-size: 0.875rem;
    }

    .agent-mobile-model[b-x0bbznl4om],
    .agent-mobile-description[b-x0bbznl4om],
    .agent-mobile-meta dd[b-x0bbznl4om] {
        font-size: 0.6875rem;
    }

    .agent-mobile-meta[b-x0bbznl4om] {
        gap: var(--space-2) var(--space-3);
    }
}
/* /Components/Pages/AgentWorkspace.razor.rz.scp.css */
.aw-shell[b-lsdu0woqq8]{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1rem;min-height:65vh;color:var(--text-primary,#172033)}.aw-history[b-lsdu0woqq8],.aw-main[b-lsdu0woqq8]{border:1px solid var(--border-color,#dce1ea);border-radius:1rem;background:var(--surface,#fff)}.aw-history[b-lsdu0woqq8]{display:flex;flex-direction:column;gap:.7rem;padding:1rem;max-height:80vh;overflow:auto}.aw-history label[b-lsdu0woqq8]{font-size:.8rem;font-weight:600}.aw-history-item[b-lsdu0woqq8]{display:flex;flex-direction:column;gap:.3rem;text-align:left;border:0;background:transparent;padding:.8rem;border-radius:.6rem;color:inherit}.aw-history-item span[b-lsdu0woqq8],.aw-history-item small[b-lsdu0woqq8]{font-size:.75rem;color:var(--text-muted,#627086)}.aw-history-item:hover[b-lsdu0woqq8],.aw-history-item.selected[b-lsdu0woqq8],.aw-tabs .selected[b-lsdu0woqq8]{background:var(--surface-muted,#edf2ff)}.aw-main[b-lsdu0woqq8]{min-width:0;display:flex;flex-direction:column;overflow:hidden}.aw-tabs[b-lsdu0woqq8]{display:flex;overflow-x:auto;gap:.25rem;border-bottom:1px solid var(--border-color,#dce1ea);padding:.5rem}.aw-tab[b-lsdu0woqq8]{display:flex;flex-shrink:0}.aw-tabs button[b-lsdu0woqq8]{border:0;background:transparent;color:inherit;padding:.65rem;border-radius:.5rem;text-align:left}.aw-tab small[b-lsdu0woqq8]{display:block;font-size:.7rem}.aw-close[b-lsdu0woqq8]{font-size:1.2rem}.aw-session[b-lsdu0woqq8]{display:flex;align-items:center;gap:1rem;padding:1.2rem;border-bottom:1px solid var(--border-color,#dce1ea)}.aw-session>div[b-lsdu0woqq8]{flex:1;min-width:0}.aw-session h2[b-lsdu0woqq8]{font-size:1.1rem;margin:0 0 .4rem}.aw-session p[b-lsdu0woqq8]{margin:0 0 .5rem;font-size:.85rem}.aw-session code[b-lsdu0woqq8]{font-size:.75rem;overflow-wrap:anywhere}.aw-state[b-lsdu0woqq8]{padding:.3rem .6rem;border-radius:2rem;background:#e9efff;color:#24417e;font-size:.75rem}.aw-note[b-lsdu0woqq8]{font-size:.85rem;padding:.7rem 1.2rem;margin:0;background:var(--surface-muted,#f3f6fb);overflow-wrap:anywhere}.aw-transcript[b-lsdu0woqq8]{padding:1.5rem;min-height:18rem;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:1rem}.aw-turn[b-lsdu0woqq8]{display:flex;flex-direction:column;gap:.7rem}.aw-message[b-lsdu0woqq8]{max-width:90%;padding:.8rem 1rem;border-radius:.9rem;background:var(--surface-muted,#f2f5f9);overflow-wrap:anywhere}.aw-message.user[b-lsdu0woqq8]{margin-left:auto;background:#e9efff;color:#18345f}.aw-message small[b-lsdu0woqq8]{display:block;font-weight:650;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}.aw-message-text[b-lsdu0woqq8]{white-space:pre-wrap;line-height:1.6}.aw-message code[b-lsdu0woqq8]{font-size:.8rem}.aw-output[b-lsdu0woqq8]{font-size:.8rem;color:var(--text-muted,#627086)}.aw-output pre[b-lsdu0woqq8]{white-space:pre-wrap;max-height:25rem;overflow:auto}.aw-working[b-lsdu0woqq8]{font-size:.85rem;color:var(--text-muted,#627086)}.aw-composer[b-lsdu0woqq8]{margin-top:auto;border-top:1px solid var(--border-color,#dce1ea);padding:1.2rem}.aw-composer label[b-lsdu0woqq8],.aw-new>label[b-lsdu0woqq8]{display:block;margin-bottom:.5rem;font-weight:600}textarea[b-lsdu0woqq8]{width:100%;resize:vertical;border:1px solid var(--border-color,#cbd2df);border-radius:.7rem;padding:.8rem;color:inherit;background:var(--surface,#fff);font:inherit;line-height:1.5}.aw-compose-footer[b-lsdu0woqq8]{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.75rem}.aw-compose-footer small[b-lsdu0woqq8]{max-width:38rem;color:var(--text-muted,#627086);font-size:.8rem}.aw-new[b-lsdu0woqq8]{padding:2rem;max-width:65rem;width:100%;margin:auto}.aw-new h2[b-lsdu0woqq8]{font-size:1.5rem;letter-spacing:-.025em}.aw-new>p[b-lsdu0woqq8]{color:var(--text-muted,#627086)}.aw-settings[b-lsdu0woqq8]{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}.aw-auth[b-lsdu0woqq8]{padding:1rem;border:1px solid var(--border-color,#dce1ea);border-radius:.7rem;margin:1rem 0;font-size:.85rem}.aw-auth label[b-lsdu0woqq8],.aw-auth small[b-lsdu0woqq8]{display:block;margin-top:.7rem}.aw-auth small[b-lsdu0woqq8]{color:var(--text-muted,#627086)}button[b-lsdu0woqq8]{cursor:pointer}button:disabled[b-lsdu0woqq8]{cursor:default;opacity:.6}button:focus-visible[b-lsdu0woqq8],select:focus-visible[b-lsdu0woqq8],textarea:focus-visible[b-lsdu0woqq8],input:focus-visible[b-lsdu0woqq8]{outline:3px solid #527ad4;outline-offset:2px}@media(max-width:900px){.aw-shell[b-lsdu0woqq8]{grid-template-columns:1fr}.aw-history[b-lsdu0woqq8]{max-height:13rem}.aw-settings[b-lsdu0woqq8]{grid-template-columns:1fr}.aw-new[b-lsdu0woqq8]{padding:1rem}.aw-session[b-lsdu0woqq8]{flex-wrap:wrap}.aw-compose-footer[b-lsdu0woqq8]{align-items:stretch;flex-direction:column}.aw-message[b-lsdu0woqq8]{max-width:100%}.aw-transcript[b-lsdu0woqq8]{padding:1rem}.aw-main[b-lsdu0woqq8]{min-height:60vh}}
/* /Components/Pages/AgentWorkspaceFilesPanel.razor.rz.scp.css */
.aw-files[b-qhpwdvq72e]{margin:1rem 0;border:1px solid var(--border-color,#dce1ea);border-radius:1rem;background:var(--surface,#fff);overflow:hidden}.aw-files-head[b-qhpwdvq72e],.aw-file-toolbar[b-qhpwdvq72e]{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.65rem 1rem}.aw-files-head[b-qhpwdvq72e]{border-bottom:1px solid var(--border-color,#dce1ea)}.aw-files-head h2[b-qhpwdvq72e]{font-size:1.05rem;margin:0}.aw-files small[b-qhpwdvq72e],.aw-file-note[b-qhpwdvq72e]{font-size:.78rem;color:var(--text-muted,#627086)}.aw-file-note[b-qhpwdvq72e],.aw-file-error[b-qhpwdvq72e]{margin:.5rem 1rem;padding:.6rem .7rem;border-radius:.4rem}.aw-file-error[b-qhpwdvq72e]{border:1px solid #b76060}.aw-file-layout[b-qhpwdvq72e]{display:grid;grid-template-columns:minmax(12rem,25%) minmax(0,1fr);min-height:20rem}.aw-file-tree[b-qhpwdvq72e]{padding:.8rem;border-right:1px solid var(--border-color,#dce1ea);display:flex;flex-direction:column;gap:.4rem;max-height:65vh;overflow:auto}.aw-file-entry[b-qhpwdvq72e]{text-align:left;border:0;background:transparent;color:inherit;border-radius:.4rem;padding:.4rem;overflow-wrap:anywhere}.aw-file-entry:hover[b-qhpwdvq72e],.aw-file-entry:focus-visible[b-qhpwdvq72e]{background:var(--surface-muted,#edf2ff)}.aw-file-tree label[b-qhpwdvq72e]{font-size:.8rem;font-weight:600;margin-top:1rem}.aw-file-main[b-qhpwdvq72e]{min-width:0;padding:.75rem}.aw-file-tabs[b-qhpwdvq72e]{display:flex;overflow-x:auto;border-bottom:1px solid var(--border-color,#dce1ea);gap:.4rem}.aw-file-tabs button[b-qhpwdvq72e]{background:var(--surface-muted,#f5f7fa);border:1px solid var(--border-color,#dce1ea);border-radius:.4rem;padding:.4rem .65rem;color:inherit}.aw-file-editor[b-qhpwdvq72e]{display:block;width:100%;min-height:17rem;font:13px/1.6 Consolas,'Cascadia Code',monospace;tab-size:4;background:var(--surface,#fff);color:var(--text-primary,#172033);white-space:pre;overflow:auto}.aw-file-preview[b-qhpwdvq72e]{border-top:1px solid var(--border-color,#dce1ea);padding:.5rem 0}.aw-file-preview pre[b-qhpwdvq72e],.aw-file-diff pre[b-qhpwdvq72e]{overflow:auto;max-height:26rem;padding:1rem;background:var(--surface-muted,#f5f7fa);font:12px/1.55 Consolas,monospace}.aw-file-syntax[b-qhpwdvq72e]{white-space:pre}.aw-file-diff h3[b-qhpwdvq72e]{font-size:.9rem}.aw-file-added[b-qhpwdvq72e]{background:#174b2b20;color:var(--text-primary,#172033)}.aw-file-removed[b-qhpwdvq72e]{background:#8e222220;color:var(--text-primary,#172033)}.aw-syntax-keyword[b-qhpwdvq72e]{color:#8655d9;font-weight:650}.aw-syntax-comment[b-qhpwdvq72e]{color:#66896e}.aw-syntax-string[b-qhpwdvq72e]{color:#b36b15}@media(max-width:880px){.aw-file-layout[b-qhpwdvq72e]{grid-template-columns:1fr}.aw-file-tree[b-qhpwdvq72e]{border-right:0;border-bottom:1px solid var(--border-color,#dce1ea);max-height:14rem}.aw-files-head[b-qhpwdvq72e],.aw-file-toolbar[b-qhpwdvq72e]{align-items:flex-start;flex-direction:column}}
/* /Components/Pages/AttentionInbox.razor.rz.scp.css */
/* Attention inbox layout only. The metric row is the shared StatTile primitive now, so what
   is left here is the two board-decision buckets and the queue's prose cell.

   Every declaration reads a token that exists in app.css. The earlier pass reached for
   --border-subtle / --surface-raised / --radius-lg / --text-muted, none of which this theme
   defines, so the buckets and cards drew no border, no fill, and no corner at all. */

.attention-generated[b-v0leb6nooy] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

/* The reason automation stopped: the substance of the row, so it keeps body colour rather
   than dropping to the faint metadata step used by the lines around it. */
.attention-reason[b-v0leb6nooy] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: var(--space-2) 0 0;
    max-width: 60ch;
}

.attention-table[b-v0leb6nooy] {
    min-width: 52rem;
}

.board-decision-grid[b-v0leb6nooy] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A bucket is a surface inside a panel, so it steps down to the field fill and takes the
   card silhouette rather than restating the panel's own. */
.board-decision-bucket[b-v0leb6nooy] {
    --notch: var(--notch-md);
    align-content: start;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
}

.board-decision-bucket > header[b-v0leb6nooy] {
    align-items: flex-start;
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding-bottom: var(--space-3);
}

.board-decision-bucket h3[b-v0leb6nooy] {
    font-size: 0.95rem;
    margin: 0;
}

.board-decision-bucket .panel-kicker[b-v0leb6nooy] {
    margin: 0 0 var(--space-1);
}

.board-decision-list[b-v0leb6nooy] {
    display: grid;
    gap: var(--space-3);
}

.board-decision-card[b-v0leb6nooy] {
    --notch: var(--notch-sm);
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-left: 2px solid var(--color-info);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
}

.board-decision-card-heading[b-v0leb6nooy] {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.board-decision-card-heading strong[b-v0leb6nooy] {
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: break-word;
}

.board-decision-facts[b-v0leb6nooy] {
    display: grid;
    gap: var(--space-2) var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.board-decision-facts > div[b-v0leb6nooy] {
    min-width: 0;
}

.board-decision-facts dt[b-v0leb6nooy] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    line-height: 1.3;
    text-transform: uppercase;
}

.board-decision-facts dd[b-v0leb6nooy] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: var(--space-1) 0 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.board-decision-card .form-actions[b-v0leb6nooy] {
    justify-content: flex-start;
}

@media (max-width: 62rem) {
    .board-decision-grid[b-v0leb6nooy] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .board-decision-facts[b-v0leb6nooy] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Connections.razor.rz.scp.css */
/* Connections page.
   Only the pieces the design system does not already own: the return link, the directory
   toolbar and its identity cell, the provider chooser, and the probe read-out. Everything
   else on the page is Panel, metric-grid, data-table, tabs, form-section, and check-grid
   straight out of app.css. Colours and spacing come from tokens; no literals. */

.conn-back[b-cmqdsyo9tv] {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-text-subtle);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-stretch: 75%;
    font-weight: 700;
    gap: var(--space-2);
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.conn-back:hover[b-cmqdsyo9tv] {
    color: var(--color-accent-text);
}

/* Record header meta: the few facts worth reading before choosing a section. */
.conn-record-meta[b-cmqdsyo9tv] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.conn-record-meta span[b-cmqdsyo9tv] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 0.35rem) 0, 100% 0.35rem, 100% 100%, 0.35rem 100%, 0 calc(100% - 0.35rem));
    color: var(--color-text-muted);
    font-size: 0.74rem;
    padding: 0.34rem 0.6rem;
}

/* Test-connection read-out: the ordered steps the probe actually performs, each carrying its own
   verdict, so a step that was never attempted cannot be mistaken for a second fault. */
.probe-steps[b-cmqdsyo9tv] {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.probe-step[b-cmqdsyo9tv] {
    --probe-tone: var(--color-text-faint);
    align-items: start;
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1.4rem minmax(0, 1fr);
    padding: var(--space-3) 0;
}

.probe-step:first-child[b-cmqdsyo9tv] {
    border-top: 0;
    padding-top: 0;
}

.probe-step[data-status="ok"][b-cmqdsyo9tv] { --probe-tone: var(--color-success); }
.probe-step[data-status="failed"][b-cmqdsyo9tv] { --probe-tone: var(--color-danger); }

.probe-step-mark[b-cmqdsyo9tv] {
    color: var(--probe-tone);
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

.probe-step-copy[b-cmqdsyo9tv] {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.probe-step-copy strong[b-cmqdsyo9tv] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.probe-step-status[b-cmqdsyo9tv] {
    color: var(--probe-tone);
    font-size: 0.72rem;
}

.probe-step-copy small[b-cmqdsyo9tv] {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Directory toolbar: type filter on the left, search on the right, one row on desktop. */
.conn-toolbar[b-cmqdsyo9tv] {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.conn-filters[b-cmqdsyo9tv] {
    flex: 1 1 22rem;
    margin-bottom: 0;
}

.conn-filters .tab small[b-cmqdsyo9tv] {
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: 0.62rem;
    margin-left: var(--space-2);
    padding: 0.1rem 0.34rem;
}

.conn-filters .tab.active small[b-cmqdsyo9tv] {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
}

/* Lifecycle is a filter control now, not a second tab row. */
.conn-lifecycle-filter[b-cmqdsyo9tv] {
    flex: 0 1 12rem;
    min-width: 9rem;
}

.conn-search[b-cmqdsyo9tv] {
    flex: 0 1 18rem;
    min-width: 12rem;
}

/* Identity cell: the type is a mark beside the name instead of its own column. */
.conn-identity[b-cmqdsyo9tv] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.conn-glyph[b-cmqdsyo9tv] {
    --notch: 0.3rem;
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-border-strong);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    color: var(--color-text-subtle);
    display: inline-flex;
    flex: none;
    font-size: 0.86rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.conn-glyph[data-kind="sql"][b-cmqdsyo9tv] {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.conn-glyph[data-kind="ftp"][b-cmqdsyo9tv] {
    border-color: var(--color-info);
    color: var(--color-info);
}

.conn-glyph[data-kind="email"][b-cmqdsyo9tv] {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.conn-identity-copy[b-cmqdsyo9tv] {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

/* The name is the primary way into a connection; Manage is the same destination. */
.conn-name[b-cmqdsyo9tv] {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    justify-self: start;
    padding: 0;
    text-align: left;
}

.conn-name:disabled[b-cmqdsyo9tv] {
    cursor: default;
    opacity: 0.7;
}

.conn-identity-copy small[b-cmqdsyo9tv] {
    color: var(--color-text-faint);
    font-size: 0.68rem;
}

/* Provider chooser: one card per thing AIWO can reach, each with its own primary action. */
.conn-chooser[b-cmqdsyo9tv] {
    display: block;
    scroll-margin-top: var(--space-7);
}

.provider-grid[b-cmqdsyo9tv] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.provider-card[b-cmqdsyo9tv] {
    --notch: var(--notch-md);
    --provider-accent: var(--color-accent);
    background:
        linear-gradient(90deg, var(--provider-accent) 0 3.5rem, transparent 3.5rem) top left / 100% 2px no-repeat,
        linear-gradient(152deg, var(--color-surface-raised), var(--color-surface));
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    display: grid;
    gap: var(--space-3);
    grid-template-rows: auto auto 1fr auto auto;
    min-width: 0;
    padding: var(--space-5);
    transition: border-color var(--transition-fast);
}

.provider-card[data-kind="ftp"][b-cmqdsyo9tv] { --provider-accent: var(--color-info); }
.provider-card[data-kind="email"][b-cmqdsyo9tv] { --provider-accent: var(--color-purple); }

.provider-card:hover[b-cmqdsyo9tv] {
    border-color: var(--provider-accent);
}

.provider-glyph[b-cmqdsyo9tv] {
    color: var(--provider-accent);
    font-size: 1.3rem;
    line-height: 1;
}

.provider-card h3[b-cmqdsyo9tv] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0;
    text-transform: uppercase;
}

.provider-card p[b-cmqdsyo9tv] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1000px) {
    .provider-grid[b-cmqdsyo9tv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .conn-toolbar[b-cmqdsyo9tv] {
        align-items: stretch;
        flex-direction: column;
    }

    .conn-search[b-cmqdsyo9tv] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Row label above each metric-grid, so the tiles read as three grouped questions
   (what is the work doing / who owns it / is the fleet up) instead of one long strip. */
.dashboard-row-label[b-5p6geeanmd] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    margin: var(--space-5) 0 0;
    text-transform: uppercase;
}

/* Both of these are direct children of .page-container, which spaces its top-level blocks
   by a uniform gap. A label belongs to the grid beneath it, so it keeps the gap above and
   gives it up below. Two classes out-specify the container's rhythm rule. */
.dashboard-row-label + .metric-grid[b-5p6geeanmd] {
    margin-top: var(--space-2);
}

/* The shared metric grid steps 4 → 3 → 2 columns. Three is fine for a continuous strip of
   tiles, but each row here is a group of exactly four, and three columns would leave a 3+1
   orphan. Skip that tier: four, then two, both of which divide evenly. app.css never goes
   below two, so this holds all the way down. */
@media (max-width: 88rem) {
    .dashboard-row-label + .metric-grid[b-5p6geeanmd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.golive-strip[b-5p6geeanmd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3);
}

/* Was written against a design-system generation that no longer exists. Five of its tokens
   (subtle border, large radius, raised surface, strong text, muted text) had since been
   renamed, so every declaration using them was invalid at computed-value time and the cards
   rendered with no background, square corners, and a currentColor border. Now on current
   tokens and the same die-cut language as .panel. */
.golive-card[b-5p6geeanmd] {
    --notch: var(--notch-sm);
    background: linear-gradient(152deg, var(--color-surface-raised), var(--color-surface));
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
}

.golive-card strong[b-5p6geeanmd] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.45rem;
    font-stretch: 82%;
    line-height: 1.1;
}

.golive-name[b-5p6geeanmd] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.golive-name:hover[b-5p6geeanmd] {
    color: var(--color-accent-text);
}

.golive-card span[b-5p6geeanmd] {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.dashboard-workqueue-mobile[b-5p6geeanmd] {
    display: none;
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .golive-strip[b-5p6geeanmd] {
        gap: var(--space-2);
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }

    .dashboard-row-label[b-5p6geeanmd] {
        margin-top: var(--space-4);
    }

    .golive-card[b-5p6geeanmd] {
        padding: var(--space-3) var(--space-4);
    }

    .golive-card strong[b-5p6geeanmd] {
        font-size: 1.125rem;
    }

    .golive-card span[b-5p6geeanmd] {
        font-size: 0.625rem;
    }
}

@media (max-width: 52rem) {
    .dashboard-workqueue-desktop[b-5p6geeanmd] {
        display: none;
    }

    .dashboard-workqueue-mobile[b-5p6geeanmd] {
        display: grid;
        gap: var(--space-2);
    }

    .dashboard-work-card[b-5p6geeanmd] {
        --notch: var(--notch-sm);
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
        min-width: 0;
        padding: var(--space-3);
    }

    .dashboard-work-card-top[b-5p6geeanmd] {
        align-items: center;
        display: flex;
        gap: var(--space-2);
        justify-content: space-between;
        min-width: 0;
    }

    .dashboard-work-card-top .record-key[b-5p6geeanmd] {
        font-size: 0.8125rem;
    }

    .dashboard-work-title[b-5p6geeanmd] {
        color: var(--color-text);
        display: -webkit-box;
        font-size: 0.8125rem;
        font-weight: 650;
        line-height: 1.35;
        margin-top: var(--space-2);
        overflow: hidden;
        overflow-wrap: normal;
        text-decoration: none;
        word-break: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .dashboard-work-title:hover[b-5p6geeanmd] {
        color: var(--color-accent-hover);
        text-decoration: underline;
    }

    .dashboard-work-meta[b-5p6geeanmd] {
        border-top: var(--hairline) solid var(--color-border);
        display: grid;
        gap: var(--space-2) var(--space-3);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: var(--space-3);
        padding-top: var(--space-2);
    }

    .dashboard-work-meta > div[b-5p6geeanmd] {
        min-width: 0;
    }

    .dashboard-work-meta span[b-5p6geeanmd] {
        color: var(--color-text-faint);
        display: block;
        font-family: var(--font-display);
        font-size: 0.5rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        margin-bottom: var(--space-1);
        text-transform: uppercase;
    }

    .dashboard-work-meta strong[b-5p6geeanmd],
    .dashboard-work-meta time[b-5p6geeanmd] {
        color: var(--color-text-muted);
        display: block;
        font-size: 0.625rem;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: break-word;
    }
}

@media (max-width: 30rem) {
    .dashboard-work-meta[b-5p6geeanmd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-work-meta > div:nth-child(2)[b-5p6geeanmd] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
/* /Components/Pages/MachineDetail.razor.rz.scp.css */
.machine-page[b-v8vby0aagw] {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.machine-back[b-v8vby0aagw] {
    align-items: center;
    color: var(--text-muted, #94a3b8);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.4rem;
    justify-self: start;
    text-decoration: none;
    transition: color 140ms ease, transform 140ms ease;
}

.machine-back:hover[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    transform: translateX(-2px);
}

.machine-hero[b-v8vby0aagw] {
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.14), transparent 35%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.98));
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 1.05rem;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    padding: clamp(1.15rem, 2.2vw, 1.7rem);
    position: relative;
}

.machine-hero-copy[b-v8vby0aagw] {
    min-width: 0;
}

.machine-eyebrow-row[b-v8vby0aagw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.machine-eyebrow[b-v8vby0aagw],
.section-kicker[b-v8vby0aagw],
.overview-label[b-v8vby0aagw] {
    color: #f472b6;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.machine-hero h1[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
    overflow-wrap: anywhere;
}

.machine-hero-copy > p[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0.65rem 0 0.85rem;
    max-width: 52rem;
}

.machine-hero-meta[b-v8vby0aagw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.machine-hero-meta > span[b-v8vby0aagw] {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.76rem;
    padding: 0.38rem 0.62rem;
}

.machine-hero-meta strong[b-v8vby0aagw] {
    color: var(--text-primary, #e2e8f0);
    margin-right: 0.2rem;
}

.machine-quick-actions[b-v8vby0aagw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.machine-alert[b-v8vby0aagw] {
    margin: 0;
}

.machine-tabs[b-v8vby0aagw] {
    background: rgba(8, 12, 22, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.9rem;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.4rem;
    scrollbar-width: thin;
}

.machine-tab[b-v8vby0aagw] {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: inline-flex;
    flex: 1 0 auto;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 0.8rem;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
    white-space: nowrap;
}

.machine-tab:hover[b-v8vby0aagw] {
    background: rgba(148, 163, 184, 0.06);
    color: var(--text-primary, #f8fafc);
}

.machine-tab.is-active[b-v8vby0aagw] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(139, 92, 246, 0.1));
    border-color: rgba(236, 72, 153, 0.28);
    color: var(--text-primary, #f8fafc);
    box-shadow: inset 0 -2px 0 #ec4899;
}

.machine-tab small[b-v8vby0aagw] {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    color: var(--text-muted, #cbd5e1);
    font-size: 0.65rem;
    line-height: 1;
    min-width: 1.25rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
}

.machine-tab.is-active small[b-v8vby0aagw] {
    background: rgba(236, 72, 153, 0.18);
    color: #f9a8d4;
}

.tab-glyph[b-v8vby0aagw] {
    font-size: 0.9rem;
    line-height: 1;
}

.machine-tab-panel[b-v8vby0aagw] {
    min-width: 0;
}

.machine-overview[b-v8vby0aagw] {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.9rem;
}

.overview-card[b-v8vby0aagw] {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.8rem;
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.9rem 1rem;
}

.overview-card strong[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    font-size: 1.28rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.overview-card small[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.74rem;
    line-height: 1.4;
}

.overview-layout[b-v8vby0aagw],
.security-layout[b-v8vby0aagw] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-section[b-v8vby0aagw],
.credential-reveal[b-v8vby0aagw],
.machine-diagnostics[b-v8vby0aagw] {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.9rem;
    min-width: 0;
}

.machine-section[b-v8vby0aagw] {
    padding: 1.1rem;
}

.section-heading[b-v8vby0aagw] {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.section-heading h2[b-v8vby0aagw],
.tab-heading h2[b-v8vby0aagw],
.credential-reveal h2[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    font-size: 1.08rem;
    letter-spacing: -0.015em;
    margin: 0.16rem 0 0;
}

.tab-heading[b-v8vby0aagw] {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0.2rem 0 0.85rem;
    padding: 0 0.15rem;
}

.tab-heading p[b-v8vby0aagw],
.section-copy[b-v8vby0aagw],
.credential-reveal p[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.84rem;
    line-height: 1.55;
}

.tab-heading p[b-v8vby0aagw] {
    margin: 0.4rem 0 0;
    max-width: 60rem;
}

.section-copy[b-v8vby0aagw] {
    margin: 0 0 0.85rem;
}

.machine-definition-grid[b-v8vby0aagw] {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.machine-definition-grid > div[b-v8vby0aagw] {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.68rem 0.15rem;
}

.machine-definition-grid > div:nth-child(-n + 2)[b-v8vby0aagw] {
    border-top: 0;
    padding-top: 0.05rem;
}

.machine-definition-grid > div:nth-child(odd)[b-v8vby0aagw] {
    padding-right: 0.85rem;
}

.machine-definition-grid > div:nth-child(even)[b-v8vby0aagw] {
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    padding-left: 0.85rem;
}

.machine-definition-grid .definition-wide[b-v8vby0aagw] {
    border-left: 0;
    grid-column: 1 / -1;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.machine-definition-grid dt[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
}

.machine-definition-grid dd[b-v8vby0aagw] {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.84rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.machine-definition-grid code[b-v8vby0aagw] {
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.machine-task-grid[b-v8vby0aagw] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-task-card[b-v8vby0aagw] {
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.7rem;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.28rem;
    min-height: 5.3rem;
    padding: 0.8rem;
    text-align: left;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.machine-task-card:hover[b-v8vby0aagw] {
    background: rgba(236, 72, 153, 0.055);
    border-color: rgba(236, 72, 153, 0.24);
    transform: translateY(-1px);
}

.machine-task-card strong[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    font-size: 0.82rem;
}

.machine-task-card span[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.74rem;
    line-height: 1.4;
}

.credential-reveal[b-v8vby0aagw] {
    background: rgba(236, 72, 153, 0.07);
    border-color: rgba(236, 72, 153, 0.3);
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
    padding: 1rem 1.1rem;
}

.credential-reveal p[b-v8vby0aagw] {
    margin: 0.38rem 0 0;
}

.credential-value[b-v8vby0aagw] {
    background: rgba(2, 6, 23, 0.72);
    border: 1px solid rgba(236, 72, 153, 0.24);
    border-radius: 0.6rem;
    display: block;
    font-size: 0.76rem;
    overflow-x: auto;
    padding: 0.8rem;
    user-select: all;
}

.security-note[b-v8vby0aagw] {
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.16);
    border-radius: 0.62rem;
    display: grid;
    gap: 0.12rem;
    margin-bottom: 0.85rem;
    padding: 0.68rem 0.75rem;
}

.security-note strong[b-v8vby0aagw] {
    color: #fbbf24;
    font-size: 0.78rem;
}

.security-note span[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.74rem;
    line-height: 1.4;
}

.lifecycle-actions[b-v8vby0aagw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.machine-diagnostics[b-v8vby0aagw] {
    margin-top: 0.9rem;
    overflow: hidden;
}

.machine-diagnostics > summary[b-v8vby0aagw] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    padding: 0.95rem 1.05rem;
    user-select: none;
}

.machine-diagnostics > summary[b-v8vby0aagw]::-webkit-details-marker {
    display: none;
}

.machine-diagnostics > summary > span:first-child[b-v8vby0aagw] {
    display: grid;
    gap: 0.16rem;
}

.machine-diagnostics > summary strong[b-v8vby0aagw] {
    color: var(--text-primary, #f8fafc);
    font-size: 0.86rem;
}

.machine-diagnostics > summary small[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.73rem;
}

.diagnostics-cue[b-v8vby0aagw] {
    color: #c4b5fd;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.machine-diagnostics[open] .diagnostics-cue[b-v8vby0aagw] {
    font-size: 0;
}

.machine-diagnostics[open] .diagnostics-cue[b-v8vby0aagw]::after {
    content: "Hide details";
    font-size: 0.72rem;
}

.diagnostics-body[b-v8vby0aagw] {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding: 1rem 1.05rem;
}

.diagnostics-grid > div:nth-child(-n + 2)[b-v8vby0aagw] {
    padding-top: 0.05rem;
}

.activity-count[b-v8vby0aagw] {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 999px;
    color: #c4b5fd;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.32rem 0.58rem;
    white-space: nowrap;
}

.machine-empty[b-v8vby0aagw] {
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
    margin: 0;
}

.machine-activity-table[b-v8vby0aagw] {
    overflow-x: auto;
}

.machine-activity-table table[b-v8vby0aagw] {
    min-width: 48rem;
    width: 100%;
}

.activity-kind[b-v8vby0aagw] {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .machine-hero[b-v8vby0aagw] {
        grid-template-columns: 1fr;
    }

    .machine-quick-actions[b-v8vby0aagw] {
        justify-content: flex-start;
    }

    .machine-overview[b-v8vby0aagw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-layout[b-v8vby0aagw],
    .security-layout[b-v8vby0aagw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .machine-page[b-v8vby0aagw] {
        gap: 0.8rem;
    }

    .machine-hero[b-v8vby0aagw],
    .machine-section[b-v8vby0aagw],
    .credential-reveal[b-v8vby0aagw],
    .machine-diagnostics[b-v8vby0aagw] {
        border-radius: 0.75rem;
    }

    .machine-hero[b-v8vby0aagw] {
        padding: 1rem;
    }

    .machine-hero-meta[b-v8vby0aagw] {
        display: grid;
    }

    .machine-hero-meta > span[b-v8vby0aagw] {
        border-radius: 0.55rem;
    }

    .machine-tabs[b-v8vby0aagw] {
        justify-content: flex-start;
    }

    .machine-tab[b-v8vby0aagw] {
        flex: 0 0 auto;
        min-width: 7.4rem;
    }

    .machine-overview[b-v8vby0aagw] {
        grid-template-columns: 1fr 1fr;
    }

    .overview-card[b-v8vby0aagw] {
        padding: 0.78rem;
    }

    .overview-card strong[b-v8vby0aagw] {
        font-size: 1.05rem;
    }

    .machine-task-grid[b-v8vby0aagw],
    .machine-definition-grid[b-v8vby0aagw] {
        grid-template-columns: 1fr;
    }

    .machine-definition-grid > div[b-v8vby0aagw],
    .machine-definition-grid > div:nth-child(-n + 2)[b-v8vby0aagw],
    .machine-definition-grid > div:nth-child(odd)[b-v8vby0aagw],
    .machine-definition-grid > div:nth-child(even)[b-v8vby0aagw],
    .machine-definition-grid .definition-wide[b-v8vby0aagw] {
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        grid-column: auto;
        padding: 0.62rem 0;
    }

    .machine-definition-grid > div:first-child[b-v8vby0aagw] {
        border-top: 0;
        padding-top: 0;
    }

    .section-heading[b-v8vby0aagw],
    .tab-heading[b-v8vby0aagw],
    .machine-diagnostics > summary[b-v8vby0aagw] {
        align-items: flex-start;
    }

    .machine-diagnostics > summary[b-v8vby0aagw] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 440px) {
    .machine-overview[b-v8vby0aagw] {
        grid-template-columns: 1fr;
    }

    .machine-quick-actions[b-v8vby0aagw],
    .lifecycle-actions[b-v8vby0aagw] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .machine-quick-actions .button[b-v8vby0aagw],
    .lifecycle-actions .button[b-v8vby0aagw] {
        justify-content: center;
        width: 100%;
    }
}


/* Machine console site-surface theme
   Keep the task-oriented layout, but use the same die-cut container language as the rest of AIWO. */
.machine-page[b-v8vby0aagw] {
    gap: var(--space-5);
}

.machine-back[b-v8vby0aagw] {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: .78rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.machine-back:hover[b-v8vby0aagw] {
    color: var(--color-text);
}

.machine-hero[b-v8vby0aagw],
.machine-tabs[b-v8vby0aagw],
.overview-card[b-v8vby0aagw],
.machine-section[b-v8vby0aagw],
.credential-reveal[b-v8vby0aagw],
.machine-diagnostics[b-v8vby0aagw] {
    --machine-notch: var(--notch-lg);
    --machine-accent: var(--color-accent);
    --machine-border: var(--color-border);
    --machine-fill: linear-gradient(152deg, var(--color-surface), var(--color-background-raised));
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, .28));
    isolation: isolate;
    position: relative;
}

.machine-hero > *[b-v8vby0aagw],
.machine-tabs > *[b-v8vby0aagw],
.overview-card > *[b-v8vby0aagw],
.machine-section > *[b-v8vby0aagw],
.credential-reveal > *[b-v8vby0aagw],
.machine-diagnostics > *[b-v8vby0aagw] {
    position: relative;
    z-index: 1;
}

.machine-hero[b-v8vby0aagw]::before,
.machine-tabs[b-v8vby0aagw]::before,
.overview-card[b-v8vby0aagw]::before,
.machine-section[b-v8vby0aagw]::before,
.credential-reveal[b-v8vby0aagw]::before,
.machine-diagnostics[b-v8vby0aagw]::before {
    background: var(--machine-border);
    clip-path: polygon(0 0, calc(100% - var(--machine-notch)) 0, 100% var(--machine-notch), 100% 100%, var(--machine-notch) 100%, 0 calc(100% - var(--machine-notch)));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -2;
}

.machine-hero[b-v8vby0aagw]::after,
.machine-tabs[b-v8vby0aagw]::after,
.overview-card[b-v8vby0aagw]::after,
.machine-section[b-v8vby0aagw]::after,
.credential-reveal[b-v8vby0aagw]::after,
.machine-diagnostics[b-v8vby0aagw]::after {
    background:
        linear-gradient(90deg, var(--machine-accent) 0 5rem, transparent 5rem) top left / 100% 2px no-repeat,
        var(--machine-fill);
    clip-path: polygon(0 0, calc(100% - var(--machine-notch)) 0, 100% var(--machine-notch), 100% 100%, var(--machine-notch) 100%, 0 calc(100% - var(--machine-notch)));
    content: "";
    inset: var(--hairline);
    position: absolute;
    z-index: -1;
}

.machine-hero[b-v8vby0aagw] {
    --machine-accent: var(--color-accent);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: visible;
    padding: var(--space-6);
}

.machine-eyebrow-row[b-v8vby0aagw] {
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.machine-eyebrow[b-v8vby0aagw],
.section-kicker[b-v8vby0aagw],
.overview-label[b-v8vby0aagw] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: .62rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.machine-hero h1[b-v8vby0aagw] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-stretch: 82%;
    letter-spacing: 0;
    line-height: .95;
    text-transform: none;
    text-shadow: none;
}

.machine-hero-copy > p[b-v8vby0aagw] {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.55;
    margin: var(--space-3) 0 var(--space-4);
    max-width: 50rem;
}

.machine-hero-meta[b-v8vby0aagw] {
    gap: var(--space-2);
}

.machine-hero-meta > span[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
    border: var(--hairline) solid var(--color-border);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - .35rem) 0, 100% .35rem, 100% 100%, .35rem 100%, 0 calc(100% - .35rem));
    color: var(--color-text-muted);
    font-size: .72rem;
    padding: .52rem .68rem;
}

.machine-hero-meta strong[b-v8vby0aagw] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: .62rem;
    font-stretch: 75%;
    letter-spacing: var(--tracking-label);
    margin-right: .22rem;
    text-transform: uppercase;
}

.machine-quick-actions[b-v8vby0aagw] {
    gap: var(--space-2);
}

.machine-tabs[b-v8vby0aagw] {
    --machine-notch: var(--notch-md);
    --machine-accent: var(--color-info);
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: var(--hairline);
}

.machine-tab[b-v8vby0aagw] {
    background: transparent;
    border: 0;
    border-left: var(--hairline) solid var(--color-border);
    border-radius: 0;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: .76rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: .04em;
    min-height: 3.1rem;
    padding: .72rem .9rem;
    text-transform: uppercase;
}

.machine-tab:first-child[b-v8vby0aagw] {
    border-left: 0;
}

.machine-tab:hover[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-info) 7%, transparent);
    color: var(--color-text);
}

.machine-tab.is-active[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface-raised));
    border-color: var(--color-border);
    box-shadow: inset 0 -2px 0 var(--color-info);
    color: var(--color-info-text);
}

.machine-tab small[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
    border: var(--hairline) solid color-mix(in srgb, var(--color-info) 30%, transparent);
    border-radius: 0;
    color: var(--color-info-text);
    font-size: .62rem;
}

.machine-overview[b-v8vby0aagw] {
    gap: var(--space-4);
}

.overview-card[b-v8vby0aagw] {
    --machine-notch: var(--notch-md);
    --machine-accent: var(--color-accent);
    display: grid;
    gap: var(--space-1);
    grid-template-columns: 1fr;
    padding: var(--space-4) var(--space-5);
}

.overview-card:nth-child(1)[b-v8vby0aagw] { --machine-accent: var(--color-success); }
.overview-card:nth-child(2)[b-v8vby0aagw] { --machine-accent: var(--color-info); }
.overview-card:nth-child(3)[b-v8vby0aagw] { --machine-accent: var(--color-warning); }
.overview-card:nth-child(4)[b-v8vby0aagw] { --machine-accent: var(--color-purple); }

.overview-label[b-v8vby0aagw],
.overview-card strong[b-v8vby0aagw],
.overview-card small[b-v8vby0aagw] {
    grid-column: 1;
}

.overview-label[b-v8vby0aagw] {
    color: var(--color-text-subtle);
}

.overview-card strong[b-v8vby0aagw] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.7rem;
    font-stretch: 82%;
    line-height: 1;
}

.overview-card small[b-v8vby0aagw] {
    color: var(--color-text-faint);
    font-size: .7rem;
    line-height: 1.4;
}

.machine-section[b-v8vby0aagw],
.credential-reveal[b-v8vby0aagw],
.machine-diagnostics[b-v8vby0aagw] {
    --machine-accent: var(--color-accent);
}

.overview-layout .machine-section:nth-child(2)[b-v8vby0aagw] {
    --machine-accent: var(--color-info);
}

.security-layout .machine-section:nth-child(2)[b-v8vby0aagw] {
    --machine-accent: var(--color-danger);
}

.credential-reveal[b-v8vby0aagw] {
    --machine-accent: var(--color-warning);
}

.machine-diagnostics[b-v8vby0aagw] {
    --machine-accent: var(--color-purple);
}

.machine-section[b-v8vby0aagw] {
    padding: 0;
}

.section-heading[b-v8vby0aagw] {
    align-items: center;
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin: 0;
    min-height: 3.75rem;
    padding: var(--space-4) var(--space-5);
}

.section-heading h2[b-v8vby0aagw],
.tab-heading h2[b-v8vby0aagw],
.credential-reveal h2[b-v8vby0aagw] {
    color: var(--machine-accent, var(--color-accent-text));
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: .03em;
    margin: var(--space-1) 0 0;
    position: relative;
    text-transform: uppercase;
}

.section-heading h2[b-v8vby0aagw]::after,
.tab-heading h2[b-v8vby0aagw]::after,
.credential-reveal h2[b-v8vby0aagw]::after {
    background-image: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 9px, currentColor 9px 23px, transparent 23px 24px, currentColor 24px 33px, transparent 33px 37px);
    bottom: -.35rem;
    content: "";
    height: 2px;
    left: 0;
    opacity: .55;
    position: absolute;
    width: 2.75rem;
}

.machine-definition-grid[b-v8vby0aagw],
.section-copy[b-v8vby0aagw],
.machine-task-grid[b-v8vby0aagw],
.security-note[b-v8vby0aagw],
.lifecycle-actions[b-v8vby0aagw] {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
}

.machine-definition-grid[b-v8vby0aagw] {
    margin-bottom: var(--space-5);
    margin-top: var(--space-4);
}

.machine-definition-grid > div[b-v8vby0aagw] {
    border-color: var(--color-border);
}

.machine-definition-grid dt[b-v8vby0aagw] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: .62rem;
    font-stretch: 75%;
    letter-spacing: var(--tracking-label);
}

.machine-definition-grid dd[b-v8vby0aagw],
.machine-definition-grid code[b-v8vby0aagw] {
    color: var(--color-text);
}

.machine-task-grid[b-v8vby0aagw] {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    margin-top: var(--space-4);
}

.machine-task-card[b-v8vby0aagw] {
    --task-accent: var(--color-accent);
    background:
        linear-gradient(90deg, var(--task-accent) 0 3.5rem, transparent 3.5rem) top left / 100% 2px no-repeat,
        linear-gradient(152deg, var(--color-surface-raised), var(--color-surface));
    border: var(--hairline) solid var(--color-border);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
    color: var(--color-text);
    min-height: 5.3rem;
    padding: var(--space-4);
}

.machine-task-card:nth-child(2)[b-v8vby0aagw] { --task-accent: var(--color-info); }
.machine-task-card:nth-child(3)[b-v8vby0aagw] { --task-accent: var(--color-warning); }
.machine-task-card:nth-child(4)[b-v8vby0aagw] { --task-accent: var(--color-purple); }

.machine-task-card:hover[b-v8vby0aagw] {
    background:
        linear-gradient(90deg, var(--task-accent) 0 3.5rem, transparent 3.5rem) top left / 100% 2px no-repeat,
        linear-gradient(152deg, var(--color-surface-raised), var(--color-background-raised));
    border-color: var(--task-accent);
    transform: translateY(-2px);
}

.machine-task-card strong[b-v8vby0aagw] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: .8rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.machine-task-card span[b-v8vby0aagw] {
    color: var(--color-text-muted);
}

.tab-heading[b-v8vby0aagw] {
    border-bottom: var(--hairline) solid var(--color-border);
    margin: 0 0 var(--space-5);
    padding: var(--space-2) var(--space-1) var(--space-4);
}

.tab-heading h2[b-v8vby0aagw] {
    --machine-accent: var(--color-info);
    font-size: 1.2rem;
}

.tab-heading p[b-v8vby0aagw],
.section-copy[b-v8vby0aagw],
.credential-reveal p[b-v8vby0aagw] {
    color: var(--color-text-muted);
}

.section-copy[b-v8vby0aagw] {
    margin-bottom: var(--space-4);
    margin-top: var(--space-4);
}

.credential-reveal[b-v8vby0aagw] {
    gap: var(--space-4);
    padding: var(--space-5);
}

.credential-value[b-v8vby0aagw] {
    background: var(--color-background);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
}

.security-note[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-warning) 7%, transparent);
    border: var(--hairline) solid color-mix(in srgb, var(--color-warning) 24%, transparent);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
}

.lifecycle-actions[b-v8vby0aagw] {
    margin-bottom: var(--space-5);
}

.machine-diagnostics[b-v8vby0aagw] {
    overflow: visible;
}

.machine-diagnostics > summary[b-v8vby0aagw] {
    min-height: 3.75rem;
    padding: var(--space-4) var(--space-5);
}

.machine-diagnostics > summary strong[b-v8vby0aagw] {
    color: var(--color-purple-text);
    font-family: var(--font-display);
    font-size: .88rem;
    font-stretch: 75%;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.machine-diagnostics > summary small[b-v8vby0aagw] {
    color: var(--color-text-faint);
}

.diagnostics-cue[b-v8vby0aagw],
.activity-count[b-v8vby0aagw] {
    color: var(--color-purple-text);
}

.activity-count[b-v8vby0aagw] {
    background: color-mix(in srgb, var(--color-purple) 10%, transparent);
    border: var(--hairline) solid color-mix(in srgb, var(--color-purple) 30%, transparent);
    border-radius: 0;
}

.diagnostics-body[b-v8vby0aagw] {
    border-top-color: var(--color-border);
    padding: var(--space-5);
}

.machine-page[b-v8vby0aagw]  .status-chip {
    border-radius: 0;
}

@media (max-width: 1000px) {
    .machine-hero[b-v8vby0aagw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .machine-hero[b-v8vby0aagw],
    .machine-section[b-v8vby0aagw],
    .credential-reveal[b-v8vby0aagw],
    .machine-diagnostics[b-v8vby0aagw] {
        --machine-notch: var(--notch-md);
    }

    .machine-hero[b-v8vby0aagw] {
        padding: var(--space-5);
    }

    .machine-hero-meta > span[b-v8vby0aagw] {
        min-width: 0;
    }

    .machine-definition-grid[b-v8vby0aagw],
    .section-copy[b-v8vby0aagw],
    .machine-task-grid[b-v8vby0aagw],
    .security-note[b-v8vby0aagw],
    .lifecycle-actions[b-v8vby0aagw] {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
    }
}

.computer-use-heading[b-v8vby0aagw] { align-items: center; }
.computer-use-controls[b-v8vby0aagw] { --machine-accent: var(--color-warning); margin-bottom: var(--space-5); }
.computer-use-sessions[b-v8vby0aagw] { --machine-accent: var(--color-info); }
.computer-use-mode-grid[b-v8vby0aagw] { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-4) var(--space-5); }
.computer-use-mode-card[b-v8vby0aagw] { background: var(--color-surface-raised); border: var(--hairline) solid var(--color-border); color: var(--color-text); cursor: pointer; display: grid; gap: var(--space-2); min-height: 7rem; padding: var(--space-4); text-align: left; }
.computer-use-mode-card:hover:not(:disabled)[b-v8vby0aagw] { border-color: var(--color-info); }
.computer-use-mode-card.is-active[b-v8vby0aagw] { border-color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); }
.computer-use-mode-card:disabled[b-v8vby0aagw] { cursor: default; opacity: .72; }
.computer-use-mode-card strong[b-v8vby0aagw] { font-family: var(--font-display); font-stretch: 75%; text-transform: uppercase; }
.computer-use-mode-card span[b-v8vby0aagw], .computer-use-emergency span[b-v8vby0aagw], .computer-use-privacy[b-v8vby0aagw], .computer-use-table small[b-v8vby0aagw] { color: var(--color-text-muted); font-size: .76rem; line-height: 1.45; }
.computer-use-emergency[b-v8vby0aagw] { align-items: center; background: color-mix(in srgb, var(--color-danger) 8%, transparent); border: var(--hairline) solid color-mix(in srgb, var(--color-danger) 34%, transparent); display: flex; gap: var(--space-4); justify-content: space-between; margin: 0 var(--space-5) var(--space-5); padding: var(--space-4); }
.computer-use-emergency > div[b-v8vby0aagw] { display: grid; gap: var(--space-1); }
.computer-use-emergency strong[b-v8vby0aagw] { color: var(--color-danger-text); font-family: var(--font-display); text-transform: uppercase; }
.computer-use-privacy[b-v8vby0aagw], .computer-use-empty[b-v8vby0aagw] { margin: var(--space-4) var(--space-5); }
.computer-use-table[b-v8vby0aagw] { margin: 0 var(--space-5) var(--space-5); }
.computer-use-evidence[b-v8vby0aagw] { font-family: var(--font-mono); font-size: .68rem; overflow-wrap: anywhere; }
@media (max-width: 900px) { .computer-use-mode-grid[b-v8vby0aagw] { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .computer-use-mode-grid[b-v8vby0aagw], .computer-use-emergency[b-v8vby0aagw], .computer-use-privacy[b-v8vby0aagw], .computer-use-empty[b-v8vby0aagw], .computer-use-table[b-v8vby0aagw] { margin-left: var(--space-4); margin-right: var(--space-4); } .computer-use-emergency[b-v8vby0aagw] { align-items: stretch; flex-direction: column; } .computer-use-emergency .button[b-v8vby0aagw] { justify-content: center; width: 100%; } }

/* Panel spacing.
   Sections are edge-to-edge (padding: 0) so headings, filter tabs, and tables can run full-bleed,
   which left loose copy and actions sitting on the panel border. flow-root keeps a last child's
   bottom margin inside the die-cut frame instead of collapsing through it. */
.machine-section[b-v8vby0aagw] {
    display: flow-root;
}

.machine-section > p[b-v8vby0aagw],
.machine-section > .button-row[b-v8vby0aagw],
.machine-section > .button[b-v8vby0aagw],
.machine-section > .managed-desktop-grid[b-v8vby0aagw] {
    margin: var(--space-4) var(--space-5);
}

.machine-section > .form-hint[b-v8vby0aagw] {
    color: var(--color-text-muted);
    font-size: .8rem;
}

/* The tab panel stacks overview cards, panel grids, and full-width panels; without its own gap
   they sat flush against each other. Child margins are folded into the gap so nothing doubles. */
.machine-tab-panel[b-v8vby0aagw] {
    display: grid;
    gap: var(--space-4);
}

.machine-tab-panel > *[b-v8vby0aagw] {
    margin-bottom: 0;
    margin-top: 0;
}

.overview-layout[b-v8vby0aagw],
.security-layout[b-v8vby0aagw] {
    gap: var(--space-4);
}

@media (max-width: 700px) {
    .machine-section > p[b-v8vby0aagw],
    .machine-section > .button-row[b-v8vby0aagw],
    .machine-section > .button[b-v8vby0aagw],
    .machine-section > .managed-desktop-grid[b-v8vby0aagw] {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
    }
}
/* /Components/Pages/MessageBoardScopeSignals.razor.rz.scp.css */
.scope-metrics[b-unapswrgbj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.scope-metric[b-unapswrgbj],
.scope-card[b-unapswrgbj] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.scope-metric[b-unapswrgbj] {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
}

.scope-metric strong[b-unapswrgbj] {
    font-size: 1.45rem;
}

.scope-metric span[b-unapswrgbj],
.scope-measure[b-unapswrgbj],
.scope-meta[b-unapswrgbj],
.scope-peer[b-unapswrgbj] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.scope-rule[b-unapswrgbj] {
    max-width: 76rem;
}

.scope-list[b-unapswrgbj] {
    display: grid;
    gap: 1rem;
}

.scope-card[b-unapswrgbj] {
    padding: 1rem;
}

.scope-card-header[b-unapswrgbj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.scope-thread-link[b-unapswrgbj] {
    color: var(--text-strong);
    font-weight: 700;
}

.scope-meta[b-unapswrgbj],
.scope-peer[b-unapswrgbj] {
    margin: 0.35rem 0 0;
}

@media (max-width: 900px) {
    .scope-metrics[b-unapswrgbj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scope-card-header[b-unapswrgbj] {
        flex-direction: column;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .scope-metrics[b-unapswrgbj] {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .scope-metric[b-unapswrgbj] {
        padding: var(--space-3) var(--space-4);
    }

    .scope-metric strong[b-unapswrgbj] {
        font-size: 1.125rem;
    }

    .scope-metric span[b-unapswrgbj],
    .scope-measure[b-unapswrgbj],
    .scope-meta[b-unapswrgbj],
    .scope-peer[b-unapswrgbj] {
        font-size: 0.625rem;
    }

    .scope-list[b-unapswrgbj] {
        gap: var(--space-3);
    }

    .scope-card[b-unapswrgbj] {
        padding: var(--space-3);
    }

    .scope-card-header[b-unapswrgbj] {
        gap: var(--space-2);
    }

    .scope-meta[b-unapswrgbj],
    .scope-peer[b-unapswrgbj] {
        margin-top: var(--space-1);
    }
}
/* /Components/Pages/MessageBoardVolumeRadar.razor.rz.scp.css */
.radar-metrics[b-3zufiagh88] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.radar-metric[b-3zufiagh88],
.radar-card[b-3zufiagh88] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.radar-metric[b-3zufiagh88] {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
}

.radar-metric strong[b-3zufiagh88] {
    font-size: 1.45rem;
}

.radar-metric span[b-3zufiagh88],
.radar-card-header p[b-3zufiagh88],
.radar-credentials span[b-3zufiagh88],
.radar-reply-meta[b-3zufiagh88] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.radar-rule[b-3zufiagh88] {
    max-width: 76rem;
}

.radar-list[b-3zufiagh88] {
    display: grid;
    gap: 1rem;
}

.radar-card[b-3zufiagh88] {
    padding: 1rem;
}

.radar-card-header[b-3zufiagh88],
.radar-dismiss[b-3zufiagh88] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.radar-thread-link[b-3zufiagh88] {
    color: var(--text-strong);
    font-weight: 700;
}

.radar-card-header p[b-3zufiagh88] {
    margin: 0.35rem 0 0;
}

.radar-credentials[b-3zufiagh88] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.radar-credentials > div[b-3zufiagh88] {
    display: grid;
    gap: 0.15rem;
    min-width: 13rem;
    padding: 0.65rem;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.radar-replies[b-3zufiagh88] {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding-left: 1.4rem;
}

.radar-replies li[b-3zufiagh88] {
    padding-left: 0.25rem;
}

.radar-replies p[b-3zufiagh88] {
    margin: 0.25rem 0 0;
    white-space: pre-wrap;
}

.radar-reply-meta[b-3zufiagh88] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.radar-dismiss[b-3zufiagh88] {
    align-items: end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.radar-dismiss label[b-3zufiagh88] {
    display: grid;
    gap: 0.35rem;
    min-width: min(24rem, 100%);
}

.radar-toggle[b-3zufiagh88] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 800px) {
    .radar-metrics[b-3zufiagh88] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radar-card-header[b-3zufiagh88],
    .radar-dismiss[b-3zufiagh88] {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .radar-metrics[b-3zufiagh88] {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .radar-metric[b-3zufiagh88] {
        padding: var(--space-3) var(--space-4);
    }

    .radar-metric strong[b-3zufiagh88] {
        font-size: 1.125rem;
    }

    .radar-metric span[b-3zufiagh88],
    .radar-card-header p[b-3zufiagh88],
    .radar-credentials span[b-3zufiagh88],
    .radar-reply-meta[b-3zufiagh88] {
        font-size: 0.625rem;
    }

    .radar-list[b-3zufiagh88] {
        gap: var(--space-3);
    }

    .radar-card[b-3zufiagh88] {
        padding: var(--space-3);
    }

    .radar-card-header[b-3zufiagh88],
    .radar-dismiss[b-3zufiagh88] {
        gap: var(--space-2);
    }

    .radar-credentials[b-3zufiagh88] {
        gap: var(--space-2);
        margin: var(--space-3) 0;
    }

    .radar-credentials > div[b-3zufiagh88] {
        min-width: 8rem;
        padding: var(--space-2);
    }

    .radar-replies[b-3zufiagh88] {
        gap: var(--space-2);
        padding-left: var(--space-6);
    }

    .radar-dismiss[b-3zufiagh88] {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }

    .radar-toggle[b-3zufiagh88] {
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-layout[b-178mqvw13y] {
    align-items: start;
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 10rem minmax(0, 34rem);
}

.profile-picture-preview[b-178mqvw13y] {
    display: grid;
    gap: var(--space-2);
}

/* A square picture in a slanted frame read as a pink parallelogram whenever there was no image
   to fill it. The corner notch is the shape the rest of the product uses for a framed surface. */
.profile-picture-preview img[b-178mqvw13y],
.profile-picture-preview[b-178mqvw13y]  .app-avatar {
    aspect-ratio: 1;
    border: var(--hairline) solid var(--color-border-strong);
    clip-path: polygon(0 0, calc(100% - var(--notch-md)) 0, 100% var(--notch-md), 100% 100%, var(--notch-md) 100%, 0 calc(100% - var(--notch-md)));
    height: auto;
    object-fit: cover;
    width: 100%;
}

.profile-picture-preview span[b-178mqvw13y] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    text-align: center;
    text-transform: uppercase;
}

.file-control[b-178mqvw13y] {
    height: auto;
    padding: var(--space-2);
}

@media (max-width: 46rem) {
    .profile-layout[b-178mqvw13y] {
        grid-template-columns: 1fr;
    }

    .profile-picture-preview[b-178mqvw13y] {
        width: 8rem;
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .profile-layout[b-178mqvw13y] {
        gap: var(--space-4);
    }

    .profile-picture-preview[b-178mqvw13y] {
        gap: var(--space-1);
        width: 5.5rem;
    }

    .profile-picture-preview span[b-178mqvw13y] {
        font-size: 0.5rem;
    }

    .file-control[b-178mqvw13y] {
        padding: var(--space-1);
    }
}
/* /Components/Pages/ProjectCoverage.razor.rz.scp.css */
.coverage-card[b-6fs5sje7q3]{padding:1.2rem;margin-block:1rem;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);color:var(--color-text)}
.coverage-toolbar[b-6fs5sje7q3]{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-block:.75rem}
.coverage-toolbar h2[b-6fs5sje7q3]{margin-right:auto}.coverage-form-grid[b-6fs5sje7q3]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem;margin-block:1rem}
.coverage-card label[b-6fs5sje7q3]{display:grid;gap:.35rem;margin-block:.65rem}.coverage-card label:has(input[type=checkbox])[b-6fs5sje7q3]{display:flex;align-items:center}
.coverage-card textarea[b-6fs5sje7q3]{min-height:95px;width:100%}.coverage-entry[b-6fs5sje7q3],.coverage-candidate[b-6fs5sje7q3]{padding:1rem;margin-block:.8rem;border:1px solid var(--color-border);border-radius:8px}
.coverage-candidate>code[b-6fs5sje7q3],.coverage-candidate>small[b-6fs5sje7q3]{display:block;margin-block:.4rem;overflow-wrap:anywhere}
.coverage-card pre[b-6fs5sje7q3]{white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto}.coverage-card code[b-6fs5sje7q3]{overflow-wrap:anywhere;white-space:normal}
.coverage-alert[b-6fs5sje7q3]{border-inline-start:3px solid var(--color-warning,#b55016);padding-inline-start:.7rem}.coverage-card details[b-6fs5sje7q3]{margin-block:.8rem}.coverage-card summary[b-6fs5sje7q3]{cursor:pointer;font-weight:600}
@media(max-width:600px){.coverage-card[b-6fs5sje7q3]{padding:.8rem}.coverage-toolbar>*[b-6fs5sje7q3]{max-width:100%}.coverage-toolbar button[b-6fs5sje7q3]{white-space:normal}}
/* /Components/Pages/ProjectLabels.razor.rz.scp.css */
/* The table used to print a label's colour as a bare hex string, which told an operator nothing
   about what the label actually looks like on a work item. */

.label-colour-swatch[b-56h3de27xa] {
    background: var(--swatch, var(--color-border-strong));
    border: var(--hairline) solid var(--color-border-strong);
    display: inline-block;
    height: 0.85rem;
    margin-right: var(--space-2);
    vertical-align: -0.1rem;
    width: 0.85rem;
}

/* A native colour well is drawn by the browser at its own size; this keeps it on the same
   baseline and height as the hex field beside it. */
.label-colour-input[b-56h3de27xa] {
    block-size: 2.5rem;
    cursor: pointer;
    inline-size: 3.25rem;
    padding: var(--space-1);
}
/* /Components/Pages/Public/Landing.razor.rz.scp.css */
.landing-hero[b-ze1v3is7ga] {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: clamp(var(--space-7), 6vw, 5rem);
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    min-height: min(42rem, calc(100vh - 10rem));
    padding: var(--space-8) 0;
}

.landing-hero-copy[b-ze1v3is7ga],
.landing-feature-copy[b-ze1v3is7ga],
.landing-section-heading[b-ze1v3is7ga] {
    min-width: 0;
}

.landing-title[b-ze1v3is7ga] {
    font-family: var(--font-poster);
    font-size: clamp(3rem, 6.2vw, 5.5rem);
    font-stretch: 87.5%;
    letter-spacing: var(--tracking-display);
    line-height: 0.92;
    margin: var(--space-3) 0 var(--space-5);
    max-width: none;
    overflow-wrap: normal;
    text-wrap: balance;
}

.landing-title span[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    display: block;
    white-space: nowrap;
}

.landing-lead[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    font-size: clamp(var(--text-md), 2vw, var(--text-xl));
    line-height: 1.6;
    margin: 0;
    max-width: 39rem;
}

.landing-hero-actions[b-ze1v3is7ga] {
    margin-top: var(--space-6);
}

.landing-assurances[b-ze1v3is7ga] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
}

.landing-assurances li[b-ze1v3is7ga] {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    padding-left: var(--space-4);
    position: relative;
}

.landing-assurances li[b-ze1v3is7ga]::before {
    color: var(--color-accent);
    content: "▍";
    left: 0;
    position: absolute;
}

.landing-orchestration[b-ze1v3is7ga],
.landing-trace[b-ze1v3is7ga] {
    --notch: var(--notch-lg);
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-field));
    border: 1px solid var(--color-border-strong);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    min-width: 0;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    position: relative;
}

.landing-orchestration[b-ze1v3is7ga]::after,
.landing-trace[b-ze1v3is7ga]::after {
    background: var(--color-accent);
    content: "";
    height: 1px;
    position: absolute;
    right: var(--space-5);
    top: var(--space-5);
    width: 3rem;
}

.landing-visual-kicker[b-ze1v3is7ga],
.landing-group-number[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    margin: 0;
    text-transform: uppercase;
}

.landing-visual-flow[b-ze1v3is7ga] {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
}

.landing-visual-flow li[b-ze1v3is7ga] {
    align-items: center;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 2.25rem minmax(0, 1fr);
    padding-bottom: var(--space-5);
    position: relative;
}

.landing-visual-flow li:not(:last-child)[b-ze1v3is7ga]::after {
    background: var(--color-border-loud);
    bottom: 0;
    content: "";
    height: var(--space-5);
    left: 1.1rem;
    position: absolute;
    width: 1px;
}

.landing-visual-flow li:last-child[b-ze1v3is7ga] {
    padding-bottom: 0;
}

.landing-visual-index[b-ze1v3is7ga] {
    border: 1px solid var(--color-accent);
    color: var(--color-accent-text);
    display: grid;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    height: 2.25rem;
    place-items: center;
    width: 2.25rem;
}

.landing-visual-flow strong[b-ze1v3is7ga],
.landing-visual-flow small[b-ze1v3is7ga] {
    display: block;
}

.landing-visual-flow strong[b-ze1v3is7ga] {
    font-family: var(--font-display);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-display);
}

.landing-visual-flow small[b-ze1v3is7ga] {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

.landing-section[b-ze1v3is7ga] {
    border-bottom: 1px solid var(--color-border);
    padding: clamp(4rem, 9vw, 7rem) 0;
}

.landing-section-heading[b-ze1v3is7ga] {
    margin-bottom: var(--space-7);
    max-width: 52rem;
}

.landing-section-heading h2[b-ze1v3is7ga],
.landing-feature-copy h2[b-ze1v3is7ga],
.landing-final h2[b-ze1v3is7ga] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    letter-spacing: var(--tracking-display);
    line-height: 1.05;
    margin: var(--space-3) 0 var(--space-4);
    text-wrap: balance;
}

.landing-section-heading > p:last-child[b-ze1v3is7ga],
.landing-feature-copy > p[b-ze1v3is7ga],
.landing-final > div > p[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 48rem;
}

.landing-section-heading-centered[b-ze1v3is7ga] {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.landing-section-heading-centered > p:last-child[b-ze1v3is7ga] {
    margin-left: auto;
    margin-right: auto;
}

.landing-value-grid[b-ze1v3is7ga] {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-value-grid article[b-ze1v3is7ga] {
    border-top: 1px solid var(--color-border-strong);
    min-width: 0;
    padding-top: var(--space-5);
}

.landing-value-grid article > span[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.landing-value-grid h3[b-ze1v3is7ga] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: var(--space-3) 0 var(--space-2);
}

.landing-value-grid p[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

.landing-process[b-ze1v3is7ga] {
    background: linear-gradient(90deg, transparent, var(--color-accent-faint), transparent);
}

.landing-lifecycle[b-ze1v3is7ga] {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-lifecycle li[b-ze1v3is7ga] {
    background: var(--color-background-raised);
    border-top: 1px solid var(--color-border-strong);
    min-width: 0;
    padding: var(--space-5) var(--space-3);
    position: relative;
}

.landing-lifecycle li:not(:last-child)[b-ze1v3is7ga]::after {
    color: var(--color-accent-text);
    content: "→";
    font-family: var(--font-mono);
    position: absolute;
    right: -0.45rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.landing-lifecycle span[b-ze1v3is7ga],
.landing-lifecycle strong[b-ze1v3is7ga],
.landing-lifecycle small[b-ze1v3is7ga] {
    display: block;
}

.landing-lifecycle span[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin-bottom: var(--space-4);
}

.landing-lifecycle strong[b-ze1v3is7ga] {
    font-family: var(--font-display);
    overflow-wrap: anywhere;
}

.landing-lifecycle small[b-ze1v3is7ga] {
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    line-height: 1.4;
    margin-top: var(--space-2);
}

.landing-system-grid[b-ze1v3is7ga] {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-system-group[b-ze1v3is7ga] {
    min-width: 0;
}

.landing-system-group h3[b-ze1v3is7ga] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.15;
    margin: var(--space-3) 0 var(--space-5);
}

.landing-system-group ul[b-ze1v3is7ga] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-system-group li[b-ze1v3is7ga] {
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}

.landing-system-group li:last-child[b-ze1v3is7ga] {
    padding-bottom: 0;
}

.landing-system-group strong[b-ze1v3is7ga],
.landing-system-group span[b-ze1v3is7ga] {
    display: block;
}

.landing-system-group strong[b-ze1v3is7ga] {
    color: var(--color-text);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.landing-system-group span[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.landing-feature[b-ze1v3is7ga] {
    align-items: center;
    display: grid;
    gap: clamp(var(--space-7), 7vw, 6rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.landing-text-link[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    display: inline-block;
    font-family: var(--font-display);
    margin-top: var(--space-5);
    text-decoration: none;
}

.landing-text-link:hover[b-ze1v3is7ga],
.landing-text-link:focus-visible[b-ze1v3is7ga] {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.landing-connection-grid[b-ze1v3is7ga] {
    border-bottom: 1px solid var(--color-border-strong);
    border-top: 1px solid var(--color-border-strong);
}

.landing-connection-grid article[b-ze1v3is7ga] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 6rem minmax(0, 1fr);
    padding: var(--space-5) 0;
}

.landing-connection-grid article + article[b-ze1v3is7ga] {
    border-top: 1px solid var(--color-border);
}

.landing-connection-grid article > span[b-ze1v3is7ga] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
}

.landing-connection-grid h3[b-ze1v3is7ga],
.landing-connection-grid p[b-ze1v3is7ga] {
    grid-column: 2;
    margin: 0;
}

.landing-connection-grid h3[b-ze1v3is7ga] {
    font-family: var(--font-display);
    font-size: var(--text-md);
}

.landing-connection-grid p[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.landing-feature-governance .landing-trace[b-ze1v3is7ga] {
    grid-column: 1;
    grid-row: 1;
}

.landing-feature-governance .landing-feature-copy[b-ze1v3is7ga] {
    grid-column: 2;
}

.landing-trace ol[b-ze1v3is7ga] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: var(--space-7) 0 0;
    padding: 0;
}

.landing-trace li[b-ze1v3is7ga] {
    border-top: 1px solid var(--color-accent);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    min-width: 0;
    padding-top: var(--space-3);
    position: relative;
    text-align: center;
}

.landing-trace li:not(:last-child)[b-ze1v3is7ga]::after {
    color: var(--color-accent-text);
    content: "→";
    position: absolute;
    right: calc(var(--space-3) * -1);
}

.landing-trace span[b-ze1v3is7ga] {
    overflow-wrap: anywhere;
}

.landing-governance-list[b-ze1v3is7ga] {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
}

.landing-governance-list li[b-ze1v3is7ga] {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    position: relative;
}

.landing-governance-list li[b-ze1v3is7ga]::before {
    color: var(--color-accent);
    content: "+";
    font-family: var(--font-mono);
    left: 0;
    position: absolute;
}

.landing-final[b-ze1v3is7ga] {
    align-items: end;
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    padding: clamp(4rem, 9vw, 7rem) 0 0;
}

.landing-contact[b-ze1v3is7ga] {
    border-left: 1px solid var(--color-border-strong);
    min-width: 0;
    padding: var(--space-4) 0 var(--space-4) var(--space-6);
}

.landing-contact-name[b-ze1v3is7ga] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: var(--space-3) 0 var(--space-2);
}

.landing-contact a[b-ze1v3is7ga] {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

@media (max-width: 64rem) {
    .landing-hero[b-ze1v3is7ga] {
        grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 1fr);
    }

    .landing-lifecycle[b-ze1v3is7ga] {
        grid-template-columns: 1fr;
    }

    .landing-lifecycle li[b-ze1v3is7ga] {
        align-items: center;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 2rem 7rem minmax(0, 1fr);
        padding: var(--space-3) var(--space-4);
    }

    .landing-lifecycle li:not(:last-child)[b-ze1v3is7ga]::after {
        bottom: -0.7rem;
        content: "↓";
        right: auto;
        top: auto;
        transform: none;
    }

    .landing-lifecycle span[b-ze1v3is7ga],
    .landing-lifecycle small[b-ze1v3is7ga] {
        margin: 0;
    }
}

@media (max-width: 48rem) {
    .landing-hero-actions .button[b-ze1v3is7ga],
    .landing-final .button[b-ze1v3is7ga] {
        align-items: center;
        display: inline-flex;
        min-height: max(var(--touch-min), 44px);
    }

    .landing-hero[b-ze1v3is7ga] {
        gap: var(--space-7);
        grid-template-columns: 1fr;
        min-height: 0;
        padding: var(--space-7) 0 var(--space-8);
    }

    .landing-title[b-ze1v3is7ga] {
        font-size: clamp(2.35rem, 12vw, 3.75rem);
    }

    .landing-orchestration[b-ze1v3is7ga] {
        margin: 0 auto;
        max-width: 30rem;
        width: 100%;
    }

    .landing-section[b-ze1v3is7ga] {
        padding: var(--space-8) 0;
    }

    .landing-value-grid[b-ze1v3is7ga],
    .landing-system-grid[b-ze1v3is7ga],
    .landing-feature[b-ze1v3is7ga],
    .landing-final[b-ze1v3is7ga] {
        grid-template-columns: 1fr;
    }

    .landing-value-grid[b-ze1v3is7ga] {
        gap: var(--space-5);
    }

    .landing-feature-governance .landing-trace[b-ze1v3is7ga],
    .landing-feature-governance .landing-feature-copy[b-ze1v3is7ga] {
        grid-column: 1;
        grid-row: auto;
    }

    .landing-feature-governance .landing-feature-copy[b-ze1v3is7ga] {
        order: -1;
    }

    .landing-final[b-ze1v3is7ga] {
        align-items: start;
        padding-top: var(--space-8);
    }

    .landing-contact[b-ze1v3is7ga] {
        border-left: 0;
        border-top: 1px solid var(--color-border-strong);
        padding: var(--space-5) 0 0;
    }
}

@media (max-width: 30rem) {
    .landing-assurances[b-ze1v3is7ga] {
        display: grid;
        gap: var(--space-2);
    }

    .landing-lifecycle li[b-ze1v3is7ga] {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .landing-lifecycle small[b-ze1v3is7ga] {
        grid-column: 2;
    }

    .landing-connection-grid article[b-ze1v3is7ga] {
        grid-template-columns: 1fr;
    }

    .landing-connection-grid h3[b-ze1v3is7ga],
    .landing-connection-grid p[b-ze1v3is7ga] {
        grid-column: 1;
    }

    .landing-trace ol[b-ze1v3is7ga] {
        grid-template-columns: 1fr;
    }

    .landing-trace li[b-ze1v3is7ga] {
        text-align: left;
    }

    .landing-trace li:not(:last-child)[b-ze1v3is7ga]::after {
        bottom: calc(var(--space-3) * -1);
        content: "↓";
        right: auto;
    }
}
/* /Components/Pages/Skills.razor.rz.scp.css */
/* auto-fit, not auto-fill: with one skill in the library, auto-fill kept nine empty tracks and
   left the single card marooned in 1,200px of space. */
.skills-card-grid[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

.skill-card[b-qeifryyf56] {
    --notch: var(--notch-md);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    gap: var(--space-3);
    min-height: 15.5rem;
    overflow: hidden;
    padding: var(--space-5);
    position: relative;
    text-align: left;
    text-decoration: none;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    width: 100%;
}

.skill-card[b-qeifryyf56]::after {
    border: var(--hairline) solid transparent;
    clip-path: inherit;
    content: "";
    inset: var(--topbar-height) 0 0;
    pointer-events: none;
    position: absolute;
}

.skill-card:hover[b-qeifryyf56] {
    background: var(--color-field-hover);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

.skill-card:focus-visible[b-qeifryyf56] {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

.skill-card.is-selected[b-qeifryyf56] {
    background: var(--color-accent-faint);
    border-color: var(--color-accent);
}

.skill-card-accent[b-qeifryyf56] {
    background: var(--color-accent);
    height: 0.2rem;
    left: var(--space-5);
    position: absolute;
    top: 0;
    width: 3rem;
}

.skill-card-topline[b-qeifryyf56] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
}

.skill-card-topline code[b-qeifryyf56] {
    color: var(--color-accent-text);
    display: block;
    font-size: 0.76rem;
    max-width: 68%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-card-title[b-qeifryyf56] {
    color: var(--color-text);
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-stretch: 80%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: 1.05;
    text-transform: uppercase;
}

.skill-card-description[b-qeifryyf56] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--color-text-muted);
    display: -webkit-box;
    line-height: 1.5;
    overflow: hidden;
}

.skill-card-meta[b-qeifryyf56] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    padding-top: var(--space-3);
}

.skill-card-meta > span[b-qeifryyf56] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.skill-card-meta > span > span:last-child[b-qeifryyf56] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-card-label[b-qeifryyf56],
.skill-detail-eyebrow[b-qeifryyf56],
.skill-contract-card > span[b-qeifryyf56] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.skill-card-tags[b-qeifryyf56] {
    color: var(--color-text-faint);
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-authoring-shell[b-qeifryyf56],
.skill-detail-shell[b-qeifryyf56] {
    display: grid;
    gap: var(--space-5);
}

.skill-form-section[b-qeifryyf56],
.skill-detail-section[b-qeifryyf56] {
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    padding: var(--space-5);
}

.skill-form-section[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
}

.skill-section-heading[b-qeifryyf56] {
    align-items: flex-start;
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}

.skill-section-heading > span[b-qeifryyf56] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    padding-top: 0.1rem;
}

.skill-section-heading h3[b-qeifryyf56] {
    margin-bottom: var(--space-2);
}

.skill-section-heading p[b-qeifryyf56],
.skill-form-footer p[b-qeifryyf56],
.skill-version-authoring-body > p[b-qeifryyf56] {
    color: var(--color-text-muted);
    margin: 0;
}

.skill-primary-instructions[b-qeifryyf56] {
    min-height: 16rem;
}

.skill-form-footer[b-qeifryyf56] {
    align-items: center;
    background: var(--color-background-raised);
    border-left: 0.2rem solid var(--color-accent);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.skill-detail-hero[b-qeifryyf56] {
    align-items: flex-start;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.skill-detail-copy[b-qeifryyf56] {
    min-width: 0;
}

.skill-detail-key[b-qeifryyf56] {
    color: var(--color-accent-text);
    display: inline-block;
    margin-bottom: var(--space-3);
}

.skill-detail-copy p[b-qeifryyf56] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    max-width: 68rem;
}

.skill-always-apply-badge[b-qeifryyf56] {
    align-self: flex-start;
    background: var(--color-success-soft);
    border: var(--hairline) solid var(--color-success);
    color: var(--color-success);
    display: inline-flex;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.1rem var(--space-2);
    text-transform: uppercase;
}

.skill-detail-chips[b-qeifryyf56] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.skill-inline-chip[b-qeifryyf56] {
    background: var(--color-neutral-soft);
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-muted);
    display: inline-flex;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1;
    padding: 0.45rem 0.6rem;
    text-transform: uppercase;
}

.skill-detail-stats[b-qeifryyf56] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.skill-detail-stats > div[b-qeifryyf56] {
    background: var(--color-field);
    border-top: 0.15rem solid var(--color-border-strong);
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
}

.skill-detail-stats span[b-qeifryyf56] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.skill-detail-stats strong[b-qeifryyf56] {
    color: var(--color-text);
    font-family: var(--font-poster);
    font-size: 1.45rem;
    font-stretch: 85%;
    line-height: 1;
    min-width: 0;
}

.skill-detail-stats .skill-project-value[b-qeifryyf56] {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.skill-current-version[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
}

.skill-section-title-row[b-qeifryyf56] {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.skill-section-title-row h3[b-qeifryyf56],
.skill-detail-section h3[b-qeifryyf56] {
    margin: var(--space-1) 0 0;
}

.skill-instructions-block[b-qeifryyf56] {
    margin: 0;
    max-height: 34rem;
    overflow: auto;
}

.skill-contract-grid[b-qeifryyf56] {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill-contract-card[b-qeifryyf56] {
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    min-width: 0;
    padding: var(--space-4);
}

.skill-contract-card p[b-qeifryyf56],
.skill-contract-card pre[b-qeifryyf56] {
    color: var(--color-text-muted);
    font: inherit;
    line-height: 1.55;
    margin: var(--space-2) 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.skill-detail-grid[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill-dependency-list[b-qeifryyf56] {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.skill-dependency-list li[b-qeifryyf56] {
    align-items: center;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(7rem, auto) 1fr auto;
    min-width: 0;
    padding: var(--space-3);
}

.skill-dependency-list code[b-qeifryyf56] {
    color: var(--color-accent-text);
}

.skill-dependency-list span[b-qeifryyf56],
.skill-dependency-list small[b-qeifryyf56] {
    color: var(--color-text-muted);
}

.skill-version-list[b-qeifryyf56] {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.skill-version-row[b-qeifryyf56] {
    align-items: center;
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto 1fr auto;
    padding: var(--space-3);
}

.skill-version-row strong[b-qeifryyf56] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
}

.skill-version-row span[b-qeifryyf56] {
    color: var(--color-text-muted);
}

.skill-detail-actions[b-qeifryyf56] {
    border-top: var(--hairline) solid var(--color-border);
    padding-top: var(--space-4);
}

.skill-version-authoring[b-qeifryyf56] {
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
}

.skill-version-authoring summary[b-qeifryyf56] {
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-display);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    padding: var(--space-4) var(--space-5);
    text-transform: uppercase;
}

.skill-version-authoring summary:hover[b-qeifryyf56] {
    background: var(--color-field-hover);
}

.skill-version-authoring[open] summary[b-qeifryyf56] {
    border-bottom: var(--hairline) solid var(--color-border);
}

.skill-version-authoring-body[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

@media (max-width: 72rem) {
    .skill-detail-stats[b-qeifryyf56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    .skill-contract-grid[b-qeifryyf56],
    .skill-detail-grid[b-qeifryyf56] {
        grid-template-columns: 1fr;
    }

    .skill-form-footer[b-qeifryyf56],
    .skill-detail-hero[b-qeifryyf56] {
        align-items: stretch;
        flex-direction: column;
    }

    .skill-form-footer .form-actions[b-qeifryyf56],
    .skill-detail-hero .button[b-qeifryyf56] {
        width: 100%;
    }

    .skill-form-footer .button[b-qeifryyf56],
    .skill-detail-hero .button[b-qeifryyf56] {
        flex: 1 1 auto;
    }

    .skill-card[b-qeifryyf56] {
        min-height: 0;
        padding: var(--space-4);
    }

    .skill-card-accent[b-qeifryyf56] {
        left: var(--space-4);
    }

    .skill-detail-stats[b-qeifryyf56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skill-dependency-list li[b-qeifryyf56],
    .skill-version-row[b-qeifryyf56] {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 34rem) {
    .skills-card-grid[b-qeifryyf56] {
        grid-template-columns: 1fr;
    }

    .skill-card-meta[b-qeifryyf56],
    .skill-detail-stats[b-qeifryyf56] {
        grid-template-columns: 1fr;
    }

    .skill-card-meta[b-qeifryyf56] {
        gap: var(--space-2);
    }

    .skill-card-meta > span[b-qeifryyf56] {
        align-items: baseline;
        display: flex;
        gap: var(--space-2);
        justify-content: space-between;
    }

    .skill-form-section[b-qeifryyf56],
    .skill-detail-section[b-qeifryyf56],
    .skill-detail-hero[b-qeifryyf56],
    .skill-version-authoring-body[b-qeifryyf56] {
        padding: var(--space-4);
    }

    .skill-section-heading[b-qeifryyf56] {
        gap: var(--space-3);
    }

    .skill-section-title-row[b-qeifryyf56] {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Interactive skill authoring + detail surfaces */
.skill-overlay[b-qeifryyf56] {
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    inset: var(--topbar-height) 0 0;
    position: fixed;
    z-index: 1200;
}

.skill-overlay-center[b-qeifryyf56] {
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.skill-modal[b-qeifryyf56] {
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border-strong);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.55);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    width: min(74rem, 100%);
}

.skill-modal-header[b-qeifryyf56],
.skill-drawer-header[b-qeifryyf56] {
    align-items: flex-start;
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-5);
}

.skill-modal-eyebrow[b-qeifryyf56],
.skill-step-intro > span[b-qeifryyf56] {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.skill-modal-header h2[b-qeifryyf56],
.skill-drawer-heading h2[b-qeifryyf56] {
    font-family: var(--font-poster);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-stretch: 85%;
    line-height: 0.95;
    margin: var(--space-2) 0;
    text-transform: uppercase;
}

.skill-modal-header p[b-qeifryyf56],
.skill-drawer-heading p[b-qeifryyf56],
.skill-step-intro p[b-qeifryyf56],
.skill-section-copy[b-qeifryyf56] {
    color: var(--color-text-muted);
    margin: 0;
}

.skill-icon-button[b-qeifryyf56] {
    align-items: center;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.4rem;
    height: 2.6rem;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
    width: 2.6rem;
}

.skill-icon-button:hover[b-qeifryyf56],
.skill-icon-button:focus-visible[b-qeifryyf56] {
    border-color: var(--color-accent);
    color: var(--color-text);
    outline: none;
}

.skill-stepper[b-qeifryyf56] {
    background: var(--color-field);
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skill-step[b-qeifryyf56] {
    background: transparent;
    border: 0;
    border-bottom: 0.18rem solid transparent;
    color: var(--color-text-faint);
    cursor: pointer;
    display: grid;
    gap: 0.18rem;
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.skill-step + .skill-step[b-qeifryyf56] {
    border-left: var(--hairline) solid var(--color-border);
}

.skill-step span[b-qeifryyf56] {
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.skill-step strong[b-qeifryyf56] {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-stretch: 80%;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.skill-step small[b-qeifryyf56] {
    color: var(--color-text-faint);
}

.skill-step:hover[b-qeifryyf56] {
    background: var(--color-field-hover);
}

.skill-step.is-active[b-qeifryyf56] {
    background: var(--color-accent-faint);
    border-bottom-color: var(--color-accent);
}

.skill-step.is-active strong[b-qeifryyf56] {
    color: var(--color-text);
}

.skill-modal-body[b-qeifryyf56] {
    min-height: 0;
    overflow: auto;
    padding: var(--space-5);
}

.skill-step-content[b-qeifryyf56],
.skill-version-editor[b-qeifryyf56] {
    display: grid;
    gap: var(--space-5);
}

.skill-step-intro[b-qeifryyf56] {
    align-items: flex-start;
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto 1fr;
    padding-bottom: var(--space-4);
}

.skill-step-intro h3[b-qeifryyf56] {
    margin: 0 0 var(--space-2);
}

.skill-draft-note[b-qeifryyf56] {
    background: var(--color-accent-faint);
    border-left: 0.2rem solid var(--color-accent);
    color: var(--color-text-muted);
    padding: var(--space-4);
}

.skill-modal-footer[b-qeifryyf56],
.skill-drawer-footer[b-qeifryyf56] {
    align-items: center;
    background: var(--color-field);
    border-top: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.skill-create-footer > span[b-qeifryyf56] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.skill-overlay-drawer[b-qeifryyf56] {
    justify-content: flex-end;
}

.skill-drawer[b-qeifryyf56] {
    background: var(--color-background-raised);
    border-left: var(--hairline) solid var(--color-border-strong);
    box-shadow: -1.5rem 0 5rem rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    width: min(58rem, 92vw);
}

.skill-drawer-heading[b-qeifryyf56] {
    min-width: 0;
}

.skill-drawer-heading code[b-qeifryyf56] {
    color: var(--color-accent-text);
    font-size: 0.78rem;
}

.skill-drawer-heading p[b-qeifryyf56] {
    max-width: 48rem;
}

.skill-drawer-heading .skill-detail-chips[b-qeifryyf56] {
    margin-top: var(--space-3);
}

.skill-drawer-tabs[b-qeifryyf56] {
    background: var(--color-field);
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    min-width: 0;
    overflow-x: auto;
}

.skill-drawer-tab[b-qeifryyf56] {
    background: transparent;
    border: 0;
    border-bottom: 0.18rem solid transparent;
    color: var(--color-text-faint);
    cursor: pointer;
    flex: 1 0 auto;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    padding: var(--space-4);
    text-transform: uppercase;
}

.skill-drawer-tab:hover[b-qeifryyf56] {
    background: var(--color-field-hover);
    color: var(--color-text-muted);
}

.skill-drawer-tab.is-active[b-qeifryyf56] {
    background: var(--color-accent-faint);
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
}

.skill-drawer-body[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5);
}

.skill-drawer-body .skill-detail-section[b-qeifryyf56] {
    display: grid;
    gap: var(--space-4);
}

.skill-lifecycle-actions[b-qeifryyf56] {
    margin-top: var(--space-2);
}

.skill-preview-block[b-qeifryyf56] {
    margin: 0;
    max-height: 28rem;
    overflow: auto;
}

.skill-drawer-footer[b-qeifryyf56] {
    justify-content: flex-end;
}

.skill-create-footer[b-qeifryyf56] {
    justify-content: space-between;
}

@media (max-width: 52rem) {
    .skill-overlay-center[b-qeifryyf56] {
        padding: 0;
    }

    .skill-modal[b-qeifryyf56] {
        height: 100dvh;
        max-height: 100dvh;
        width: 100%;
    }

    .skill-modal-header[b-qeifryyf56],
    .skill-drawer-header[b-qeifryyf56],
    .skill-modal-body[b-qeifryyf56],
    .skill-drawer-body[b-qeifryyf56] {
        padding: var(--space-4);
    }

    .skill-modal-footer[b-qeifryyf56],
    .skill-drawer-footer[b-qeifryyf56] {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-3) var(--space-4);
    }

    .skill-modal-footer .form-actions[b-qeifryyf56],
    .skill-create-footer .form-actions[b-qeifryyf56],
    .skill-drawer-footer .button[b-qeifryyf56] {
        width: 100%;
    }

    .skill-step small[b-qeifryyf56] {
        display: none;
    }

    .skill-drawer[b-qeifryyf56] {
        border-left: 0;
        width: 100%;
    }

    .skill-drawer-tab[b-qeifryyf56] {
        flex: 0 0 auto;
        min-width: 8rem;
    }
}

@media (max-width: 34rem) {
    .skill-step[b-qeifryyf56] {
        padding-inline: var(--space-3);
    }

    .skill-step strong[b-qeifryyf56] {
        font-size: 0.72rem;
    }

    .skill-modal-footer .form-actions[b-qeifryyf56],
    .skill-create-footer .form-actions[b-qeifryyf56] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skill-drawer-body .skill-detail-stats[b-qeifryyf56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/WorkItemDetail.razor.rz.scp.css */
/* Work item detail. Consumes tokens from wwwroot/app.css; defines no colour literals. */

/* ------------------------------------------------------------ Header metadata */

/* State, project and last change are supporting facts about one record, so they
   sit on a single labelled row under the title instead of reading as a sentence
   fragment competing with it. */
.work-item-meta[b-4vjq8hy4zu] {
    align-items: center;
    column-gap: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

.work-item-meta-item[b-4vjq8hy4zu] {
    align-items: baseline;
    color: var(--color-text-muted);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
}

.work-item-meta-label[b-4vjq8hy4zu] {
    color: var(--color-text-subtle);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-stretch: 75%;
    font-weight: 700;
    flex: none;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ------------------------------------------------ Maintenance disclosure */

.work-item-maintenance[b-4vjq8hy4zu] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius);
    margin-block: var(--space-3);
    min-width: 0;
}

.work-item-maintenance > summary[b-4vjq8hy4zu] {
    align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
}

.work-item-maintenance > summary:focus-visible[b-4vjq8hy4zu] {
    outline: 2px solid var(--color-accent-text);
    outline-offset: -2px;
}

.work-item-maintenance-notice[b-4vjq8hy4zu] {
    color: var(--color-text-muted);
    font-weight: 500;
}

.work-item-maintenance-body[b-4vjq8hy4zu] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
}

/* ------------------------------------------------ Detailed description */

.work-item-brief-empty[b-4vjq8hy4zu] {
    color: var(--color-text-faint);
    margin: 0;
}

.work-item-attachments[b-4vjq8hy4zu] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
}

.work-item-attachments > h3[b-4vjq8hy4zu] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-label);
    margin: 0;
}

/* ------------------------------------------------ Acceptance criteria tab */

/* The add and pre-mortem forms sit closed under the criteria cards: a reader comes to this tab to
   see what passed, and the forms were the tallest thing on it. */
.criteria-add[b-4vjq8hy4zu] {
    border: var(--hairline) dashed var(--color-border-strong);
}

.criteria-add + .criteria-add[b-4vjq8hy4zu] {
    margin-top: var(--space-3);
}

.criteria-add > summary[b-4vjq8hy4zu] {
    align-items: center;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    font-size: 0.88rem;
    font-weight: 600;
    gap: var(--space-2);
    list-style: none;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
}

.criteria-add > summary[b-4vjq8hy4zu]::-webkit-details-marker {
    display: none;
}

.criteria-add > summary:hover[b-4vjq8hy4zu],
.criteria-add[open] > summary[b-4vjq8hy4zu] {
    color: var(--color-text);
}

.criteria-add > summary > span[b-4vjq8hy4zu] {
    color: var(--color-accent-text);
}

.criteria-add[open][b-4vjq8hy4zu] {
    background: var(--color-surface-raised);
    border-style: solid;
}

.criteria-add[open] > summary[b-4vjq8hy4zu] {
    border-bottom: var(--hairline) solid var(--color-border);
}

.criteria-add > :not(summary)[b-4vjq8hy4zu] {
    padding: var(--space-4);
}

@media print {
    .execution-progress[b-4vjq8hy4zu] {
        max-height: none;
        overflow: visible;
    }
}

/* ------------------------------------------------------------ Execution tab */

/* Progress sits beside the live claim. Cap the feed so a long heartbeat
   history does not stretch the claim panel into a tall empty column. */
.execution-progress[b-4vjq8hy4zu] {
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.execution-truncated[b-4vjq8hy4zu] {
    margin-top: var(--space-3);
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .work-item-meta[b-4vjq8hy4zu] {
        column-gap: var(--space-3);
        row-gap: var(--space-1);
    }

    .work-item-meta-item[b-4vjq8hy4zu] {
        font-size: var(--text-sm);
        gap: var(--space-1);
    }

    .work-item-meta-label[b-4vjq8hy4zu] {
        font-size: var(--text-2xs);
    }

    /* A capped feed on a short viewport is most of the screen; a phone scrolls
       the page instead of a nested region. */
    .execution-progress[b-4vjq8hy4zu] {
        max-height: 16rem;
    }
}

.avatar-cell[b-4vjq8hy4zu] {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
}

.comment-author-block[b-4vjq8hy4zu] {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.feed-health-strip[b-4vjq8hy4zu] {
    display: flex;
    align-items: stretch;
    gap: .65rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .7rem;
    border: 1px solid var(--border-subtle);
    border-radius: .75rem;
    background: var(--surface-raised);
}

.feed-health-source[b-4vjq8hy4zu] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0;
    padding: .45rem .65rem;
    border-radius: .55rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.feed-health-source a[b-4vjq8hy4zu] { white-space: nowrap; }
.feed-health-healthy[b-4vjq8hy4zu] { color: var(--success, #3ddc84); }
.feed-health-degraded[b-4vjq8hy4zu] { color: var(--warning, #f5c451); }
.feed-health-unknown[b-4vjq8hy4zu] { color: var(--danger, #ff5b6e); }
.feed-health-dot[b-4vjq8hy4zu] { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* The cancellation reason is the main form content; keep it on its own row and
   let the two normal-height actions share a compact, right-aligned row. */
.cancel-dialog-actions[b-4vjq8hy4zu],
.cancel-dialog-actions form[b-4vjq8hy4zu],
.cancel-dialog-actions .field-group[b-4vjq8hy4zu] {
    min-width: 0;
    width: 100%;
}

.cancel-dialog-actions form[b-4vjq8hy4zu] {
    display: grid;
    gap: var(--space-3);
}

.cancel-dialog-actions .text-area-control[b-4vjq8hy4zu] {
    box-sizing: border-box;
    min-height: 9rem;
    resize: vertical;
    width: 100%;
}

.cancel-dialog-action-buttons[b-4vjq8hy4zu] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}
/* /Components/Projects/CoverageEntryReadout.razor.rz.scp.css */
.coverage-readout[b-coon1fhwmj] { overflow-wrap: anywhere; }
.coverage-long-text[b-coon1fhwmj] { white-space: pre-wrap; line-height: 1.65; }
dl[b-coon1fhwmj] { display: grid; grid-template-columns: minmax(8rem, 1fr) 3fr; gap: .5rem 1rem; }
dt[b-coon1fhwmj] { font-weight: 600; } dd[b-coon1fhwmj] { margin: 0; }
li[b-coon1fhwmj] { margin-block: .4rem; }
.coverage-alert[b-coon1fhwmj] { border-inline-start: 3px dashed var(--color-warning, #9b6510); padding-inline-start: .8rem; }
.coverage-check-failed[b-coon1fhwmj] { border-inline-start: 4px solid var(--color-danger, #b53a42); padding-inline-start: .8rem; font-weight: 600; }
code[b-coon1fhwmj] { white-space: normal; overflow-wrap: anywhere; }
summary[b-coon1fhwmj] { cursor: pointer; font-weight: 600; padding-block: .5rem; }
summary:focus-visible[b-coon1fhwmj], a:focus-visible[b-coon1fhwmj] { outline: 3px solid var(--color-focus, var(--color-text)); outline-offset: 3px; }
@media (max-width: 600px) { dl[b-coon1fhwmj] { grid-template-columns: minmax(0, 1fr); } dd[b-coon1fhwmj] { margin-bottom: .6rem; } }
/* /Components/Projects/CoverageExplorer.razor.rz.scp.css */
.coverage-explorer[b-5xc534k9f4] { color: var(--color-text); margin-block: 1.5rem; min-width: 0; }
.coverage-intro[b-5xc534k9f4] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.coverage-intro h2[b-5xc534k9f4] { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.2; letter-spacing: -.035em; margin: .35rem 0 .75rem; }
.coverage-eyebrow[b-5xc534k9f4] { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--color-text-muted, var(--color-text)); margin: 0 0 .3rem; }
.coverage-subtitle[b-5xc534k9f4], .coverage-count-note[b-5xc534k9f4] { color: var(--color-text-muted, var(--color-text)); line-height: 1.6; }
.coverage-readiness[b-5xc534k9f4] { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding: 1.2rem 1.4rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.coverage-readiness strong[b-5xc534k9f4] { display: block; font-size: 1.2rem; }
.coverage-readiness p[b-5xc534k9f4] { flex: 1 1 18rem; margin: 0; max-width: 45rem; line-height: 1.5; }
.coverage-metrics[b-5xc534k9f4] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.coverage-metric[b-5xc534k9f4] { text-align: left; padding: 1rem; border: 1px solid var(--color-border); border-top: 3px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; }
.coverage-metric strong[b-5xc534k9f4] { display: block; font-size: 1.9rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.coverage-metric span[b-5xc534k9f4] { display: block; font-size: .85rem; margin-top: .35rem; }
.coverage-metric:hover[b-5xc534k9f4] { border-color: var(--color-text-muted, var(--color-text)); }
.coverage-current[b-5xc534k9f4] { border-color: var(--color-success, #26714b); }
.coverage-stale[b-5xc534k9f4] { border-color: var(--color-warning, #9b6510); }
.coverage-failed[b-5xc534k9f4] { border-color: var(--color-danger, #b53a42); }
.coverage-count-note[b-5xc534k9f4] { font-size: .82rem; margin: .7rem 0 1.4rem; }
.coverage-discovery-note[b-5xc534k9f4] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; border-inline-start: 3px solid var(--color-warning, #9b6510); padding: .4rem 0 .4rem 1rem; margin-bottom: 1.5rem; }
.coverage-discovery-note span[b-5xc534k9f4] { display: block; margin-top: .3rem; font-size: .88rem; }
.coverage-views[b-5xc534k9f4] { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.coverage-views [aria-pressed=true][b-5xc534k9f4] { outline: 2px solid var(--color-text); outline-offset: 1px; }
.coverage-views .button-primary[b-5xc534k9f4] { margin-inline-start: auto; }
.coverage-browser[b-5xc534k9f4] { padding-block: 1rem; }
.coverage-browser h3[b-5xc534k9f4] { margin-top: 0; }
.coverage-filters[b-5xc534k9f4] { display: grid; grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr)); gap: .8rem; }
.coverage-filters label[b-5xc534k9f4] { display: grid; gap: .4rem; font-size: .85rem; min-width: 0; }
.field-control[b-5xc534k9f4] { max-width: 100%; min-width: 0; }
.coverage-result-tools[b-5xc534k9f4] { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.coverage-result-tools label[b-5xc534k9f4] { display: inline-flex; gap: .4rem; align-items: center; }
.coverage-result-tools p[b-5xc534k9f4] { margin-inline-end: auto; }
.coverage-area[b-5xc534k9f4] { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.coverage-area summary[b-5xc534k9f4] { display: flex; gap: .8rem; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.coverage-area summary[b-5xc534k9f4]::before { content: "+"; font-size: 1.2rem; width: 1rem; flex-shrink: 0; }
.coverage-area[open] summary[b-5xc534k9f4]::before { content: "−"; }
.coverage-area summary > span:first-of-type[b-5xc534k9f4] { flex: 1; }
.coverage-area summary small[b-5xc534k9f4] { display: block; font-size: .8rem; margin-top: .25rem; color: var(--color-text-muted, var(--color-text)); }
.coverage-area-counts[b-5xc534k9f4] { font-size: .83rem; }
.coverage-area-list[b-5xc534k9f4] { margin-block: 1.2rem; }
.coverage-entry-row[b-5xc534k9f4] { padding: 1rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.coverage-entry-heading[b-5xc534k9f4] { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.coverage-entry-link[b-5xc534k9f4] { padding: .2rem 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .25rem; overflow-wrap: anywhere; }
.coverage-entry-link[aria-current=true][b-5xc534k9f4] { border-inline-start: 3px solid var(--color-text); padding-inline-start: .6rem; }
.coverage-risk[b-5xc534k9f4] { font-size: .75rem; flex-shrink: 0; }
.coverage-badges[b-5xc534k9f4] { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.coverage-badge[b-5xc534k9f4] { display: inline-block; border: 1px solid var(--color-border); border-radius: 5px; padding: .2rem .45rem; font-size: .75rem; }
.coverage-badge.coverage-stale[b-5xc534k9f4] { border-color: var(--color-warning, #9b6510); border-style: dashed; }
.coverage-badge.coverage-failed[b-5xc534k9f4] { border-color: var(--color-danger, #b53a42); border-width: 2px; font-weight: 600; }
.coverage-badge.coverage-current[b-5xc534k9f4] { border-color: var(--color-success, #26714b); }
.coverage-entry-reason[b-5xc534k9f4] { margin: .65rem 0 0; line-height: 1.5; font-size: .9rem; }
.coverage-message[b-5xc534k9f4] { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); padding: 1.2rem; margin-block: 1rem; }
.coverage-advanced[b-5xc534k9f4] { border-top: 1px solid var(--color-border); padding-block: 1rem; font-size: .9rem; }
.coverage-advanced summary[b-5xc534k9f4] { cursor: pointer; font-weight: 600; }
.coverage-advanced p[b-5xc534k9f4], .coverage-explorer strong[b-5xc534k9f4], .coverage-readiness[b-5xc534k9f4] { overflow-wrap: anywhere; }
.coverage-table-scroll[b-5xc534k9f4] { max-width: 100%; overflow-x: auto; margin-block: 1rem; }
table[b-5xc534k9f4] { border-collapse: collapse; width: 100%; } th[b-5xc534k9f4], td[b-5xc534k9f4] { text-align: left; padding: .6rem; border-bottom: 1px solid var(--color-border); }
button:focus-visible[b-5xc534k9f4], summary:focus-visible[b-5xc534k9f4], input:focus-visible[b-5xc534k9f4], select:focus-visible[b-5xc534k9f4] { outline: 3px solid var(--color-focus, var(--color-text)); outline-offset: 3px; }
button[b-5xc534k9f4] { min-height: 2.75rem; } button:disabled[b-5xc534k9f4] { cursor: default; opacity: .6; }
@media (max-width: 1100px) { .coverage-metrics[b-5xc534k9f4] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coverage-filters[b-5xc534k9f4] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .coverage-intro[b-5xc534k9f4] { flex-direction: column; } .coverage-metrics[b-5xc534k9f4] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .coverage-filters[b-5xc534k9f4] { grid-template-columns: minmax(0, 1fr); } .coverage-readiness[b-5xc534k9f4] { gap: 1rem; padding: 1rem; } .coverage-entry-heading[b-5xc534k9f4], .coverage-area summary[b-5xc534k9f4] { flex-wrap: wrap; } .coverage-area[b-5xc534k9f4] { padding: .8rem; } .coverage-area-counts[b-5xc534k9f4] { width: 100%; padding-inline-start: 1.8rem; } .coverage-views .button-primary[b-5xc534k9f4] { margin-inline-start: 0; } .coverage-views .button[b-5xc534k9f4] { flex: 1 1 auto; } .coverage-explorer button[b-5xc534k9f4] { white-space: normal; max-width: 100%; } }
/* /Components/Projects/CoverageOverviewCard.razor.rz.scp.css */
.coverage-first-summary[b-e0tduimtoj] { padding:1.2rem; margin-block:1rem; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text); }
.coverage-overview-counts[b-e0tduimtoj] { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:1rem; }
.coverage-overview-counts dd[b-e0tduimtoj] { margin:0; font-size:1.6rem; font-weight:700; }
.coverage-overview-counts dt[b-e0tduimtoj] { font-size:.9rem; }
.coverage-first-summary li[b-e0tduimtoj] { margin-block:.4rem; }
/* /Components/Projects/ProjectCoverageSummary.razor.rz.scp.css */
.project-coverage-summary[b-lsc1pk5zbi] { display: grid; gap: .65rem; align-content: start; min-block-size: 9rem; }
.project-coverage-summary h2[b-lsc1pk5zbi] { margin: 0; font-size: 1.1rem; }
.project-coverage-summary-body p[b-lsc1pk5zbi] { display: block; margin: 0 0 .4rem; }
.project-coverage-summary small[b-lsc1pk5zbi] { display: block; opacity: .8; }
.project-coverage-summary .text-action[b-lsc1pk5zbi] { justify-self: start; }
/* /Components/Projects/ProjectMemoryPanel.razor.rz.scp.css */
.memory-list[b-d2cxfqxlne] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.memory-card[b-d2cxfqxlne] {
    --notch: var(--notch-md);
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    border-left: 3px solid var(--color-purple);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.memory-card:hover[b-d2cxfqxlne] {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    border-left-color: var(--color-accent);
}

.memory-card.is-pinned[b-d2cxfqxlne] {
    border-left-color: var(--color-success);
}

.memory-card.is-superseded[b-d2cxfqxlne] {
    border-left-color: var(--color-text-faint);
    opacity: 0.72;
}

.memory-card-header[b-d2cxfqxlne] {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
}

.memory-card-title-group[b-d2cxfqxlne] {
    align-items: center;
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.memory-title-button[b-d2cxfqxlne] {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0;
    text-align: left;
    transition: color var(--transition-fast);
}

.memory-title-button:hover[b-d2cxfqxlne],
.memory-title-button:focus-visible[b-d2cxfqxlne] {
    color: var(--color-accent);
    text-decoration: underline;
}

.memory-card-actions[b-d2cxfqxlne] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--space-1);
    max-width: 100%;
}

.memory-card-summary[b-d2cxfqxlne] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-text-dim);
    display: -webkit-box;
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.memory-card-footer[b-d2cxfqxlne] {
    align-items: center;
    border-top: var(--hairline) solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    margin-top: var(--space-1);
    min-width: 0;
    padding-top: var(--space-2);
}

.memory-chips[b-d2cxfqxlne] {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-1);
    max-width: 36rem;
    min-width: 0;
}

.memory-chips .status-chip[b-d2cxfqxlne] {
    max-width: min(14rem, 100%);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memory-chip-overflow[b-d2cxfqxlne] {
    flex: 0 0 auto;
}

.memory-provenance[b-d2cxfqxlne] {
    align-items: center;
    color: var(--color-text-faint);
    display: flex;
    flex: 1 1 18rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-left: auto;
    max-width: 100%;
    min-width: 0;
}

.memory-provenance .author-badge[b-d2cxfqxlne],
.memory-provenance .model-badge[b-d2cxfqxlne] {
    display: inline-block;
    max-width: min(16rem, 100%);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-provenance .author-badge[b-d2cxfqxlne] {
    color: var(--color-text-dim);
    font-weight: 500;
}

.memory-provenance .model-badge[b-d2cxfqxlne] {
    color: var(--color-text-faint);
    font-size: 0.7rem;
}

.memory-provenance .provenance-separator[b-d2cxfqxlne],
.memory-provenance .memory-updated[b-d2cxfqxlne] {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .memory-card[b-d2cxfqxlne] {
        padding: var(--space-3);
    }

    .memory-card-header[b-d2cxfqxlne] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .memory-card-actions[b-d2cxfqxlne] {
        width: 100%;
        justify-content: flex-start;
    }

    .memory-card-footer[b-d2cxfqxlne] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .memory-provenance[b-d2cxfqxlne] {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Projects/ProjectWorkItemsPanel.razor.rz.scp.css */
/* The List / Tree switch above the queue. The table itself is WorkItemsTable. */
.project-work-view-toggle[b-ncmfym81sf] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.project-work-view-chip[b-ncmfym81sf] {
    border: var(--hairline) solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    padding: 0.15rem 0.7rem;
    text-decoration: none;
}

.project-work-view-chip:hover[b-ncmfym81sf],
.project-work-view-chip:focus-visible[b-ncmfym81sf] {
    color: var(--color-text);
}

.project-work-view-chip.is-active[b-ncmfym81sf] {
    background: var(--color-surface-raised, transparent);
    color: var(--color-text);
    font-weight: 600;
}

.project-work-view-note[b-ncmfym81sf] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
/* /Components/Projects/ProjectWorkspaceShell.razor.rz.scp.css */
/* Full-width project workspace navigation. Desktop uses a compact sticky command bar;
   mobile collapses the same information into one explicit section picker. */

.project-workspace-shell[b-eea0nh4qyq] {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.project-workspace-navigation[b-eea0nh4qyq] {
    align-items: stretch;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    min-width: 0;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-2));
    z-index: 20;
}

.project-workspace-context[b-eea0nh4qyq] {
    align-items: center;
    border-right: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 2.25rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}

.project-workspace-context-mark[b-eea0nh4qyq] {
    align-items: center;
    background: var(--color-surface-raised);
    border: var(--hairline) solid var(--color-accent);
    color: var(--color-accent-text);
    display: inline-flex;
    font-size: 1rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.project-workspace-context-copy[b-eea0nh4qyq] {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.project-workspace-context-kicker[b-eea0nh4qyq],
.project-workspace-mobile-kicker[b-eea0nh4qyq] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-kicker);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-workspace-context-copy strong[b-eea0nh4qyq],
.project-workspace-mobile-copy strong[b-eea0nh4qyq] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-workspace-context-summary[b-eea0nh4qyq] {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-workspace-desktop-sections[b-eea0nh4qyq] {
    align-items: center;
    display: flex;
    min-width: 0;
    padding: var(--space-2);
}

.project-workspace-body[b-eea0nh4qyq] {
    max-width: none;
    min-width: 0;
    width: 100%;
}

.project-workspace-mobile-nav[b-eea0nh4qyq] {
    display: none;
}

@media (max-width: 72rem) {
    .project-workspace-navigation[b-eea0nh4qyq] {
        grid-template-columns: 1fr;
    }

    .project-workspace-context[b-eea0nh4qyq] {
        border-bottom: var(--hairline) solid var(--color-border);
        border-right: 0;
        grid-template-columns: 2rem minmax(0, 1fr);
        padding: var(--space-2) var(--space-3);
    }

    .project-workspace-context-mark[b-eea0nh4qyq] {
        height: 2rem;
        width: 2rem;
    }

    .project-workspace-context-copy[b-eea0nh4qyq] {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-2);
        align-items: baseline;
    }

    .project-workspace-context-kicker[b-eea0nh4qyq] {
        grid-column: 1 / -1;
    }

    .project-workspace-context-summary[b-eea0nh4qyq] {
        min-width: 0;
    }
}

@media (max-width: 54rem) {
    .project-workspace-shell[b-eea0nh4qyq] {
        gap: var(--space-3);
    }

    .project-workspace-navigation[b-eea0nh4qyq] {
        display: none;
    }

    .project-workspace-mobile-nav[b-eea0nh4qyq] {
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        display: block;
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-2));
        z-index: 20;
    }

    .project-workspace-mobile-nav > summary[b-eea0nh4qyq] {
        align-items: center;
        cursor: pointer;
        display: grid;
        gap: var(--space-2);
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        list-style: none;
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
    }

    .project-workspace-mobile-nav > summary[b-eea0nh4qyq]::-webkit-details-marker {
        display: none;
    }

    .project-workspace-mobile-glyph[b-eea0nh4qyq] {
        align-items: center;
        color: var(--color-accent-text);
        display: inline-flex;
        font-size: 0.95rem;
        height: 2rem;
        justify-content: center;
        width: 2rem;
    }

    .project-workspace-mobile-copy[b-eea0nh4qyq] {
        display: grid;
        gap: 0.05rem;
        min-width: 0;
    }

    .project-workspace-mobile-copy > span:last-child[b-eea0nh4qyq] {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-workspace-mobile-chevron[b-eea0nh4qyq] {
        color: var(--color-text-muted);
        font-size: 1rem;
        transition: transform var(--transition-fast);
    }

    .project-workspace-mobile-nav[open] .project-workspace-mobile-chevron[b-eea0nh4qyq] {
        transform: rotate(180deg);
    }

    .project-workspace-mobile-panel[b-eea0nh4qyq] {
        border-top: var(--hairline) solid var(--color-border);
        max-height: min(70vh, 42rem);
        overflow: auto;
        overscroll-behavior: contain;
        padding: var(--space-3);
    }
}

@media (max-width: 36rem) {
    .project-workspace-mobile-copy > span:last-child[b-eea0nh4qyq] {
        display: none;
    }

    .project-workspace-mobile-nav > summary[b-eea0nh4qyq] {
        padding-inline: var(--space-2);
    }

    .project-workspace-mobile-panel[b-eea0nh4qyq] {
        padding: var(--space-2);
    }
}

@media print {
    .project-workspace-navigation[b-eea0nh4qyq],
    .project-workspace-mobile-nav[b-eea0nh4qyq] {
        display: none !important;
    }
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
.app-avatar[b-82ep6uznl3] {
    align-items: center;
    border-radius: var(--radius-sm, 0.25rem);
    box-sizing: border-box;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
}

.app-avatar.is-human[b-82ep6uznl3] {
    background: #32091e;
    color: #ff4d97;
}

.app-avatar.is-agent[b-82ep6uznl3] {
    background: #1d0b32;
    color: #b06cff;
}

.app-avatar.is-small[b-82ep6uznl3] {
    font-size: 0.65rem;
    height: 1.35rem;
    width: 1.55rem;
}

.app-avatar.is-medium[b-82ep6uznl3] {
    font-size: var(--text-xs, 0.75rem);
    height: 1.75rem;
    width: 2rem;
}

.app-avatar.is-large[b-82ep6uznl3] {
    font-size: var(--text-sm, 0.875rem);
    height: 2.25rem;
    width: 2.6rem;
}

.app-avatar.is-xlarge[b-82ep6uznl3] {
    font-size: var(--text-lg, 1.125rem);
    height: 3.5rem;
    width: 4rem;
}

.app-avatar-img[b-82ep6uznl3] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.app-avatar-initial[b-82ep6uznl3] {
    line-height: 1;
}
/* /Components/Shared/BrandMark.razor.rz.scp.css */
.brand-mark[b-1qd2mavjws] {
    display: block;
    flex: none;
    filter: drop-shadow(0 0 0.6rem var(--color-accent-glow));
}

.brand-mark-tile[b-1qd2mavjws] {
    fill: var(--color-accent);
}

.brand-mark-slash[b-1qd2mavjws],
.brand-mark-bar[b-1qd2mavjws] {
    fill: var(--color-ink);
}
/* /Components/Shared/Drawer.razor.rz.scp.css */
/* Overlay and panel geometry, generalised from the skills page's hand-built drawer so there is
   one implementation rather than one per page. */

.drawer-overlay[b-0axezni6qy] {
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    inset: var(--topbar-height) 0 0;
    justify-content: flex-end;
    position: fixed;
    z-index: 1200;
}

.drawer[b-0axezni6qy] {
    background: var(--color-background-raised);
    border-left: var(--hairline) solid var(--color-border-strong);
    box-shadow: -1.5rem 0 5rem rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    width: min(58rem, 92vw);
}

/* A narrow variant for a short create form, so a four-field form does not arrive as a
   near-full-width panel. */
.drawer.is-compact[b-0axezni6qy] {
    width: min(38rem, 92vw);
}

.drawer-header[b-0axezni6qy] {
    align-items: start;
    border-bottom: var(--hairline) solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.drawer-heading[b-0axezni6qy] {
    min-width: 0;
}

.drawer-heading h2[b-0axezni6qy] {
    font-family: var(--font-display);
    font-size: 1.35rem;
    margin: 0;
}

.drawer-heading p[b-0axezni6qy] {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: var(--space-1) 0 0;
    max-width: 48rem;
}

.drawer-eyebrow[b-0axezni6qy] {
    color: var(--color-text-faint);
    display: block;
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    letter-spacing: var(--tracking-kicker);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
}

.drawer-close[b-0axezni6qy] {
    background: transparent;
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-muted);
    cursor: pointer;
    flex: none;
    font-size: 1.1rem;
    height: 2.25rem;
    line-height: 1;
    width: 2.25rem;
}

.drawer-close:hover[b-0axezni6qy],
.drawer-close:focus-visible[b-0axezni6qy] {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.drawer-toolbar[b-0axezni6qy] {
    border-bottom: var(--hairline) solid var(--color-border);
    padding: var(--space-3) var(--space-5);
}

.drawer-body[b-0axezni6qy] {
    overflow-y: auto;
    padding: var(--space-5);
}

/* The reason the pattern is worth generalising: actions stay reachable without scrolling to the
   end of a long form. */
.drawer-footer[b-0axezni6qy] {
    align-items: center;
    background: var(--color-surface);
    border-top: var(--hairline) solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
}

@media (max-width: 48rem) {
    .drawer[b-0axezni6qy],
    .drawer.is-compact[b-0axezni6qy] {
        width: 100%;
    }

    .drawer-body[b-0axezni6qy],
    .drawer-header[b-0axezni6qy],
    .drawer-footer[b-0axezni6qy] {
        padding-inline: var(--space-4);
    }
}
/* /Components/Shared/FilterBar.razor.rz.scp.css */
/* The applied filters, above the results. The filter card collapses on a phone and is easy to
   scroll past on a desktop, so without this the only evidence a list was narrowed was the row
   count. */

.filter-chips[b-du6bhwn7cy] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.filter-chip[b-du6bhwn7cy] {
    align-items: center;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border-strong);
    display: inline-flex;
    font-size: 0.75rem;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
}

.filter-chip-field[b-du6bhwn7cy] {
    color: var(--color-text-faint);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.filter-chip-value[b-du6bhwn7cy] {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-chip-remove[b-du6bhwn7cy] {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 var(--space-2);
    text-decoration: none;
}

.filter-chip-remove:hover[b-du6bhwn7cy],
.filter-chip-remove:focus-visible[b-du6bhwn7cy] {
    color: var(--color-accent-text);
}
/* /Components/Shared/FilterDisclosure.razor.rz.scp.css */
.filter-disclosure-toggle[b-7plv7iq2ob] {
    display: none;
}

@media (max-width: 46rem) {
    .filter-disclosure[b-7plv7iq2ob] {
        margin-bottom: var(--space-4);
    }

    .filter-disclosure-toggle[b-7plv7iq2ob] {
        --notch: var(--notch-sm);
        align-items: center;
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
        color: var(--color-text);
        cursor: pointer;
        display: flex;
        gap: var(--space-3);
        min-height: var(--touch-min);
        padding: 0 var(--space-4);
        user-select: none;
        width: 100%;
    }

    .filter-disclosure-title[b-7plv7iq2ob] {
        flex: 1 1 auto;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-stretch: 80%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
    }

    .filter-disclosure-count[b-7plv7iq2ob] {
        --notch: 0.25rem;
        background: var(--color-accent-soft);
        border: var(--hairline) solid var(--color-accent);
        clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
        color: var(--color-accent-text);
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        padding: 0.15rem 0.4rem;
        text-transform: uppercase;
    }

    .filter-disclosure-hint[b-7plv7iq2ob] {
        color: var(--color-text-subtle);
        font-size: 0.72rem;
        font-weight: 600;
    }

    .filter-disclosure-hint[b-7plv7iq2ob]::after {
        content: "Show";
    }

    .filter-disclosure-state:checked + .filter-disclosure-toggle .filter-disclosure-hint[b-7plv7iq2ob]::after {
        content: "Hide";
    }

    .filter-disclosure-state:checked + .filter-disclosure-toggle[b-7plv7iq2ob] {
        border-color: var(--color-accent);
        color: var(--color-accent-text);
    }

    .filter-disclosure-state:not(:checked) ~ .filter-disclosure-body[b-7plv7iq2ob] {
        display: none;
    }

    .filter-disclosure-body[b-7plv7iq2ob] {
        margin-top: var(--space-3);
    }
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   The toggle's height already tracks --touch-min, which that block retunes; only
   the type set here as literals needs restating. */
@media (max-width: 48rem) {
    .filter-disclosure[b-7plv7iq2ob] {
        margin-bottom: var(--space-3);
    }

    .filter-disclosure-toggle[b-7plv7iq2ob] {
        gap: var(--space-2);
        padding: 0 var(--space-3);
    }

    .filter-disclosure-title[b-7plv7iq2ob] {
        font-size: 0.625rem;
    }

    .filter-disclosure-count[b-7plv7iq2ob] {
        font-size: 0.5rem;
        padding: 0.1rem 0.3rem;
    }

    .filter-disclosure-hint[b-7plv7iq2ob] {
        font-size: 0.5625rem;
    }

    .filter-disclosure-body[b-7plv7iq2ob] {
        margin-top: var(--space-2);
    }
}
/* /Components/Shared/InstallAppPrompt.razor.rz.scp.css */
.install-prompt[b-8tu3w9wiid] {
    align-items: flex-start;
    background: linear-gradient(152deg, var(--color-surface), var(--color-background-raised));
    border: var(--hairline) solid var(--color-border-strong);
    bottom: calc(var(--tab-bar-height, 0px) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-panel);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch-md)), calc(100% - var(--notch-md)) 100%, 0 100%);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    left: max(var(--space-3), env(safe-area-inset-left, 0px));
    max-width: 28rem;
    padding: var(--space-3) var(--space-4);
    position: fixed;
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
    z-index: 40;
}

.install-prompt-kicker[b-8tu3w9wiid] {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
}

.install-prompt-title[b-8tu3w9wiid] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
}

.install-prompt-body[b-8tu3w9wiid] {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0;
}

.install-prompt-copy[b-8tu3w9wiid] {
    flex: 1 1 12rem;
    min-width: 0;
}

.install-prompt-actions[b-8tu3w9wiid] {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css.
   This banner only ever appears on the surface it is being shrunk for, so it has
   to earn its footprint: it sits above the tab bar and covers page content. */
@media (max-width: 48rem) {
    .install-prompt[b-8tu3w9wiid] {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .install-prompt-kicker[b-8tu3w9wiid] {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
        margin-bottom: 0;
    }

    .install-prompt-title[b-8tu3w9wiid] {
        font-size: 0.75rem;
    }

    .install-prompt-body[b-8tu3w9wiid] {
        font-size: 0.625rem;
        line-height: 1.35;
    }
}
/* /Components/Shared/MultiSelectFilter.razor.rz.scp.css */
.multi-select-filter[b-pmi1lgokw5] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.multi-select-toggle[b-pmi1lgokw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 2.35rem;
    padding: 0.35rem 0.65rem;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.82rem;
    user-select: none;
    list-style: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.multi-select-toggle[b-pmi1lgokw5]::-webkit-details-marker {
    display: none;
}

.multi-select-toggle:hover[b-pmi1lgokw5] {
    border-color: var(--color-border-strong);
}

.multi-select-toggle:focus-visible[b-pmi1lgokw5] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.multi-select-filter.has-selection .multi-select-toggle[b-pmi1lgokw5] {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent-soft) 30%, var(--color-field));
}

.multi-select-label[b-pmi1lgokw5] {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-stretch: 80%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.multi-select-summary[b-pmi1lgokw5] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
}

.multi-select-summary.is-active[b-pmi1lgokw5] {
    color: var(--color-accent-text);
    font-weight: 600;
}

/* Matches the caret on a themed select. At 0.7rem in the subtle text colour the glyph read as
   a hyphen, so the control did not look like a dropdown at all. */
.multi-select-chevron[b-pmi1lgokw5] {
    font-size: 0.85rem;
    color: var(--color-accent-text);
    flex-shrink: 0;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.multi-select-filter[open][b-pmi1lgokw5],
.multi-select-filter.is-open[b-pmi1lgokw5] {
    z-index: 100;
}

.multi-select-filter[open] .multi-select-chevron[b-pmi1lgokw5],
.multi-select-filter.is-open .multi-select-chevron[b-pmi1lgokw5] {
    transform: rotate(180deg);
}

.multi-select-dropdown[b-pmi1lgokw5] {
    position: fixed;
    inset: unset;
    margin: 0;
    min-width: 14rem;
    max-width: 22rem;
    max-height: calc(100dvh - 1rem);
    box-sizing: border-box;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 120;
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.4rem), calc(100% - 0.4rem) 100%, 0 100%);
}

.multi-select-dropdown:popover-open[b-pmi1lgokw5] {
    display: flex;
}

.multi-select-dropdown[b-pmi1lgokw5]::backdrop {
    background: transparent;
    pointer-events: none;
}

.multi-select-actions[b-pmi1lgokw5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2);
    border-bottom: var(--hairline) solid var(--color-border);
    margin-bottom: var(--space-2);
}

.action-link[b-pmi1lgokw5] {
    background: none;
    border: none;
    color: var(--color-accent-text);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.action-divider[b-pmi1lgokw5] {
    color: var(--color-border-strong);
    font-size: 0.7rem;
}

.multi-select-search-wrap[b-pmi1lgokw5] {
    padding: 0 var(--space-1) var(--space-2);
}

.multi-select-search[b-pmi1lgokw5] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-text);
    font-size: 0.78rem;
    outline: none;
}

.multi-select-search:focus[b-pmi1lgokw5] {
    border-color: var(--color-accent);
}

.multi-select-list[b-pmi1lgokw5] {
    min-height: 0;
    max-height: 14rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.multi-select-option[b-pmi1lgokw5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text);
    border-radius: 2px;
    user-select: none;
}

.multi-select-option:hover[b-pmi1lgokw5] {
    background: var(--color-hover);
}

.multi-select-option.is-selected[b-pmi1lgokw5] {
    background: var(--color-accent-soft);
}

.option-content[b-pmi1lgokw5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    overflow: hidden;
}

.option-label[b-pmi1lgokw5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-subtitle[b-pmi1lgokw5] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

.option-count[b-pmi1lgokw5] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-left: auto;
}

.multi-select-empty[b-pmi1lgokw5] {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 0.78rem;
}

.option-tone[b-pmi1lgokw5] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* The swatch takes the shared tone vocabulary, not a second palette of hard-coded hexes. The
   old rules keyed on colour names, so every call site that already passed a tone name - the work
   queues did - rendered an invisible swatch. */
.option-tone[data-tone="neutral"][b-pmi1lgokw5] { background: var(--color-neutral); }
.option-tone[data-tone="info"][b-pmi1lgokw5] { background: var(--color-info); }
.option-tone[data-tone="ai"][b-pmi1lgokw5] { background: var(--color-purple); }
.option-tone[data-tone="attention"][b-pmi1lgokw5] { background: var(--color-warning); }
.option-tone[data-tone="success"][b-pmi1lgokw5] { background: var(--color-success); }
.option-tone[data-tone="danger"][b-pmi1lgokw5] { background: var(--color-danger); }
.option-tone[data-tone="brand"][b-pmi1lgokw5] { background: var(--color-accent); }

@media (max-width: 46rem) {
    .multi-select-dropdown[b-pmi1lgokw5] {
        min-width: 0;
    }
}
/* /Components/Shared/RichText.razor.rz.scp.css */
.rich-text[b-3tv6ye6oqb] {
    color: var(--color-text);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.rich-text[b-3tv6ye6oqb]  pre {
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius);
    max-width: 100%;
    overflow: auto;
    padding: var(--space-4);
}

.rich-text[b-3tv6ye6oqb]  code {
    font-family: var(--font-mono);
}

.rich-text[b-3tv6ye6oqb]  p:first-child,
.rich-text[b-3tv6ye6oqb]  pre:first-child {
    margin-top: 0;
}

.rich-text[b-3tv6ye6oqb]  p:last-child,
.rich-text[b-3tv6ye6oqb]  pre:last-child {
    margin-bottom: 0;
}

/* A long brief read as a document: a work item's detailed description. It spans its panel
   instead of the 72ch measure other rich text keeps, and its Markdown headings, lists and rules
   get a hierarchy. Without one they inherited the page's poster headings - condensed, uppercase,
   line-height 1 - with the browser's margins, so every section ran into the next. */
.rich-text.is-document[b-3tv6ye6oqb] {
    color: var(--color-text-muted);
    font-size: 0.93rem;
    line-height: 1.7;
    max-width: none;
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text);
    line-height: 1.25;
    margin: var(--space-7) 0 var(--space-3);
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(h1, h2) {
    border-bottom: var(--hairline) solid var(--color-border);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-label);
    padding-bottom: var(--space-2);
}

.rich-text.is-document[b-3tv6ye6oqb]  h3 {
    color: var(--color-accent-text);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(h4, h5, h6) {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-stretch: normal;
    letter-spacing: 0;
    text-transform: none;
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.rich-text.is-document[b-3tv6ye6oqb]  p {
    margin: 0 0 var(--space-4);
}

.rich-text.is-document[b-3tv6ye6oqb]  strong {
    color: var(--color-text);
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(ul, ol) {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-left: 1.4rem;
}

.rich-text.is-document[b-3tv6ye6oqb]  li::marker {
    color: var(--color-accent-text);
}

.rich-text.is-document[b-3tv6ye6oqb]  li > :is(p, ul, ol) {
    margin-bottom: 0;
}

.rich-text.is-document[b-3tv6ye6oqb]  blockquote {
    border-left: 3px solid var(--color-border-loud);
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
}

.rich-text.is-document[b-3tv6ye6oqb]  hr {
    border: 0;
    border-top: var(--hairline) solid var(--color-border);
    margin: var(--space-6) 0;
}

.rich-text.is-document[b-3tv6ye6oqb]  a {
    color: var(--color-accent-text);
}

.rich-text.is-document[b-3tv6ye6oqb]  table {
    border-collapse: collapse;
    display: block;
    margin: 0 0 var(--space-4);
    max-width: 100%;
    overflow-x: auto;
}

.rich-text.is-document[b-3tv6ye6oqb]  :is(th, td) {
    border: var(--hairline) solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.rich-text.is-document[b-3tv6ye6oqb]  th {
    background: var(--color-background-elevated);
    color: var(--color-text);
}

/* Mobile density tier: ≤ 48rem. See the block of the same name in app.css. */
@media (max-width: 48rem) {
    .rich-text[b-3tv6ye6oqb] {
        line-height: 1.5;
    }

    .rich-text[b-3tv6ye6oqb]  pre {
        font-size: 0.625rem;
        padding: var(--space-2);
    }

    .rich-text.is-document[b-3tv6ye6oqb] {
        font-size: 0.875rem;
    }

    .rich-text.is-document[b-3tv6ye6oqb]  :is(h1, h2, h3, h4, h5, h6) {
        margin-top: var(--space-6);
    }
}
/* /Components/Shared/SecretField.razor.rz.scp.css */
/* Scoped to SecretField. These rules were an inline <style> block in the component, which
   emitted them into the page body on every render and put them outside the stylesheet the rest
   of the design system lives in. */
.secret-field-heading[b-mz4q5v1izp] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.secret-field-heading label[b-mz4q5v1izp] { margin: 0; }
.secret-field-state[b-mz4q5v1izp] { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.secret-field-state-set[b-mz4q5v1izp] { opacity: 1; }
.secret-field-textarea[b-mz4q5v1izp] { width: 100%; box-sizing: border-box; min-height: 10rem; resize: vertical; font-family: var(--font-mono, monospace); line-height: 1.4; }
.secret-field-row .field-control[b-mz4q5v1izp] { flex: 1 1 22rem; }
.secret-field-actions[b-mz4q5v1izp] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.secret-field-help[b-mz4q5v1izp] { display: block; margin-top: .45rem; line-height: 1.45; }

/* Help sentences are separate elements; keep them from running together when Razor drops the
   whitespace between them. */
.secret-field-help-part[b-mz4q5v1izp]::before {
    content: " ";
    white-space: pre;
}
/* /Components/Shared/SectionNavigation.razor.rz.scp.css */
/* Grouped section navigation, shared by every area that uses it (project workspace,
   administration settings). Intentionally shallow: one always-visible category row on
   desktop, direct grouped links inside the mobile section picker. */

.section-nav-toolbar[b-h3d1b5ycuo] {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
}

.section-nav-home-link[b-h3d1b5ycuo],
.section-nav-dropdown > summary[b-h3d1b5ycuo] {
    align-items: center;
    background: transparent;
    border: var(--hairline) solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 1.65rem minmax(0, auto) auto;
    list-style: none;
    min-height: 3rem;
    padding: 0.45rem 0.65rem;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.section-nav-home-link[b-h3d1b5ycuo] {
    grid-template-columns: 1.65rem auto;
}

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

.section-nav-home-link:hover[b-h3d1b5ycuo],
.section-nav-dropdown > summary:hover[b-h3d1b5ycuo],
.section-nav-dropdown[open] > summary[b-h3d1b5ycuo] {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    color: var(--color-text);
}

.section-nav-home-link:focus-visible[b-h3d1b5ycuo],
.section-nav-dropdown > summary:focus-visible[b-h3d1b5ycuo],
.section-nav-menu-item:focus-visible[b-h3d1b5ycuo],
.section-nav-mobile-link:focus-visible[b-h3d1b5ycuo] {
    box-shadow: var(--focus-ring);
    outline: none;
}

.section-nav-home-link.active[b-h3d1b5ycuo],
.section-nav-dropdown.active > summary[b-h3d1b5ycuo] {
    background: var(--color-surface-raised);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.section-nav-trigger-glyph[b-h3d1b5ycuo] {
    align-items: center;
    color: currentColor;
    display: inline-flex;
    font-size: 0.9rem;
    height: 1.65rem;
    justify-content: center;
    width: 1.65rem;
}

.section-nav-trigger-copy[b-h3d1b5ycuo] {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.section-nav-trigger-label[b-h3d1b5ycuo] {
    color: currentColor;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-nav-trigger-current[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.62rem;
    line-height: 1.1;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-nav-dropdown.active .section-nav-trigger-current[b-h3d1b5ycuo] {
    color: var(--color-text-muted);
}

.section-nav-trigger-chevron[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.8rem;
    margin-left: 0.15rem;
    transition: transform var(--transition-fast);
}

.section-nav-dropdown[open] .section-nav-trigger-chevron[b-h3d1b5ycuo] {
    transform: rotate(180deg);
}

.section-nav-dropdown[b-h3d1b5ycuo] {
    position: relative;
}

.section-nav-dropdown[open][b-h3d1b5ycuo] {
    z-index: 60;
}

.section-nav-menu[b-h3d1b5ycuo] {
    background: var(--color-field);
    border: var(--hairline) solid var(--color-border-strong);
    box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.38);
    left: 0;
    min-width: 20rem;
    padding: var(--space-2);
    position: absolute;
    top: calc(100% + 0.4rem);
    width: 23rem;
    z-index: 60;
}

/* Trailing menus open leftwards so a wide panel stays on screen. How many need it
   depends on how many categories the area has: the last one always sits right of
   centre, the one before it only once the row is long (the project workspace's five
   categories, not the three in settings), where left-aligning it would push the panel
   off the opposite edge. */
.section-nav-dropdown:last-child .section-nav-menu[b-h3d1b5ycuo],
.section-nav-toolbar:has(> :nth-child(6)) .section-nav-dropdown:nth-last-child(2) .section-nav-menu[b-h3d1b5ycuo] {
    left: auto;
    right: 0;
}

.section-nav-menu-head[b-h3d1b5ycuo] {
    align-items: center;
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 2rem minmax(0, 1fr);
    margin-bottom: var(--space-2);
    padding: var(--space-2);
}

.section-nav-menu-glyph[b-h3d1b5ycuo] {
    align-items: center;
    color: var(--color-accent-text);
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.section-nav-menu-head > span:last-child[b-h3d1b5ycuo] {
    display: grid;
    gap: 0.1rem;
}

.section-nav-menu-head strong[b-h3d1b5ycuo],
.section-nav-mobile-group header strong[b-h3d1b5ycuo] {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-stretch: 75%;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

.section-nav-menu-head small[b-h3d1b5ycuo],
.section-nav-mobile-group header small[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.67rem;
    font-weight: 400;
    line-height: 1.35;
}

.section-nav-menu-list[b-h3d1b5ycuo] {
    display: grid;
    gap: 2px;
}

.section-nav-menu-item[b-h3d1b5ycuo] {
    align-items: center;
    border: var(--hairline) solid transparent;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    min-height: 3.35rem;
    padding: 0.55rem 0.65rem;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.section-nav-menu-item:hover[b-h3d1b5ycuo] {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
}

.section-nav-menu-item.active[b-h3d1b5ycuo] {
    background: var(--color-surface-raised);
    border-color: var(--color-accent);
}

.section-nav-menu-item-glyph[b-h3d1b5ycuo] {
    align-items: center;
    color: var(--color-text-faint);
    display: inline-flex;
    font-size: 0.9rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.section-nav-menu-item.active .section-nav-menu-item-glyph[b-h3d1b5ycuo],
.section-nav-menu-item.active .section-nav-menu-item-copy strong[b-h3d1b5ycuo],
.section-nav-menu-item.active .section-nav-menu-item-arrow[b-h3d1b5ycuo] {
    color: var(--color-accent-text);
}

.section-nav-menu-item-copy[b-h3d1b5ycuo] {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.section-nav-menu-item-copy strong[b-h3d1b5ycuo] {
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 650;
}

.section-nav-menu-item-copy span[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.66rem;
    line-height: 1.3;
}

.section-nav-menu-item-arrow[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.78rem;
}

.section-nav-mobile-index[b-h3d1b5ycuo] {
    display: grid;
    gap: var(--space-4);
}

.section-nav-mobile-link[b-h3d1b5ycuo] {
    align-items: center;
    border: var(--hairline) solid transparent;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 2rem minmax(0, 1fr);
    min-height: var(--touch-min);
    padding: 0.55rem var(--space-2);
    text-decoration: none;
}

.section-nav-mobile-link:hover[b-h3d1b5ycuo] {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
}

.section-nav-mobile-link.active[b-h3d1b5ycuo] {
    background: var(--color-surface-raised);
    border-color: var(--color-accent);
}

.section-nav-mobile-glyph[b-h3d1b5ycuo],
.section-nav-mobile-group-glyph[b-h3d1b5ycuo] {
    align-items: center;
    color: var(--color-text-faint);
    display: inline-flex;
    font-size: 0.9rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.section-nav-mobile-link.active .section-nav-mobile-glyph[b-h3d1b5ycuo],
.section-nav-mobile-link.active .section-nav-mobile-copy strong[b-h3d1b5ycuo] {
    color: var(--color-accent-text);
}

.section-nav-mobile-copy[b-h3d1b5ycuo] {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.section-nav-mobile-copy strong[b-h3d1b5ycuo] {
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 650;
}

.section-nav-mobile-copy span[b-h3d1b5ycuo] {
    color: var(--color-text-faint);
    font-size: 0.66rem;
    line-height: 1.3;
}

.section-nav-mobile-group[b-h3d1b5ycuo] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
}

.section-nav-mobile-group header[b-h3d1b5ycuo] {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: 0 var(--space-2);
}

.section-nav-mobile-group header > span:last-child[b-h3d1b5ycuo] {
    display: grid;
    gap: 0.1rem;
}

.section-nav-mobile-group-glyph[b-h3d1b5ycuo] {
    color: var(--color-accent-text);
}

.section-nav-mobile-links[b-h3d1b5ycuo] {
    display: grid;
    gap: 2px;
}

@media (max-width: 72rem) {
    .section-nav-toolbar[b-h3d1b5ycuo] {
        gap: 0.25rem;
    }

    .section-nav-home-link[b-h3d1b5ycuo],
    .section-nav-dropdown > summary[b-h3d1b5ycuo] {
        min-height: 2.7rem;
        padding: 0.35rem 0.55rem;
    }

    .section-nav-trigger-label[b-h3d1b5ycuo] {
        font-size: 0.72rem;
    }

    .section-nav-trigger-current[b-h3d1b5ycuo] {
        display: none;
    }
}

@media (max-width: 60rem) {
    .section-nav-trigger-glyph[b-h3d1b5ycuo] {
        display: none;
    }

    .section-nav-home-link[b-h3d1b5ycuo],
    .section-nav-dropdown > summary[b-h3d1b5ycuo] {
        grid-template-columns: minmax(0, auto) auto;
    }

    .section-nav-home-link[b-h3d1b5ycuo] {
        grid-template-columns: auto;
    }
}
/* /Components/WorkItems/AcceptanceCriteriaBoard.razor.rz.scp.css */
/* Acceptance criteria: one card per criterion, details on request. Tokens from wwwroot/app.css. */

.criteria-board[b-fbnlozbmkp] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
}

.criteria-board svg[b-fbnlozbmkp] {
    fill: none;
    flex: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

/* ---- Header: what this is, and how far along it is ---- */

.criteria-board-header[b-fbnlozbmkp] {
    align-items: center;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 22rem);
}

.criteria-board-icon[b-fbnlozbmkp] {
    align-items: center;
    background: var(--color-accent-soft);
    border: var(--hairline) solid color-mix(in srgb, var(--color-accent) 60%, transparent);
    color: var(--color-accent-text);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.criteria-board-icon svg[b-fbnlozbmkp] {
    height: 1.4rem;
    width: 1.4rem;
}

.criteria-board-heading h2[b-fbnlozbmkp] {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}

.criteria-board-heading p[b-fbnlozbmkp] {
    color: var(--color-text-subtle);
    font-size: 0.84rem;
    margin: 0.2rem 0 0;
}

.criteria-progress[b-fbnlozbmkp] {
    display: grid;
    gap: var(--space-2);
}

.criteria-progress-label[b-fbnlozbmkp] {
    align-items: baseline;
    display: flex;
    font-size: 0.84rem;
    justify-content: space-between;
}

.criteria-progress-label strong[b-fbnlozbmkp] {
    color: var(--color-text);
    font-weight: 600;
}

.criteria-progress-label span[b-fbnlozbmkp] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.criteria-progress-track[b-fbnlozbmkp] {
    background: var(--color-border);
    height: 0.4rem;
    overflow: hidden;
}

.criteria-progress-track > span[b-fbnlozbmkp] {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    display: block;
    height: 100%;
    transition: width var(--transition-slow);
}

.criteria-legend[b-fbnlozbmkp] {
    color: var(--color-text-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    gap: var(--space-1) var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.criteria-legend li[b-fbnlozbmkp] {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.criteria-legend li > span[b-fbnlozbmkp] {
    background: var(--legend-colour, var(--color-neutral));
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.criteria-legend .is-passed[b-fbnlozbmkp] { --legend-colour: var(--color-success); }
.criteria-legend .is-failed[b-fbnlozbmkp] { --legend-colour: var(--color-danger); }
.criteria-legend .is-skipped[b-fbnlozbmkp] { --legend-colour: var(--color-warning); }

/* ---- Cards ---- */

.criteria-cards[b-fbnlozbmkp] {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.criterion-card[b-fbnlozbmkp] {
    background: var(--color-background-raised);
    border: var(--hairline) solid var(--color-border);
    transition: border-color var(--transition-fast);
}

.criterion-card:hover[b-fbnlozbmkp] {
    border-color: var(--color-border-strong);
}

.criterion-card.is-expanded[b-fbnlozbmkp] {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.criterion-summary[b-fbnlozbmkp] {
    align-items: start;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-4) var(--space-5);
}

/* The state mark: an empty ring until someone records a result, then a filled disc. */
.criterion-state[b-fbnlozbmkp] {
    align-items: center;
    border: 2px solid var(--color-border-loud);
    border-radius: 50%;
    color: var(--color-ink);
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    margin-top: 0.05rem;
    width: 1.75rem;
}

.criterion-state svg[b-fbnlozbmkp] {
    height: 1.1rem;
    stroke-width: 2.6;
    width: 1.1rem;
}

.is-passed > .criterion-summary > .criterion-state[b-fbnlozbmkp] {
    background: var(--color-success);
    border-color: var(--color-success);
}

.is-failed > .criterion-summary > .criterion-state[b-fbnlozbmkp] {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.is-skipped > .criterion-summary > .criterion-state[b-fbnlozbmkp] {
    background: var(--color-warning);
    border-color: var(--color-warning);
}

.criterion-body[b-fbnlozbmkp] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.criterion-title[b-fbnlozbmkp] {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.criterion-number[b-fbnlozbmkp] {
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    margin-right: 0.25rem;
}

.criterion-tags[b-fbnlozbmkp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.criterion-tag[b-fbnlozbmkp] {
    align-items: center;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border-strong);
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.74rem;
    gap: 0.35rem;
    line-height: 1;
    padding: 0.32rem 0.55rem;
}

.criterion-tag svg[b-fbnlozbmkp] {
    height: 0.9rem;
    width: 0.9rem;
}

.criterion-tag.is-required[b-fbnlozbmkp] {
    background: var(--color-accent-faint);
    border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
    color: var(--color-accent-text);
}

.criterion-tag.is-required svg[b-fbnlozbmkp] {
    fill: currentColor;
}

.criterion-tag.is-premortem[b-fbnlozbmkp] {
    border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
    color: var(--color-warning);
}

.criterion-byline[b-fbnlozbmkp] {
    color: var(--color-text-faint);
    font-size: 0.76rem;
    margin: 0;
}

.criterion-side[b-fbnlozbmkp] {
    display: grid;
    gap: var(--space-3);
    justify-items: end;
}

.criterion-side-top[b-fbnlozbmkp] {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.criterion-toggle svg[b-fbnlozbmkp] {
    height: 0.95rem;
    width: 0.95rem;
}

/* ---- Details ---- */

.criterion-details[b-fbnlozbmkp] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    margin: 0 var(--space-5) var(--space-5);
    padding-top: var(--space-4);
}

.criterion-details-grid[b-fbnlozbmkp] {
    align-items: start;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.criterion-section[b-fbnlozbmkp] {
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    min-width: 0;
    padding: var(--space-4);
}

.criterion-details h3[b-fbnlozbmkp] {
    align-items: center;
    color: var(--color-text);
    display: flex;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-stretch: normal;
    font-weight: 600;
    gap: var(--space-2);
    letter-spacing: 0;
    margin: 0 0 var(--space-3);
    text-transform: none;
}

.criterion-details h3 svg[b-fbnlozbmkp] {
    color: var(--color-text-subtle);
    height: 1.1rem;
    width: 1.1rem;
}

.criterion-edit-form[b-fbnlozbmkp] {
    border-left: 3px solid var(--color-accent);
    display: grid;
    gap: var(--space-3);
}

.criterion-edit-form h3[b-fbnlozbmkp] {
    margin-bottom: 0;
}

.criterion-facts dl[b-fbnlozbmkp] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.criterion-facts dt[b-fbnlozbmkp] {
    color: var(--color-text-faint);
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    font-stretch: 75%;
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.criterion-facts dd[b-fbnlozbmkp] {
    color: var(--color-text);
    font-size: 0.86rem;
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
}

.criterion-notes[b-fbnlozbmkp] {
    color: var(--color-text-muted);
    white-space: pre-wrap;
}

.criterion-muted[b-fbnlozbmkp] {
    color: var(--color-text-faint);
}

.criterion-verify-form[b-fbnlozbmkp] {
    border-top: var(--hairline) solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

.criterion-verify-form h3[b-fbnlozbmkp] {
    margin-bottom: 0;
}

.criterion-verify-form .form-actions[b-fbnlozbmkp] {
    justify-content: flex-end;
}

.criterion-verify-form svg[b-fbnlozbmkp] {
    height: 1rem;
    width: 1rem;
}

.criteria-board-footer[b-fbnlozbmkp] {
    display: grid;
}

/* ---- Narrower screens ---- */

@media (max-width: 64rem) {
    .criteria-board-header[b-fbnlozbmkp] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .criteria-progress[b-fbnlozbmkp] {
        grid-column: 1 / -1;
    }

    .criterion-details-grid[b-fbnlozbmkp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .criteria-board[b-fbnlozbmkp] {
        gap: var(--space-4);
        padding: var(--space-3);
    }

    .criteria-board-icon[b-fbnlozbmkp] {
        height: 2.25rem;
        width: 2.25rem;
    }

    .criterion-summary[b-fbnlozbmkp] {
        gap: var(--space-3);
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--space-3);
    }

    /* Chip and menu on the left, the toggle on the right, on one line under the title. */
    .criterion-side[b-fbnlozbmkp] {
        align-items: center;
        display: flex;
        grid-column: 2;
        justify-content: space-between;
    }

    .criterion-details[b-fbnlozbmkp] {
        margin: 0 var(--space-3) var(--space-3);
    }

    .criterion-section[b-fbnlozbmkp] {
        padding: var(--space-3);
    }
}
/* /Components/WorkItems/ForceReleaseClaimPanel.razor.rz.scp.css */
.force-claim-panel[b-ne6u4dt527]{padding:1.25rem;border:1px solid var(--color-border);border-radius:var(--radius-lg,12px);background:var(--color-surface);margin:1rem 0}.force-claim-panel header[b-ne6u4dt527]{display:flex;justify-content:space-between;align-items:center;gap:1rem}.force-claim-panel h2[b-ne6u4dt527]{font-size:1rem;margin:0}.force-claim-panel dl[b-ne6u4dt527]{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem;font-size:.85rem;margin:1rem 0}.force-claim-panel dt[b-ne6u4dt527]{color:var(--color-text-muted)}.force-claim-panel dd[b-ne6u4dt527]{margin:0;overflow-wrap:anywhere}.force-claim-panel textarea[b-ne6u4dt527]{display:block;width:100%;padding:.7rem;margin:.5rem 0 1rem;background:var(--color-field);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:8px;font:inherit}.force-warning[b-ne6u4dt527]{border-left:3px solid var(--color-warning);background:var(--color-warning-soft);padding:1rem;margin:1rem 0}.force-warning label[b-ne6u4dt527]{display:block;margin-top:.75rem}.force-claim-panel details[b-ne6u4dt527]{margin-top:1rem}.force-claim-panel details p[b-ne6u4dt527]{font-size:.85rem;color:var(--color-text-muted)}.force-claim-panel select[b-ne6u4dt527]{margin:.5rem 0}.force-claim-panel code[b-ne6u4dt527]{overflow-wrap:anywhere}@media(max-width:640px){.force-claim-panel header[b-ne6u4dt527]{align-items:stretch;flex-direction:column}.force-claim-panel dl[b-ne6u4dt527]{grid-template-columns:1fr}.force-claim-panel dd[b-ne6u4dt527]{margin-bottom:.4rem}}
/* /Components/WorkItems/WorkItemsTable.razor.rz.scp.css */
/* AIWO-363. Hierarchy in the queue: one indent step per nesting level, driven by the depth the
   persisted parent relationship puts a row at. The key text is never measured or parsed to place
   a row. */
.work-key-cell[b-xleu21lm4u] {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    padding-left: calc(var(--tree-depth, 0) * 1.15rem);
}

.work-key-container-mark[b-xleu21lm4u] {
    opacity: .65;
}

.work-items-mobile[b-xleu21lm4u] {
    display: none;
}

@media (max-width: 52rem) {
    .work-items-desktop[b-xleu21lm4u] {
        display: none;
    }

    .work-items-mobile[b-xleu21lm4u] {
        display: block;
        min-width: 0;
    }

    .mobile-work-toolbar[b-xleu21lm4u] {
        border-bottom: var(--hairline) solid var(--color-border);
        display: grid;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .mobile-sort-strip[b-xleu21lm4u] {
        display: flex;
        gap: var(--space-2);
        margin-inline: calc(var(--space-4) * -1);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 0 var(--space-4) var(--space-1);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-sort-strip[b-xleu21lm4u]::-webkit-scrollbar {
        display: none;
    }

    .mobile-sort-label[b-xleu21lm4u] {
        align-items: center;
        color: var(--color-text-faint);
        display: inline-flex;
        flex: none;
        font-family: var(--font-display);
        font-size: 0.6875rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
    }

    .mobile-sort-chip[b-xleu21lm4u] {
        align-items: center;
        background: var(--color-surface);
        border: var(--hairline) solid var(--color-border);
        clip-path: polygon(0.3rem 0, 100% 0, 100% calc(100% - 0.3rem), calc(100% - 0.3rem) 100%, 0 100%, 0 0.3rem);
        color: var(--color-text-muted);
        display: inline-flex;
        flex: none;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: 0.04em;
        min-height: 2.25rem;
        padding: 0 var(--space-3);
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-sort-chip.is-active[b-xleu21lm4u] {
        border-color: var(--color-accent);
        color: var(--color-accent-text);
    }

    .mobile-sort-chip:focus-visible[b-xleu21lm4u] {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    .mobile-select-all[b-xleu21lm4u] {
        align-items: center;
        color: var(--color-text-muted);
        display: inline-flex;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-stretch: 75%;
        font-weight: 700;
        gap: var(--space-2);
        justify-self: end;
        letter-spacing: 0.05em;
        min-height: 2rem;
        text-transform: uppercase;
    }

    .mobile-select-all .check-control[b-xleu21lm4u],
    .mobile-work-select[b-xleu21lm4u] {
        height: 1.5rem;
        margin: 0;
        min-height: 1.5rem;
        padding: 0;
        width: 1.5rem;
    }

    .mobile-work-list[b-xleu21lm4u] {
        display: grid;
        gap: var(--space-3);
    }

    .mobile-work-card[b-xleu21lm4u] {
        --notch: var(--notch-sm);
        background: var(--color-field);
        border: var(--hairline) solid var(--color-border);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
        min-width: 0;
        padding: var(--space-4);
        position: relative;
    }

    .mobile-work-card.is-selected[b-xleu21lm4u] {
        border-color: var(--color-accent);
        box-shadow: inset 3px 0 0 var(--color-accent);
    }

    .mobile-work-card-head[b-xleu21lm4u] {
        align-items: center;
        display: flex;
        gap: var(--space-3);
        justify-content: space-between;
        min-width: 0;
    }

    .mobile-work-key[b-xleu21lm4u] {
        color: var(--color-accent-text);
        font-family: var(--font-mono);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
    }

    .mobile-work-key:hover[b-xleu21lm4u],
    .mobile-work-key:focus-visible[b-xleu21lm4u],
    .mobile-work-title:hover[b-xleu21lm4u],
    .mobile-work-title:focus-visible[b-xleu21lm4u] {
        color: var(--color-accent-text);
    }

    .mobile-work-key:focus-visible[b-xleu21lm4u],
    .mobile-work-title:focus-visible[b-xleu21lm4u] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .mobile-work-title[b-xleu21lm4u] {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: var(--color-text);
        display: -webkit-box;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
        margin-top: var(--space-3);
        overflow: hidden;
        overflow-wrap: break-word;
        text-decoration: none;
    }

    .mobile-work-chip-row[b-xleu21lm4u] {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-3);
    }

    .mobile-work-meta[b-xleu21lm4u] {
        border-top: var(--hairline) solid var(--color-border);
        display: grid;
        gap: var(--space-3) var(--space-4);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: var(--space-3) 0 0;
        padding-top: var(--space-3);
    }

    .mobile-work-meta > div[b-xleu21lm4u] {
        min-width: 0;
    }

    .mobile-work-meta dt[b-xleu21lm4u] {
        color: var(--color-text-faint);
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-stretch: 75%;
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        line-height: 1.2;
        margin-bottom: var(--space-1);
        text-transform: uppercase;
    }

    .mobile-work-meta dd[b-xleu21lm4u] {
        color: var(--color-text-muted);
        font-size: 0.8rem;
        line-height: 1.35;
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

}

@media (max-width: 52rem) {
    .mobile-work-card[b-xleu21lm4u] {
        margin-left: calc(var(--tree-depth, 0) * 0.75rem);
    }
}

@media (max-width: 26.875rem) {
    .mobile-work-card[b-xleu21lm4u] {
        padding: var(--space-3);
    }

    .mobile-work-meta[b-xleu21lm4u] {
        gap: var(--space-2) var(--space-3);
    }

    .mobile-work-title[b-xleu21lm4u] {
        font-size: 0.9375rem;
    }
}