/* staff.css: Staff error monitor and staff tools: tab strip, readouts, hub cards, workspaces, safety desk, forum triage, task history, Site Settings, Persona Studio. */
/* ===== STAFF: ERROR MONITOR (/staff/errors/) =====
   Dense triage surface. Deliberately quiet: status is carried by the badge
   pills and a single left border per row, so a wall of unresolved errors reads
   as a list to work through rather than a wall of red. */
.error-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.error-summary__stat {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.error-summary__stat strong { color: var(--text-primary); font-family: var(--font-mono); }
.error-summary__stat--unresolved { border-color: var(--color-error-border); color: var(--color-error-text); }
.error-summary__stat--unresolved strong { color: var(--color-error-text); }

/* flex-direction is explicit because this is a <form>: the global `form` rule
   is column-direction, and only setting `display: flex` leaves the filters
   stacked in a narrow right-aligned column. Same reason as .staff-filters. */
/* .error-filters / .error-bulkbar / .error-row moved to the canonical .staff-*
   families in the "Staff area overhaul" block at the end of this file. */

/* Status + origin pills. Both use the shared .badge base. */
.badge-unresolved { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
.badge-resolved   { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-ignored    { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.badge.origin-web       { background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info-border); }
.badge.origin-celery    { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge.origin-nginx,
.badge.origin-gunicorn,
.badge.origin-other     { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

.error-detail-head { margin-bottom: 18px; }
.error-detail-head__top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.error-detail-head__type { font-family: var(--font-mono); font-size: 1.15rem; margin: 0 0 4px; word-break: break-word; }
.error-detail-head__summary { color: var(--text-secondary); margin: 0 0 4px; word-break: break-word; }
.error-detail-head__culprit { color: var(--text-muted); font-size: 0.78rem; margin: 0 0 12px; word-break: break-word; }
.error-detail-head__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; max-width: none; }

.occurrence { padding: 0; margin-bottom: 10px; }
.occurrence__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.84rem;
}
@media (hover: hover) { .occurrence__summary:hover { background: var(--bg-hover); border-radius: var(--radius-lg); } }
.occurrence__time { font-weight: 700; }
.occurrence__user { color: var(--color-primary); }
.occurrence__ip, .occurrence__logger { color: var(--text-muted); font-size: 0.74rem; }
.occurrence__logger { margin-left: auto; }
.occurrence__body { padding: 0 16px 16px; border-top: 1px solid var(--border-subtle); }
.occurrence__block { margin-top: 14px; }
.occurrence__block h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.occurrence__redacted {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-success-text);
    font-size: 0.66rem;
    margin-left: 6px;
}
.occurrence__pre {
    margin: 0;
    padding: 12px 14px;
    max-height: 420px;
    overflow: auto;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.occurrence__pre--traceback { max-height: 560px; }

/* ============================================================
   STAFF TOOLS (/staff/*)
   The back-of-house surfaces read as an instrument panel: same tokens as the
   game, but denser, mono-flavoured, and deliberately unglamorous. The only
   colour that carries meaning here is status: everything else stays quiet so
   a real problem is the loudest thing on the page.
   ============================================================ */

/* Fixed, not sticky-in-flow: a staff action can be confirmed or saved from
   anywhere on a long page (a dialogue card near the bottom of Persona Studio,
   a settings section several screens down), and an in-flow banner near the
   top scrolls out of view before the staff member who just clicked ever sees
   it. Pinned to the viewport corner instead, so the confirm/pending/success/
   error text is visible regardless of scroll position; click it to dismiss
   early rather than waiting for the next action to replace it. Offset above
   the staff bottom bar below 1024px (see body.staff-shell). */
.staff-action-feedback {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 60;
    max-width: 480px;
    margin: 0 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--bg-subtle);
    font-size: .86rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}
body.is-app .staff-action-feedback,
body.staff-shell .staff-action-feedback { bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { body.staff-shell .staff-action-feedback { bottom: 16px; } }
@media (max-width: 480px) { .staff-action-feedback { right: 12px; left: 12px; max-width: none; } }
/* All four take real tokens so the bar follows the palette. --color-danger was
   never defined anywhere in this file, so the error tone silently fell through to
   its hardcoded fallback and stayed the same red in all ten Legacy palettes and
   both Frontier modes while its three siblings moved. The token is --color-error. */
.staff-action-feedback--confirm { border-left-color: var(--color-warning); }
.staff-action-feedback--pending { border-left-color: var(--color-primary); }
.staff-action-feedback--success { border-left-color: var(--color-success); }
.staff-action-feedback--error { border-left-color: var(--color-error); }
.staff-experimental-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.staff-experimental-banner__mark {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    line-height: 1.35;
}
.staff-experimental-banner p { margin: 0; font-size: .84rem; line-height: 1.55; }
.staff-experimental-banner strong { color: var(--text-primary); }
.confirming { border-color: var(--color-warning, #c58a27); }
.is-pending { cursor: wait; }
button.is-pending { opacity: .72; }
/* ---- Status readout strip: at-a-glance signal, one tile per fact. A tile
   only takes a colour when its value is actually actionable. ---- */
.staff-readouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.staff-readout {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius-md);
}
.staff-readout__label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}
.staff-readout__value {
    font-family: var(--font-mono);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    word-break: break-word;
}
.staff-readout__note { font-size: 0.74rem; color: var(--text-muted); }
.staff-readout__note code { white-space: normal; overflow-wrap: anywhere; }
.staff-readout--ok    { border-left-color: var(--color-success); }
.staff-readout--ok .staff-readout__value { color: var(--color-success-text); }
.staff-readout--warn  { border-left-color: var(--color-warning); }
.staff-readout--warn .staff-readout__value { color: var(--color-warning-text); }
.staff-readout--alert { border-left-color: var(--color-error); }
.staff-readout--alert .staff-readout__value { color: var(--color-error-text); }
/* A readout that links to its queue (Forum / Profile reports): keep the tile
   styling but drop the anchor's underline/link color, and add a hover cue. */
a.staff-readout { text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease); }
a.staff-readout .staff-readout__label { color: var(--text-secondary); }
@media (hover: hover) {
    a.staff-readout:hover { border-color: var(--color-primary); text-decoration: none; }
}
a.staff-readout:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Hub tool cards ---- */
.staff-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 14px;
}
.staff-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: inherit;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) {
    .staff-card:hover {
        text-decoration: none;
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }
}
.staff-card__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    font-size: 1.2rem;
}
.staff-card__body { min-width: 0; }
.staff-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
@media (hover: hover) { .staff-card:hover .staff-card__title { color: var(--color-primary); } }
.staff-card__desc { margin: 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; }
.staff-card__scope { display: block; margin-top: 7px; color: var(--text-muted); font-size: 0.74rem; line-height: 1.4; }

