/* Skill Studio — scoped styles.
   Palette follows the studio wireframe (_UnifiedDesign/_skillsStore/skill-studio.v4.html)
   and reads from the app's own CSS variables where they exist, so the page inherits the
   theme rather than pinning its own light/dark. */

/*  FITS THE SHELL'S MIDDLE — same contract as Chat and Work.
    .shell is height:100dvh / overflow:hidden and lays out top bar, a scrollable
    <main class="shell-body">, and the composer strip. A page that sets its own
    100vh height therefore adds a SECOND viewport inside one that is already
    full, which is how this page ran past the composer instead of stopping at it.
    Fill the middle and scroll inside it; the shell owns the viewport. */
.studiopage {
    height: 100%;
    min-height: 0;
    display: flex;
    background: var(--bg, #FFFFFF);
    color: var(--ink, #0F1319);
}

.ss-shell {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

/* ── left rail: REMOVED ────────────────────────────────────────────────────
   Studio's sections live in the top bar now, unfolding from the Studio tab.
   The rules that styled .ss-rail / .ss-rail-item are deleted rather than left
   commented out: dead CSS is read as live by the next person to open the file,
   and a rail that can be restored by deleting a comment marker invites exactly
   the second navigation this change removed. */

/* ── pane ──────────────────────────────────────────────────────────────── */
/*  The pane scrolls, not the page. The rail must stay put while a 123-field
    schema scrolls past it — scrolling the whole page would carry the rail off
    the top and leave no way back without scrolling up again. */
.ss-pane {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /*  The composer is position:fixed against the viewport bottom, so the last
        row of a list would otherwise sit underneath it. --shell-dock-gap is
        published by the shell from ChatDock's own height observer, so this
        tracks a composer that grows with a multi-line draft. */
    padding-bottom: var(--shell-dock-gap, 88px);
}

.ss-head {
    padding: 16px 26px 12px;
    border-bottom: 1px solid var(--line, #E5E8EE);
}

.ss-head h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }

.ss-lede {
    color: var(--ink-3, #6B7686);
    font-size: 13px;
    margin: 5px 0 0;
    /*  68ch was a reading-column width borrowed from body prose, and this is not
        body prose — it is two sentences of orientation above a table. At 68ch in a
        full-width pane it wrapped to four lines with half the row empty beside it,
        so the header cost more vertical space than the first three rows of the
        thing it introduces. Wide enough to use the pane, capped so it does not run
        to an unreadable measure on a large display. */
    max-width: min(100%, 132ch);
    line-height: 1.5;
}

.ss-back {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #6B7686);
    padding: 0 0 8px;
}

.ss-back:hover { color: var(--jade, #0FA47F); }

/*  NOT a scroll container. .ss-pane owns the scrolling and carries the composer
    gap; a second scroller nested inside it put that gap outside the box that
    actually scrolls, so the last row still ran under the composer. One scroller,
    and the padding that clears the composer belongs to it. */
.ss-body { flex: 1; padding: 14px 26px 40px; }

/* ── list ──────────────────────────────────────────────────────────────── */
.ss-list {
    background: var(--s1, #F7F8FA);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 10px;
    /*  NOT overflow:hidden. The column tooltips are absolutely positioned and a
        clipping ancestor would cut them off at the header's own bottom edge —
        which is exactly where they open. The rounded corners the clip used to
        provide are put back on the first and last rows instead. */
    overflow: visible;
}

.ss-list > .ss-row:first-child { border-radius: 9px 9px 0 0; }
.ss-list > .ss-row:last-child  { border-radius: 0 0 9px 9px; }

.ss-row {
    display: grid;
    /*  Skill · requires · grant · WHERE · objective · arrow. The Where column is the
        widest of the middle four because it can hold three pills; the two before it
        hold one short token each. */
    grid-template-columns: minmax(280px, 2fr) 84px 96px 150px 92px 26px;
    align-items: start;
    gap: 10px;
    padding: 11px 14px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line, #E5E8EE);
}

.ss-row:last-child { border-bottom: none; }

.ss-row-head {
    align-items: center;
    background: var(--s2, #EEF0F4);
    color: var(--ink-3, #6B7686);
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.ss-row-click { cursor: pointer; }
.ss-row-click:hover { background: var(--s2, #EEF0F4); }

/*  Identity on top, meaning underneath. .n is the skill key and .key is its
    description — the class names are now the wrong way round for what they hold,
    but they are shared with the artifact rows and renaming them here would split
    one row style into two. The RULES are what matter, and they read in the order
    the markup does. */
.ss-sk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ss-sk .n {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink, #0F1319);
    letter-spacing: .01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ss-sk .key {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-3, #6B7686);
    /*  Two lines, then ellipsis. A descriptor is written as a paragraph for the
        model to read, and one line cut mid-clause tells a person less than two. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-arr { color: var(--ink-4, #9098A6); text-align: right; padding-top: 1px; }
/*  Nudged to the key's baseline. With align-items:start every cell pins to the
    top of a now two-line row, which left the pills floating a touch high of the
    name they describe. */
.ss-row:not(.ss-row-head) > span { padding-top: 1px; }

.ss-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .06em;
    font-weight: 600;
    background: var(--s2, #EEF0F4);
    color: var(--ink-3, #6B7686);
    border: 1px solid var(--line-2, #D2D7E0);
}

.ss-foot {
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-4, #9098A6);
}

/* ── semantic colour — separate from the accent ───────────────────────── */
.ok      { color: var(--success, #0FA47F); }
.warn    { color: var(--warning, #B87508); }
.bad     { color: var(--danger, #DB4F38); }
.terminal{ color: var(--tone-violet, #7154D6); font-weight: 600; }
.dim     { color: var(--ink-4, #9098A6); font-style: italic; }
.mono    { font-family: var(--mono, ui-monospace, Menlo, monospace); }

/* ── read-only banner ─────────────────────────────────────────────────── */
.ss-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: color-mix(in srgb, var(--warning, #B87508) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #B87508) 28%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-2, #3F4A5B);
}

.ss-banner code { color: var(--warning, #B87508); }

/* ── cards ─────────────────────────────────────────────────────────────── */
.ss-card {
    background: var(--s1, #F7F8FA);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.ss-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ss-card h3 .sub {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3, #6B7686);
    font-weight: 400;
}

.dim-card { opacity: .72; }

.ss-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 14px 18px;
}

.ss-kv > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.ss-kv .k {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3, #6B7686);
}

.ss-kv .v { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.ss-label {
    display: block;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3, #6B7686);
    margin: 14px 0 5px;
}

.ss-label .hint {
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ink-4, #9098A6);
    font-weight: 400;
}

.ss-ro {
    background: var(--bg, #fff);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.ss-note {
    font-size: 11.5px;
    color: var(--ink-3, #6B7686);
    line-height: 1.55;
    margin: 12px 0 0;
    max-width: 78ch;
}

/* ── args / produces / consumes ───────────────────────────────────────── */
.ss-io {
    background: var(--bg, #fff);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 6px;
    overflow: hidden;
}

.ss-io .r {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(140px, 2.4fr);
    gap: 12px;
    padding: 7px 11px;
    border-bottom: 1px solid var(--line, #E5E8EE);
    font-size: 12px;
}

.ss-io .r:last-child { border-bottom: none; }
.ss-io .r .n { font-weight: 600; }
.ss-io .r .t { color: var(--ink-2, #3F4A5B); font-size: 11.5px; }

.ss-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }

@media (max-width: 800px) {
    .ss-split { grid-template-columns: 1fr; }
}

/* ── preconditions ────────────────────────────────────────────────────── */
.ss-pre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ss-pre li {
    display: flex;
    gap: 9px;
    background: var(--bg, #fff);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2, #3F4A5B);
}

.ss-pre li .i {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    color: var(--brand-jade, #0FA47F);
    flex: none;
    margin-top: 2px;
}

/* ── empty / diagnostic states ────────────────────────────────────────── */
.ss-empty {
    background: var(--s1, #F7F8FA);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 10px;
    padding: 24px;
    max-width: 78ch;
}

.ss-empty h3 { margin: 0 0 8px; font-size: 15px; }
.ss-empty p { margin: 0 0 10px; font-size: 13px; color: var(--ink-3, #6B7686); line-height: 1.6; }

.ss-report {
    background: var(--bg, #fff);
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 11.5px;
    line-height: 1.55;
    overflow-x: auto;
    margin: 0;
}

/* ── Artifacts list ────────────────────────────────────────────────────────
   Eight columns for the 2026-09-09 unified Artifacts table (was 5 when the page
   split into Published / In design piles). Reading order:
     Artifact (name+key) · Category · Surface · Where · Use · Packs · Status · →
   Columns sized to what they actually carry: Artifact and Surface get flex, the
   pill columns get fixed widths so the row scans as a table rather than as
   ragged text. Packs is the widest fixed column because a row can carry four. */
.ss-row-art {
    grid-template-columns:
        minmax(200px, 1.6fr)   /* Artifact (name + key)             */
        90px                   /* Category                          */
        minmax(140px, 1fr)     /* Surface (component name or —)     */
        minmax(140px, 1.1fr)   /* Where (mode pills)                */
        60px                   /* Use (numeric level pill)          */
        minmax(180px, 1.4fr)   /* Packs (tenant-pack pills)         */
        88px                   /* Status                            */
        96px;                  /* Test — a verb, not an arrow. Wide enough for
                                  "Opening…", which the button becomes on click; at
                                  72px that label pushed the button past the table's
                                  right edge. */
}
/* One width for both labels, so the button does not grow when it says "Opening…" and
   the row does not shift under the pointer that has just clicked it. */
.ss-row-art .ss-btn-small { width: 84px; text-align: center; white-space: nowrap; padding-left: 0; padding-right: 0; }

/* ── Expandable artifact row ──────────────────────────────────────────────
   The chevron sits in the identity cell so the name stays where the eye
   expects it; the spec unfolds as a full-width panel under the row. */
.ss-sk-expand { display: grid; grid-template-columns: 18px 1fr; column-gap: 6px; align-items: baseline; }
.ss-sk-expand .n   { grid-column: 2; }
.ss-sk-expand .key { grid-column: 2; }
.ss-expand {
    grid-row: 1 / span 2; align-self: start;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--ink-4, #8A93A3); font-size: 12px; line-height: 1.4;
}
.ss-expand:hover { color: var(--jade, #0FA47F); }
.ss-row-open { background: var(--s1, #F7F8FA); }
.ss-row-expand {
    padding: 8px 14px 12px 38px;
    background: var(--s1, #F7F8FA);
    border-bottom: 1px solid var(--line, #E5E8EE);
    display: grid; row-gap: 6px;
}
.ss-xs { display: grid; grid-template-columns: 110px 1fr; column-gap: 12px; align-items: baseline; font-size: 12.5px; }
.ss-xk { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.ss-xv { color: var(--ink-2, #3F4A5B); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ss-xs-actions { margin-top: 4px; }
.ss-fp { font-size: 11px; }
.ss-fp.req  { border-color: var(--jade, #0FA47F); color: var(--jade, #0FA47F); }
.ss-fp.calc { opacity: .7; }
.ss-btn-small { padding: 3px 10px; font-size: 11.5px; }

/* ── Artifact schema ───────────────────────────────────────────────────────
   Four columns, and the Req marker is deliberately last and narrow: it is the
   column an author scans down, so it wants a fixed edge to run along rather
   than a position that shifts with the longest description above it. */
.ss-fields {
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 8px;
    overflow: hidden;
}

.ss-fr {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) 108px minmax(160px, 2fr) 40px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line, #E5E8EE);
}

.ss-fr:last-child { border-bottom: none; }

.ss-fr-head {
    background: var(--s2, #EEF0F4);
    color: var(--ink-3, #6B7686);
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Retired rows keep their layout and lose their emphasis — still readable,
   never mistaken for something you can bind to. */
.ss-fr.dim { opacity: .6; font-style: normal; }

.ss-fn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ss-fn .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fn .g {
    font-size: 10px;
    color: var(--ink-4, #9098A6);
    letter-spacing: .06em;
}

.ss-ft { font-size: 11.5px; color: var(--ink-3, #6B7686); }

.ss-fd {
    font-size: 12px;
    color: var(--ink-3, #6B7686);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The completeness marker. A dot rather than a checkbox: nothing here is
   editable yet, and a checkbox that does not toggle reads as broken. */
.ss-freq {
    text-align: center;
    color: var(--jade, #0FA47F);
    font-size: 13px;
    line-height: 1;
}

.ss-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--s2, #EEF0F4);
    color: var(--ink-4, #9098A6);
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}

@media (max-width: 900px) {
    .ss-fr { grid-template-columns: minmax(140px, 1.4fr) 88px 1fr 32px; }
}

/* ── the info affordance ───────────────────────────────────────────────────
   A tooltip nobody knows is there is a tooltip nobody reads. These columns are
   contract vocabulary — "lock" is about who may GRANT a skill, which no reader
   infers from the word — so the header says explicitly that there is more to
   read, and the browser's own title tooltip carries it. */
.ss-i {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    opacity: .45;
    vertical-align: middle;
    cursor: help;
}

.ss-row-head span:hover .ss-i,
.ss-sub-lede:hover .ss-i { opacity: .9; }

/* The legend under the lede — same voice as the lede, one step quieter. */
.ss-sub-lede {
    font-size: 12px;
    margin-top: 5px;
    color: var(--ink-4, #9098A6);
}
.ss-sub-lede b { color: var(--ink-3, #6B7686); font-weight: 600; }

/* ── exceptions carry the colour ───────────────────────────────────────────
   The default pill is grey and stays grey. A tinted ground is reserved for the
   values worth stopping on — an elevated or locked grant, a medium or
   destructive effect — so a scan down the column finds them without reading. */
.ss-pill.warn {
    color: var(--warning, #B87508);
    background: color-mix(in srgb, var(--warning, #B87508) 9%, transparent);
    border-color: color-mix(in srgb, var(--warning, #B87508) 28%, transparent);
}

.ss-pill.bad {
    color: var(--danger, #DB4F38);
    background: color-mix(in srgb, var(--danger, #DB4F38) 9%, transparent);
    border-color: color-mix(in srgb, var(--danger, #DB4F38) 30%, transparent);
}

/* Jade "good" — used by the Status column's Live pill on the Artifacts table.
   Mirrors .ss-pill.warn / .ss-pill.bad shape so the four status states read as
   siblings, not as three from one system and one from another. */
.ss-pill.good {
    color: var(--success, #0FA47F);
    background: color-mix(in srgb, var(--success, #0FA47F) 9%, transparent);
    border-color: color-mix(in srgb, var(--success, #0FA47F) 28%, transparent);
}

/* ── the tooltip itself ────────────────────────────────────────────────────
   Ours, not the browser's. A native `title` waits about a second and then
   renders as a system hint — fine for restating a truncated label, wrong for a
   definition someone is actively looking for. This opens on hover AND on
   keyboard focus, because the marker is the only place these terms are
   explained and a keyboard user needs them just as much. */
.ss-i::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: 300px;
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--ink, #0F1319);
    color: var(--bg, #FFFFFF);
    border: 1px solid var(--line-2, #D2D7E0);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color, #101620) 18%, transparent);
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

/* The pointer, so the panel is clearly attached to the marker it explains. */
.ss-i::before {
    content: "";
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    border: 5px solid transparent;
    border-bottom-color: var(--ink, #0F1319);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.ss-i:hover::after, .ss-i:focus-visible::after,
.ss-i:hover::before, .ss-i:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.ss-i:hover, .ss-i:focus-visible { opacity: .95; outline: none; }

/*  The LAST column's tooltip would run off the right edge of the pane, which
    scrolls — so it opens leftward from the marker instead of centred on it. */
.ss-row-head > span:nth-last-child(2) .ss-i::after {
    left: auto;
    right: -8px;
    transform: none;
}

/* The legend's marker is decorative — it names the affordance, it is not one. */
.ss-sub-lede .ss-i { cursor: default; }

/* ══ BUILDER ═══════════════════════════════════════════════════════════════
   The authoring surface: a pane switch, a three-column list, and a preview
   that renders the catalog as the form a person will actually meet.

   Only four new selectors. Everything else reuses .ss-card, .ss-list,
   .ss-fields and .ss-kv, because the Builder is not a different KIND of
   surface — it is the same catalog seen from the side you author on, and
   giving it its own visual language would say otherwise. */

/*  The pane switch. Left-aligned with the flip pushed to the far right: the
    two on the left are views of one thing and belong together, the one on the
    right LEAVES THE MODE and should not read as a third view. */
.ss-panes-card { padding: 10px 12px; }

.ss-panes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-pane-btn {
    appearance: none;
    border: 1px solid var(--line, #E5E8EE);
    background: var(--s1, #F7F8FA);
    color: var(--ink-3, #6B7686);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.ss-pane-btn:hover { background: var(--s2, #EEF0F4); color: var(--ink-2, #48505E); }

.ss-pane-btn.on {
    background: var(--jade-bg, #E8F5F0);
    border-color: var(--jade-ring, #A8D8C8);
    color: var(--jade, #0E9B73);
}

/*  margin-left:auto and not a spacer div — the gap belongs to the layout, and
    a spacer would have to be maintained alongside it. */
.ss-flip { margin-left: auto; }

/*  Three columns: key, description, type. The catalog lists elsewhere on this
    page carry a dispatch contract and need six; a builder row is an identity
    and what it means, so the extra columns would be empty ceremony. */
.ss-brow { grid-template-columns: minmax(200px, 1.2fr) minmax(200px, 2fr) 100px; }
.ss-brow-2 { grid-template-columns: minmax(200px, 1fr) minmax(240px, 3fr); }

.ss-row.ss-brow.on {
    background: var(--jade-bg, #E8F5F0);
    box-shadow: inset 2px 0 0 var(--jade, #0E9B73);
}

/* ── The preview form ─────────────────────────────────────────────────────
   Deliberately plain, and INERT. Every control is disabled because filling an
   artifact happens in Work through the loop — a preview you can type into
   teaches that this is where the work goes, and then silently loses it. */
.ss-preview-group { margin-top: 18px; }
.ss-preview-group:first-of-type { margin-top: 8px; }

.ss-preview-group > h4 {
    margin: 0 0 10px;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #6B7686);
    font-weight: 600;
}

.ss-preview-field {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr);
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line, #E5E8EE);
}

.ss-preview-field:last-child { border-bottom: none; }

.ss-preview-field > label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2, #48505E);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ss-preview-field input[type="text"],
.ss-preview-field input[type="number"],
.ss-preview-field input[type="date"],
.ss-preview-field select,
.ss-preview-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 12.5px;
    padding: 7px 10px;
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 8px;
    background: var(--s1, #F7F8FA);
    color: var(--ink-3, #6B7686);
    /*  not-allowed rather than default: the cursor is the only affordance that
        says "inert" before someone has clicked and found out. */
    cursor: not-allowed;
}

.ss-preview-field textarea { resize: none; font-family: var(--mono, ui-monospace, Menlo, monospace); }

/*  A derived field gets a readout, never an input. Rendering one as a control
    would invite someone to type into a value nothing can store. */
.ss-preview-derived {
    font-size: 11.5px;
    color: var(--ink-4, #8A93A3);
    padding: 7px 10px;
    border: 1px dashed var(--line, #E5E8EE);
    border-radius: 8px;
    background: transparent;
}

/* ── Kernel group headings ─────────────────────────────────────────────────
   The kernel list is three groups, split on UiStates. The heading has to say
   which mask it IS, because that is the whole content of the grouping — a
   heading reading only "Authoring" would look like a category someone chose
   rather than a constraint the scheduler enforces. */
.ss-pack-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 26px 0 4px;
}

.ss-pack-head:first-of-type { margin-top: 4px; }

.ss-pack-head > h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink, #16202E);
    letter-spacing: -.01em;
}

/*  The mask, in mono beside the title. It is a VALUE — UiStates as it is
    stored — and setting it in the same face as the prose would read as more
    description rather than the column it is. */
.ss-pack-sub {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-4, #8A93A3);
}

.ss-pack-count {
    margin-left: auto;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    color: var(--ink-4, #8A93A3);
    background: var(--s2, #EEF0F4);
    border-radius: 999px;
    padding: 1px 8px;
}

.ss-pack-note {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-3, #6B7686);
    max-width: 78ch;
}

/* ── The Surface pane ──────────────────────────────────────────────────────
   Blank until a surface design exists, and the empty state is deliberately
   quiet: a large illustration or a call-to-action button would compete with
   the composer, which is the thing that actually does the work here. */
.ss-surface-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 320px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ink-4, #8A93A3);
    font-size: 13px;
}

.ss-surface-empty code {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    color: var(--ink-2, #48505E);
}

.ss-surface-hint { max-width: 46ch; line-height: 1.6; }

/*  The rendered surface fills the pane. No card, no padding of its own — a
    surface framed in a panel is a preview of a surface, and the point of this
    tab is to see the thing itself. */
.ss-surface { min-height: 320px; }

/* Live-refresh diagnostics strip. Quiet by default — it is instrumentation, and
   instrumentation that shouts competes with the thing being instrumented. The only
   loud state is "not live", because that one is a fault. */
.ss-live {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ink-3, #7a8596);
    border-bottom: 1px solid var(--border, #e6e8ee);
}
.ss-live-guid { font-weight: 600; color: var(--ink-2, #3f4a5b); }
.ss-live-dot::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.ss-live-dot.on::before  { background: var(--brand-jade, #00D68F); }
.ss-live-dot.off::before { background: var(--danger, #d9534f); }
.ss-live-dot.off         { color: var(--danger, #d9534f); font-weight: 600; }
.ss-live-note            { color: var(--warn, #e0a020); }

/* ── The draft spec ────────────────────────────────────────────────────────
   The authoring document: numbered sections, real inputs, empty to start.
   Deliberately NOT .ss-card — a card reads as a panel of facts, and this is a
   form you are filling in. Flat sections with a rule between them. */
.ss-spec-section {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line, #E5E8EE);
}
.ss-spec-section:last-child { border-bottom: none; margin-bottom: 0; }

.ss-spec-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.ss-spec-h > h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink, #16202E);
}
.ss-spec-h .sub {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4, #8A93A3);
}
.ss-spacer { flex: 1; }

.ss-pill.violet {
    background: color-mix(in srgb, var(--tone-violet, #6D5BE3) 10%, var(--surface, #F0EEFE));
    color: var(--violet, #6D5BE3);
    border-color: transparent;
}

/*  The intent box is the widest thing on the page on purpose: it is the input
    everything else is downstream of, and a single-line field would invite a
    single line. */
.ss-intent {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.6;
    padding: 12px 14px;
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 10px;
    background: var(--bg, #fff);
    color: var(--ink, #16202E);
}
.ss-intent:focus { outline: none; border-color: var(--jade, #0E9B73); }
.ss-intent::placeholder { color: var(--ink-4, #8A93A3); }

.ss-spec-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.ss-btn {
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--line-2, #D8DDE6);
    background: var(--bg, #fff); color: var(--ink-2, #48505E);
    cursor: pointer;
}
.ss-btn.primary { background: var(--jade, #0E9B73); border-color: var(--jade, #0E9B73); color: var(--text-on-brand, #fff); }
/*  Disabled rather than hidden: the button is how you learn the intent is what
    drives this, and a control that appears once you have guessed right teaches
    nothing. */
.ss-btn:disabled { opacity: .45; cursor: not-allowed; }

.ss-hint { font-size: 11.5px; color: var(--ink-4, #8A93A3); }

.ss-note-inline {
    font-size: 12px; line-height: 1.55;
    color: var(--ink-3, #6B7686);
    padding: 8px 12px; margin-bottom: 14px;
    background: var(--s1, #F7F8FA);
    border-left: 2px solid var(--line-2, #D8DDE6);
    border-radius: 0 6px 6px 0;
}

.ss-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 18px;
    margin-bottom: 16px;
}
.ss-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ss-field > label {
    font-size: 11px; font-weight: 600;
    color: var(--ink-3, #6B7686);
    display: flex; align-items: baseline; gap: 8px;
}
.ss-help {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px; font-weight: 400;
    color: var(--ink-4, #8A93A3);
}
.ss-field > input {
    font: inherit; font-size: 13px;
    padding: 8px 11px;
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 8px;
    background: var(--bg, #fff); color: var(--ink, #16202E);
    min-width: 0;
}
.ss-field > input:focus { outline: none; border-color: var(--jade, #0E9B73); }
.ss-field > input::placeholder { color: var(--ink-4, #8A93A3); }

/* ── The variables table ── */
.ss-vars {
    border: 1px solid var(--line, #E5E8EE);
    border-radius: 10px;
    overflow: hidden;
}
.ss-vr {
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) 92px minmax(200px, 2fr) 48px 60px;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line, #E5E8EE);
}
.ss-vr:last-child { border-bottom: none; }
.ss-vh {
    background: var(--s2, #EEF0F4);
    color: var(--ink-3, #6B7686);
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.ss-vr .vn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ss-vr .vn .n { font-weight: 600; color: var(--ink, #16202E); }
/*  "minted on commit" sits under every name as a standing reminder that the
    draft holds no identities yet. */
.ss-vr .vn .g { font-size: 10px; color: var(--ink-4, #8A93A3); }
.ss-vr .vt { color: var(--ink-3, #6B7686); font-size: 11.5px; }
.ss-vr .vd { color: var(--ink-2, #48505E); }
.ss-vr .ctr { text-align: center; }
.ss-vr .ctr:not(.ss-vh *) { color: var(--jade, #0E9B73); }
.ss-vr .io { font-size: 10px; color: var(--ink-4, #8A93A3); }

.ss-vars-empty {
    padding: 22px 13px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-4, #8A93A3);
}

/*  Intent, as an OUTPUT. Reads as prose the system wrote, not as a field awaiting
    input — no border, no input background, no focus ring. The left rule is the
    only chrome, and it marks it as quoted-back rather than authored here. */
.ss-intent-out {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink, #16202E);
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--jade-ring, #A8D8C8);
    min-height: 24px;
}
.ss-intent-empty { color: var(--ink-4, #8A93A3); }

/* ── Output fields ─────────────────────────────────────────────────────────
   EVERYTHING in the spec is written by the AI. None of it is editable, so none
   of it wears input chrome: no border, no input background, no focus ring. A
   box that looks like a field invites a click, and the click does nothing.

   The one exception is a left rule on the intent — it marks the text as quoted
   back to you rather than authored here. */
.ss-out {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink, #16202E);
    min-height: 22px;
}
.ss-out-empty { color: var(--ink-4, #8A93A3); }

.ss-out-name {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.ss-out-intent {
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--jade-ring, #A8D8C8);
}

/*  Mode pills. Several per cell, so they wrap rather than push the row wider —
    a skill in three modes must not shove the objective column off the edge. */
.ss-modes { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }

.ss-pill.ss-mode {
    font-size: 10px;
    padding: 1px 6px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Tester › Tests / Results panes ─────────────────────────────────────── */
.ss-tt { display: grid; row-gap: 12px; padding: 12px 0; }
.ss-tt-head { display: grid; row-gap: 8px; }
.ss-tt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-chip { padding: 3px 10px; border: 1px solid var(--line, #E5E8EE); border-radius: 999px; font-size: 12px; color: var(--ink-3, #6B7686); background: var(--bg, #fff); cursor: pointer; }
.ss-chip.on { border-color: var(--jade, #0FA47F); color: var(--jade, #0FA47F); background: var(--jade-bg, rgba(15,164,127,.10)); }
.ss-tt-run { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 12px 14px; background: var(--s1, #F7F8FA); align-items: start; }
.ss-tt-radio { display: block; font-size: 12.5px; margin: 3px 0; }
.ss-tt-kv { font-size: 12.5px; margin: 3px 0; }
.ss-tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber, #B87508); margin-right: 6px; animation: ss-tt-pulse 1.2s infinite; }
@keyframes ss-tt-pulse { 50% { opacity: .3; } }
.ss-tt-err { color: var(--red, #DB4F38); font-size: 12px; }
.ss-tt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-tt-live { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; background: var(--bg, #fff); }
.ss-tt-in { border: 1px solid var(--line, #E5E8EE); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; width: 100%; background: var(--bg, #fff); color: var(--ink, #0F1319); }
.ss-tt-in-sm { width: 140px; } .ss-tt-in-xs { width: 64px; }
.ss-row-tt { grid-template-columns: 34px 40px 28px minmax(200px, 1.4fr) 80px 70px minmax(220px, 2fr) 50px; }
.ss-row-tr { grid-template-columns: 22px minmax(180px, 1.3fr) 90px 44px 44px 56px 90px 60px 48px 70px minmax(180px, 1.6fr); }
.ss-tt-crit { font-size: 12px; color: var(--ink-3, #6B7686); }
.ss-tt-editor { border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 12px 14px; background: var(--s1, #F7F8FA); }
.ss-tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.ss-tt-grid label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); font-family: var(--mono, ui-monospace, Menlo, monospace); }
.ss-tt-grid label .ss-hint { text-transform: none; letter-spacing: 0; font-family: inherit; }
.ss-tt-wide { grid-column: 1 / -1; }
.ss-tt-turns { display: grid; row-gap: 6px; }
.ss-tt-turn { display: grid; grid-template-columns: 22px 1fr 90px; gap: 8px; align-items: start; }
.ss-tt-turnrow { display: grid; grid-template-columns: 110px 1fr 64px; gap: 6px; margin-bottom: 4px; }
.ss-tt-danger { color: var(--red, #DB4F38); }
.ss-tt-cmp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ss-tt-cmp > div { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 8px 10px; background: var(--s1, #F7F8FA); }
.ss-tt-cmp b { display: block; font-size: 18px; } .ss-tt-cmp small { color: var(--ink-4, #8A93A3); font-size: 11.5px; }
.ss-tt-detail { display: grid; row-gap: 10px; }
.ss-tt-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss-tt-box { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; padding: 8px 10px; background: var(--bg, #fff); font-size: 12.5px; }
.ss-tt-box h6 { margin: 0 0 6px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.ss-tt-more { font-size: 12.5px; } .ss-tt-more summary { cursor: pointer; color: var(--ink-3, #6B7686); }
.ss-tt-trace { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; color: var(--ink-3, #6B7686); padding-left: 12px; }

/* ── Studio → Folios: the starting points on a tenant's Work page ─────────────────────────────── */
.fs-tenant { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.fs-tenant select { font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink, #0F1319); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); min-width: 220px; }
.fs-note { font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 9px; background: var(--s1, #F7F8FA); color: var(--ink-3, #6B7686); margin-bottom: 12px; }
.fs-note.warn { background: color-mix(in srgb, var(--warning, #CA9A04) 10%, transparent); color: var(--warning, #7A5C02); } .fs-note.bad { background: color-mix(in srgb, var(--danger, #DB4F38) 8%, transparent); color: var(--danger, #B23A26); }

.fs-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .fs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fs-chip { position: relative; text-align: left; font: inherit; display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 148px; border-radius: 12px; cursor: pointer; background: var(--surface, #fff); border: 1px solid var(--line, #E5E8EE); color: var(--ink, #0F1319); }
.fs-chip:hover:not(:disabled):not(.is-fixed) { border-color: color-mix(in srgb, var(--brand-jade, #0FA47F) 45%, transparent); }
.fs-chip.is-on { border-color: var(--brand-jade, #0FA47F); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-jade, #0FA47F) 18%, transparent); }
.fs-chip.is-off { opacity: .55; } .fs-chip.is-fixed { cursor: default; background: var(--s1, #F7F8FA); border-style: dashed; }
.fs-chip.is-empty { border-style: dashed; color: var(--ink-4, #8A93A3); align-items: flex-start; }
.fs-chip h3 { margin: 4px 0 0; font-size: 14px; font-weight: 700; } .fs-chip p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3, #6B7686); flex: 1; }
.fs-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 18px !important; background: color-mix(in srgb, var(--brand-jade, #0FA47F) 10%, transparent); color: var(--brand-jade, #0FA47F); }
.fs-chip.is-empty .fs-ico, .fs-chip.is-fixed .fs-ico { background: var(--s2, #EEF0F4); color: var(--ink-4, #8A93A3); }
.fs-k { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #E5E8EE); font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; color: var(--ink-4, #8A93A3); }
.fs-k b { color: var(--ink-2, #3F4A5B); font-weight: 600; }
.fs-hidden { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }

.fs-editor { border: 1px solid var(--line, #E5E8EE); border-radius: 12px; padding: 16px; background: var(--surface, #fff); }
.fs-editor-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .fs-editor-h h2 { margin: 0; font-size: 14px; }
.fs-editor-tools { display: flex; gap: 6px; } .fs-danger { color: var(--danger, #B23A26) !important; }
.fs-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px 16px; } .fs-wide { grid-column: 1 / -1; }
.fs-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-f > span { font-size: 11px; font-weight: 700; color: var(--ink-2, #3F4A5B); } .fs-f em, .fs-cols h4 em { font-style: normal; font-weight: 400; color: var(--ink-4, #8A93A3); margin-left: 4px; }
.fs-f input, .fs-f textarea, .fs-f select, .fs-list input, .fs-list select, .fs-add { font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink, #0F1319); min-width: 0; }
.fs-f textarea { resize: vertical; }
.fs-f input:focus, .fs-f textarea:focus, .fs-f select:focus, .fs-list input:focus { outline: none; border-color: var(--border-focus, #0FA47F); }
.fs-icon-in { display: flex; align-items: center; gap: 8px; } .fs-icon-in input { flex: 1; } .fs-icon-in .material-symbols-outlined { font-size: 22px; color: var(--brand-jade, #0FA47F); }
.fs-check { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; } .fs-check > span { font-weight: 500; }
.fs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #E5E8EE); }
@media (max-width: 1000px) { .fs-cols, .fs-grid { grid-template-columns: 1fr; } }
.fs-cols h4 { margin: 0 0 8px; font-size: 12.5px; } .fs-none { margin: 0 0 8px; font-size: 12px; color: var(--ink-4, #8A93A3); }
.fs-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fs-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/*  A step's note sits under its row, indented past the number, full width. */
.fs-list .fs-note { flex: 1 0 100%; margin: 0 0 4px 24px; width: calc(100% - 24px); font: inherit; font-size: 12px; line-height: 1.4; padding: 6px 8px; border: 1px solid var(--line, #E5E8EE); border-radius: 6px; background: var(--s1, #F7F8FA); color: var(--ink-2, #2B3340); resize: vertical; }
.fs-list .fs-note:focus { outline: none; border-color: var(--border-focus, #0FA47F); background: var(--surface, #fff); } .fs-list li > .material-symbols-outlined { font-size: 17px; color: var(--ink-4, #8A93A3); }
.fs-what { flex: none; min-width: 120px; font-size: 13px; font-weight: 600; } .fs-what .bad { color: var(--danger, #B23A26); font-weight: 400; }
.fs-list input { flex: 1; } .fs-list select { max-width: 170px; } .fs-grow { flex: 2 !important; }
.fs-n { width: 18px; flex: none; text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-4, #8A93A3); }
.fs-list button { font: inherit; width: 26px; height: 26px; flex: none; border-radius: 6px; cursor: pointer; border: 1px solid var(--line, #E5E8EE); background: var(--s1, #F7F8FA); color: var(--ink-3, #6B7686); }
.fs-list button:disabled { opacity: .35; cursor: default; } .fs-list button.fs-x:hover { color: var(--danger, #B23A26); border-color: var(--danger, #B23A26); }
.fs-add { width: 100%; color: var(--ink-3, #6B7686); } .fs-add-btn { font: inherit; font-size: 12.5px; background: none; border: none; padding: 4px 0; cursor: pointer; color: var(--brand-jade, #0FA47F); font-weight: 600; }
.fs-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fs-primary:not(:disabled) { background: var(--brand-jade, #0FA47F) !important; border-color: var(--brand-jade, #0FA47F) !important; color: var(--text-on-brand, #fff) !important; }
.fs-status { font-size: 12px; color: var(--ink-3, #6B7686); } .fs-status.bad { color: var(--danger, #B23A26); }

/* ── Analysis (StudioAnalysis.razor) — Chat-Analysis.md B5 ─────────────────
   A list of ratings; one opens beside it. Grey and white like the rest of
   Studio; the only colour is the thumb (jade up, rust down) and the two queue
   tags a reviewer works first. */
.ca-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ca-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-controls .fs-tenant select { min-width: 140px; }
.ca-body { display: flex; flex-direction: column; gap: 12px; }

.ca-queues { display: flex; gap: 6px; flex-wrap: wrap; }
.ca-queue { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink-3, #6B7686); cursor: pointer; }
.ca-queue:hover { color: var(--ink, #0F1319); }
.ca-queue.is-on { background: var(--ink, #0F1319); border-color: var(--ink, #0F1319); color: var(--bg, #fff); }

.ca-split { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ca-split { grid-template-columns: 1fr; } }

.ca-list { display: flex; flex-direction: column; gap: 6px; }
.ca-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: inherit; cursor: pointer; }
.ca-row:hover { border-color: var(--ink-4, #8A93A3); }
.ca-row.is-on { border-color: var(--ink, #0F1319); box-shadow: 0 0 0 1px var(--ink, #0F1319) inset; }
.ca-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ca-row-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-row-comment { font-size: 12.5px; color: var(--ink-2, #3A4350); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ca-row-meta { font-size: 11.5px; color: var(--ink-4, #8A93A3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ca-thumb { font-size: 18px; font-variation-settings: 'FILL' 1; }
.ca-thumb.up { color: var(--jade, #0E9B73); }
.ca-thumb.down { color: var(--danger, #B8502F); }
.ca-thumb.mini { font-size: 13px; vertical-align: -2px; margin-left: 4px; }

.ca-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--s1, #F2F4F7); color: var(--ink-3, #6B7686); white-space: nowrap; }
.ca-tag.confident-wrong { background: color-mix(in srgb, var(--tone-red, #B8502F) 10%, transparent); color: var(--tone-red, #9A3E22); }

.ca-case { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ca-card { border: 1px solid var(--line, #E5E8EE); border-radius: 12px; background: var(--surface, #fff); padding: 14px 16px; }
.ca-card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ca-card h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.ca-card-h { display: flex; gap: 10px; align-items: flex-start; }
.ca-card-h .ca-thumb { font-size: 22px; margin-top: 1px; }
.ca-sub { margin: 3px 0 0; font-size: 12px; color: var(--ink-3, #6B7686); }
.ca-comment { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--line, #E5E8EE); background: var(--s1, #F7F8FA); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.ca-note { margin: 0; font-size: 12.5px; color: var(--ink-3, #6B7686); line-height: 1.5; }

.ca-msg { padding: 8px 0; border-top: 1px solid var(--line, #E5E8EE); }
.ca-msg:first-of-type { border-top: none; }
.ca-msg.is-rated { background: var(--s1, #F7F8FA); margin: 0 -16px; padding: 8px 16px; }
.ca-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4, #8A93A3); margin-bottom: 4px; }
.ca-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ca-text.md-content { white-space: normal; }

.ca-nums { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ca-nums span { display: flex; flex-direction: column; min-width: 78px; padding: 6px 10px; border-radius: 8px; background: var(--s1, #F7F8FA); font-size: 11px; color: var(--ink-4, #8A93A3); }
.ca-nums b { font-size: 14px; font-weight: 600; color: var(--ink, #0F1319); }

.ca-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ca-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 12.5px; }
.ca-steps li.ai-trace .ca-step { color: var(--ink-3, #6B7686); }
.ca-step-at { color: var(--ink-4, #8A93A3); font-variant-numeric: tabular-nums; }
.ca-step { min-width: 0; overflow-wrap: anywhere; }

.ca-calls { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.ca-calls th { text-align: left; font-weight: 600; color: var(--ink-4, #8A93A3); padding: 4px 6px; border-bottom: 1px solid var(--line, #E5E8EE); }
.ca-calls td { padding: 4px 6px; border-bottom: 1px solid var(--line, #E5E8EE); font-variant-numeric: tabular-nums; }
.ca-calls tr.failed td { color: var(--danger, #B8502F); }

.ca-whole summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.ca-whole summary::-webkit-details-marker { display: none; }
.ca-whole summary h3 { margin: 0; }
.ca-whole[open] summary { margin-bottom: 8px; }

/* Analysis — where a reviewer has got to. Open reads as a to-do; resolved recedes. */
.ca-row-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ca-status { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.ca-status.open { background: var(--ink, #0F1319); color: var(--bg, #fff); }
.ca-status.reviewed { background: var(--s1, #F2F4F7); color: var(--ink-2, #3A4350); }
.ca-status.resolved { background: color-mix(in srgb, var(--success, #0E9B73) 10%, transparent); color: var(--jade, #0E9B73); }
.ca-mark { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #E5E8EE); }
.ca-mark .ca-status { margin-top: 6px; }
.ca-mark textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: inherit; resize: vertical; }
.ca-mark-actions { grid-column: 2; display: flex; gap: 6px; justify-content: flex-end; }
.ca-history { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ca-history-note { color: var(--ink-2, #3A4350); }

/* Analysis — the two lenses, and the Misuse lens's severity tags. */
.ca-lenses { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--s1, #F2F4F7); align-self: flex-start; }
.ca-lens { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 8px; border: none; background: none; color: var(--ink-3, #6B7686); cursor: pointer; }
.ca-lens.is-on { background: var(--surface, #fff); color: var(--ink, #0F1319); box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color, #0F1319) 8%, transparent); }
.ca-misuse-bar { align-items: flex-end; gap: 12px; }
.ca-tag.sev-high { background: color-mix(in srgb, var(--tone-red, #B8502F) 12%, transparent); color: var(--tone-red, #9A3E22); }
.ca-tag.sev-medium { background: color-mix(in srgb, var(--tone-amber, #CA9A04) 12%, transparent); color: var(--tone-amber, #7A5C02); }
.ca-voice-play { margin-top: 12px; }
.ca-voice-play audio { width: 100%; }

/* ── Studio → Artifacts → Tenants: the types × tenants matrix (2026-09-28) ── */
.tm-switch { display: inline-flex; border: 1px solid var(--line-2, #D8DDE6); border-radius: 8px; overflow: hidden; }
.tm-switch button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border: 0; background: var(--bg, #fff); color: var(--ink-3, #6B7686); cursor: pointer; }
.tm-switch button.on { background: var(--s2, #EEF0F4); color: var(--ink, #0F1319); }
.tm-scroll { overflow: auto; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; }
.tm { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.tm th, .tm td { padding: 5px 10px; border-bottom: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); white-space: nowrap; }
.tm thead th { position: sticky; top: 0; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3, #6B7686); text-align: center; vertical-align: bottom; }
.tm .tm-type { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 220px; }
.tm thead .tm-type { z-index: 3; }
.tm .tm-type .key { font-size: 10.5px; color: var(--ink-4, #8A93A3); margin-left: 4px; }
.tm .tm-ten span { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.tm .tm-num { text-align: center; color: var(--ink-3, #6B7686); }
.tm .tm-cell { text-align: center; position: relative; }
.tm .tm-cell input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--jade, #0E9B73); }
.tm .tm-cell input:disabled { cursor: default; }
.tm .tm-part { position: absolute; margin-left: 2px; color: var(--ink-4, #8A93A3); }
.tm tr.tm-cat td:first-child { position: sticky; left: 0; z-index: 1; }
.ss-xv .tm-avail { color: var(--ink-3, #6B7686); }
.tm .tm-ten span { display: block; margin: 0 auto 4px; }
.tm .tm-all { width: 15px; height: 15px; cursor: pointer; accent-color: var(--jade, #0E9B73); }
.tm .tm-all:disabled { cursor: default; }
/*  Where am I (2026-09-28): stripes, a strong row tint with a jade marker on the name, the column tinted
    under the pointer, faint column lines, and category bands that read as headings. CSS only — no round trip. */
.tm td + td, .tm th + th { border-left: 1px solid var(--line, #EEF0F4); }
.tm tbody tr:not(.tm-cat):nth-child(even) td { background: var(--grid-row-alt, #FAFBFC); }
.tm tbody tr:not(.tm-cat) .tm-type { padding-left: 22px; box-shadow: inset 3px 0 0 transparent; }
.tm tbody tr:not(.tm-cat):hover td { background: color-mix(in srgb, var(--brand-jade, #0E9B73) 9%, transparent); }
.tm tbody tr:not(.tm-cat):hover .tm-type { box-shadow: inset 3px 0 0 var(--jade, #0E9B73); }
.tm tbody tr:not(.tm-cat):hover .tm-type .n { font-weight: 600; color: var(--ink, #0F1319); }
.tm tr.tm-cat td { background: var(--surface-3, #D5DAE2); border-top: 1px solid var(--border, #BFC6D1); border-bottom-color: var(--border, #BFC6D1); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary, #2C3440); padding-top: 8px; padding-bottom: 8px; }
.tm tr.tm-cat:hover td { background: var(--hover, #CBD1DA); }
/*  The tenant head: a dark band, so the names and their select-all read as the top of every column. */
.tm thead th { background: var(--grid-header-bg, #2C3440); color: var(--text-primary, #E8ECF2); border-bottom: 0; border-left-color: var(--grid-border, #3B4552); }
.tm thead .tm-ten span { color: var(--text-primary, #FFFFFF); }
/*  The column: a tint the height of the table behind the hovered cell, clipped by the scroll box. */
.tm { overflow: clip; }   /* clip, not hidden: hidden makes the table a scroll box and un-sticks the frozen columns */
.tm .tm-cell:hover::after { content: ""; position: absolute; left: 0; right: 0; top: -10000px; height: 20000px; background: color-mix(in srgb, var(--brand-jade, #0E9B73) 7%, transparent); pointer-events: none; z-index: 0; }
.tm .tm-cell input { position: relative; z-index: 1; }
.tm .tm-cell:hover { outline: 2px solid color-mix(in srgb, var(--brand-jade, #0E9B73) 45%, transparent); outline-offset: -2px; }
/*  FROZEN: Artifact and Skills stay put while the tenants scroll sideways (2026-09-28). The first column has a set
    width so the second knows where to stick; a shadow marks the edge. Above the column tint (z 0), below the head. */
.tm .tm-type { width: 250px; min-width: 250px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.tm .tm-num { position: sticky; left: 250px; width: 60px; min-width: 60px; z-index: 2; box-shadow: 6px 0 6px -4px color-mix(in srgb, var(--shadow-color, #0F1319) 18%, transparent); }
.tm tbody .tm-type, .tm tr.tm-cat td:first-child { z-index: 2; }
.tm tr.tm-cat td:nth-child(2) { position: sticky; left: 250px; z-index: 2; box-shadow: 6px 0 6px -4px color-mix(in srgb, var(--shadow-color, #0F1319) 18%, transparent); }
.tm thead .tm-type, .tm thead .tm-num { z-index: 4; }

/* ── Studio → Folios: an artifact on a chip that the picked tenant does not have (2026-09-28) ── */
.fs-chip.is-noperm { border-color: var(--tone-amber, #D9A21B) !important; background: color-mix(in srgb, var(--tone-amber, #D9A21B) 12%, var(--surface, #fff)); }
.fs-noperm-tag { display: block; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--tone-amber, #8A5A00); }
.fs-list li.fs-noperm { background: color-mix(in srgb, var(--tone-amber, #D9A21B) 12%, var(--surface, #fff)); border-radius: 6px; }
.fs-list li.fs-noperm .fs-what { color: var(--tone-amber, #8A5A00); font-weight: 600; }
.fs-noperm-why { font-style: normal; font-weight: 500; font-size: 11px; color: var(--tone-amber, #B26B00); }
/*  ONE SCROLL (2026-09-28): the matrix fills what is left of the pane — which already stops short of the chat bar —
    so the table scrolls and the page does not. No height is measured by hand. */
.ss-body.tm-fit { display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
.tm-fit .tm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tm-fit .tm-scroll { flex: 1; min-height: 0; }

/* ── Studio → Folios as a library (phase 4, 2026-09-28). The default row on top; the library list and the editor side
      by side, each scrolling on its own; Save pinned under them. The page itself does not scroll. ── */
.ss-body.fs-fit { display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
.fs-fit .fs-row { flex: none; }
.fs-fit .fs-row .fs-chip { min-height: 120px; }
.fs-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
.fs-lib { min-height: 0; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line, #E5E8EE); border-radius: 12px; padding: 10px; background: var(--surface, #fff); }
.fs-lib-tools { display: flex; gap: 6px; }
.fs-lib-tools input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); }
.fs-lib-tools input:focus { outline: none; border-color: var(--border-focus, #0FA47F); }
.fs-lib-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-lib-item { width: 100%; font: inherit; text-align: left; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink, #0F1319); }
.fs-lib-item:hover { background: var(--s1, #F7F8FA); }
.fs-lib-item.is-on { background: color-mix(in srgb, var(--brand-jade, #0FA47F) 10%, transparent); border-color: color-mix(in srgb, var(--brand-jade, #0FA47F) 35%, transparent); }
.fs-lib-item.is-off { opacity: .55; }
.fs-lib-item.is-noperm { background: color-mix(in srgb, var(--tone-amber, #D9A21B) 12%, var(--surface, #fff)); }
.fs-lib-item > .material-symbols-outlined { font-size: 18px; color: var(--brand-jade, #0FA47F); flex: none; }
.fs-lib-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fs-lib-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-lib-t small { font-size: 11px; color: var(--ink-4, #8A93A3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-lib-b { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); }
.fs-lib-b.on { background: var(--brand-jade, #0FA47F); color: var(--text-on-brand, #fff); }
.fs-lib-b.warn { background: none; color: var(--tone-amber, #B26B00); font-size: 13px; padding: 0; }
.fs-edit-col { min-height: 0; overflow-y: auto; padding-right: 2px; }
.fs-fit .fs-foot { flex: none; margin-top: 12px; }
@media (max-width: 900px) {
    .ss-body.fs-fit { display: block; }
    .fs-main { display: block; }
    .fs-lib { max-height: none; margin-bottom: 14px; }
    .fs-lib-list, .fs-edit-col { overflow: visible; }
}

/* ── Studio → Folios → Types: the kinds of folio (2026-09-28). The table scrolls; the page does not. ── */
.fs-switch { align-self: flex-end; margin-left: auto; margin-right: 12px; }
.ft-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-new { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ft-new input { font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); min-width: 200px; }
.ft-new input:focus { outline: none; border-color: var(--border-focus, #0FA47F); }
.ft-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; }
.ft { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.ft th { position: sticky; top: 0; z-index: 1; background: var(--grid-header-bg, #2C3440); color: var(--text-primary, #E8ECF2); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: left; padding: 7px 8px; white-space: nowrap; }
.ft td { padding: 5px 8px; border-bottom: 1px solid var(--line, #EEF0F4); background: var(--surface, #fff); vertical-align: middle; }
.ft tbody tr:nth-child(even) td { background: var(--grid-row-alt, #FAFBFC); }
.ft tbody tr:hover td { background: color-mix(in srgb, var(--brand-jade, #0E9B73) 7%, transparent); }
.ft tr.is-off td { color: var(--ink-4, #8A93A3); }
.ft tr.is-off input:not([type=checkbox]) { opacity: .6; }
.ft input:not([type=checkbox]):not([type=radio]):not([type=color]) { font: inherit; font-size: 12.5px; padding: 4px 7px; border-radius: 6px; border: 1px solid transparent; background: transparent; width: 100%; min-width: 110px; box-sizing: border-box; }
.ft input:not([type=checkbox]):not([type=radio]):not([type=color]):hover { border-color: var(--line, #E5E8EE); }
.ft input:not([type=checkbox]):not([type=radio]):not([type=color]):focus { outline: none; border-color: var(--border-focus, #0FA47F); background: var(--surface, #fff); }
.ft .ft-wide { min-width: 220px; } .ft .ft-icon { min-width: 100px; max-width: 130px; } .ft .ft-num { min-width: 0; width: 64px; }
.ft input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line, #E5E8EE); border-radius: 5px; background: none; cursor: pointer; vertical-align: middle; }
.ft input[type=checkbox], .ft input[type=radio] { accent-color: var(--brand-jade, #0E9B73); width: 15px; height: 15px; cursor: pointer; }
.ft-x { font: inherit; border: 0; background: none; color: var(--ink-4, #8A93A3); cursor: pointer; padding: 0 4px; }
.ft-ico { font-size: 20px; color: var(--brand-jade, #0E9B73); }
.ft-key { font-size: 11.5px; color: var(--ink-2, #3F4A5B); white-space: nowrap; }
.ft-src { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); white-space: nowrap; }
.ft-src.own { background: color-mix(in srgb, var(--brand-jade, #0E9B73) 14%, transparent); color: var(--brand-jade-hover, #0B7A5A); } .ft-src.chg { background: color-mix(in srgb, var(--tone-amber, #D9A21B) 18%, var(--surface, #fff)); color: var(--tone-amber, #8A5A00); }

/* ── Studio → Folios: a tenant using the platform's starting points (2026-09-28) ── */
.fs-inherit { flex: none; border: 1px solid color-mix(in srgb, var(--brand-jade, #0FA47F) 35%, transparent); background: color-mix(in srgb, var(--brand-jade, #0FA47F) 5%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.fs-inherit-h { font-size: 12.5px; line-height: 1.55; color: var(--ink-2, #3F4A5B); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fs-inherit-h .ss-btn { margin-left: auto; }
.fs-inherit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fs-inherit-list li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--line, #E5E8EE); font-size: 12.5px; }
.fs-inherit-list li .material-symbols-outlined { font-size: 17px; color: var(--brand-jade, #0FA47F); }
.fs-inherit-list li small { color: var(--ink-4, #8A93A3); font-size: 11px; }
.fs-inherit-list li.is-noperm { background: color-mix(in srgb, var(--tone-amber, #D9A21B) 12%, var(--surface, #fff)); border-color: var(--tone-amber, #EBC46A); }
.fs-lib > .fs-add { flex: none; }

/* ── Studio → Folios: copy from another tenant (2026-09-28) ── */
.fs-copy { flex: none; border: 1px solid var(--line-2, #D2D7E0); background: var(--s1, #F7F8FA); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; max-height: 40vh; display: flex; flex-direction: column; }
.fs-copy-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fs-copy-h > span { color: var(--ink-4, #8A93A3); font-size: 12px; }
.fs-copy-tools { margin-left: auto; display: flex; gap: 6px; }
.fs-copy-list { list-style: none; margin: 10px 0 6px; padding: 0; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.fs-copy-list label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--line, #E5E8EE); font-size: 12.5px; cursor: pointer; }
.fs-copy-list li.is-noperm label { background: color-mix(in srgb, var(--tone-amber, #D9A21B) 12%, var(--surface, #fff)); border-color: var(--tone-amber, #EBC46A); }
.fs-copy-list .material-symbols-outlined { font-size: 17px; color: var(--brand-jade, #0FA47F); }
.fs-copy-list small { color: var(--ink-4, #8A93A3); font-size: 11px; }
.fs-copy-list input { accent-color: var(--brand-jade, #0E9B73); }
.fs-copy-foot { margin: 0; font-size: 11.5px; color: var(--ink-3, #6B7686); }

/* ── Studio → Programs: kinds · KPI library · layout (2026-09-28). Three columns that scroll on their own. ── */
.ss-body.pg-fit { display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
.pg-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 300px minmax(0, 1fr); gap: 14px; }
.pg-col { min-height: 0; overflow-y: auto; border: 1px solid var(--line, #E5E8EE); border-radius: 12px; padding: 12px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 6px; }
.pg-col h4 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.pg-kind { font: inherit; text-align: left; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink, #0F1319); }
.pg-kind:hover { background: var(--s1, #F7F8FA); }
.pg-kind.is-on { background: color-mix(in srgb, var(--brand-jade, #0FA47F) 10%, transparent); border-color: color-mix(in srgb, var(--brand-jade, #0FA47F) 35%, transparent); }
.pg-kind > .material-symbols-outlined { font-size: 19px; color: var(--brand-jade, #0FA47F); }
.pg-kind-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-kind-t b { font-size: 13px; } .pg-kind-t small { font-size: 11px; color: var(--ink-4, #8A93A3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-newkind { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line, #E5E8EE); display: flex; flex-direction: column; gap: 6px; }
.pg-newkind input, .pg-search { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink, #0F1319); }
.pg-newkind small { font-size: 11px; color: var(--ink-4, #8A93A3); }
.pg-kpis { display: flex; flex-direction: column; gap: 5px; }
.pg-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #6B7686); margin-top: 8px; }
.pg-kpi { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); cursor: pointer; color: var(--ink, #0F1319); }
.pg-kpi:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand-jade, #0FA47F) 50%, transparent); }
.pg-kpi b { font-size: 12.5px; display: flex; gap: 6px; align-items: center; } .pg-kpi > span { font-size: 11px; color: var(--ink-3, #6B7686); }
.pg-kpi.is-used { opacity: .45; } .pg-kpi:disabled { cursor: default; }
.pg-shape { font: 10px var(--mono, ui-monospace, Menlo, monospace); font-weight: 400; color: var(--ink-4, #8A93A3); background: var(--s2, #EEF0F4); padding: 0 5px; border-radius: 4px; margin-left: auto; }
.pg-layout-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.pg-tile { border: 1px solid var(--line-2, #D2D7E0); border-radius: 10px; padding: 9px 10px; background: var(--s1, #F7F8FA); display: flex; flex-direction: column; gap: 5px; min-height: 118px; }
.pg-tile-h { display: flex; gap: 6px; align-items: center; } .pg-tile-h b { font-size: 12.5px; }
.pg-nodata { font-size: 18px; font-weight: 700; color: var(--ink-4, #8A93A3); }
.pg-src { font-size: 11px; color: var(--ink-3, #6B7686); border-top: 1px dashed var(--line, #E5E8EE); padding-top: 4px; margin-top: auto; }
.pg-tools { display: flex; gap: 3px; align-items: center; }
.pg-sz { font: 10.5px var(--mono, ui-monospace, Menlo, monospace); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); cursor: pointer; color: var(--ink-3, #6B7686); }
.pg-sz.on { background: var(--brand-jade, #0FA47F); border-color: var(--brand-jade, #0FA47F); color: var(--text-on-brand, #fff); } .pg-sz:disabled { opacity: .35; cursor: default; }
.pg-x:hover { color: var(--danger, #B23A26); border-color: var(--danger, #B23A26); } .pg-gap { flex: 1; }
.pg-foot { font-size: 11.5px; color: var(--ink-4, #8A93A3); margin: 8px 0 0; }
.pg-aud { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #E5E8EE); }
.pg-aud-h { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); margin: 12px 0 6px; }
.pg-aud-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-aud-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--line, #E5E8EE); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; }
.pg-aud-item small { color: var(--ink-4, #8A93A3); font-size: 11px; }
.pg-ana-model, .pg-ana-input { font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--line, #E5E8EE); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
.pg-ana-model { min-width: 280px; max-width: 100%; }
.pg-ana-topic { font-family: inherit; color: inherit; }
.pg-ana-pen { color: var(--ink-4, #8A93A3); font-size: 11px; }
.pg-ana-add { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.pg-ana-attrs { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2, #3D4757); }
.pg-ana-attrs li { margin: 3px 0; }
.pg-aud-item:has(input:checked) { border-color: color-mix(in srgb, var(--brand-jade, #0FA47F) 55%, transparent); background: color-mix(in srgb, var(--brand-jade, #0FA47F) 8%, var(--surface, #fff)); }
@media (max-width: 1000px) { .ss-body.pg-fit { display: block; } .pg-main { display: block; } .pg-col { overflow: visible; margin-bottom: 12px; } .pg-grid { grid-template-columns: repeat(6, 1fr); } }
/* Studio → Programs: hide / show a kind of program for a tenant */
.pg-kind-row { display: flex; align-items: center; gap: 4px; } .pg-kind-row .pg-kind { flex: 1; min-width: 0; }
.pg-hide { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink-3, #6B7686); cursor: pointer; visibility: hidden; }
.pg-kind-row:hover .pg-hide, .pg-hidden .pg-hide { visibility: visible; }
.pg-hide:hover { border-color: var(--brand-jade, #0FA47F); color: var(--ink, #0F1319); }
.pg-hidden { margin-top: 8px; } .pg-hidden-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-3, #6B7686); padding: 4px 8px; }
.pg-copy { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pg-copy select { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink-2, #3F4A5B); }
.pg-hidden-row small { color: var(--ink-4, #8A93A3); }
.pg-suite { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line, #E5E8EE); display: flex; flex-direction: column; gap: 2px; }
.pg-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--ink, #0F1319); }
.pg-toggle:hover { background: var(--s1, #F7F8FA); }
.pg-toggle input { accent-color: var(--brand-jade, #0E9B73); width: 15px; height: 15px; }
.pg-toggle .material-symbols-outlined { font-size: 17px; color: var(--brand-jade, #0FA47F); }
.pg-toggle small { color: var(--ink-4, #8A93A3); }
/* Studio → Programs: loading — a tenant switching, a layout loading */
.pg-tenant-row { display: flex; align-items: center; gap: 8px; }
.pg-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(15, 164, 127, .25); border-top-color: #0FA47F; animation: pg-spin .8s linear infinite; display: inline-block; }
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-main.is-loading .pg-col:not(.pg-layout) { opacity: .45; pointer-events: none; transition: opacity .15s; }
.pg-loading { display: flex; align-items: center; gap: 10px; padding: 18px 6px; font-size: 13px; color: var(--ink-3, #6B7686); }
.pg-toggle.is-working { background: rgba(15, 164, 127, .08); } .pg-toggle .pg-spin { width: 15px; height: 15px; }

/* ── Data map (DataMap.razor, SQL 164) ─────────────────────────────────────
   Three columns of fixed-height rows placed by the component; links drawn only
   for what is in focus. The map area and the side panel each scroll — the page
   itself does not (fills the shell's middle; no second viewport). */
.dm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dm-head > div:first-child { flex: 1; min-width: 260px; }
.dm-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-stat { font: 11.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--ink-3, #6B7686); background: var(--s2, #EEF0F4); border-radius: 99px; padding: 3px 9px; }
.dm-search { border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 7px 12px; background: var(--s1, #F7F8FA); color: inherit; font: inherit; width: 240px; outline: none; }
.dm-search:focus { border-color: var(--tone-jade, #0FA47F); background: var(--bg, #fff); }
.dm-btn { border: 1px solid var(--line, #E5E8EE); background: var(--bg, #fff); color: var(--ink-2, #3F4A5B); border-radius: 10px; padding: 7px 12px; font: inherit; cursor: pointer; }
.dm-btn.on { border-color: var(--tone-jade, #0FA47F); color: var(--tone-jade, #0FA47F); background: color-mix(in srgb, var(--tone-jade, #0FA47F) 8%, var(--bg, #fff)); }
.dm-btn:disabled { opacity: .6; cursor: default; }
.dm-seg { display: inline-flex; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; overflow: hidden; }
.dm-seg button { border: 0; background: var(--bg, #fff); padding: 7px 12px; font: inherit; color: var(--ink-3, #6B7686); cursor: pointer; }
.dm-seg button.on { background: var(--s2, #EEF0F4); color: var(--ink, #0F1319); font-weight: 600; }
.dm-banner { padding: 8px 26px; border-bottom: 1px solid var(--line, #E5E8EE); color: var(--ink-3, #6B7686); font-size: 12.5px; min-height: 34px; }
.dm-banner b { color: var(--ink, #0F1319); }
.dm-error { color: var(--tone-red, #c0392b); margin: 8px 26px; font-size: 13px; }
.dm-error-inline { color: var(--tone-red, #c0392b); }
.dm-empty { color: var(--ink-3, #6B7686); margin: 18px 26px; }
.dm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; }
.dm-flow { min-width: 0; min-height: 0; overflow: auto; padding: 16px 26px; background: var(--s1, #F7F8FA); }
.dm-canvas { position: relative; }
.dm-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.dm-links path { fill: none; stroke-width: 1.6; opacity: .75; }
.dm-links path.join { stroke-width: 2.6; stroke-dasharray: 7 5; opacity: 1; animation: dm-flow 1s linear infinite; }
@keyframes dm-flow { to { stroke-dashoffset: -12; } }
.dm-colhead { position: absolute; display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4, #9098A6); }
.dm-glabel { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-3, #6B7686); height: 20px; }
.dm-glabel i { width: 8px; height: 8px; display: inline-block; }
.dm-item { position: absolute; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--bg, #fff); border: 1px solid var(--line, #E5E8EE); border-radius: 10px; cursor: pointer; transition: opacity .15s, border-color .12s, box-shadow .12s; }
.dm-item:hover { border-color: var(--line-2, #D2D7E0); box-shadow: 0 1px 2px rgba(16,22,32,.05), 0 6px 18px rgba(16,22,32,.06); }
.dm-item.planned, .dm-item.harvest { border-style: dashed; color: var(--ink-3, #6B7686); }
.dm-item.harvest { background: transparent; }
.dm-item.lit { border-color: var(--line-2, #D2D7E0); box-shadow: 0 1px 2px rgba(16,22,32,.05), 0 6px 18px rgba(16,22,32,.06); }
.dm-item.sel { border-color: var(--tone-jade, #0FA47F); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-jade, #0FA47F) 18%, transparent); }
.dm-canvas.faded .dm-item:not(.lit):not(.sel) { opacity: .28; }
.dm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dm-bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; }
.dm-rank { font: 10.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--ink-4, #9098A6); width: 12px; text-align: right; }
.dm-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.dm-tag { font: 10.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--ink-4, #9098A6); border: 1px solid var(--line, #E5E8EE); border-radius: 99px; padding: 0 6px; margin-left: 6px; }
.dm-side { border-left: 1px solid var(--line, #E5E8EE); overflow: auto; padding: 16px; min-height: 0; background: var(--bg, #fff); }
.dm-card { margin-bottom: 14px; }
.dm-card h2 { font-size: 16px; margin: 4px 0 6px; letter-spacing: -.01em; }
.dm-card p { color: var(--ink-2, #3F4A5B); margin: 6px 0; }
.dm-kind { font: 10.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--ink-4, #9098A6); text-transform: uppercase; letter-spacing: .06em; }
.dm-muted { color: var(--ink-3, #6B7686); }
.dm-sec { margin-top: 14px; }
.dm-sec h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #9098A6); }
.dm-side pre { font: 11.5px/1.5 var(--mono, ui-monospace, Menlo, monospace); background: var(--s1, #F7F8FA); border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }
.dm-caveat { border-left: 3px solid var(--tone-rose, #C2568A); padding: 6px 10px; background: var(--s1, #F7F8FA); border-radius: 0 8px 8px 0; color: var(--ink-2, #3F4A5B); font-size: 12px; }
.dm-pill { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 4px 0; padding: 3px 9px; border-radius: 99px; background: var(--s2, #EEF0F4); color: var(--ink-2, #3F4A5B); font: inherit; font-size: 11.5px; border: 0; cursor: pointer; }
.dm-pill i { width: 7px; height: 7px; border-radius: 50%; }
.dm-hit { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: 8px; font: inherit; color: var(--ink-2, #3F4A5B); cursor: pointer; }
.dm-hit:hover { background: var(--s1, #F7F8FA); }
.dm-hit-kind { font: 10.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--ink-4, #9098A6); margin-right: 8px; }
.dm-plan ol { margin: 6px 0; padding-left: 18px; } .dm-plan li { margin-bottom: 8px; }
.dm-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--bg, #fff); border: 1px solid var(--line, #E5E8EE); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.dm-table th { position: sticky; top: 0; background: var(--bg, #fff); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4, #9098A6); padding: 8px 4px; border-bottom: 1px solid var(--line, #E5E8EE); }
.dm-table th.l, .dm-table td.l { text-align: left; padding-left: 12px; }
.dm-table td { text-align: center; padding: 7px 4px; border-bottom: 1px solid var(--line, #E5E8EE); }
.dm-table tr.src td { background: var(--s1, #F7F8FA); font-weight: 600; color: var(--ink-2, #3F4A5B); }
.dm-table tr.ds { cursor: pointer; } .dm-table tr.ds:hover td { background: var(--s1, #F7F8FA); }
.dm-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; }
.dm-cell { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dm-chip { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; background: var(--s2, #EEF0F4); color: var(--ink-2, #3F4A5B); }
@media (max-width: 1100px) { .dm-body { grid-template-columns: 1fr; } .dm-side { display: none; } }

/* ── Studio → Harness Editor (2026-10-02). MIND-Design §7; wireframe MIND-Flow-wireframe-v24.html.
      The flow on the left and the selected step on the right, each scrolling on its own; the page itself does
      not scroll. Colours come from the tenant theme's tokens, with a fallback beside each. ── */
.he-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.he-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.he-controls .fs-tenant select { min-width: 170px; }
.he-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ss-body.he-fit { display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; gap: 10px; }
.he-status { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2, #48505E); }
.he-status-note { color: var(--ink-4, #8A93A3); font-size: 12px; }
.he-dirty { font-weight: 600; color: var(--warning, #9A6B00); }
.he-mark { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border: 1px dashed color-mix(in srgb, var(--warning, #CA9A04) 60%, transparent); color: var(--warning, #9A6B00);
    background: color-mix(in srgb, var(--warning, #CA9A04) 10%, transparent); white-space: nowrap; }

.he-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(300px, 400px); gap: 16px; }
.he-flow, .he-insp { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }

/* the test chat: its log is the only thing in the column that scrolls */
.he-chat { min-height: 0; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line, #E5E8EE); border-radius: 12px; background: var(--surface, #fff); padding: 12px 14px; }
.he-chat-t { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.he-chat-log { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.he-msg { max-width: 92%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.he-msg-you { align-self: flex-end; background: var(--ink, #0F1319); color: var(--bg, #fff); }
.he-msg-mind { align-self: flex-start; background: var(--s1, #F7F8FA); border: 1px solid var(--line, #E5E8EE); color: var(--ink, #0F1319); }
.he-msg-err { align-self: flex-start; background: color-mix(in srgb, var(--danger, #C2362B) 10%, transparent); color: var(--danger, #C2362B); }
.he-msg-wait { align-self: flex-start; color: var(--ink-3, #6B7686); font-style: italic; }
.he-msg-streaming { border-style: dashed; }
.he-said { align-self: flex-start; max-width: 92%; font-size: 12px; color: var(--ink-3, #6B7686); display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
.he-said div::before { content: "· "; }
.he-said div:last-child { color: var(--ink, #0F1319); }
.he-run { flex: none; border-top: 1px solid var(--line, #E5E8EE); padding-top: 8px; font-size: 12.5px; max-height: 38%; overflow-y: auto; }
.he-run .he-sub { margin: 2px 0 6px; }
.he-send { flex: none; display: flex; gap: 6px; }
.he-send input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink, #0F1319); }
.he-calls { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto auto; gap: 3px 10px; font-size: 12px; padding: 6px 0; }
.he-calls b { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.he-calls.he-time { grid-template-columns: minmax(0, 1fr) auto auto; }
.he-calls.he-cfg { grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1.2fr) auto; }
.he-cfg-off { color: var(--ink-4, #8A93A3); }
.he-slow { color: var(--danger, #C2362B); font-weight: 600; }

/* parallel marks, and what the last test run did at each step */
.he-par-h { font-size: 11px; color: var(--info, #2F6FED); padding: 2px 4px 0; }
.he-par { color: var(--info, #2F6FED); font-size: 12px; }
.he-step-end { flex: none; align-self: center; display: flex; align-items: center; gap: 6px; }
.he-ms { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; color: var(--ink-3, #6B7686); }
.he-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.he-dot.ran { background: var(--jade, #0E9B73); }
.he-dot.bad { background: var(--danger, #C2362B); }
.he-dot.none { border: 1.5px solid var(--ink-4, #8A93A3); }
.he-dot.skip { border: 1.5px dashed var(--line-2, #D8DDE6); }
/* the moving light: the step the running turn is in */
.he-dot.live { background: var(--jade, #0E9B73); animation: he-pulse 1s ease-in-out infinite; }
.he-step.is-live { border-color: var(--jade, #0E9B73); box-shadow: 0 0 0 1px var(--jade, #0E9B73) inset; }
@keyframes he-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade, #0E9B73) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .he-dot.live { animation: none; } }

/* switch connected, and the test-only switches */
.he-mark-sw { background: color-mix(in srgb, var(--info, #2F6FED) 12%, transparent); color: var(--info, #2F6FED); }
.he-testbar { border-color: var(--warning, #9A6B00); background: color-mix(in srgb, var(--warning, #9A6B00) 8%, var(--surface, #fff)); }
.he-testbar b { font-size: 12.5px; }
.he-testbar.is-idle { border-color: var(--line, #E5E8EE); background: var(--surface, #fff); }
.he-testbar .he-sub { margin: 6px 0; }
.he-testbar .he-testnote { margin: 8px 0 0; }
.he-rawrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #E5E8EE); font-size: 12.5px; }
.he-rawrow .he-switch { margin-top: 0; }
.he-rawrow select { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink, #0F1319); min-width: 0; max-width: 100%; }
.he-new { flex: none; width: 34px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink-2, #48505E); font-size: 16px; line-height: 1; cursor: pointer; }
.he-new:hover:not(:disabled) { border-color: var(--ink-4, #8A93A3); }
.he-new:disabled { opacity: .5; cursor: default; }
label.he-new { display: grid; place-items: center; position: relative; overflow: hidden; }
label.he-new input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
label.he-new.is-disabled { opacity: .5; cursor: default; }
label.he-new.is-disabled input { cursor: default; }
.he-files { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.he-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--line-2, #D8DDE6); background: var(--s1, #F7F8FA); font-size: 12px; }
.he-file .he-sub { margin: 0; }
.he-file button { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink-3, #6B7686); padding: 0 4px; }
.he-step.is-test .he-switch input:checked + span { background: var(--warning, #9A6B00); }


/* the usage limit: groups and people */
.he-usage { display: grid; gap: 6px 12px; align-items: center; font-size: 12.5px; margin-bottom: 8px; }
.he-usage-g { grid-template-columns: minmax(0, 1.3fr) minmax(110px, 1fr) 60px minmax(70px, auto); }
.he-usage-p { grid-template-columns: minmax(0, 1.3fr) minmax(110px, 1fr) minmax(60px, auto) minmax(70px, auto); }
.he-usage b { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.he-usage input, .he-usage select { font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink, #0F1319); min-width: 0; width: 100%; box-sizing: border-box; }
.he-addgroup { margin-top: 4px; }
.he-bad { color: var(--danger, #C2362B); }

.he-card { border: 1px solid var(--line, #E5E8EE); border-radius: 12px; background: var(--surface, #fff); padding: 12px 14px; }
.he-card h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.he-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.he-sub { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3, #6B7686); }
.he-mono { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11.5px; color: var(--ink-3, #6B7686); }

.he-ai-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 6px 10px; margin-top: 4px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--bg, #fff); color: var(--ink, #0F1319); cursor: pointer; }
.he-ai-row.is-on { border-color: var(--ink, #0F1319); box-shadow: 0 0 0 1px var(--ink, #0F1319) inset; }
.he-ai-row.is-off > span:first-child { color: var(--ink-3, #6B7686); }

.he-block { border: 1px solid var(--line, #E5E8EE); border-radius: 12px; background: var(--s1, #F7F8FA); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.he-block-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 2px 4px; color: var(--ink, #0F1319); }
.he-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); }
.he-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); cursor: pointer; }
.he-step:hover { border-color: var(--ink-4, #8A93A3); }
.he-step.is-on { border-color: var(--ink, #0F1319); box-shadow: 0 0 0 1px var(--ink, #0F1319) inset; }
.he-step.is-off { background: var(--s1, #F7F8FA); }
.he-step.is-off .he-step-name { color: var(--ink-3, #6B7686); }
/*  A step that is off SAYS so. A struck-through name read as "removed" or "broken". */
.he-off { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px;
    background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); }
.he-step-main { flex: 1; min-width: 0; }
.he-step-name { font-size: 13px; font-weight: 600; }
.he-step-about { font-size: 11.5px; color: var(--ink-3, #6B7686); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.he-cond { font-size: 11px; margin-top: 3px; color: var(--warning, #9A6B00); }
.he-kind { flex: none; align-self: center; padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em; font-family: var(--mono, ui-monospace, Menlo, monospace);
    background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); }
.he-kind-ai { background: color-mix(in srgb, var(--info, #2F6FED) 12%, transparent); color: var(--info, #2F6FED); }
.he-kind-code { background: color-mix(in srgb, var(--jade, #0E9B73) 12%, transparent); color: var(--jade, #0E9B73); }
.he-kind-prompt { background: color-mix(in srgb, var(--brand-violet, #7A5AF8) 12%, transparent); color: var(--brand-violet, #7A5AF8); }

.he-switch { flex: none; position: relative; display: inline-block; width: 30px; height: 18px; margin-top: 2px; cursor: pointer; }
.he-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.he-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2, #D8DDE6); transition: background .12s; }
.he-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg, #fff); transition: transform .12s; }
.he-switch input:checked + span { background: var(--jade, #0E9B73); }
.he-switch input:checked + span::after { transform: translateX(12px); }
.he-switch input:disabled + span { opacity: .55; cursor: not-allowed; }

.he-insp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.he-insp-h h2 { margin: 0; font-size: 17px; font-weight: 600; }
.he-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.he-row > label:first-child { color: var(--ink-3, #6B7686); }
.he-row select, .he-row input[type="text"] { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6);
    background: var(--bg, #fff); color: var(--ink, #0F1319); width: 100%; box-sizing: border-box; }

.he-prompt { border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.he-prompt.is-off { opacity: .6; }
.he-prompt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.he-prompt-h .he-sub { margin: 0; }
.he-words { margin-left: auto; font-size: 11px; color: var(--ink-4, #8A93A3); }
.he-prompt textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; resize: vertical;
    border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink, #0F1319); }
.he-prompt textarea[readonly] { background: var(--s1, #F7F8FA); color: var(--ink-3, #6B7686); }

.he-how { margin: 0; white-space: pre-wrap; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11.5px; line-height: 1.6; color: var(--ink-2, #48505E); }

.he-compare { flex: none; max-height: 34vh; overflow-y: auto; }
.he-diff { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 4px 12px; font-size: 12.5px; }
.he-diff b { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.he-was { color: var(--ink-3, #6B7686); }
.he-now { font-weight: 600; color: var(--ink, #0F1319); }

@media (max-width: 1280px) { .he-main { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(220px, 38%); } .he-chat { grid-column: 1 / -1; } }
@media (max-width: 900px) { .he-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .he-flow, .he-insp { overflow-y: visible; } .he-chat { grid-column: auto; } .he-chat-log { max-height: 50vh; } .ss-body.he-fit { min-height: auto; } }

/* ── Studio ▸ Voice (StudioVoice.razor) — on the artifact workbench (artifacts.css .wb-*) ─────────── */
.sv-wb { margin-top: 14px; padding: 0 24px 24px; }
.sv-wb .wb-todo .wb-c { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.sv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.sv-head-l h2 { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink, #0F1319); }
.sv-head-v { display: flex; align-items: center; gap: 10px; }
.sv-head-vname { display: flex; flex-direction: column; font-size: 13px; color: var(--ink, #0F1319); }
.sv-head-vname span { font-size: 12px; color: var(--ink-3, #6B7686); text-transform: capitalize; }
.sv-none { color: var(--ink-4, #8A93A3); font-size: 13px; }
.sv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sv-mini-avatar, .sv-avatar { position: relative; flex: none; border: 0; padding: 0; cursor: pointer; overflow: hidden; display: grid; place-items: center; background: var(--s1, #F2F4F7); }
.sv-mini-avatar { width: 40px; height: 40px; border-radius: 10px; }
.sv-avatar { width: 56px; height: 56px; border-radius: 12px; }
.sv-mini-avatar::before, .sv-avatar::before { content: ""; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--sv-a), var(--sv-b)); }
.sv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--surface, #fff); background: color-mix(in srgb, var(--ink, #0F1319) 45%, transparent); opacity: 0; transition: opacity .12s; }
.sv-mini-avatar:hover .sv-play, .sv-avatar:hover .sv-play, .playing .sv-play { opacity: 1; }
.sv-mini-avatar:disabled, .sv-avatar:disabled { cursor: default; }
.sv-mini-avatar:disabled .sv-play, .sv-avatar:disabled .sv-play { display: none; }

/* 1 · Choose a voice */
.sv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #E5E8EE); margin-bottom: 12px; }
.sv-tabs button { font: inherit; font-size: 13px; padding: 7px 12px; border: 0; background: none; color: var(--ink-3, #6B7686); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sv-tabs button.on { color: var(--ink, #0F1319); font-weight: 600; border-bottom-color: var(--ink, #0F1319); }
.sv-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.sv-q { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-2, #D5DAE1); background: var(--surface, #fff); color: var(--ink, #0F1319); }
.sv-q:focus { outline: none; border-color: var(--ink, #0F1319); }
.sv-filters-btn.on { border-color: var(--ink, #0F1319); }
.sv-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--ink, #0F1319); color: var(--surface, #fff); font-size: 11px; line-height: 18px; text-align: center; }
.sv-sort { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink, #0F1319); }
.sv-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.sv-chip { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink-2, #3A4352); cursor: pointer; white-space: nowrap; }
.sv-chip:hover { border-color: var(--line-2, #C8CED7); }
.sv-chip.on { background: var(--ink, #0F1319); border-color: var(--ink, #0F1319); color: var(--surface, #fff); }
.sv-lang-select { appearance: auto; }
.sv-sep { width: 1px; height: 22px; background: var(--line, #E5E8EE); }
.sv-filters { border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--s1, #F7F8FA); margin-bottom: 10px; }
.sv-fgroup { display: flex; gap: 12px; align-items: flex-start; }
.sv-flabel { width: 64px; flex: none; padding-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.sv-fopts { display: flex; gap: 5px; flex-wrap: wrap; }
.sv-fopts .sv-chip { padding: 4px 10px; font-size: 12px; }
.sv-filters-f { display: flex; justify-content: flex-end; }
.sv-results-h { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.sv-results-h h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink, #0F1319); }
.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 16px; margin-bottom: 10px; }
.sv-card { position: relative; display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; min-width: 0; }
.sv-card:hover { background: var(--s1, #F7F8FA); }
.sv-card.is-current { background: color-mix(in srgb, var(--jade, #0E9B73) 9%, transparent); }
.sv-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sv-name { font-size: 13px; color: var(--ink, #0F1319); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-use { font-size: 12px; color: var(--ink-3, #6B7686); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-langs { font-size: 12px; color: var(--ink-3, #6B7686); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sv-more { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); line-height: 17px; }
/* Use floats over the end of the card on hover, so it never takes width from the name. */
.sv-use-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s; box-shadow: 0 2px 8px color-mix(in srgb, var(--ink, #0F1319) 12%, transparent); }
.sv-card:hover .sv-use-btn { opacity: 1; }
@media (hover: none) { .sv-use-btn { opacity: 1; } }

/* 2 · Tune */
.sv-tune { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.sv-slider { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sv-slider-h { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--ink, #0F1319); }
.sv-slider-h span { color: var(--ink-4, #8A93A3); font-size: 11.5px; flex: 1; }
.sv-slider-h em { font-style: normal; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11.5px; color: var(--ink-3, #6B7686); }
.sv-slider input { width: 100%; accent-color: var(--jade, #0E9B73); }
.sv-check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink, #0F1319); }
.sv-field { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); margin: 6px 0; }
.sv-field select, .sv-say input, .sv-bench-voice select { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink, #0F1319); text-transform: none; letter-spacing: 0; font-weight: 400; }
.sv-say { display: flex; gap: 6px; margin: 8px 0; }
.sv-say input { flex: 1; min-width: 0; }
.sv-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* 3 · Bench */
.sv-bench-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sv-state { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--s2, #EEF0F4); color: var(--ink-3, #6B7686); }
.sv-state-listening { background: color-mix(in srgb, var(--jade, #0E9B73) 14%, transparent); color: var(--jade, #0E9B73); }
.sv-state-processing { background: color-mix(in srgb, var(--warning, #CA9A04) 14%, transparent); color: var(--warning, #7A5C02); }
.sv-state-speaking { background: color-mix(in srgb, var(--info, #2F6FDB) 14%, transparent); color: var(--info, #2F6FDB); }
.sv-partial { font-size: 14px; color: var(--ink-3, #6B7686); font-style: italic; padding: 6px 10px; border-radius: 8px; background: var(--s1, #F7F8FA); margin-bottom: 8px; }
.sv-log { max-height: 360px; overflow-y: auto; border: 1px solid var(--line, #E5E8EE); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--surface, #fff); }
.sv-line { font-size: 12.5px; line-height: 1.5; color: var(--ink-2, #3A4352); }
.sv-line .he-mono { margin-right: 6px; }
.sv-k-heard { color: var(--ink, #0F1319); font-weight: 600; }
.sv-k-err { color: var(--danger, #B23A26); }
.sv-k-act, .sv-k-say { color: var(--ink-3, #6B7686); }
.sv-k-trace { color: var(--ink-4, #8A93A3); }
@media (max-width: 900px) { .sv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-wb { padding: 0 12px 16px; } }
.sv-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sv-confirm span { flex: 1; min-width: 240px; }
.sv-vbtns { display: flex; gap: 6px; align-items: flex-end; }
.sv-publish { align-items: flex-start; }
.sv-publish-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.sv-publish-body input { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, #E5E8EE); background: var(--surface, #fff); color: var(--ink, #0F1319); }
.sv-diff { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2, #3A4352); }
.sv-diff li span { color: var(--ink-3, #6B7686); }

/* the Harness Editor's right column: the test chat and test sets as two tabs (HarnessTestSets, MIND-Design §7.3) */
.hs-tabs { flex: none; display: flex; gap: 4px; border-bottom: 1px solid var(--line, #E5E8EE); }
.hs-tabs button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #8A93A3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 8px 6px; cursor: pointer; }
.hs-tabs button.is-on { color: var(--ink, #0F1319); border-bottom-color: var(--ink, #0F1319); }
.hs-tabs button:disabled { opacity: .5; cursor: default; }
.hs-panel { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.hs-pick { display: flex; gap: 6px; }
.hs-pick select { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2, #D8DDE6); background: var(--bg, #fff); color: var(--ink, #0F1319); }
.hs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border-top: 1px solid var(--line, #E5E8EE); padding-top: 8px; font-size: 13px; }
.hs-head > div { flex-basis: 100%; }
.hs-score { font-weight: 600; }
.hs-score.is-pass, .hs-test.is-pass .hs-mark, .hs-raw.is-pass, .hs-checks .is-pass .hs-mark { color: var(--tone-jade, #0E9B73); }
.hs-score.is-fail, .hs-test.is-fail > summary .hs-mark, .hs-raw.is-fail, .hs-checks .is-fail .hs-mark { color: var(--danger, #C2362B); }
.hs-results { display: flex; flex-direction: column; gap: 4px; }
.hs-test { border: 1px solid var(--line, #E5E8EE); border-radius: 8px; background: var(--bg, #fff); }
.hs-test > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; list-style: none; }
.hs-test > summary::-webkit-details-marker { display: none; }
.hs-test .hs-q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hs-mark { font-weight: 700; width: 1em; flex: none; }
.hs-raw { font-size: 11px; font-weight: 600; }
.hs-col { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid var(--line, #E5E8EE); }
.hs-col-h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4, #8A93A3); }
.hs-checks { list-style: none; margin: 0; padding: 0; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.hs-now { overflow-wrap: anywhere; }
.hs-report { color: var(--ink, #0F1319); font-weight: 600; }