@import '_content/Krome.Blazor/Krome.Blazor.3ir4626st4.bundle.scp.css';

/* /Components/Account/Login.razor.rz.scp.css */
.lg-card[b-5d6up7l2gg] {
    width: 100%;
    max-width: 396px;
    padding: 30px 30px 32px;
    border-radius: 16px;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.lg-brand[b-5d6up7l2gg] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 26px;
}

.lg-brand-mark[b-5d6up7l2gg] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ks-accent), var(--ks-accent-2));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lg-brand-text[b-5d6up7l2gg] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lg-brand-name[b-5d6up7l2gg] {
    font-size: 14px;
    font-weight: 650;
    color: var(--ks-text);
}

.lg-brand-sub[b-5d6up7l2gg] {
    font-size: 11.5px;
    color: var(--ks-text-muted);
}

.lg-title[b-5d6up7l2gg] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 680;
    letter-spacing: -0.01em;
    color: var(--ks-text);
}

.lg-subtitle[b-5d6up7l2gg] {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-text-muted);
}

.lg-banner[b-5d6up7l2gg] {
    display: flex;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.lg-banner--error[b-5d6up7l2gg] {
    border: 1px solid rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.11);
    color: var(--ks-danger-text);
}

.lg-banner--warn[b-5d6up7l2gg] {
    border: 1px solid rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.1);
    color: var(--ks-warn-text);
}

.lg-form[b-5d6up7l2gg] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lg-field[b-5d6up7l2gg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lg-label[b-5d6up7l2gg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ks-text-muted);
}

.lg-input[b-5d6up7l2gg] {
    height: 40px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--ks-border);
    background: var(--ks-inset);
    color: var(--ks-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lg-input:focus[b-5d6up7l2gg] {
    outline: none;
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.lg-hint[b-5d6up7l2gg] {
    font-size: 11.5px;
    color: var(--ks-text-faint);
}

.lg-submit[b-5d6up7l2gg] {
    margin-top: 7px;
    height: 42px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ks-accent), var(--ks-accent-2));
    color: #fff;
    font-size: 14px;
    font-weight: 640;
    font-family: inherit;
    cursor: pointer;
    transition: filter 150ms ease, box-shadow 150ms ease;
}

.lg-submit:hover[b-5d6up7l2gg] {
    filter: brightness(1.08);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.lg-submit:focus-visible[b-5d6up7l2gg] {
    outline: 2px solid var(--ks-accent-text);
    outline-offset: 2px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.ks-shell[b-mjutsuy5gt] {
    display: flex;
    min-height: 100dvh;
    background: var(--ks-bg);
    color: var(--ks-text);
}

.ks-sidebar[b-mjutsuy5gt] {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100dvh;
    width: 248px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 16px;
    background: var(--ks-surface);
    border-right: 1px solid var(--ks-border);
}

.ks-brand[b-mjutsuy5gt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 16px;
    border-bottom: 1px solid var(--ks-border);
}

.ks-brand-mark[b-mjutsuy5gt] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, var(--ks-accent) 0%, var(--ks-accent-2) 100%);
    box-shadow: 0 4px 14px -4px var(--ks-accent-glow);
}

.ks-brand-text[b-mjutsuy5gt] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ks-brand-name[b-mjutsuy5gt] {
    font-size: 15px;
    font-weight: 650;
    color: var(--ks-text);
}

.ks-brand-sub[b-mjutsuy5gt] {
    font-size: 12px;
    color: var(--ks-text-muted);
}

.ks-sidebar-foot[b-mjutsuy5gt] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 4px;
    font-size: 12px;
    color: var(--ks-text-muted);
    border-top: 1px solid var(--ks-border);
}

.ks-operator-dot[b-mjutsuy5gt] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ks-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-ok) 22%, transparent);
}

/* Email over tenant, stacked. min-width:0 is what lets the children below actually ellipsise —
   a flex item defaults to min-width:auto and would refuse to shrink past its text. */
.ks-sidebar-foot[b-mjutsuy5gt]  .ks-operator {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

/* The signed-in operator's email can be long; keep it on one line and let it ellipsise
   rather than pushing the sidebar wider. Same for the tenant key. */
.ks-sidebar-foot[b-mjutsuy5gt]  .ks-operator-name,
.ks-sidebar-foot[b-mjutsuy5gt]  .ks-operator-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quieter than the email: which tenant you are in matters, but it is context, not identity. */
.ks-sidebar-foot[b-mjutsuy5gt]  .ks-operator-company {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-text-subtle, var(--ks-text-muted));
    opacity: 0.85;
}

.ks-main[b-mjutsuy5gt] {
    flex: 1 1 auto;
    min-width: 0;
}

.ks-content[b-mjutsuy5gt] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 40px 64px;
}

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

    .ks-sidebar[b-mjutsuy5gt] {
        position: static;
        height: auto;
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 18px;
    }

    .ks-brand[b-mjutsuy5gt] {
        border-bottom: none;
        padding: 0;
    }

    .ks-sidebar-foot[b-mjutsuy5gt] {
        display: none;
    }

    .ks-content[b-mjutsuy5gt] {
        padding: 22px 18px 48px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NOTE: the nav items are NavLink components, and CSS isolation only stamps the scope
   attribute on plain HTML elements — so every .ks-nav-item rule reaches the rendered <a>
   via ::deep from the scoped .ks-nav ancestor (the sign-out <button> matches the same
   selectors, since it is also a .ks-nav descendant). */

.ks-nav[b-fbzoqkdlpt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ks-nav-heading[b-fbzoqkdlpt] {
    padding: 12px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ks-text-dim);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-item:hover {
    background: var(--ks-surface-2);
    color: var(--ks-text);
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-item--active {
    background: color-mix(in srgb, var(--ks-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--ks-accent) 34%, transparent);
    color: var(--ks-accent-text);
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-item--active:hover {
    background: color-mix(in srgb, var(--ks-accent) 20%, transparent);
    color: var(--ks-accent-text);
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Sign-out sits below the nav groups, visually separated: it leaves the console rather than
   navigating within it. The <button> is reset to match the NavLink anchors exactly. */
.ks-nav[b-fbzoqkdlpt]  .ks-nav-signout {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ks-border);
}

.ks-nav[b-fbzoqkdlpt]  .ks-nav-item--action {
    width: 100%;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

@media (max-width: 900px) {
    .ks-nav[b-fbzoqkdlpt] {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .ks-nav-heading[b-fbzoqkdlpt] {
        display: none;
    }

    /* The nav is a horizontal strip on narrow screens — the sign-out separator would be a
       stray horizontal rule between inline items, so drop it. */
    .ks-nav[b-fbzoqkdlpt]  .ks-nav-signout {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}
/* /Components/Layout/SignInLayout.razor.rz.scp.css */
.ks-signin-shell[b-dar4p1kc8t] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    /* A single soft accent wash so the sign-in screen reads as part of the studio theme
       rather than a bare form on the app background. */
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(99, 102, 241, 0.16), transparent 62%),
        var(--ks-bg);
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings area shell: sidebar beside content (KromeOS stg-page pattern).

   The shared st-* primitives the sections are built from USED to live here, reaching them via
   ::deep. They are now app-wide in wwwroot/app.css — the studio area uses the same vocabulary, and
   one ::deep copy per area would be the same rules maintained twice. This file owns the two-column
   shell and nothing else. */

.stg-page[b-sxxvksbd10] {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    min-height: 100%;
}

.stg-content[b-sxxvksbd10] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 860px) {
    .stg-page[b-sxxvksbd10] {
        flex-direction: column;
    }
}
/* /Components/Pages/Studio.razor.rz.scp.css */
/* Studio area shell: a page header above a tab strip above the current section. Deliberately a
   stacked shell rather than the settings area's two-column one — five peer sections of one subject
   read better across the top than down the side.

   The st-* primitives the sections are built from are app-wide (wwwroot/app.css), so this file owns
   only the shell. */

.stu-page[b-spkzv0f8xh] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
}

.stu-head[b-spkzv0f8xh] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stu-title[b-spkzv0f8xh] {
    font-size: 24px;
    font-weight: 690;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ks-text);
}

.stu-subtitle[b-spkzv0f8xh] {
    margin: 0;
    font-size: 13.5px;
    color: var(--ks-text-muted);
    max-width: 68ch;
}

.stu-content[b-spkzv0f8xh] {
    min-width: 0;
}
/* /Components/Pages/VideoJobDetail.razor.rz.scp.css */
.jd-back[b-wlas0a2utn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 550;
    margin-bottom: 20px;
}

.jd-back svg[b-wlas0a2utn] {
    width: 16px;
    height: 16px;
}

.jd-head[b-wlas0a2utn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ks-border);
}

.jd-head-main[b-wlas0a2utn] {
    min-width: 0;
}

.jd-title[b-wlas0a2utn] {
    font-size: 25px;
    font-weight: 680;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--ks-text);
}

.jd-head-meta[b-wlas0a2utn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jd-chip[b-wlas0a2utn] {
    font-size: 12.5px;
    font-weight: 550;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ks-text-dim);
    background: var(--ks-surface-2);
    border: 1px solid var(--ks-border);
}

.jd-chip--muted[b-wlas0a2utn] {
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

.jd-cost[b-wlas0a2utn] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
}

.jd-cost-label[b-wlas0a2utn] {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.jd-cost-value[b-wlas0a2utn] {
    font-size: 24px;
    font-weight: 700;
    color: var(--ks-accent-text);
    font-variant-numeric: tabular-nums;
}

.jd-banner[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 22px;
}

.jd-banner--error[b-wlas0a2utn] {
    background: color-mix(in srgb, var(--ks-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
    color: var(--ks-text);
}

.jd-banner--fail[b-wlas0a2utn] {
    background: color-mix(in srgb, var(--ks-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 30%, transparent);
    color: var(--ks-text);
}

.jd-actions[b-wlas0a2utn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: 13px;
    margin-bottom: 30px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border-strong);
}

/* States with no available action read as an informational panel, not a live toolbar. */
.jd-actions--idle[b-wlas0a2utn] {
    border-style: dashed;
    margin-bottom: 30px;
}

/* Flexible so a multi-sentence note (the Rejected/regenerate explanation) wraps inside the bar
   instead of shoving the buttons off to their own row. */
.jd-actions-copy[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 300px;
    min-width: 0;
}

.jd-actions-title[b-wlas0a2utn] {
    font-size: 14px;
    font-weight: 640;
    color: var(--ks-text);
}

.jd-actions-note[b-wlas0a2utn] {
    font-size: 12.5px;
    color: var(--ks-text-muted);
}

.jd-actions-btns[b-wlas0a2utn] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

/* Reject-reason capture — sits directly under the action bar, pulled up to read as attached. */
.jd-reject[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 13px;
    margin: -18px 0 30px;
    background: var(--ks-surface);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, var(--ks-border));
}

.jd-reject-label[b-wlas0a2utn] {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.jd-reject-input[b-wlas0a2utn] {
    width: 100%;
    resize: vertical;
    min-height: 68px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--ks-inset);
    border: 1px solid var(--ks-border);
    color: var(--ks-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.jd-reject-input[b-wlas0a2utn]::placeholder {
    color: var(--ks-text-faint);
}

.jd-reject-input:focus-visible[b-wlas0a2utn] {
    outline: none;
    border-color: color-mix(in srgb, var(--ks-danger) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-danger) 18%, transparent);
}

.jd-reject-input:disabled[b-wlas0a2utn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.jd-reject-btns[b-wlas0a2utn] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

/* Inline action failure (401 / 409 wrong-state / 424 missing connection) — surfaced at the toolbar. */
.jd-actionfeedback[b-wlas0a2utn] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin: -18px 0 30px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ks-text);
    background: color-mix(in srgb, var(--ks-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
}

.jd-actionfeedback svg[b-wlas0a2utn] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ks-danger);
}

/* Composed-video preview (issue #7). A 9:16 short, capped so it does not dominate the review. */
.jd-media[b-wlas0a2utn] {
    margin-bottom: 26px;
}

.jd-video[b-wlas0a2utn] {
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9 / 16;
    border-radius: 13px;
    border: 1px solid var(--ks-border);
    background: #000;
}

/* Disposition action bar — a subordinate toolbar (secondary buttons) beneath the primary pipeline one. */
.jd-disposition[b-wlas0a2utn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: 13px;
    margin-bottom: 30px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
}

/* Per-scene inline media: a portrait thumbnail beside a narration clip. */
.jd-scene-media[b-wlas0a2utn] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.jd-scene-thumb[b-wlas0a2utn] {
    width: 84px;
    height: 112px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--ks-border);
    background: var(--ks-inset);
}

.jd-scene-audio[b-wlas0a2utn] {
    height: 36px;
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 340px;
}

.jd-scenes-head[b-wlas0a2utn] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.jd-section-title[b-wlas0a2utn] {
    font-size: 16px;
    font-weight: 640;
    margin: 0;
    color: var(--ks-text);
}

.jd-scenes-count[b-wlas0a2utn] {
    font-size: 13px;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

.jd-scene[b-wlas0a2utn] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border-radius: 13px;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    margin-bottom: 12px;
}

.jd-scene-rail[b-wlas0a2utn] {
    display: flex;
    justify-content: center;
}

.jd-scene-index[b-wlas0a2utn] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 680;
    color: var(--ks-accent-text);
    background: color-mix(in srgb, var(--ks-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-accent) 30%, transparent);
    font-variant-numeric: tabular-nums;
}

.jd-scene-body[b-wlas0a2utn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jd-narration[b-wlas0a2utn] {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ks-text);
}

.jd-directives[b-wlas0a2utn] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.jd-tag[b-wlas0a2utn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ks-text-dim);
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--ks-surface-2);
    border: 1px solid var(--ks-border);
    font-variant-numeric: tabular-nums;
}