/* Primary tools get a featured card (accent border, larger icon tile);
   everything else is a compact list rather than a second row of identical
   cards. Before this, "Primary workspace actions" and "Secondary links"
   rendered through the same .staff-card in the same .staff-card-grid, so a
   9-tool workspace (3 primary + 6 secondary) read as one undifferentiated
   grid: the split existed only in the section heading, not in what either
   heading actually pointed at. */
.staff-card--primary {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border-color));
    background: linear-gradient(160deg, var(--bg-elevated), var(--bg-surface));
}
.staff-card--primary .staff-card__icon { width: 46px; height: 46px; font-size: 1.32rem; }
@media (hover: hover) { .staff-card--primary:hover { border-color: var(--color-primary); } }

.staff-action-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.staff-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-surface);
    color: inherit;
    font-size: 0.86rem;
    transition: background var(--dur) var(--ease);
}
@media (hover: hover) { .staff-action-row:hover { background: var(--bg-hover); text-decoration: none; } }
.staff-action-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.staff-action-row__icon { flex: 0 0 auto; width: 1.4em; text-align: center; }
.staff-action-row__title { flex: 0 0 auto; font-weight: 600; color: var(--text-primary); }
.staff-action-row__desc { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-size: 0.82rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (pointer: coarse) { .staff-action-row { min-height: 44px; } }
@media (max-width: 560px) {
    .staff-action-row { flex-wrap: wrap; }
    .staff-action-row__desc { text-align: left; white-space: normal; flex-basis: 100%; margin-left: calc(1.4em + 10px); }
}

/* ---- Shared workspace landing and staff-team surfaces ---- */
.staff-workspace-scope {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
}
.staff-workspace-scope strong { color: var(--text-primary); }
.staff-search-form { align-items: end; margin-bottom: 8px; }
.staff-filter-loading {
    display: block;
    min-height: 1.2em;
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.76rem;
}
.staff-filter-loading { visibility: hidden; }
form.htmx-request ~ .staff-filter-loading { visibility: visible; }
.staff-table-scroll {
    /* Load-bearing: this box must be the containing block for the .sr-only
       <caption>/<label> nodes its table holds. .sr-only is position: absolute
       with no offsets, so against a static scroller it resolves to the initial
       containing block, escapes the overflow clip and contributes its static
       position to the document's scrollable width. See docs/ux-rules.md
       "Layout and overflow". */
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.staff-table-scroll:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}
.staff-table-scroll > table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: visible;
}
/* Player Stats: a proportion bar beside a figure that already states the number, so
   the bar is decoration (aria-hidden in the markup) and never the only reading. */
