/* 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: #0FA47F; }
.warn    { color: #B87508; }
.bad     { color: #DB4F38; }
.terminal{ color: #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: rgba(184, 117, 8, .10);
    border: 1px solid rgba(184, 117, 8, .28);
    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: #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: #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: #B87508;
    background: rgba(184, 117, 8, .09);
    border-color: rgba(184, 117, 8, .28);
}

.ss-pill.bad {
    color: #DB4F38;
    background: rgba(219, 79, 56, .09);
    border-color: rgba(219, 79, 56, .30);
}

/* 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: #0FA47F;
    background: rgba(15, 164, 127, .09);
    border-color: rgba(15, 164, 127, .28);
}

/* ── 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 rgba(16, 22, 32, .18);
    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(--hair, #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: var(--violet-bg, #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: #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: rgba(202, 154, 4, .10); color: #7A5C02; } .fs-note.bad { background: rgba(219, 79, 56, .08); color: #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: rgba(15, 164, 127, .45); }
.fs-chip.is-on { border-color: #0FA47F; box-shadow: 0 0 0 2px rgba(15, 164, 127, .18); }
.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: rgba(15, 164, 127, .10); color: #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: #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: #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: #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: #0FA47F; background: #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: #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: #B23A26; border-color: #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: #0FA47F; font-weight: 600; }
.fs-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fs-primary:not(:disabled) { background: #0FA47F !important; border-color: #0FA47F !important; color: #fff !important; }
.fs-status { font-size: 12px; color: var(--ink-3, #6B7686); } .fs-status.bad { color: #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: #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: rgba(184, 80, 47, .10); color: #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: #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: rgba(14, 155, 115, .10); 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 rgba(15, 19, 25, .08); }
.ca-misuse-bar { align-items: flex-end; gap: 12px; }
.ca-tag.sev-high { background: rgba(184, 80, 47, .12); color: #9A3E22; }
.ca-tag.sev-medium { background: rgba(202, 154, 4, .12); color: #7A5C02; }