.jd-tag-k[b-wlas0a2utn] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.jd-prompt[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ks-inset);
    border: 1px solid var(--ks-border);
}

.jd-prompt-label[b-wlas0a2utn] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.jd-prompt-text[b-wlas0a2utn] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ks-text-dim);
}

.jd-assets[b-wlas0a2utn] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jd-asset[b-wlas0a2utn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 550;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.jd-asset-dot[b-wlas0a2utn] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.jd-asset--on[b-wlas0a2utn] {
    color: var(--ks-ok-text);
    background: color-mix(in srgb, var(--ks-ok) 14%, transparent);
    border-color: color-mix(in srgb, var(--ks-ok) 30%, transparent);
}

.jd-asset--off[b-wlas0a2utn] {
    color: var(--ks-text-faint);
    background: var(--ks-surface-2);
    border-color: var(--ks-border);
}

/* Reference-conditioned frame still rendering on the provider queue (FR-DC-KSH-01). */
.jd-asset--wait[b-wlas0a2utn] {
    color: var(--ks-info-text);
    background: color-mix(in srgb, var(--ks-info) 14%, transparent);
    border-color: color-mix(in srgb, var(--ks-info) 30%, transparent);
}

/* The identity lock was intended but could not be applied — the frame fell back to prompt-only. */
.jd-asset--warn[b-wlas0a2utn] {
    color: var(--ks-warn-text);
    background: color-mix(in srgb, var(--ks-warn) 14%, transparent);
    border-color: color-mix(in srgb, var(--ks-warn) 30%, transparent);
}

/* #47: the per-scene "Retry" link — a real button dressed as the page's text link, sitting on the chip row. */
.jd-scene-retry[b-wlas0a2utn] {
    align-self: center;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--ks-accent-text);
    cursor: pointer;
    transition: opacity 150ms ease-out;
}

.jd-scene-retry:hover:not(:disabled)[b-wlas0a2utn] {
    text-decoration: underline;
}

.jd-scene-retry:focus-visible[b-wlas0a2utn] {
    outline: 2px solid var(--ks-accent-text);
    outline-offset: 2px;
}

.jd-scene-retry:disabled[b-wlas0a2utn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.jd-scene-note[b-wlas0a2utn] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--ks-warn-text);
    line-height: 1.45;
}

.jd-scene-note-k[b-wlas0a2utn] {
    display: inline-block;
    margin-right: 8px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 11px;
}

.jd-scenes-empty[b-wlas0a2utn] {
    margin-top: 4px;
}

.jd-skeleton[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jd-skeleton-block[b-wlas0a2utn] {
    height: 90px;
    border-radius: 13px;
    background: linear-gradient(90deg, var(--ks-surface) 25%, var(--ks-surface-2) 50%, var(--ks-surface) 75%);
    background-size: 200% 100%;
    animation: jd-shimmer-b-wlas0a2utn 1.3s ease-in-out infinite;
}

.jd-skeleton-block--head[b-wlas0a2utn] {
    height: 60px;
}

@keyframes jd-shimmer-b-wlas0a2utn {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* A background wait (script being written, clips rendering): a small spinner beside its status line. */
.jd-wait[b-wlas0a2utn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
}

.jd-spinner[b-wlas0a2utn] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--ks-border-strong);
    border-top-color: var(--ks-text);
    animation: jd-spin-b-wlas0a2utn 0.9s linear infinite;
}

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

.jd-writing-title[b-wlas0a2utn] {
    margin: 0;
}

.jd-writing-premise[b-wlas0a2utn] {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-text);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .jd-skeleton-block[b-wlas0a2utn] { animation: none; }
    .jd-spinner[b-wlas0a2utn] { animation: none; }
}

@media (max-width: 720px) {
    .jd-head[b-wlas0a2utn] {
        flex-direction: column;
    }

    .jd-cost[b-wlas0a2utn] {
        align-items: flex-start;
    }
}

/* The premise the owner chose for this job's script — one line under the title. */
.jd-chosen[b-wlas0a2utn] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: -4px 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-text-dim);
}

.jd-chosen .jd-tag-k[b-wlas0a2utn] {
    flex-shrink: 0;
}

/* Premise pick (pick-before-spend) — stands where the pipeline toolbar is until the owner picks. */
.jd-pick[b-wlas0a2utn] {
    margin-bottom: 30px;
}

.jd-pick .jd-scenes-head[b-wlas0a2utn] {
    margin-bottom: 4px;
}

/* Reserved line: the hint and the "Writing the script" text swap in place. */
.jd-pick-status[b-wlas0a2utn] {
    margin: 0 0 16px;
    min-height: 1.5em;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-text-muted);
}

.jd-pick-list[b-wlas0a2utn] {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.jd-premise[b-wlas0a2utn] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 18px;
    border-radius: 13px;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    margin-bottom: 12px;
}

.jd-premise-body[b-wlas0a2utn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jd-premise-logline[b-wlas0a2utn] {
    margin: 0;
    font-size: 15.5px;
    font-weight: 620;
    line-height: 1.45;
    color: var(--ks-text);
}

.jd-premise-line[b-wlas0a2utn] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ks-text-dim);
}

.jd-premise-line .jd-tag-k[b-wlas0a2utn] {
    flex: 0 0 58px;
}