.staff-bar {
    display: block;
    width: 100%;
    min-width: 140px;
    height: 8px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
.staff-bar__fill {
    display: block;
    height: 100%;
    background: var(--color-primary);
}
.staff-stats-note {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.staff-table-scroll__hint {
    display: none;
    margin: -8px 0 14px;
    color: var(--text-muted);
    font-size: 0.72rem;
}
@media (max-width: 700px) {
    .staff-table-scroll__hint { display: block; }
}

/* ---- Safety desk: a case file has a quieter information hierarchy than the
   operations hub. The rail keeps the high-impact actions and evidence anchors
   in view while the main column carries the full record. ---- */
.mod-room-intro { display: flex; align-items: baseline; gap: 12px; margin: -8px 0 18px; color: var(--text-secondary); font-size: .86rem; }
.mod-room-intro p { margin: 0; }
.mod-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.mod-nav a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 13px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-heading); font-size: .84rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .mod-nav a:hover { border-color: var(--color-primary); color: var(--text-primary); text-decoration: none; } }
.mod-case-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--border-color); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--bg-surface); }
.mod-case-summary__identity, .mod-case-summary__status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mod-case-summary__identity { min-width: 0; flex: 1 1 auto; }
.mod-case-summary__identity strong { color: var(--text-primary); font-family: var(--font-heading); font-size: 1.12rem; }
.mod-case-summary__status { justify-content: flex-end; }
.mod-case-summary__balances { color: var(--text-muted); font-family: var(--font-mono); font-size: .74rem; }
.mod-case-summary__watch-link { font-size: .78rem; color: var(--text-muted); }
.mod-duration-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mod-case-layout { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: start; }
.mod-case-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-right: 1px solid var(--border-subtle); }
.mod-case-rail a { padding: 7px 12px; border-left: 2px solid transparent; color: var(--text-secondary); font-size: .8rem; text-decoration: none; }
@media (hover: hover) { .mod-case-rail a:hover { border-left-color: var(--color-primary); color: var(--text-primary); background: var(--bg-hover); text-decoration: none; } }
.mod-case-main { display: grid; gap: 14px; min-width: 0; }
.mod-section { min-width: 0; padding: 18px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); }
.mod-section--risk { border-left: 3px solid var(--color-warning, #c58a27); }
.mod-section h2 { margin: 0; font-size: 1.05rem; }
.mod-section__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mod-section__hint { color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.mod-status { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mod-status--ok { border-color: color-mix(in srgb, var(--color-success) 45%, var(--border-color)); color: var(--color-success-text); background: color-mix(in srgb, var(--color-success) 10%, var(--bg-surface)); }
.mod-status--warning { border-color: color-mix(in srgb, var(--color-warning) 55%, var(--border-color)); color: var(--color-warning-text); background: color-mix(in srgb, var(--color-warning) 10%, var(--bg-surface)); }
.mod-status--danger { border-color: color-mix(in srgb, var(--color-error) 55%, var(--border-color)); color: var(--color-error-text); background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface)); }
.mod-warning { margin: 9px 0 0; padding: 9px 11px; border-left: 2px solid var(--color-warning, #c58a27); background: var(--bg-subtle); color: var(--text-secondary); font-size: .82rem; }
.mod-note { padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.mod-note-body { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: .75rem; }
.mod-note-empty { color: var(--text-muted); }
.mod-section .staff-table-scroll { margin-top: 14px; }

/* ---- Forum comms triage ---- */
.forum-report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.forum-report-metrics > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.forum-report-metrics span { color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.forum-report-metrics strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 1.25rem; }
.forum-report-table { min-width: 850px; }
.forum-report-table td { vertical-align: top; }
.forum-report-table td form { margin: 0; }
.forum-report-target-type, .forum-report-reviewer { display: block; margin-top: 4px; color: var(--text-muted); font-size: .7rem; }
.forum-report-also-warn { display: flex; align-items: center; gap: 4px; margin: 4px 0; font-size: .78rem; color: var(--text-secondary); }
.forum-report-reason { max-width: 340px; min-width: 230px; }
.forum-report-empty { padding: 26px 14px; color: var(--text-muted); text-align: center; }
@media (max-width: 768px) {
    .mod-room-intro { display: block; }
    .mod-room-intro p { margin-top: 5px; }
    .mod-case-summary { align-items: flex-start; flex-direction: column; }
    .mod-case-summary__status { justify-content: flex-start; }
    .mod-case-layout { display: block; }
    .mod-case-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .mod-case-rail .eyebrow { grid-column: 1 / -1; padding: 0 4px 4px; }
}
@media (max-width: 600px) {
    .forum-report-metrics { grid-template-columns: 1fr; }
    .mod-section { padding: 14px; }
    .mod-section__header { display: block; }
    .mod-section__hint { display: block; margin-top: 5px; text-align: left; }
}
.staff-team-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.staff-team-metrics > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.staff-team-metrics span { color: var(--text-muted); font-size: 0.72rem; }
.staff-team-metrics strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 1.2rem; }
.staff-team-results { margin-top: 14px; }
.staff-team-results__summary { margin: 0 0 8px; color: var(--text-secondary); font-size: 0.84rem; }
.staff-team-role__header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.staff-team-role__header h3 { min-width: 0; }
.staff-team-role__count { display: inline-grid; min-width: 30px; min-height: 30px; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.78rem; }
.staff-team-role__members { margin: 0; padding-left: 18px; color: var(--text-secondary); }
.staff-team-role__members li { display: list-item; }
.staff-team-role__members li small { display: block; color: var(--text-muted); font-size: 0.74rem; }
.staff-identity { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.82em; }
.staff-team-role-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.staff-team-role {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.staff-team-role h3 { margin: 0 0 5px; font-family: var(--font-heading); color: var(--text-primary); }
.staff-team-role p { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.45; }
.staff-team-role ul { margin: 0; padding-left: 18px; color: var(--text-secondary); }
.staff-team-role li + li { margin-top: 4px; }
.staff-team-admin-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.staff-team-admin-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.staff-team-admin-list span { color: var(--text-muted); font-size: 0.82rem; }
.staff-team-role-options { display: grid; gap: 10px; }
.staff-team-role-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.staff-team-role-option span { display: grid; gap: 3px; }
.staff-team-role-option small { color: var(--text-secondary); line-height: 1.4; }
.staff-team-role-options { min-width: 0; margin: 0; padding: 0; border: 0; }
.staff-team-role-options legend { margin: 0 0 10px; padding: 0; color: var(--text-secondary); font-size: 0.84rem; }
.staff-team-role:last-child { grid-column: span 2; }
@media (max-width: 900px) {
    .staff-team-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-team-role:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
    .staff-team-metrics { grid-template-columns: 1fr; }
    .staff-team-role-grid { grid-template-columns: 1fr; }
    .staff-team-admin-list li { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 1024px) {
    .staff-table-scroll__hint { display: block; }
}
@media (pointer: coarse) {
    .staff-search-form input,
    .staff-search-form button,
    .error-filters input,
    .error-filters select,
    .error-filters button,
    .staff-filters input,
    .staff-filters select,
    .staff-filters button,
    .staff-team-role-option { min-height: 44px; }
}

/* ---- Apparel bulk import (/staff/apparel-import/) ---- */
.apparel-import-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin: 0 0 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.apparel-import-row legend {
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.apparel-import-row__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.apparel-import-row__wide { grid-column: 1 / -1; }
.apparel-import-row__checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}
.apparel-import-row__actions { display: flex; justify-content: flex-end; gap: 8px; }
.apparel-import-addbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; }
.apparel-import-submitbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.apparel-import-grant {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 720px;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.apparel-import-grant input { margin-top: 3px; }
.apparel-import-grant span { display: flex; flex-direction: column; gap: 3px; }
.apparel-import-grant small { color: var(--text-muted); line-height: 1.45; }
.apparel-import-form-hint { max-width: 720px; margin: 0 0 14px; }
.apparel-import-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 720px;
    padding: 10px 12px;
    margin-top: 12px;
    color: var(--color-success-text);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    font-size: 0.86rem;
}
.apparel-import-result a { font-weight: 700; }

/* ---- Inline alert for broker/worker/Redis failures. These previously
   rendered as bare paragraphs on a class that was never defined. ---- */
.staff-alert {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border-radius: var(--radius-md);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    font-size: 0.88rem;
}
.staff-alert__icon { flex-shrink: 0; }

/* ---- Filter bar shared by Task History (mirrors .error-filters) ---- */
.staff-filters {
    display: flex;
    /* These are <form> elements, and the global `form` rule is column-direction
       with a 420px cap: both must be overridden or the filters stack up in a
       narrow right-aligned column. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: none;
    margin-bottom: 14px;
}
.staff-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- Compact count chips (task-history status breakdown) ---- */
.staff-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.staff-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.staff-chip strong { color: var(--text-primary); font-family: var(--font-mono); }

/* ---- Celery task-result status pills (reuse the shared .badge base) ---- */
.badge.task-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge.task-failure { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
.badge.task-retry,
.badge.task-started { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge.task-revoked,
.badge.task-pending { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* Worker/broker liveness dot: always paired with the text beside it. */
.staff-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.staff-dot--up   { background: var(--color-success); }
.staff-dot--down { background: var(--color-error); }

/* Mono cell for ids/paths inside staff tables. */
.staff-mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }

/* ---- Site Settings: group rail + live field filter ----
   The rail lists GROUPS only (six, fixed), never one entry per section: the
   prior design nested a per-section link list inside each rail group, which
   at <=1024px collapsed the rail to a horizontal flex row while each nested
   list stayed `display: grid`. Grid's default `align-content: normal` computes
   to `stretch`, so a group with one section stretched its single row to match
   its tallest sibling (13 sections deep), rendering as a giant near-empty
   capsule. A flat list of six buttons has no nested track to stretch, which
   is what actually fixes it, not a narrower media query. */
.staff-settings-layout {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.staff-settings-rail {
    position: sticky;
    top: calc(var(--header-height) + 14px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: calc(100vh - var(--header-height) - 40px);
    max-height: calc(100dvh - var(--header-height) - 40px);
    overflow-y: auto;
}
.staff-settings-rail__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.3;
}
@media (hover: hover) {
    .staff-settings-rail__item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
}
.staff-settings-rail__icon { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.staff-settings-rail__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.staff-settings-rail__label small { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; }
.staff-settings-rail__risk { margin-left: auto; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); }
.staff-settings-rail__risk--high { background: var(--color-warning); box-shadow: 0 0 6px color-mix(in srgb, var(--color-warning) 60%, transparent); }
.staff-settings-rail__item.is-active {
    background: var(--bg-subtle);
    border-color: var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
/* The live filter hides fields/sections with the `hidden` attribute. The global
   `label { display: flex }` rule outranks the UA sheet's [hidden] { display:none },
   so re-assert it here at a specificity that wins. */
.staff-settings-layout [hidden] { display: none; }
.staff-settings-search { margin-bottom: 16px; }
.staff-settings-search input { width: 100%; }
.staff-settings-search__hint { display: block; margin-top: 5px; font-size: 0.76rem; color: var(--text-muted); }

.staff-settings-group { display: grid; gap: 14px; scroll-margin-top: calc(var(--header-height) + 16px); }
.staff-settings-group + .staff-settings-group { margin-top: 28px; }
.staff-settings-group__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 2px;
}
.staff-settings-group__header h2 { margin: 3px 0 2px; }
.staff-settings-group__header p { margin: 0; color: var(--text-secondary); font-size: 0.86rem; }
.staff-settings-section__purpose { margin: 3px 0 0; max-width: 66ch; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; }
.staff-settings-risk-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.staff-settings-risk-badge--high { border-color: color-mix(in srgb, var(--color-warning) 55%, var(--border-subtle)); color: var(--color-warning-text); }
.staff-settings-risk-note {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 7%, var(--bg-surface));
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}
.staff-settings-risk-note strong { color: var(--color-warning-text); }
.staff-settings-confirm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.staff-settings-confirm-check .notification-setting-switch { flex-shrink: 0; }

.staff-settings-confirmation {
    position: sticky;
    z-index: 3;
    top: calc(var(--header-height) + 12px);
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--color-warning) 55%, var(--border-subtle));
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
}
/* An explicit :focus ring, not :focus-visible: a browser will not reliably treat
   programmatic focus as focus-visible, and this panel is focused by script when it
   opens. Same reason the incursion board and the pet progression heading carry theirs. */
.staff-settings-confirmation:focus { outline: 2px solid var(--color-warning); outline-offset: 3px; }
.staff-settings-confirmation__header { display: flex; gap: 10px; align-items: flex-start; }
.staff-settings-confirmation__icon { font-size: 1.3rem; line-height: 1.2; }
.staff-settings-confirmation h2 { margin: 0; font-size: 1rem; }
.staff-settings-confirmation p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.82rem; }
.staff-settings-confirmation__stale { color: var(--color-warning-text) !important; }
.staff-settings-confirmation__changes { display: grid; gap: 6px; margin: 14px 0; padding-left: 0; list-style: none; }
.staff-settings-confirmation__changes li { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1.2fr) minmax(90px, 1fr) auto minmax(90px, 1fr); gap: 8px; align-items: baseline; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--bg-subtle); font-size: 0.78rem; }
.staff-settings-confirmation__section { color: var(--text-muted); font-size: 0.68rem; }
.staff-settings-confirmation__value { overflow-wrap: anywhere; color: var(--text-muted); font-family: var(--font-mono); }
.staff-settings-confirmation__value--after { color: var(--color-warning-text); }
.staff-settings-confirmation__actions { display: flex; justify-content: flex-end; gap: 8px; }

.staff-settings-history__list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.staff-settings-history__row { padding: 13px 15px; background: var(--bg-subtle); }
.staff-settings-history__row + .staff-settings-history__row { border-top: 1px solid var(--border-subtle); }
.staff-settings-history__meta { display: flex; justify-content: space-between; gap: 12px; }
.staff-settings-history__meta time { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; }
.staff-settings-history__detail { margin: 6px 0 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.76rem; overflow-wrap: anywhere; }
.staff-settings-history__section { margin: 6px 0 0; color: var(--text-muted); font-size: 0.78rem; }
.staff-settings-history__legacy { margin: 6px 0 0; color: var(--text-muted); font-size: 0.74rem; }
.staff-settings-history__changes { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.staff-settings-history__changes li { overflow-wrap: anywhere; }
.staff-settings-history__id { color: var(--text-muted); font-size: 0.7rem; }
.staff-settings-history__value { color: var(--text-muted); font-family: var(--font-mono); }
.staff-settings-history__value--after { color: var(--text-primary); }

.staff-settings-intro,
.staff-persona-studio-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-color));
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-surface));
}
.staff-settings-intro__icon,
.staff-persona-studio-intro__icon { flex: 0 0 auto; font-size: 1.35rem; line-height: 1.2; }
.staff-settings-intro strong,
.staff-persona-studio-intro strong { color: var(--text-primary); }
.staff-settings-intro p,
.staff-persona-studio-intro p { margin: 3px 0 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }

.staff-settings-sections { display: grid; gap: 20px; min-width: 0; }
.staff-settings-form { max-width: none; gap: 0; }
/* Anchor targets must clear the fixed header when jumped to from the rail. */
.staff-settings-form .panel { scroll-margin-top: calc(var(--header-height) + 16px); }
.staff-settings-section__header { align-items: flex-start; gap: 12px; }
.staff-settings-section__header > div { min-width: 0; }
.staff-settings-section__count,
.staff-settings-section__dirty { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; }
.staff-settings-section__header .btn { flex: 0 0 auto; }
.staff-settings-section__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.staff-settings-section__dirty.is-dirty { color: var(--color-warning-text); }
.staff-settings-section__group { display: block; margin-bottom: 2px; }
.staff-settings-section__match { display: inline-block; margin-left: 8px; color: var(--color-primary-text, var(--text-secondary)); font-size: 0.74rem; font-weight: 600; }
.staff-settings-section__match[hidden] { display: none; }
.staff-settings-section__history { display: inline-block; margin-left: 8px; font-size: 0.74rem; }
.settings-field-id { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; overflow-wrap: anywhere; }
.settings-field.is-search-hit { box-shadow: -3px 0 0 var(--color-primary); padding-left: 8px; }
.staff-settings-conflict {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-warning);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    font-size: 0.84rem;
}
.staff-settings-conflict p { margin: 4px 0 0; color: var(--text-secondary); }
.staff-settings-conflict ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; }
.staff-settings-conflict__value { font-family: var(--font-mono); overflow-wrap: anywhere; }
.staff-settings-conflict__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.staff-settings-save__hint { color: var(--text-muted); font-size: 0.76rem; }
.staff-settings-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.staff-settings-search > label { flex: 1 1 280px; min-width: 0; }
.staff-settings-search__hint { flex: 1 0 100%; margin-top: 0; }
@media (pointer: coarse) {
    .staff-settings-conflict__actions .btn,
    .staff-settings-search .btn,
    .staff-settings-section__footer .btn { min-height: 44px; }
    .staff-settings-section__history { padding: 12px 0; }
}
.settings-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px 20px;
}
.settings-field-grid label { gap: 4px; }
/* Several knobs' help_text names sibling knobs by their real field name, and a run like
   "ceiling_mut_jackpot_min_bonus..ceiling_mut_jackpot_max_bonus" offers no break
   opportunity: 59 unbreakable characters. A flex/grid item's automatic minimum size is its
   min-content width, so that one span sized its whole label past its track and laid the
   document out 32px wider than a 390px phone (and 7px wider at 768). `anywhere` rather than
   `break-word`: only `anywhere` lets the introduced break opportunities count toward
   min-content, which is the figure the track sizing actually reads. */