.jd-premise-scores[b-wlas0a2utn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    font-size: 12px;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

.jd-premise-action[b-wlas0a2utn] {
    display: flex;
}

.jd-premise-action[b-wlas0a2utn]  button:focus-visible {
    outline: 2px solid var(--ks-accent);
    outline-offset: 2px;
}

.jd-pick-own[b-wlas0a2utn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 13px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
}

/* The textarea is the reject panel's, but this is not a destructive context — accent focus ring. */
.jd-pick-input:focus-visible[b-wlas0a2utn] {
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.jd-pick-meta[b-wlas0a2utn] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ks-text-muted);
}

.jd-pick-hint--error[b-wlas0a2utn] {
    color: var(--ks-danger-text);
}

.jd-pick-count[b-wlas0a2utn] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .jd-premise[b-wlas0a2utn] {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .jd-premise-action[b-wlas0a2utn] {
        grid-column: 1 / -1;
    }

    .jd-premise-action[b-wlas0a2utn]  button {
        width: 100%;
    }
}
/* /Components/Pages/VideoJobs.razor.rz.scp.css */
.vj-head[b-d7qgd77g7p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.vj-title[b-d7qgd77g7p] {
    font-size: 26px;
    font-weight: 680;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ks-text);
}

.vj-subtitle[b-d7qgd77g7p] {
    margin: 0;
    font-size: 14px;
    color: var(--ks-text-muted);
}

.vj-head-actions[b-d7qgd77g7p] {
    display: flex;
    gap: 9px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Import affordance (issue #7) — an expandable panel under the header. */
.vj-import[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 13px;
    margin-bottom: 22px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border-strong);
}

.vj-import-copy[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vj-import-title[b-d7qgd77g7p] {
    font-size: 16px;
    font-weight: 640;
    margin: 0;
    color: var(--ks-text);
}

.vj-import-note[b-d7qgd77g7p] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-text-muted);
}

.vj-import-note code[b-d7qgd77g7p] {
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ks-inset);
    border: 1px solid var(--ks-border);
    color: var(--ks-text-dim);
}

.vj-import-fields[b-d7qgd77g7p] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.vj-file[b-d7qgd77g7p] {
    font-size: 13.5px;
    color: var(--ks-text-dim);
}

.vj-import-error[b-d7qgd77g7p] {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ks-text);
    background: color-mix(in srgb, var(--ks-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
}

.vj-import-btns[b-d7qgd77g7p] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.vj-toolbar[b-d7qgd77g7p] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.vj-field[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vj-field--grow[b-d7qgd77g7p] {
    flex: 1 1 220px;
    min-width: 180px;
}

.vj-field-label[b-d7qgd77g7p] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ks-text-muted);
}

.vj-select[b-d7qgd77g7p],
.vj-input[b-d7qgd77g7p] {
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    color: var(--ks-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.vj-select[b-d7qgd77g7p] {
    min-width: 190px;
    cursor: pointer;
}

.vj-select:focus-visible[b-d7qgd77g7p],
.vj-input:focus-visible[b-d7qgd77g7p] {
    outline: none;
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.vj-count[b-d7qgd77g7p] {
    margin-left: auto;
    align-self: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

.vj-table-wrap[b-d7qgd77g7p] {
    border: 1px solid var(--ks-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ks-surface);
}

.vj-row[b-d7qgd77g7p] {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 200px 128px 34px;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--ks-border);
}

.vj-row:last-child[b-d7qgd77g7p] {
    border-bottom: none;
}

.vj-row--head[b-d7qgd77g7p] {
    background: var(--ks-surface-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
    padding-top: 11px;
    padding-bottom: 11px;
}

.vj-row:not(.vj-row--head)[b-d7qgd77g7p] {
    cursor: pointer;
    transition: background 130ms ease;
}

.vj-row:not(.vj-row--head):hover[b-d7qgd77g7p] {
    background: var(--ks-surface-2);
}

.vj-row:not(.vj-row--head):focus-visible[b-d7qgd77g7p] {
    outline: none;
    background: var(--ks-surface-2);
    box-shadow: inset 3px 0 0 var(--ks-accent);
}

.vj-topic[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vj-topic-text[b-d7qgd77g7p] {
    font-size: 14.5px;
    font-weight: 550;
    color: var(--ks-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vj-topic-fail[b-d7qgd77g7p] {
    font-size: 12px;
    color: var(--ks-danger-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vj-series[b-d7qgd77g7p] {
    font-size: 13.5px;
    color: var(--ks-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vj-published[b-d7qgd77g7p] {
    font-size: 13px;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

.vj-chevron[b-d7qgd77g7p] {
    display: grid;
    place-items: center;
    color: var(--ks-text-faint);
}

.vj-chevron svg[b-d7qgd77g7p] {
    width: 18px;
    height: 18px;
}

.vj-row:hover .vj-chevron[b-d7qgd77g7p] {
    color: var(--ks-accent-text);
}

.vj-banner[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 14px;
}

.vj-banner--error[b-d7qgd77g7p] {
    background: color-mix(in srgb, var(--ks-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
    color: var(--ks-text);
}

.vj-skeleton[b-d7qgd77g7p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vj-skeleton-row[b-d7qgd77g7p] {
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--ks-surface) 25%, var(--ks-surface-2) 50%, var(--ks-surface) 75%);
    background-size: 200% 100%;
    animation: vj-shimmer-b-d7qgd77g7p 1.3s ease-in-out infinite;
}

.vj-empty[b-d7qgd77g7p] {
    margin-top: 8px;
}

@keyframes vj-shimmer-b-d7qgd77g7p {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vj-skeleton-row[b-d7qgd77g7p] { animation: none; }
}

@media (max-width: 720px) {
    .vj-row[b-d7qgd77g7p] {
        grid-template-columns: 118px minmax(0, 1fr) 26px;
    }

    .vj-series[b-d7qgd77g7p],
    .vj-published[b-d7qgd77g7p] {
        display: none;
    }

    .vj-row--head span:nth-child(3)[b-d7qgd77g7p],
    .vj-row--head span:nth-child(4)[b-d7qgd77g7p] {
        display: none;
    }
}

/* New episode (premise pick-before-spend) — reuses the import panel; only what differs is here. */
.vj-new-none[b-d7qgd77g7p] {
    color: var(--ks-text-dim);
}

/* Reserved line: the note and the busy text swap in place, so nothing below it moves. */
.vj-new-status[b-d7qgd77g7p] {
    min-height: 1.5em;
}

.vj-head-actions[b-d7qgd77g7p]  button:focus-visible,
.vj-new-btns[b-d7qgd77g7p]  button:focus-visible {
    outline: 2px solid var(--ks-accent);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .vj-head[b-d7qgd77g7p] {
        flex-direction: column;
    }

    .vj-new .vj-field[b-d7qgd77g7p],
    .vj-new .vj-select[b-d7qgd77g7p],
    .vj-new .vj-input[b-d7qgd77g7p] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .vj-new-btns[b-d7qgd77g7p] {
        flex-direction: column;
    }

    .vj-new-btns[b-d7qgd77g7p]  button {
        width: 100%;
    }
}
/* /Components/Settings/Sections/AccountSection.razor.rz.scp.css */
/* Section-specific: only the change-password field grid. Every form primitive (st-form, st-field,
   st-input, st-form-actions, st-hint) is app-wide in wwwroot/app.css — this file constrains the
   single-column form to a readable width so the password fields do not stretch across the pane. */

.acc-field-grid[b-8bpidtedzm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    max-width: 420px;
}
/* /Components/Settings/Sections/BannedPhrasesSection.razor.rz.scp.css */
/* Section-specific: banned-phrase table grid; shared st-* styles come from Settings.razor.css. */

.bp-row[b-habzrzxr2h] {
    grid-template-columns: minmax(0, 1.7fr) 118px minmax(0, 0.8fr) 52px 96px 132px;
}

.bp-phrase[b-habzrzxr2h] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

@media (max-width: 900px) {
    .bp-row[b-habzrzxr2h] {
        grid-template-columns: minmax(0, 1.7fr) 118px 96px 132px;
    }

    .bp-row > :nth-child(3)[b-habzrzxr2h],
    .bp-row > :nth-child(4)[b-habzrzxr2h] {
        display: none;
    }
}
/* /Components/Settings/Sections/CompaniesSection.razor.rz.scp.css */
/* Section-specific: the companies table grid plus the provisioning run panel (timeline, failure
   block, info notes). Shared st-* styles come from Settings.razor.css. */

.cm-row[b-zkabru98la] {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 104px;
}

.cm-name[b-zkabru98la] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cm-mono[b-zkabru98la] {
    font-family: var(--ks-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
}

.cm-req[b-zkabru98la] {
    color: var(--ks-danger-text);
}

@media (max-width: 1100px) {
    .cm-row[b-zkabru98la] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 104px;
    }

    .cm-row > :nth-child(3)[b-zkabru98la] {
        display: none;
    }
}

/* ------------------------------------------------------------------ provisioning run panel */

.cm-run[b-zkabru98la] {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--ks-border);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--ks-surface);
}

.cm-run--busy[b-zkabru98la] {
    border-left-color: var(--ks-accent);
}

.cm-run--ok[b-zkabru98la] {
    border-left-color: var(--ks-ok);
}

.cm-run--failed[b-zkabru98la] {
    border-left-color: var(--ks-danger);
}

.cm-run-head[b-zkabru98la] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cm-run-title[b-zkabru98la] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ks-text);
}

.cm-run-key[b-zkabru98la] {
    font-family: var(--ks-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ks-text-muted);
}

/* ------------------------------------------------------------------------------- timeline */

.cm-steps[b-zkabru98la] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-step[b-zkabru98la] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

/* The connective tissue of a timeline: a hairline from each step's marker to the next. */
.cm-step:not(:last-child) .cm-step-mark[b-zkabru98la]::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 1px;
    height: 15px;
    transform: translateX(-50%);
    background: var(--ks-border-strong);
}

.cm-step-mark[b-zkabru98la] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--ks-border-strong);
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: var(--ks-text-faint);
    background: var(--ks-inset);
}

.cm-step-label[b-zkabru98la] {
    font-size: 13.5px;
    color: var(--ks-text-muted);
}

.cm-step-state[b-zkabru98la] {
    font-size: 11.5px;
    color: var(--ks-text-faint);
}

.cm-step--done .cm-step-mark[b-zkabru98la] {
    border-color: var(--ks-ok);
    color: var(--ks-ok-text);
}

.cm-step--done .cm-step-label[b-zkabru98la] {
    color: var(--ks-text-dim);
}

.cm-step--active .cm-step-mark[b-zkabru98la] {
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.cm-step--active .cm-step-label[b-zkabru98la] {
    font-weight: 600;
    color: var(--ks-text);
}

.cm-step--active .cm-step-state[b-zkabru98la] {
    color: var(--ks-accent-text);
}

.cm-step--failed .cm-step-mark[b-zkabru98la] {
    border-color: var(--ks-danger);
    color: var(--ks-danger-text);
}

.cm-spinner[b-zkabru98la] {
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--ks-accent-ring);
    border-top-color: var(--ks-accent);
    border-radius: 50%;
    animation: cm-spin-b-zkabru98la 700ms linear infinite;
}

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

/* An operator who has asked for less motion still needs to see which step is live — the ring and
   the "In progress" text carry that on their own, so the spinner simply stops. */
@media (prefers-reduced-motion: reduce) {
    .cm-spinner[b-zkabru98la] {
        animation: none;
    }
}

/* ---------------------------------------------------------------------- failure + notes */

.cm-failure[b-zkabru98la] {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ks-danger);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
}

.cm-failure-label[b-zkabru98la] {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ks-danger-text);
}

/* The API's message verbatim: pre-wrap so a stack-trace-ish body stays readable and scrolls
   inside its own box rather than widening the page. */
.cm-failure-text[b-zkabru98la] {
    margin: 0;
    max-height: 200px;
    overflow: auto;
    font-family: var(--ks-font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ks-text-dim);
}

.cm-note[b-zkabru98la] {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ks-info);
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.08);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-text-dim);
}

.cm-note strong[b-zkabru98la] {
    color: var(--ks-info-text);
}

.cm-note--warn[b-zkabru98la] {
    border-color: var(--ks-warn);
    background: rgba(245, 158, 11, 0.08);
}

/* --------------------------------------------------------------------------------- form */

/* A <fieldset disabled> is the whole point (it disables every control inside at once), so it must
   not bring the browser's default border/padding with it. */
.cm-form[b-zkabru98la] {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.cm-form:disabled[b-zkabru98la] {
    opacity: 0.55;
}

.cm-check[b-zkabru98la] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    /* Hug the content: the two option cards hold different amounts of text, and the surrounding
       form grid would otherwise stretch the shorter one to match its taller neighbour. */
    align-self: start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ks-border);
    border-radius: 8px;
    background: var(--ks-inset);
    cursor: pointer;
}