.settings-field-grid .field-help {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
/* Boolean knobs span the full grid row: checkbox + label on one line, the help
   text on its own line beneath. Left in a single 220px column the label and its
   help text get squeezed into a two-word-per-line ribbon. */
.settings-field-grid .field-toggle {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 9px;
}
.settings-field-grid .field-toggle .notification-setting-switch { flex-shrink: 0; }
.settings-field-grid .field-toggle .field-help { flex-basis: 100%; }
/* A textarea (or any field that shouldn't share a row with a narrow neighbor,
   e.g. the mod case file's Reason/Notes fields) spans the full grid row, same
   reasoning as .field-toggle above. */
.settings-field-grid .field-wide { grid-column: 1 / -1; }
/* An edited-but-unsaved field marks itself, so a 100+ knob page can show you
   exactly what you touched before you commit it. */
.settings-field.is-dirty {
    padding-left: 10px;
    margin-left: -12px;
    border-left: 2px solid var(--color-warning);
}
/* A value input otherwise shares `--bg-surface` with the `.panel` it sits on
   (the shared site-wide input rule), so on this page — which is nothing BUT
   value inputs — the only thing distinguishing "editable" from "empty panel"
   was a 1px border in the same hue as the panel's own border. Raised a step,
   scoped to this page rather than the global input rule every other form
   in the game also uses. */
.settings-field-grid input[type="text"],
.settings-field-grid input[type="number"],
.settings-field-grid select,
.settings-field-grid textarea {
    background: var(--bg-elevated);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.settings-value-row { display: flex; align-items: stretch; }
.settings-value-row input,
.settings-value-row select { flex: 1; min-width: 0; }
/* Only clip the input's corner when a unit chip actually follows it, so a
   unit-less field (most selects, several counts) keeps a plain full-radius box. */
.settings-value-row:has(.settings-field-unit) > input,
.settings-value-row:has(.settings-field-unit) > select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.settings-field-unit {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    white-space: nowrap;
}
.staff-settings-empty { color: var(--text-muted); font-size: 0.9rem; padding: 8px 0; }

.staff-settings-save {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.staff-settings-save__status {
    margin-right: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.staff-settings-save__status.is-dirty { color: var(--color-warning-text); }

/* ---- Persona Studio: roster, contract, and authored dialogue ---- */
.persona-studio-identity__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 92px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-surface));
    color: var(--color-primary);
}
.persona-studio-identity__mark.is-signal { background: color-mix(in srgb, #6f66ff 13%, var(--bg-surface)); }
.persona-studio-identity__mark img { width: 100%; height: 100%; object-fit: cover; }
.persona-studio-chip-row,
.persona-studio-surface-list { display: flex; flex-wrap: wrap; gap: 5px; }
.persona-studio-surface-list span,
.persona-studio-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}
.staff-persona-studio-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    white-space: nowrap;
}
.staff-persona-studio-badge.is-ready { border-color: var(--color-success); color: var(--color-success-text); }
.staff-persona-studio-badge.is-warning,
.persona-studio-chip.is-warning { border-color: var(--color-warning); color: var(--color-warning-text); }
.persona-studio-detail { display: grid; gap: 20px; }
.persona-studio-identity {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.persona-studio-identity__mark { min-height: 150px; font-size: 3.3rem; }
.persona-studio-identity__mark small { padding: 12px; color: var(--text-muted); font-size: 0.73rem; line-height: 1.4; text-align: center; }
.persona-studio-identity__body { min-width: 0; }
.persona-studio-identity__body h2 { margin: 3px 0 6px; overflow-wrap: anywhere; }
.persona-studio-identity__body > p { max-width: 84ch; margin: 0 0 12px; color: var(--text-secondary); line-height: 1.55; }
.persona-studio-chip.is-ready { border-color: var(--color-success); color: var(--color-success-text); }
.persona-studio-surface-list { align-items: center; margin-top: 14px; }
.persona-studio-surface-list strong { margin-right: 3px; color: var(--text-muted); font-size: 0.74rem; }
.persona-studio-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 20px; }
.persona-studio-lore,
.persona-studio-contract { max-width: none; }
.persona-studio-lore .panel__header,
.persona-studio-contract .panel__header { align-items: flex-start; gap: 12px; }
.persona-studio-lore p { color: var(--text-secondary); line-height: 1.6; }
.persona-studio-pending { color: var(--color-warning-text) !important; }
.persona-studio-contract__list { display: grid; gap: 9px; margin: 0; }
.persona-studio-contract__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.persona-studio-contract__list dt { color: var(--text-muted); font-size: 0.76rem; }
.persona-studio-contract__list dd { max-width: 62%; margin: 0; color: var(--text-secondary); font-size: 0.78rem; text-align: right; overflow-wrap: anywhere; }
.persona-studio-genart__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.persona-studio-genart__preview { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-subtle); display: grid; place-items: center; }
.persona-studio-genart__preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.persona-studio-genart__empty { font-size: 3rem; opacity: 0.6; }
.persona-studio-genart__meta { display: grid; gap: 12px; min-width: 0; }
.persona-studio-genart__meta form { margin: 0; }
@media (max-width: 640px) { .persona-studio-genart__body { grid-template-columns: 1fr; } }