.cm-check input[b-zkabru98la] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--ks-accent);
    cursor: pointer;
}

.cm-check-label[b-zkabru98la] {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
    color: var(--ks-text);
}

/* The destructive acknowledgement reads as a warning even before it is ticked. */
.cm-check--danger[b-zkabru98la] {
    border-color: var(--ks-warn);
    background: rgba(245, 158, 11, 0.06);
}

.cm-check--danger .cm-check-label[b-zkabru98la] {
    font-weight: 600;
    color: var(--ks-warn-text);
}

.cm-check--danger input[b-zkabru98la] {
    accent-color: var(--ks-warn);
}
/* /Components/Settings/Sections/HookFormulasSection.razor.rz.scp.css */
/* Section-specific: hook-formula table grid; shared st-* styles come from Settings.razor.css. */

/* Five columns since Wave 6 P6 — template, category, lang, status, actions. The retired "Used"
   and "Retention" columns took 52px and 84px with them. */
.hf-row[b-yhjvbtgmdu] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) 48px 92px 132px;
}

.hf-template[b-yhjvbtgmdu] {
    min-width: 0;
}

@media (max-width: 980px) {
    .hf-row[b-yhjvbtgmdu] {
        grid-template-columns: minmax(0, 2fr) 92px 132px;
    }

    /* Category and language collapse first; status and actions always stay. */
    .hf-row > :nth-child(2)[b-yhjvbtgmdu],
    .hf-row > :nth-child(3)[b-yhjvbtgmdu] {
        display: none;
    }
}
/* /Components/Settings/Sections/JobsSection.razor.rz.scp.css */
/* Section-specific: background-job table grid; shared st-* styles come from
   Settings.razor.css. */

/* Timeout and retries are wider than they were: the cells now read "120 min" and "3 × 30s"
   (or "—" when unset) rather than a bare number with a unit suffix. */
.jb-row[b-sbkj4ovvj8] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 104px 110px 88px 116px 148px;
}

.jb-key[b-sbkj4ovvj8],
.jb-cron[b-sbkj4ovvj8] {
    font-family: var(--ks-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
}

.jb-name[b-sbkj4ovvj8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* "global" marker beside the display name — a scope hint, not a status, so it sits inline. */
.jb-scope[b-sbkj4ovvj8] {
    margin-left: 8px;
    vertical-align: 2px;
}

/* Shown only when a save persisted but the scheduler could not be re-registered. */
.jb-note[b-sbkj4ovvj8] {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ks-warn);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-text-dim);
}

@media (max-width: 1100px) {
    .jb-row[b-sbkj4ovvj8] {
        grid-template-columns: minmax(0, 1.4fr) 104px 110px 148px;
    }

    .jb-row > :nth-child(1)[b-sbkj4ovvj8],
    .jb-row > :nth-child(5)[b-sbkj4ovvj8],
    .jb-row > :nth-child(6)[b-sbkj4ovvj8] {
        display: none;
    }
}
/* /Components/Settings/Sections/ModelPricingSection.razor.rz.scp.css */
/* Section-specific: model-price table grid; shared st-* styles come from Settings.razor.css. */

.mp-row[b-nq3qqelh1n] {
    grid-template-columns: minmax(0, 1.6fr) 84px 84px 84px 104px 92px 152px;
}

.mp-model[b-nq3qqelh1n] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

@media (max-width: 1020px) {
    .mp-row[b-nq3qqelh1n] {
        grid-template-columns: minmax(0, 1.6fr) 84px 84px 92px 152px;
    }

    .mp-row > :nth-child(2)[b-nq3qqelh1n],
    .mp-row > :nth-child(5)[b-nq3qqelh1n] {
        display: none;
    }
}
/* /Components/Settings/Sections/PipelineProfilesSection.razor.rz.scp.css */
/* Section-specific: the profile table's grid columns; shared st-* styles come from
   Settings.razor.css (::deep). */

/* The actions column widened from 72px to fit "Make default" beside "Edit"; every non-default
   row now carries two buttons. */
.pp-row[b-kxab38aezs] {
    grid-template-columns: minmax(0, 1.6fr) 84px 104px 84px 118px 168px;
}

.pp-name[b-kxab38aezs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pp-default[b-kxab38aezs] {
    margin-left: 8px;
    vertical-align: 2px;
}

@media (max-width: 900px) {
    .pp-row[b-kxab38aezs] {
        grid-template-columns: minmax(0, 1.6fr) 84px 118px 168px;
    }

    .pp-row > :nth-child(3)[b-kxab38aezs],
    .pp-row > :nth-child(4)[b-kxab38aezs] {
        display: none;
    }
}
/* /Components/Settings/Sections/ProviderConnectionsSection.razor.rz.scp.css */
/* Section-specific: provider-connection table grid + the extra-credential-field rows;
   shared st-* styles come from Settings.razor.css. */

/* -- Extra credential fields ------------------------------------------------ */

/* The group heading is uppercase micro-type; its explanatory line must not inherit that. */
.pc-group-hint[b-dyp602uubn] {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ks-text-faint);
    line-height: 1.45;
}

.pc-group-hint code[b-dyp602uubn] {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 11.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ks-inset);
    color: var(--ks-text-dim);
}

/* These blocks sit inside .st-form's auto-fit grid, so they claim the full row. */
.pc-fields[b-dyp602uubn],
.pc-fields-actions[b-dyp602uubn],
.pc-fields-empty[b-dyp602uubn] {
    grid-column: 1 / -1;
}

.pc-fields[b-dyp602uubn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-field-row[b-dyp602uubn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 10px;
}

@media (max-width: 640px) {
    .pc-field-row[b-dyp602uubn] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pc-field-row > :nth-child(2)[b-dyp602uubn] {
        grid-column: 1 / -1;
        order: 3;
    }
}

.pc-fields-empty[b-dyp602uubn] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ks-text-faint);
}

/* -- Table ------------------------------------------------------------------ */

/* The actions cell carries up to three buttons (Edit / Make default / Delete) and, while a delete
   is armed, a confirmation sentence — so it is a flexible column rather than a fixed strip. */