.persona-dialogue-group + .persona-dialogue-group { margin-top: 24px; }
.persona-dialogue-group__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.persona-dialogue-group__heading h3 { margin: 0; font-size: 1rem; }
.persona-dialogue-group__heading span { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; }
.persona-studio-dialogue { display: grid; gap: 16px; }
.persona-studio-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.persona-studio-section-heading h2 { margin: 3px 0 5px; }
.persona-studio-section-heading p { max-width: 76ch; margin: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.staff-back-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-primary); font-size: 0.82rem; }
.staff-persona-dialogue-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; }
.staff-persona-dialogue-card__meta span { overflow-wrap: anywhere; }
.staff-persona-dialogue-grid { display: grid; gap: 14px; }
.staff-persona-dialogue-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}
.staff-persona-dialogue-card.is-overridden {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--border-color));
}
.staff-persona-dialogue-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.staff-persona-dialogue-card__heading .panel-title { margin: 0 0 3px; font-size: 1rem; }
.staff-persona-dialogue-card__status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
}
.staff-persona-dialogue-card__status.is-default { color: var(--text-muted); border-color: var(--border-subtle); }
.staff-persona-dialogue-form { display: grid; gap: 10px; }
.staff-persona-dialogue-form label { display: flex; flex-direction: column; gap: 5px; }
.staff-persona-dialogue-form textarea { width: 100%; min-height: 8.5rem; resize: vertical; }
.staff-persona-dialogue-card__voice { margin: 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.staff-persona-dialogue-preview {
    padding: 10px 12px;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
/* Mirrors the .dr2-host recipe (dressing-room mentor strip): the shared
   .persona-surface partial is sized for a full mentor plate, so a compact
   consumer defines its own chip-sized class family over the same shape
   rather than fighting that partial's defaults. Not built on the partial
   itself here (the line has to be Alpine-reactive per keystroke, which the
   partial's server-rendered content can't be), but matches its visual
   language so a staff writer sees the same kind of card a player would. */
.persona-studio-preview { display: flex; align-items: center; gap: 10px; }
.persona-studio-preview__portrait {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-hover));
    color: var(--color-primary);
    font-size: 1.2rem;
}
.persona-studio-preview__portrait.is-signal { background: color-mix(in srgb, #6f66ff 13%, var(--bg-hover)); }
.persona-studio-preview__portrait img { width: 100%; height: 100%; object-fit: cover; }
.persona-studio-preview__body { min-width: 0; }
.persona-studio-preview__name { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.persona-studio-preview__line { margin: 2px 0 0; color: var(--text-secondary); font-style: italic; overflow-wrap: anywhere; }
.staff-persona-dialogue-preview__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
}
.staff-persona-dialogue-form__actions,
.staff-persona-dialogue-reset { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-persona-dialogue-defaults { color: var(--text-secondary); font-size: 0.84rem; }
.staff-persona-dialogue-defaults summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--color-primary); }
.staff-persona-dialogue-defaults ul { margin: 6px 0 0; padding-left: 20px; }
.staff-persona-dialogue-defaults li + li { margin-top: 4px; }
.staff-persona-dialogue-card [hidden] { display: none; }
@media (max-width: 600px) {
    .staff-persona-dialogue-card__heading { flex-direction: column; }
    .staff-persona-dialogue-card__status { align-self: flex-start; }
}


/* ── Theme Studio (WP07): list, editor views, live note, unsaved preview ───────────── */
.theme-studio-card { flex-wrap: wrap; }
.theme-studio-card__name { color: var(--text-primary); text-decoration: none; }
.theme-studio-card__name strong { font-family: var(--font-heading); }
.theme-studio-card__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.theme-studio-editor__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.theme-live-note { margin: 14px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--color-warning-ink) 45%, var(--border-color)); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); font-size: .86rem; line-height: 1.45; }
.theme-live-note--quiet { border-color: var(--border-subtle); }
.theme-live-note strong { color: var(--text-primary); }
.theme-studio-tabs { display: flex; gap: 6px; margin: 18px 0 0; }
.theme-studio-tabs button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
.theme-studio-tabs button[aria-selected="true"] { border-color: var(--color-primary); background: var(--bg-surface); color: var(--text-primary); }
.theme-studio-panes { display: grid; gap: 16px; margin-top: 4px; }
.theme-pane { min-width: 0; }
.theme-pane--preview { padding: 14px 0; }
.theme-review { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-subtle); }
.theme-review ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; font-size: .84rem; overflow-wrap: anywhere; }
.theme-review__old { color: var(--text-muted); text-decoration: line-through; }
.theme-preview { display: grid; gap: 12px; }
.theme-preview__note { margin: 0; color: var(--text-secondary); font-size: .86rem; }
.theme-preview__frame { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-body); color: var(--text-primary); }
.theme-preview__header { min-height: 64px; display: flex; align-items: flex-end; padding: 10px 14px; background-color: var(--bg-surface); background-size: cover; background-position: center; }
.theme-preview__title { font-family: var(--font-heading); font-weight: 800; padding: 2px 8px; background: color-mix(in srgb, var(--bg-body) 70%, transparent); border-radius: 6px; }
.theme-preview__body { display: grid; grid-template-columns: 72px minmax(0, 1fr); min-height: 180px; }
.theme-preview__rail { display: grid; place-items: end center; padding: 8px 4px; border-right: 1px solid var(--border-subtle); background-color: var(--bg-surface); background-size: cover; background-position: center; color: var(--text-muted); font-size: .72rem; }
.theme-preview__main { padding: 12px; min-width: 0; }
.theme-preview__panel { padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-subtle); }
.theme-preview__panel p { margin: 4px 0 0; font-size: .84rem; }
.theme-preview__secondary { color: var(--text-secondary); }
.theme-preview__muted { color: var(--text-muted); }
.theme-preview__chips, .theme-preview__buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.theme-preview__chip { padding: 2px 8px; border: 1px solid currentColor; border-radius: 99px; font-size: .74rem; font-weight: 700; }
.theme-preview__chip--success { color: var(--color-success); }
.theme-preview__chip--warning { color: var(--color-warning); }
.theme-preview__chip--error { color: var(--color-error); }
.theme-preview__chip--info { color: var(--color-info); }
.theme-preview__btn { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-inverse); font-size: .8rem; font-weight: 800; }
.theme-preview__btn--primary { background: var(--color-primary); }
.theme-preview__btn--reward { background: var(--gradient-primary); }
.theme-preview__btn--danger { background: var(--color-error); }
@media (min-width: 1024px) {
    .theme-studio-tabs { display: none; }
    .theme-studio-panes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    .theme-pane--preview { position: sticky; top: 16px; }
}
@media (width < 1024px) {
    .theme-pane:not(.is-active) { display: none; }
}
@media (width < 480px) {
    .theme-preview__body { grid-template-columns: 48px minmax(0, 1fr); }
}