.pc-row[b-dyp602uubn] {
    grid-template-columns: minmax(0, 1.4fr) 128px 104px 96px minmax(240px, 0.9fr);
}

@media (max-width: 860px) {
    .pc-row[b-dyp602uubn] {
        grid-template-columns: minmax(0, 1.4fr) 128px 104px minmax(200px, 0.9fr);
    }

    .pc-row > :nth-child(4)[b-dyp602uubn] {
        display: none;
    }
}

/* Wrap rather than overflow: three buttons plus a confirmation do not fit one line on narrow
   viewports, and an actions strip that clips is an action the operator cannot reach. */
.pc-row .st-row-actions[b-dyp602uubn] {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* The armed-delete prompt. Names the connection so a mis-clicked row is obvious BEFORE the
   irreversible confirm, not after it. */
.pc-confirm[b-dyp602uubn] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ks-danger-text);
    text-align: right;
}
/* /Components/Settings/Sections/RolesSection.razor.rz.scp.css */
/*
    Section-specific styling only — st-* primitives come from Settings.razor.css through ::deep.
    This file owns the rl-* classes.
*/

/* -------------------------------------------------------------------------------- roles table */

.rl-row[b-p09d51q6bk] {
    grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 2fr) 7rem 11rem;
}

.rl-form[b-p09d51q6bk] {
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 2fr);
}

.rl-req[b-p09d51q6bk] {
    color: var(--ks-danger-text);
    margin-left: 0.15rem;
}

/* --------------------------------------------------------------------------- permission editor */

.rl-perms-head[b-p09d51q6bk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.rl-count[b-p09d51q6bk] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--ks-border);
    border-radius: 8px;
    background: var(--ks-inset);
    font-size: 0.8rem;
    color: var(--ks-text-muted);
    white-space: nowrap;
}

.rl-count strong[b-p09d51q6bk] {
    font-size: 1rem;
    color: var(--ks-text);
    /* Tabular so the number does not jitter the badge width as it ticks up. */
    font-variant-numeric: tabular-nums;
}

.rl-none[b-p09d51q6bk] {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    color: var(--ks-text-muted);
}

.rl-bulk[b-p09d51q6bk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.9rem 0 0.25rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ks-border);
}

.rl-dirty[b-p09d51q6bk] {
    margin-left: auto;
}

/* ------------------------------------------------------------------------------ module groups */

.rl-module[b-p09d51q6bk] {
    margin-top: 1rem;
    border: 1px solid var(--ks-border);
    border-radius: 10px;
    background: var(--ks-surface);
    overflow: hidden;
}

.rl-module-head[b-p09d51q6bk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--ks-surface-2);
    border-bottom: 1px solid var(--ks-border);
}

.rl-module-check[b-p09d51q6bk],
.rl-resource-check[b-p09d51q6bk] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    min-width: 0;
}

.rl-module-name[b-p09d51q6bk] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ks-text);
}

.rl-module-count[b-p09d51q6bk] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ks-text-faint);
    white-space: nowrap;
}

.rl-partial-tag[b-p09d51q6bk] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ks-warn) 22%, transparent);
    color: var(--ks-warn-text);
}

/* --------------------------------------------------------------------------- resource clusters */

.rl-resource[b-p09d51q6bk] {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--ks-border);
}

.rl-resource:first-of-type[b-p09d51q6bk] {
    border-top: none;
}

.rl-resource-name[b-p09d51q6bk] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ks-text-muted);
    overflow-wrap: anywhere;
}

.rl-actions[b-p09d51q6bk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rl-perm[b-p09d51q6bk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--ks-border);
    border-radius: 999px;
    background: var(--ks-inset);
    cursor: pointer;
    /* Colour only, so toggling a chip never reflows the row. */
    transition: border-color 140ms ease, background-color 140ms ease;
}

.rl-perm:hover[b-p09d51q6bk] {
    border-color: var(--ks-border-strong);
}

.rl-perm:focus-within[b-p09d51q6bk] {
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.rl-perm-label[b-p09d51q6bk] {
    font-size: 0.8rem;
    color: var(--ks-text);
    white-space: nowrap;
}

/* A chip whose value differs from the server's last answer — the per-item dirty marker. */
.rl-perm--changed[b-p09d51q6bk] {
    border-color: var(--ks-accent);
    background: color-mix(in srgb, var(--ks-accent) 12%, var(--ks-inset));
}

.rl-perm input[type="checkbox"][b-p09d51q6bk],
.rl-module-check input[type="checkbox"][b-p09d51q6bk],
.rl-resource-check input[type="checkbox"][b-p09d51q6bk] {
    width: 15px;
    height: 15px;
    accent-color: var(--ks-accent);
    cursor: pointer;
    flex: 0 0 auto;
}

/*
    Partial state. `indeterminate` is a DOM property with no HTML attribute, so it cannot be
    rendered server-side — this draws the same idea with a dash overlaid on an unchecked box.
    The adjacent count and "partial" tag carry the meaning in text for screen readers.
*/
.rl-check--partial[b-p09d51q6bk] {
    position: relative;
}

.rl-check--partial input[type="checkbox"][b-p09d51q6bk] {
    accent-color: var(--ks-warn);
}

.rl-check--partial[b-p09d51q6bk]::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 9px;
    height: 2px;
    border-radius: 1px;
    background: var(--ks-warn-text);
    transform: translateY(-50%);
    pointer-events: none;
}

/* ------------------------------------------------------------------------------ restart caveat */

.rl-note[b-p09d51q6bk] {
    margin-top: 1rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--ks-info);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ks-info) 10%, var(--ks-surface));
    color: var(--ks-text);
    font-size: 0.85rem;
    line-height: 1.55;
}

.rl-note strong[b-p09d51q6bk] {
    display: block;
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .rl-row[b-p09d51q6bk] {
        grid-template-columns: minmax(8rem, 1fr) 6rem 10rem;
    }

    /* Description is the expendable column — the name and count carry the row. */
    .rl-row > :nth-child(2)[b-p09d51q6bk] {
        display: none;
    }

    .rl-resource[b-p09d51q6bk] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .rl-form[b-p09d51q6bk] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-perm[b-p09d51q6bk] {
        transition: none;
    }
}
/* /Components/Settings/Sections/StopWordsSection.razor.rz.scp.css */
/* Section-specific: stop-word table grid; shared st-* styles come from Settings.razor.css. */

.sw-row[b-3qvb0yx0vq] {
    grid-template-columns: minmax(0, 1fr) 64px 96px 92px;
}
/* /Components/Settings/Sections/UsersSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared settings primitive declared
    in Settings.razor.css and reaching this component through ::deep — redeclaring any of it here
    would fork the settings area's look. This file owns the us-* classes and nothing else.
*/

/* ------------------------------------------------------------------------------ roster table */

.us-row[b-bcv3knzzsx] {
    grid-template-columns: minmax(11rem, 1.4fr) minmax(12rem, 1.6fr) 7.5rem 10rem 9rem;
}

.us-name[b-bcv3knzzsx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* --------------------------------------------------------------------------------- toolbar */

.us-toolbar[b-bcv3knzzsx] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.us-search[b-bcv3knzzsx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 20rem;
    min-width: 0;
}

.us-toolbar-actions[b-bcv3knzzsx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.1rem;
}

/* ------------------------------------------------------------------------------ create form */

.us-form[b-bcv3knzzsx] {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.us-req[b-bcv3knzzsx] {
    color: var(--ks-danger-text);
    margin-left: 0.15rem;
}

/* ------------------------------------------------------------------------------- role panel */

.us-you[b-bcv3knzzsx] {
    margin-left: 0.6rem;
    vertical-align: middle;
    font-size: 0.7rem;
}

.us-none[b-bcv3knzzsx] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--ks-text-muted);
}

.us-role-list[b-bcv3knzzsx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.us-role[b-bcv3knzzsx] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ks-border);
    border-radius: 9px;
    background: var(--ks-surface);
    cursor: pointer;
    /* Colour only — never geometry — so a pending-change badge cannot reflow the list. */
    transition: border-color 140ms ease, background-color 140ms ease;
}

.us-role:hover[b-bcv3knzzsx] {
    border-color: var(--ks-border-strong);
}

.us-role:focus-within[b-bcv3knzzsx] {
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.us-role input[type="checkbox"][b-bcv3knzzsx] {
    margin-top: 0.15rem;
    width: 16px;
    height: 16px;
    accent-color: var(--ks-accent);
    cursor: pointer;
    flex: 0 0 auto;
}

.us-role-body[b-bcv3knzzsx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.us-role-name[b-bcv3knzzsx] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ks-text);
}

.us-role--removing[b-bcv3knzzsx] {
    border-color: var(--ks-danger);
    background: color-mix(in srgb, var(--ks-danger) 8%, var(--ks-surface));
}

.us-role--granting[b-bcv3knzzsx] {
    border-color: var(--ks-ok);
    background: color-mix(in srgb, var(--ks-ok) 8%, var(--ks-surface));
}

/* -------------------------------------------------------------------------- warnings & rails */

.us-warn[b-bcv3knzzsx] {
    margin-top: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--ks-warn);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ks-warn) 10%, var(--ks-surface));
    color: var(--ks-text);
    font-size: 0.85rem;
    line-height: 1.55;
}

.us-warn--danger[b-bcv3knzzsx] {
    border-color: var(--ks-danger);
    background: color-mix(in srgb, var(--ks-danger) 10%, var(--ks-surface));
}

.us-warn strong[b-bcv3knzzsx] {
    display: block;
    margin-bottom: 0.2rem;
}

.us-check[b-bcv3knzzsx] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ks-border);
    border-radius: 9px;
    background: var(--ks-inset);
    cursor: pointer;
}

.us-check--danger[b-bcv3knzzsx] {
    border-color: var(--ks-danger);
}

.us-check input[type="checkbox"][b-bcv3knzzsx] {
    margin-top: 0.1rem;
    width: 16px;
    height: 16px;
    accent-color: var(--ks-danger);
    cursor: pointer;
    flex: 0 0 auto;
}

.us-check > span[b-bcv3knzzsx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.us-check-label[b-bcv3knzzsx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-text);
}

/* ------------------------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .us-row[b-bcv3knzzsx] {
        grid-template-columns: minmax(9rem, 1.3fr) minmax(10rem, 1.4fr) 7rem 8.5rem;
    }

    /* Last-sign-in is the first column worth losing: useful, never load-bearing. */
    .us-row > :nth-child(4)[b-bcv3knzzsx] {
        display: none;
    }
}

@media (max-width: 760px) {
    .us-row[b-bcv3knzzsx] {
        grid-template-columns: 1fr 7rem;
    }

    .us-row > :nth-child(2)[b-bcv3knzzsx] {
        display: none;
    }

    .us-toolbar[b-bcv3knzzsx] {
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .us-role[b-bcv3knzzsx] {
        transition: none;
    }
}
/* /Components/Settings/SettingsSidebar.razor.rz.scp.css */
/* KromeShorts adaptation of the KromeOS stg-sidebar: same structure (header, grouped items,
   brand-tinted active state with a left accent bar), re-skinned onto the dark --ks-* tokens.

   NOTE: the nav items are NavLink components, and CSS isolation only stamps the scope
   attribute on plain HTML elements — so every .stg-nav-item rule reaches the rendered <a>
   via ::deep from the scoped .stg-sidebar ancestor. */

.stg-sidebar[b-6zao8pw4jr] {
    width: 232px;
    min-width: 232px;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 24px;
}

.stg-sidebar-header[b-6zao8pw4jr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--ks-border);
}

.stg-sidebar-icon[b-6zao8pw4jr] {
    width: 20px;
    height: 20px;
    color: var(--ks-text-muted);
    flex-shrink: 0;
}

.stg-sidebar-title[b-6zao8pw4jr] {
    font-size: 15px;
    font-weight: 650;
    color: var(--ks-text);
}

.stg-nav-group[b-6zao8pw4jr] {
    padding: 12px 10px 10px;
}

.stg-nav-group + .stg-nav-group[b-6zao8pw4jr] {
    border-top: 1px solid var(--ks-border);
}

.stg-nav-group-label[b-6zao8pw4jr] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ks-text-faint);
    padding: 0 10px 7px;
}

.stg-sidebar[b-6zao8pw4jr]  .stg-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ks-text-muted);
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.stg-sidebar[b-6zao8pw4jr]  .stg-nav-item:hover {
    background: var(--ks-surface-2);
    color: var(--ks-text);
}

.stg-sidebar[b-6zao8pw4jr]  .stg-nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

/* Active state mirrors KromeOS: accent-tinted background + accent label + left accent bar,
   so the current section reads at a glance. */
.stg-sidebar[b-6zao8pw4jr]  .stg-nav-item.active {
    background: color-mix(in srgb, var(--ks-accent) 14%, transparent);
    color: var(--ks-accent-text);
    font-weight: 600;
}

.stg-sidebar[b-6zao8pw4jr]  .stg-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ks-accent);
}

@media (max-width: 860px) {
    .stg-sidebar[b-6zao8pw4jr] {
        width: 100%;
        min-width: 0;
        position: static;
    }
}
/* /Components/Shared/AccessDeniedNotice.razor.rz.scp.css */
/*
    Deliberately quiet. A missing permission is an ordinary, expected state for a non-admin
    operator — not a fault — so this reads as an explanation, not an alarm. No danger red.
*/

.ad-notice[b-ch8t3ggkb8] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--ks-border);
    border-radius: 12px;
    background: var(--ks-surface-2);
    color: var(--ks-text);
    max-width: 46rem;
}

.ad-icon[b-ch8t3ggkb8] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 0.1rem;
    color: var(--ks-text-dim);
}

.ad-body[b-ch8t3ggkb8] {
    min-width: 0;
}

.ad-title[b-ch8t3ggkb8] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ks-text);
}

.ad-text[b-ch8t3ggkb8],
.ad-note[b-ch8t3ggkb8] {
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ks-text-muted);
}

.ad-note[b-ch8t3ggkb8] {
    margin-bottom: 0;
    color: var(--ks-text-faint);
    font-size: 0.82rem;
}

.ad-perm[b-ch8t3ggkb8] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 0.75rem;
}

.ad-perm-label[b-ch8t3ggkb8] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
}

.ad-perm-name[b-ch8t3ggkb8] {
    font-family: var(--ks-font-mono);
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--ks-border);
    border-radius: 6px;
    background: var(--ks-inset);
    color: var(--ks-text);
    align-self: flex-start;
    /* Long permission names must wrap rather than widen the card on a narrow pane. */
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .ad-notice[b-ch8t3ggkb8] {
        flex-direction: column;
        padding: 1.15rem 1.15rem;
    }
}
/* /Components/Shared/StateBadge.razor.rz.scp.css */
.ks-badge[b-8vhtzs7u9r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ks-badge-dot[b-8vhtzs7u9r] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ks-badge--info[b-8vhtzs7u9r] {
    color: var(--ks-info-text);
    background: color-mix(in srgb, var(--ks-info) 15%, transparent);
    border-color: color-mix(in srgb, var(--ks-info) 32%, transparent);
}

.ks-badge--ok[b-8vhtzs7u9r] {
    color: var(--ks-ok-text);
    background: color-mix(in srgb, var(--ks-ok) 15%, transparent);
    border-color: color-mix(in srgb, var(--ks-ok) 32%, transparent);
}

.ks-badge--warn[b-8vhtzs7u9r] {
    color: var(--ks-warn-text);
    background: color-mix(in srgb, var(--ks-warn) 16%, transparent);
    border-color: color-mix(in srgb, var(--ks-warn) 34%, transparent);
}

.ks-badge--danger[b-8vhtzs7u9r] {
    color: var(--ks-danger-text);
    background: color-mix(in srgb, var(--ks-danger) 15%, transparent);
    border-color: color-mix(in srgb, var(--ks-danger) 32%, transparent);
}
/* /Components/Studio/Sections/BrandKitsSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the bk-* classes and nothing else.
*/

/* -- Table ------------------------------------------------------------------ */

/* Palette is a fixed strip (four 14px squares + gaps ≈ 74px), so it gets a fixed column rather
   than a fraction that would stretch the squares apart on a wide viewport. Actions carry one
   button (Edit) — brand kits have no transitions and cannot be deleted. */
.bk-row[b-h02lhpcvyi] {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px minmax(0, 1.2fr) 72px;
}

@media (max-width: 900px) {
    /* Components is the first thing to go: the editor shows all three names in full, and the
       tooltip keeps them reachable on the row. */
    .bk-row[b-h02lhpcvyi] {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px 72px;
    }

    .bk-row > :nth-child(4)[b-h02lhpcvyi] {
        display: none;
    }
}

.bk-palette[b-h02lhpcvyi] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* -- Colour swatches -------------------------------------------------------- */

/* Deliberately small and square: this is a legend for the palette, not a colour picker. The border
   is what keeps a near-background colour (a white primary on a white surface) visible at all. */
.bk-swatch[b-h02lhpcvyi] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 3px;
    border: 1px solid var(--ks-border-strong);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

/* No parseable colour yet — a dashed outline says "nothing here" instead of painting the
   browser's fallback, which would read as a chosen black. */
.bk-swatch--empty[b-h02lhpcvyi] {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

/* -- Editor ----------------------------------------------------------------- */

/* The hex input and its swatch share one line; the input takes what is left. */
.bk-colour[b-h02lhpcvyi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bk-colour .st-input[b-h02lhpcvyi] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 12.5px;
}

/* The editor's swatch is bigger than the table's — here it is feedback on what you are typing. */
.bk-colour .bk-swatch[b-h02lhpcvyi] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.bk-req[b-h02lhpcvyi] {
    color: var(--ks-danger-text);
    margin-left: 2px;
}

/* Shown when the render service's component registry can't be reached — the caption/transition
   dropdowns are absent and this explains why, without failing the whole editor. */
.bk-components-note[b-h02lhpcvyi] {
    margin: 0 0 4px;
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--ks-warning-text, var(--ks-danger-text));
    background: var(--ks-warning-surface, var(--ks-surface-muted));
    border: 1px solid var(--ks-warning-border, var(--ks-border-strong));
    border-radius: 6px;
}
/* /Components/Studio/Sections/ChannelsSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the ch-* classes and nothing else.
*/

/* Seven columns. The three badge columns are fixed-width because each holds a known short
   vocabulary ("Cold"/"Warming up"/"Active", "Active"/"Retired") and a fluid column would make the
   badges jitter between rows; the name, the credential and the actions strip take the slack. */
.ch-row[b-6eba49psd7] {
    grid-template-columns:
        minmax(0, 1.4fr) 108px 124px 84px minmax(0, 1.1fr) 96px minmax(240px, 0.9fr);
}

/* Name over handle — the handle is what identifies the real account, and it is what tells two
   similarly-named channels apart. */
.ch-name[b-6eba49psd7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The armed retire prompt. Names the channel so a mis-clicked row is obvious BEFORE the confirm,
   not after a live account has silently stopped publishing. */
.ch-confirm[b-6eba49psd7] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ks-danger-text);
    text-align: right;
}