/* ── Content Studio (WP07): persona reference, apparel import rows, adopt compiler ─── */
.persona-studio-summary { margin: 0 0 12px; }
.persona-studio-reference { margin-top: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.persona-studio-reference > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; min-height: 44px; }
.persona-studio-reference[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.persona-studio-reference > :not(summary) { margin: 12px 14px; }
.persona-studio-queue { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: .84rem; }
.staff-persona-dialogue-card__scope { margin: 6px 0; font-size: .84rem; color: var(--text-secondary); }
.apparel-import-summary ol { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.apparel-import-summary__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.apparel-import-summary__row[aria-current="true"] { border-color: var(--color-primary); background: var(--bg-surface); }
.apparel-import-summary__num { flex: 0 0 auto; min-width: 1.6em; font-weight: 800; color: var(--color-primary); }
.apparel-import-summary__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apparel-import-row__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: .84rem; color: var(--text-secondary); }
.apparel-import-art { display: grid; gap: 8px; min-width: 0; }
.apparel-import-art__results { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.apparel-import-art__results .btn { max-width: 100%; overflow-wrap: anywhere; text-align: left; height: auto; white-space: normal; }
.apparel-import-warning { color: var(--text-secondary); font-size: .84rem; }
.apparel-import-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.adopt-help { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.adopt-help summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.adopt-help pre { overflow-x: auto; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-body); }
.adopt-layers { overflow-wrap: anywhere; }
.adopt-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-error-ink) 45%, var(--border-color)); border-radius: var(--radius-sm); background: var(--bg-subtle); overflow-wrap: anywhere; }
.adopt-preview img { display: block; max-width: 100%; height: auto; }
.adopt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.adopt-swatch { display: inline-block; width: 1em; height: 1em; margin-right: 6px; vertical-align: middle; border: 1px solid var(--border-subtle); border-radius: 3px; }
@media (width < 480px) {
    .apparel-import-row__nav { flex-wrap: wrap; justify-content: center; }
}
.theme-studio-list-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.persona-studio-detail__topbar { flex-wrap: wrap; }
.persona-studio-detail__heading { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.persona-studio-summary { min-width: 0; max-width: 100%; }
.persona-studio-summary > div { flex-wrap: wrap; }

/* Catalog (WP08): item cards and the focused editor */
.staff-catalog-cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.staff-catalog-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.staff-catalog-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.staff-catalog-card__head > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.staff-catalog-card__shops { display: grid; gap: 6px; margin: 0; }
.staff-catalog-card__shops > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.staff-catalog-card__shops dt { min-width: 7.5rem; color: var(--text-muted); font-size: .78rem; }
.staff-catalog-card__shops dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: .84rem; }
.staff-catalog-detail { display: grid; gap: 14px; min-width: 0; }
.staff-catalog-detail__sub { margin: 14px 0 6px; font-size: .9rem; }
.staff-catalog-detail__lines { margin: 0; padding-left: 18px; font-size: .86rem; }
.staff-catalog-detail__check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
@media (min-width: 1024px) {
    .staff-catalog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spire-grant-cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spire-grant-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.spire-grant-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.spire-grant-card__effects { margin: 0; color: var(--text-secondary); font-size: .86rem; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .spire-grant-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.event-manager-links, .event-state-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.event-state-counts a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 99px; color: var(--text-secondary); text-decoration: none; }
.event-state-counts a[aria-current="true"] { border-color: var(--color-primary); color: var(--text-primary); }
.event-cards { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.event-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.event-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.event-card__head > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .event-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.staff-main .staff-filters label, .staff-main .staff-filters select, .staff-main .staff-filters input { min-width: 0; max-width: 100%; }
.staff-main .spire-buff-card { flex-wrap: wrap; min-width: 0; }
.staff-main .spire-buff-card__body, .staff-main .spire-buff-card__meta { min-width: 0; max-width: 100%; }
.staff-main .spire-buff-card__meta { flex-basis: 100%; }
.staff-main .spire-buff-time { white-space: normal; overflow-wrap: anywhere; }
.anomaly-why { display: block; margin-top: 4px; color: var(--text-secondary); font-size: .76rem; font-weight: 400; max-width: 34ch; white-space: normal; }
#boon-editor input, #boon-editor select, #boon-editor textarea { max-width: 100%; min-width: 0; }
#boon-editor .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (width < 768px) { #boon-editor .form-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.history-cards { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.history-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .history-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.staff-team-capabilities { margin-top: 6px; font-size: .8rem; }
.staff-team-capabilities summary { cursor: pointer; min-height: 32px; }
.staff-team-capabilities ul { margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.staff-team-delta { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.staff-team-delta ul { margin: 6px 0 0; padding-left: 18px; }
.activity-detail { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .86rem; }
.staff-return-link { color: var(--text-primary); font-weight: 700; }
.staff-event-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.staff-event-list__item { min-width: 0; }
.staff-event-list__link { display: grid; gap: 2px 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; min-height: 44px; overflow-wrap: anywhere; }
.staff-event-list__item.is-selected .staff-event-list__link { border-color: var(--color-primary); }
.staff-event-list__name { font-weight: 700; }
.staff-event-list__state { justify-self: end; font-size: .8rem; color: var(--text-secondary); }
.staff-event-list__when, .staff-event-list__note { grid-column: 1 / -1; font-size: .8rem; color: var(--text-secondary); }
@media (min-width: 1024px) { .staff-event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.staff-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid var(--border-subtle); }
.staff-tabs__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--text-secondary); text-decoration: none; border-bottom: 3px solid transparent; }
.staff-tabs__tab[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--color-primary); font-weight: 700; }
.item-picker { display: grid; gap: 6px; min-width: 0; }
.item-picker__search, .item-picker select { min-width: 0; max-width: 100%; }
.staff-offer { margin: 0 0 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.staff-offer > form { padding: 0 12px 12px; }
.staff-offer__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.staff-offer__name { font-weight: 700; }
.staff-offer__facts { font-size: .82rem; color: var(--text-secondary); }
.staff-offer-add { margin: 12px 0; }
.staff-offer-add > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.task-rows { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.task-row { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.task-row__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.task-row__name { font-weight: 700; min-width: 0; }
.task-row__when, .task-row__note { font-size: .8rem; color: var(--text-secondary); }
.task-row__body { display: grid; gap: 8px; padding: 0 12px 12px; min-width: 0; }
.task-row__facts { display: grid; gap: 6px; margin: 0; }
.task-row__facts > div { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.task-row__facts dt { min-width: 7rem; color: var(--text-muted); font-size: .78rem; }
.task-row__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: .84rem; }
.task-row__label { margin: 4px 0 0; font-size: .86rem; }
.task-row__pre { margin: 0; max-height: 18rem; overflow: auto; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-row__pre:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.staff-run-status:empty { display: none; }
.staff-run-status { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); overflow-wrap: anywhere; }
.staff-run-status p { margin: 0; }
.limited-nav { display: none; }
.staff-real-action { border-color: var(--color-warning); }
.limited-nest-form select { max-width: 100%; min-width: 0; }
@media (width < 768px) {
    .limited-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
    .limited-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-primary); }
    .limited-breed .workbench-grid .preview-frame { position: sticky; top: var(--header-height); z-index: 3; padding: 6px 8px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
    .limited-breed .preview-frame .workbench-section-title { margin: 0; font-size: .8rem; }
    .limited-breed .preview-canvas { min-height: 0; max-height: min(30dvh, 200px); }
    .limited-breed .preview-canvas img { width: auto; max-width: 100%; max-height: min(28dvh, 190px); margin: 0 auto; object-fit: contain; }
    .limited-breed .preview-rate-note { display: none; }
    .limited-breed #limited-colors, .limited-breed #limited-markings, #limited-nest-test { scroll-margin-top: calc(var(--header-height) + min(34dvh, 230px)); }
    .limited-breed .marking-actions { margin-left: 0; flex-wrap: wrap; }
    .limited-breed .marking-opacity { flex: 1 1 100%; }
    .limited-breed .marking-opacity input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
    .limited-breed .workbench-section-actions { flex-wrap: wrap; }
    .limited-nest-form .btn { width: 100%; min-height: 44px; }
}