/* Wrap rather than overflow: three buttons, or a confirmation sentence plus two, do not fit one
   line on narrow viewports — and an actions strip that clips is an action nobody can reach. */
.ch-row .st-row-actions[b-6eba49psd7] {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Below this the warm-up and the cap go first: both are visible in the editor and in the row's own
   actions, while the identity, the credential link and the live status are what the table exists
   to show — an unlinked channel cannot publish at all, so that column outlives the ramp. */
@media (max-width: 1100px) {
    .ch-row[b-6eba49psd7] {
        grid-template-columns: minmax(0, 1.4fr) 108px minmax(0, 1.1fr) 96px minmax(210px, 0.9fr);
    }

    .ch-row > :nth-child(3)[b-6eba49psd7],
    .ch-row > :nth-child(4)[b-6eba49psd7] {
        display: none;
    }
}

@media (max-width: 820px) {
    .ch-row[b-6eba49psd7] {
        grid-template-columns: minmax(0, 1.4fr) 108px 96px minmax(180px, 0.9fr);
    }

    .ch-row > :nth-child(5)[b-6eba49psd7] {
        display: none;
    }
}
/* /Components/Studio/Sections/CharacterSheetsSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the cs-* classes and nothing else.
*/

/* -- Table ------------------------------------------------------------------ */

/* Seven columns. The appearance clause is the widest by design — it is the whole point of the row —
   but it is also the only cell that can run to 2000 characters, so it is a FLEXIBLE track paired
   with .cs-clip rather than a fixed one. The actions strip keeps room for the armed-confirm sentence
   plus its two buttons, and now holds a second armed action (unlink persona), so it is wider. */
.cs-row[b-8foq0fqljh] {
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 0.6fr)
        minmax(0, 1.3fr)
        minmax(0, 0.6fr)
        minmax(0, 0.7fr)
        96px
        minmax(230px, 0.9fr);
}

@media (max-width: 1100px) {
    /* Reference image is the first cell to go: it is a storage key, useful to confirm and useless
       to scan. The persona, the appearance clause and the status stay — the persona column is how an
       operator sees at a glance which characters are bound to a likeness. */
    .cs-row[b-8foq0fqljh] {
        grid-template-columns:
            minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, 1.2fr) minmax(0, 0.7fr) 96px minmax(200px, 0.9fr);
    }

    .cs-row > :nth-child(4)[b-8foq0fqljh] {
        display: none;
    }
}

@media (max-width: 820px) {
    .cs-row[b-8foq0fqljh] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 96px minmax(190px, 0.9fr);
    }

    /* Appearance and persona go too — the row degrades to identity + status + actions, and both are
       one Edit click away. The persona is dropped rather than the style bible because a sheet's
       bible is what identifies it; its persona is a detail of how it renders. */
    .cs-row > :nth-child(3)[b-8foq0fqljh],
    .cs-row > :nth-child(5)[b-8foq0fqljh] {
        display: none;
    }
}

/* Truncation helper. .st-cell already ellipsises, but a grid CHILD will not shrink below its
   content without an explicit min-width:0 — without this the appearance clause forces the row wider
   than the table and the actions strip clips off the right edge. The full text is on the title. */
.cs-clip[b-8foq0fqljh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A storage key is read character by character, not as a word — monospace makes a mistyped path
   findable at a glance. */
.cs-key[b-8foq0fqljh] {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 12px;
}

/* A reference-image thumbnail. Fixed box (width/height attributes too) so a lazy load never shifts the
   row; cover-cropped because a likeness reads from the face, not the whole frame. The stored key stays
   on the cell's title tooltip. */
.cs-ref-thumb[b-8foq0fqljh] {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface-sunken, rgba(127, 127, 127, 0.12));
}

.cs-ref-thumb--look[b-8foq0fqljh] {
    width: 72px;
    height: 72px;
}

/* The thumbnail opens the full image in a new tab. Inline-block keeps the link exactly the thumb's box so
   the outline hugs it; the focus/hover ring is the affordance that it is clickable. */
.cs-ref-link[b-8foq0fqljh] {
    display: inline-block;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
}

.cs-ref-link:hover .cs-ref-thumb[b-8foq0fqljh] {
    border-color: var(--ks-accent, currentColor);
}

.cs-ref-link:focus-visible[b-8foq0fqljh] {
    outline: 2px solid var(--ks-accent, currentColor);
    outline-offset: 2px;
}

/* -- Row actions ------------------------------------------------------------ */

/* The armed confirmation puts a sentence and two buttons in one cell; wrapping is what keeps the
   "Yes, deactivate" button reachable instead of clipped. */
.cs-row .st-row-actions[b-8foq0fqljh] {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* The persona picker's failure sentence. Warning-toned, not danger-toned, and inside the field
   rather than in a banner: KromeShot being unconfigured or unreachable does not stop the operator
   editing everything else on this sheet, so it must not look like a failed save. */
.cs-persona-error[b-8foq0fqljh] {
    color: var(--ks-warning-text, var(--ks-danger-text));
}

/* Names the character so a mis-clicked row is obvious BEFORE the confirm, not after it. */
.cs-confirm[b-8foq0fqljh] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ks-danger-text);
    text-align: right;
}

/* -- Looks panel (FR-DC-KSH-03) --------------------------------------------- */

/* The looks panel reuses the shared .st-editor surface tokens rather than forking a second card look:
   same border, radius and inset as the inline create/edit editor, so opening "Looks" reads as the same
   kind of surface the operator already knows from Edit. */
.cs-looks[b-8foq0fqljh] {
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius, 10px);
    background: var(--ks-surface-raised, var(--ks-surface));
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-looks-head[b-8foq0fqljh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

/* The marker is code the operator TYPES into a script, so it is set in the same monospace as a storage
   key and boxed lightly to read as a token rather than prose. */
.cs-marker[b-8foq0fqljh] {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ks-surface-sunken, rgba(127, 127, 127, 0.12));
    white-space: nowrap;
}

.cs-look-list[b-8foq0fqljh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One look = three tracks: identity + clause (flexes), reference + upload, actions. The clause is the
   widest and the only one that can run long, so it owns the flexible track and clips like the table. */
.cs-look[b-8foq0fqljh] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(180px, auto);
    gap: 14px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--ks-border);
    border-radius: 8px;
    background: var(--ks-surface);
}

/* The default look is the anchor the variants vary FROM, so it is tinted to sit apart from them. */
.cs-look--default[b-8foq0fqljh] {
    background: var(--ks-surface-sunken, rgba(127, 127, 127, 0.06));
}

.cs-look-main[b-8foq0fqljh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The suffix is the marker a scene names — a chip, so it reads as a token and not a heading. */
.cs-look-badge[b-8foq0fqljh] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ks-accent-soft, rgba(99, 102, 241, 0.14));
    color: var(--ks-accent-text, inherit);
}

.cs-look-badge--default[b-8foq0fqljh] {
    background: rgba(127, 127, 127, 0.18);
    color: var(--ks-text-muted, inherit);
}

.cs-look-prompt[b-8foq0fqljh] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ks-text-muted, inherit);
    /* Two-line clamp: enough to recognise the clause, not so much a look row becomes a paragraph. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-look-ref[b-8foq0fqljh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.cs-look-ref-label[b-8foq0fqljh] {
    font-weight: 600;
    color: var(--ks-text-muted, inherit);
}

/* The file input is wrapped in a label so the whole affordance is one target; the CTA names what the
   click does (upload vs replace) since the native control's own text is unstyleable and terse. */
.cs-upload[b-8foq0fqljh] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.cs-upload-cta[b-8foq0fqljh] {
    font-weight: 600;
    color: var(--ks-accent-text, inherit);
}

.cs-look-actions[b-8foq0fqljh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: 6px;
}

/* The edit form spans the whole look row rather than sitting in the actions track — it is a full form,
   not an inline control. */
.cs-look-edit[b-8foq0fqljh] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The add-variant form is set off from the list above it by a rule, the same way a "new" affordance is
   separated from existing rows elsewhere in the admin. */
.cs-look-add[b-8foq0fqljh] {
    border-top: 1px solid var(--ks-border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-look-add-title[b-8foq0fqljh] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.cs-look-add-grid[b-8foq0fqljh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Below the table's narrow breakpoint the three look tracks stack: a look row on a phone is read top to
   bottom (clause, then reference, then actions) rather than squeezed into three columns. */
@media (max-width: 820px) {
    .cs-look[b-8foq0fqljh] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-look-actions[b-8foq0fqljh] {
        justify-content: flex-start;
    }
}

.cs-generate-actions[b-8foq0fqljh] {
    display: inline-flex;
    gap: 6px;
}

.cs-generating[b-8foq0fqljh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
}

.cs-spinner[b-8foq0fqljh] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cs-spin-b-8foq0fqljh 0.8s linear infinite;
}

@keyframes cs-spin-b-8foq0fqljh {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-spinner[b-8foq0fqljh] { animation: none; }
}
/* /Components/Studio/Sections/SeriesSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the se-* classes and nothing else.
*/

/* Seven columns. The two badge columns are fixed because their content is a known short vocabulary
   ("Active"/"Paused", "Auto"/"Approval gate") and a fluid column would make the badges jitter
   between rows; the name and the actions strip take the slack. */
.se-row[b-qmymeznd4y] {
    grid-template-columns:
        minmax(0, 1.5fr) minmax(0, 0.9fr) 104px 132px 128px 92px minmax(230px, 0.9fr);
}

/* Name over topic — the topic is what tells two similarly-named series apart. */
.se-name[b-qmymeznd4y] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Cron is machine text: monospace keeps the five fields aligned down the column and makes a
   mistyped expression visible. Used on the table cell and on the editor's cron input. */
.se-mono[b-qmymeznd4y] {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

/* The armed pause / promote prompt. Names the series so a mis-clicked row is obvious BEFORE the
   confirm, not after a stream has stopped producing or started publishing unattended. */
.se-confirm[b-qmymeznd4y] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ks-danger-text);
    text-align: right;
}

/* Wrap rather than overflow: three buttons, or a confirmation sentence plus two, do not fit one
   line on narrow viewports — and an actions strip that clips is an action nobody can reach. */
.se-row .st-row-actions[b-qmymeznd4y] {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* The identity-coverage hint (issue #4). Spans the editor grid under the style-bible select, styled
   as a quiet informational note — an INFO tint when every sheet is covered or the bible is empty, a
   WARN tint when some sheets are prompt-only. It never reads as an error: it does not gate the save,
   it only tells the operator what the chosen visual world's cast is anchored by. */
.se-identity[b-qmymeznd4y] {
    margin-top: -2px;
}

.se-identity-hint[b-qmymeznd4y] {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid var(--ks-border);
    border-left: 3px solid var(--ks-info);
    background: var(--ks-surface-2);
    color: var(--ks-text-muted);
}

.se-identity-hint strong[b-qmymeznd4y] {
    color: var(--ks-info-text);
    font-weight: 600;
}

/* Some sheets are prompt-only — nudge, not block. */
.se-identity-hint--warn[b-qmymeznd4y] {
    border-left-color: var(--ks-warn);
}

.se-identity-hint--warn strong[b-qmymeznd4y] {
    color: var(--ks-warn-text);
}

/* Below this the schedule and the cap are the first to go: both are visible in the editor, and
   the identity + the two live states are what the table exists to show. */
@media (max-width: 1100px) {
    .se-row[b-qmymeznd4y] {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) 104px 132px minmax(200px, 0.9fr);
    }

    .se-row > :nth-child(5)[b-qmymeznd4y],
    .se-row > :nth-child(6)[b-qmymeznd4y] {
        display: none;
    }
}

@media (max-width: 820px) {
    .se-row[b-qmymeznd4y] {
        grid-template-columns: minmax(0, 1.4fr) 104px 132px minmax(180px, 0.9fr);
    }

    .se-row > :nth-child(2)[b-qmymeznd4y] {
        display: none;
    }
}

/* The skit cast picker: one row per cast member — character select, voice id, remove — laid out on a
   single line so the character/voice pairing reads as one unit. */
.se-cast[b-qmymeznd4y] {
    gap: 8px;
}

.se-voice[b-qmymeznd4y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.se-voice-preview[b-qmymeznd4y] {
    width: 100%;
}

.se-cast-row[b-qmymeznd4y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
/* /Components/Studio/Sections/SkitTemplatesSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the sk-* classes and nothing else, and introduces no colour or font of its own.
*/

/* -- Table ------------------------------------------------------------------ */

/* Origin is a single short badge ("Extracted · $0.02") and Actions one button, so both get fixed
   columns; the three text columns share what is left. */
.sk-row[b-m5m0tkbsjf] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.4fr) 148px 72px;
}

/* Name over source — the source is what tells two similarly-named templates apart. */
.sk-name[b-m5m0tkbsjf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

@media (max-width: 900px) {
    /* The beat chain goes first: the editor shows the beats in full and the tooltip keeps them on the row. */
    .sk-row[b-m5m0tkbsjf] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 148px 72px;
    }

    .sk-row > :nth-child(3)[b-m5m0tkbsjf] {
        display: none;
    }
}

@media (max-width: 560px) {
    .sk-row[b-m5m0tkbsjf] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 72px;
    }

    .sk-row > :nth-child(4)[b-m5m0tkbsjf] {
        display: none;
    }
}

/* -- Editor: the two ways in ------------------------------------------------- */

.sk-choice[b-m5m0tkbsjf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* The chosen way in is marked by border AND weight/fill, not by colour alone. */
.sk-choice-btn[aria-pressed="true"][b-m5m0tkbsjf] {
    border-color: var(--ks-accent);
    background: var(--ks-surface-2);
    color: var(--ks-text);
    font-weight: 700;
}

.sk-req[b-m5m0tkbsjf] {
    color: var(--ks-danger-text);
    margin-left: 2px;
}

/* -- Editor: min / max pairs -------------------------------------------------- */

.sk-pair[b-m5m0tkbsjf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sk-pair-item[b-m5m0tkbsjf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: var(--ks-text-faint);
}

/* -- Editor: transcript ------------------------------------------------------- */

.sk-transcript[b-m5m0tkbsjf] {
    min-height: 220px;
}

.sk-count--over[b-m5m0tkbsjf] {
    color: var(--ks-danger-text);
}

.sk-paid-note[b-m5m0tkbsjf] {
    margin: 0 0 4px;
}

/* Height reserved whether or not there is busy text, so the buttons below never jump. */
.sk-status[b-m5m0tkbsjf] {
    min-height: 18px;
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ks-text-muted);
}

/* -- Editor: beats ------------------------------------------------------------ */

.sk-beats[b-m5m0tkbsjf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* number · role · note · the three row buttons, on one line while there is room. */
.sk-beat[b-m5m0tkbsjf] {
    display: grid;
    grid-template-columns: 22px minmax(120px, 160px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.sk-beat-num[b-m5m0tkbsjf] {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ks-text-faint);
    text-align: right;
}

.sk-beat-actions[b-m5m0tkbsjf] {
    display: flex;
    gap: 6px;
}

/* -- Field messages ----------------------------------------------------------- */

.sk-error[b-m5m0tkbsjf] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ks-danger-text);
}

/* -- Narrow screens (down to 360px) ------------------------------------------- */

@media (max-width: 640px) {
    /* The note takes the full width under the role, and the buttons wrap onto their own line with a
       taller hit area for touch. */
    .sk-beat[b-m5m0tkbsjf] {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .sk-beat-note[b-m5m0tkbsjf],
    .sk-beat-actions[b-m5m0tkbsjf] {
        grid-column: 1 / -1;
    }

    .sk-beat-actions[b-m5m0tkbsjf] {
        flex-wrap: wrap;
    }

    .sk-beat-actions .st-rowbtn[b-m5m0tkbsjf],
    .sk-choice-btn[b-m5m0tkbsjf] {
        height: 36px;
    }
}

@media (max-width: 420px) {
    .sk-pair[b-m5m0tkbsjf] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Studio/Sections/StyleBiblesSection.razor.rz.scp.css */
/*
    Section-specific styling only. Everything prefixed st-* is a shared admin primitive declared in
    wwwroot/app.css — redeclaring any of it here would fork the look of both admin areas at once.
    This file owns the sb-* classes and nothing else.
*/

/* Six columns: name, seed, medium, consistency, tokens, actions. The seed is a fixed 19-digit-capable
   strip and the threshold a short number, so both are sized rather than fractional; the name and the
   token clause share what is left. */
.sb-row[b-rrd9wz7gks] {
    grid-template-columns: minmax(0, 1.2fr) 148px minmax(0, 0.8fr) 104px minmax(0, 1.4fr) 84px;
}

/* The style clause can run to 2000 characters. One line, ellipsised, with the full text on the
   element's title — a cell that wrapped would set the row height off a single long entry. */
.sb-tokens[b-rrd9wz7gks] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1020px) {
    .sb-row[b-rrd9wz7gks] {
        grid-template-columns: minmax(0, 1.2fr) 148px 104px 84px;
    }

    /* Medium and the token clause go first: both are restated in full inside the editor. */
    .sb-row > :nth-child(3)[b-rrd9wz7gks],
    .sb-row > :nth-child(5)[b-rrd9wz7gks] {
        display: none;
    }
}
/* /Components/Studio/StudioTabs.razor.rz.scp.css */
/* Horizontal tab strip for the studio sections: an underline rail with the accent-tinted active
   tab, the horizontal counterpart of the settings sidebar's left accent bar.

   NOTE: the tabs are NavLink components, and CSS isolation only stamps the scope attribute on plain
   HTML elements — so every .stu-tab rule reaches the rendered <a> via ::deep from the scoped
   .stu-tabs ancestor. */

.stu-tabs[b-ua4wmqhokl] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid var(--ks-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.stu-tabs[b-ua4wmqhokl]::-webkit-scrollbar {
    display: none;
}

.stu-tabs[b-ua4wmqhokl]  .stu-tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 15px 11px;
    border-radius: 9px 9px 0 0;
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    color: var(--ks-text-muted);
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.stu-tabs[b-ua4wmqhokl]  .stu-tab:hover {
    background: var(--ks-surface-2);
    color: var(--ks-text);
}

.stu-tabs[b-ua4wmqhokl]  .stu-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.stu-tabs[b-ua4wmqhokl]  .stu-tab.active {
    color: var(--ks-accent-text);
    font-weight: 640;
    background: color-mix(in srgb, var(--ks-accent) 10%, transparent);
}

/* The rail sits ON the container's bottom border, so the active tab reads as continuous with the
   content below it rather than as a floating pill. */
.stu-tabs[b-ua4wmqhokl]  .stu-tab.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ks-accent);
}