/* studio.css — app-shell layout only. Flexbox (NOT CSS grid): ForgeUI-Core's
 * layout engine is Yoga/flexbox; the Forge editor itself is flexbox-based.
 * tokens.studio.css, studio-kit.css and stage.css are <link>ed before this in
 * index.html (no @import — keeps the cascade explicit for ForgeUI).
 */

#studio-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-1);
    overflow: hidden;
}

/* Header */
.studio-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-2);
    height: var(--header-h);
    padding: 0 var(--gap-2);
    background: var(--bg-1);
    border-bottom: 1px solid var(--hairline);
    flex: 0 0 auto;
    overflow: hidden;
}
.header-left, .header-center, .header-live, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.header-left {
    flex: 1 1 0;
}
.header-center {
    flex: 0 1 auto;
    justify-content: center;
    overflow: hidden;
}
.header-right {
    flex: 1 1 0;
    justify-content: flex-end;
}
/* Docked hosts (the Unity/Unreal editor panes) give the header far less width
   than a standalone window. Every chip is fixed-width and never shrinks, so
   the tail of .header-left used to spill out of its own box and paint over
   .header-center's stage controls — Insert and Save landed on top of the zoom
   chip. Clipping each group to its own box makes that impossible whatever the
   width; the queries below then hand the space back by dropping the least
   informative element first, so nothing useful is lost on the way down. */
.header-left, .header-right { overflow: hidden; }
/* Preserve product identity without stealing room from authoring controls. */
@media (max-width: 1680px) {
    .studio-brand-wordmark { display: none; }
    .studio-brand-mark { display: block; }
}
/* Project and screen names truncate before any control disappears. */
@media (max-width: 1570px) {
    #project-chip { width: 104px; max-width: 104px; }
    #screen-chip { width: 92px; max-width: 92px; }
}
/* Rulers and the multi-viewport summary are view aids, not editing controls;
   both stay reachable from the Tools menu and the command palette. */
@media (max-width: 1400px) {
    #btn-rulers, #responsive-summary { display: none; }
}
/* Last to go: the safe-area toggle and the project chip. Zoom, Fit, device,
   breakpoint, Insert and Save survive at every width. */
@media (max-width: 1200px) {
    #btn-safe { display: none; }
    #project-chip { display: none; }
}
/* Narrowest docks: the brand mark goes, and Insert joins Save as icon-only.
   Both keep their tooltip and their command-palette entry. */
@media (max-width: 1000px) {
    .studio-brand { display: none; }
    #screen-chip { width: 76px; max-width: 76px; }
    #btn-insert {
        width: 34px;
        max-width: 34px;
        padding: 0;
        justify-content: center;
    }
    #btn-insert span:not(.ms-icon) { display: none; }
}
/* A pane this narrow only has room for the identity of the open screen and the
   two write actions. Fit, the breakpoint picker, density and the shortcut
   sheet all keep their palette entries and their keyboard shortcuts. */
@media (max-width: 820px) {
    #stage-fit, #bp-select, #btn-density, #btn-shortcuts { display: none; }
    #tools-chip span:not(.ms-icon) { display: none; }
    /* Slice 4 — Run is never dropped (it is the only run affordance); it
       degrades to its icon, keeps its tooltip and its palette entry. */
    #btn-run { min-width: 34px; padding: 0 8px; }
    #btn-run span:not(.ms-icon) { display: none; }
}
.studio-brand {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex: 0 0 auto;
    height: var(--ctl-h);
}
.studio-brand-wordmark {
    display: block;
    width: 116px;
    height: auto;
}
.studio-brand-mark {
    display: none;
    width: 24px;
    height: 24px;
    object-fit: cover;
}
.studio-header .spacer { display: none; } /* spacer no longer needed as we use flex justify-content: space-between */
.studio-header .group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.studio-header .chip,
.studio-header .small-primary-btn {
    flex: 0 0 auto;
    min-width: 0;
}
.studio-header .chip {
    display: flex;
}
#project-chip { width: 148px; max-width: 148px; }
#screen-chip { width: 112px; max-width: 112px; }
#screen-chip.studio-doc-opening {
    cursor: progress;
    border-color: var(--primary-strong);
    background: rgba(33, 147, 251, 0.12);
}
#screen-chip.studio-doc-opening .ms-icon:last-child {
    animation: studio-doc-opening-spin 0.8s linear infinite;
}
@keyframes studio-doc-opening-spin { to { transform: rotate(360deg); } }
#btn-insert { width: 76px; max-width: 76px; }
#btn-save {
    width: 36px;
    max-width: 36px;
    padding: 0;
    justify-content: center;
    margin-right: 8px;
    overflow: visible;
    position: relative;
}
#stage-device { max-width: 176px; }
.studio-header .chip .chip-caret {
    font-size: 14px;
    opacity: 0.5;
    margin-left: -2px;
    flex: 0 0 auto;
}
/* Resolution picker — custom W×H input row at the bottom of the device menu */
.studio-menu-custom {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--gap-1) var(--gap-2);
    margin-top: var(--gap-1);
    border-top: 1px solid var(--hairline);
}
.studio-menu-custom > .ms-icon { font-size: 16px; color: var(--text-2); flex: 0 0 auto; }
.device-custom-input {
    width: 62px;
    height: var(--row-h);
    padding: 0 var(--gap-1);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--hairline-strong);
    border-radius: 4px;
    color: var(--text-0);
    font-size: var(--fs-2);
}
.device-custom-input:focus { outline: none; border-color: var(--primary); }
.device-custom-x { color: var(--text-2); flex: 0 0 auto; font-size: var(--fs-2); }
.device-custom-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: var(--row-h);
    margin-left: 2px;
    border: 0;
    border-radius: 4px;
    background: var(--primary);
    cursor: pointer;
}
.device-custom-apply .ms-icon { font-size: 16px; color: #fff; }
#responsive-summary {
    width: 150px;
    max-width: 150px;
    overflow: hidden;
}
#responsive-summary .ms-icon {
    flex-basis: 16px;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
}
#tools-chip { max-width: 98px; }
#project-name,
#screen-name,
#btn-insert span:not(.ms-icon),
#btn-save span:not(.ms-icon),
#stage-device-label,
#responsive-summary span:not(.ms-icon),
#tools-chip span:not(.ms-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#btn-save span:not(.ms-icon) {
    display: none;
}
.studio-window-controls {
    display: none;
    align-items: center;
    gap: 0;
    /* With the original 4px margin, late reveal leaves an 18px overlap.
       Adding 30px restores the nominal 12px separation (8px parent gap
       plus the original 4px margin) in ForgeUI's nested flex path. */
    margin-left: 34px;
    flex: 0 0 auto;
}
#studio-root.standalone-window .studio-window-controls {
    display: flex;
}
.studio-wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.studio-wc-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-0);
}
.studio-wc-close:hover {
    background: rgba(232, 17, 35, 0.92);
    color: #fff;
}
.studio-wc-btn .wc-icon {
    font-size: 13px;
    line-height: 1;
}

#studio-root button:focus-visible,
#studio-root input:focus-visible,
#studio-root select:focus-visible,
#studio-root textarea:focus-visible {
    outline: 2px solid var(--primary-strong);
    outline-offset: 2px;
}

/* Comfortable density raises the shared token ladder, not just four bars.
 * Tree rows, controls, inspector fields and Agent chrome all consume these
 * variables, so the toggle is immediately legible and remains consistent. */
#studio-root[data-density="comfortable"] {
    --row-h: 28px;
    --ctl-h: 32px;
    --bar-h: 36px;
    --header-h: 48px;
    --fs-1: 10px;
    --fs-2: 12px;
}
#studio-root[data-density="comfortable"] .studio-header { height: var(--header-h); }
#studio-root[data-density="comfortable"] .panel-header { height: var(--bar-h); }
#studio-root[data-density="comfortable"] .dock-tabs { height: var(--bar-h); }
#studio-root[data-density="comfortable"] .stage-toolbar { height: var(--bar-h); }

/* Body: left dock | center | right dock (slice 3 removed the vertical rail) */
.studio-body {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
/* Flex stretch owns the shared body height. A 100% height on any column makes
   the body reserve the full root height and pushes the dock beneath the status
   bar instead of leaving room for it. */

.studio-dock-left {
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    overflow: hidden;
}

/* Slice 3 — the left dock tab strip is the ONLY left workspace switcher
   (the rail that duplicated it is gone), so it is visible like the right and
   bottom strips instead of being hidden behind the rail. */
#left-dock-tabs {
    flex: 0 0 auto;
}

.studio-center {
    /* Absolute overlays mounted into the centre (multi-view, source editor,
       UI Kit) must resolve inset:0 against the dock-free workspace instead
       of the whole Studio window, which is clipped by this container. */
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.studio-center-stage {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.studio-center-stage > .stage { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.studio-dock-bottom {
    display: flex;
    flex-direction: column;
    height: 164px;
    min-height: 0;
    border-top: 1px solid var(--hairline);
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--bg-2);
}

.studio-dock-right {
    display: flex;
    flex-direction: column;
    width: 320px;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--hairline);
    flex: 0 0 auto;
    overflow: hidden;
}
.studio-dock-right .dock-panel {
    flex: 1 1 0;
    min-height: 0;
}
.studio-dock-right .right-panel-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.studio-dock-right .panel-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}
.studio-dock-right .dock-panel + .dock-panel {
    border-top: 1px solid var(--hairline);
}

/* Before a document is open, make the start screen the product surface.
   Empty editor docks and canvas-only controls add noise and imply that they
   can already be used. They return as soon as openDoc establishes a screen. */
#studio-root[data-document-open="false"] .header-center,
#studio-root[data-document-open="false"] #screen-chip,
#studio-root[data-document-open="false"] #btn-insert,
#studio-root[data-document-open="false"] #btn-save,
#studio-root[data-document-open="false"] .studio-dock-left,
#studio-root[data-document-open="false"] .studio-dock-right,
#studio-root[data-document-open="false"] #center-dock-tabs,
#studio-root[data-document-open="false"] .studio-body > .studio-splitter,
#studio-root[data-document-open="false"] .studio-center > .studio-splitter.horizontal,
#studio-root[data-document-open="false"] .studio-dock-bottom,
#studio-root[data-document-open="false"] .workspace-map,
#studio-root[data-document-open="false"] .status-workflow,
#studio-root[data-document-open="false"] #status-doc {
    display: none;
}

/* setDockSize(bottom) pins this area above the persisted bottom dock. The
   dock is absent on the start screen, so reclaim its reserved height until a
   document opens; the persisted inline size takes over again afterwards. */
#studio-root[data-document-open="false"] .studio-center-stage {
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* Splitters (drag behavior wired in js/main.js) */
.studio-splitter {
    /* A real 14px hit target with -4px margins keeps the historical 6px net
       layout budget. Unlike pseudo-element overflow, the whole visible target
       participates reliably in native ForgeUI hit-testing. */
    flex: 0 0 14px;
    margin-inline: -4px;
    cursor: col-resize;
    background: transparent;
    outline: none;
    position: relative;
    z-index: 20; /* keep the grab zone above adjacent dock panels */
}
.studio-splitter:hover,
.studio-splitter:focus-visible,
.studio-splitter.dragging {
    background: rgba(33, 147, 251, 0.5);
}
.studio-splitter.horizontal { cursor: row-resize; flex: 0 0 14px; margin: -4px 0; }
.studio-resizing,
.studio-resizing * { user-select: none !important; }
.studio-resizing-col,
.studio-resizing-col * { cursor: col-resize !important; }
.studio-resizing-row,
.studio-resizing-row * { cursor: row-resize !important; }

/* Status bar */
.studio-statusbar {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    height: var(--row-h);
    padding: 0 var(--gap-2);
    background: var(--bg-1);
    border-top: 1px solid var(--hairline);
    color: var(--text-2);
    font-size: var(--fs-1);
    flex: 0 0 auto;
}
.studio-statusbar .spacer { flex: 1 1 auto; }
.status-workflow {
    flex: 0 1 280px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-1);
}
.workspace-map {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    flex: 0 1 auto;
    min-width: 0;
}
.workspace-map span {
    display: inline-flex;
    align-items: center;
    max-width: 96px;
    height: 18px;
    padding: 0 var(--gap-1);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workspace-map span[data-workspace-active="true"] {
    border-color: rgba(33, 147, 251, 0.55);
    background: rgba(33, 147, 251, 0.11);
    color: var(--primary);
}
#status-doc {
    flex: 0 1 220px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.studio-status-ok { color: var(--success); }
.studio-status-warn { color: var(--tertiary); }
.studio-status-err { color: var(--danger); }

/* Bundle-stale banner (driven by host.caps.bundleStale). UX-020: one viewport
   bar owns both its orange paint and its contents. Avoid left:50% + transform:
   transformed flex descendants and the principal background can otherwise
   diverge while a resize is publishing intermediate layouts. */
.studio-stale-banner {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 400;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    height: var(--ctl-h);
    min-width: 0;
    padding: 0 var(--gap-3);
    background: rgba(239, 103, 25, 0.92);
    color: #fff;
    border-bottom: 1px solid rgba(255, 177, 112, 0.8);
    border-radius: 0;
    /* Anchored chrome never casts a shadow (Mako elevation rule). */
    pointer-events: none;
}
.studio-stale-banner.show { display: flex; }
.studio-stale-banner > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Floating menu (header screen switcher, #48). Token-consistent with the
   chrome: bg-3 surface, line border, primary accent on the active row. */
.studio-menu {
    position: fixed;
    z-index: 50;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--gap-1);
    background: var(--bg-3);
    border: 1px solid var(--hairline-strong);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.studio-menu-item {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    width: 100%;
    padding: var(--gap-1) var(--gap-2);
    background: none;
    border: 0;
    border-radius: 4px;
    color: var(--text-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.studio-menu-item:hover { background: rgba(33, 147, 251, 0.12); color: var(--text-0); }
.studio-menu-item.active { color: var(--primary); }
/* Disabled command (audit D-56/57): a natively-disabled <button> swallows
   clicks silently and read as a frozen menu. We keep it clickable (the
   click explains WHY in the console/status) but visibly inert. */
.studio-menu-item.disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
.studio-menu-item.disabled:hover { background: none; color: var(--text-1); }
.studio-menu-item .ms-icon { font-size: 16px; }
/* Sub-folder label — disambiguates same-named screens in different dirs
   (AAA recursive discovery / route manifest). Muted, pushed to the right. */
.studio-menu-sub {
    margin-left: auto;
    padding-left: var(--gap-3);
    font-size: var(--fs-1);
    color: var(--text-2);
    opacity: 0.8;
}

/* ── UI Kit importer overlay (slice 4c-3) ───────────────────────────── */
.uikit-overlay {
    position: absolute;
    inset: 0;
    z-index: 9810;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.uikit-box {
    width: 92%;
    height: 88%;
    display: flex;
    flex-direction: column;
    background: var(--bg-1, #181818);
    border: 1px solid var(--line, #2a2a2a);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    font: 12px Inter, sans-serif;
    color: var(--text-1);
}
.uikit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2, #1c1c1c);
}
.uikit-header .spacer { flex: 1 1 auto; }
.uikit-title { font-weight: 600; color: var(--text-0); }
.uikit-body { flex: 1 1 auto; overflow: hidden; display: flex; }

/* empty state */
.uikit-drop {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    max-width: 380px;
}
.uikit-drop-icon { font-size: 48px; color: var(--text-2); }
.uikit-drop-msg { font-size: 14px; color: var(--text-0); }
.uikit-drop-sub { font-size: 11px; color: var(--text-2); line-height: 1.5; }

/* loaded: the stage + the side panel */
.uikit-work { flex: 1 1 auto; display: flex; overflow: hidden; }
.uikit-stage {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: repeating-conic-gradient(#2a2a2a 0% 25%, #222 0% 50%)
        0 0 / 16px 16px;
}
.uikit-canvas-wrap { position: relative; display: inline-block; }
.uikit-sheet { display: block; image-rendering: pixelated; max-width: 100%; }
.uikit-overlay-layer { position: absolute; inset: 0; }
.uikit-piece-box {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(33, 147, 251, 0.7);
    cursor: pointer;
}
.uikit-piece-box.sprite { border-color: rgba(255, 255, 255, 0.4); }
.uikit-piece-box.sel {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.uikit-piece-tag {
    position: absolute;
    left: 0;
    top: -15px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 14px;
    white-space: nowrap;
    background: var(--bg-3, #2a2a2a);
    color: var(--text-1);
    border-radius: 2px;
}
.uikit-piece-box.sel .uikit-piece-tag { background: var(--primary); color: #fff; }
.uikit-piece-box.sel { cursor: move; }
.uikit-guide { position: absolute; background: rgba(255, 196, 0, 0.85); }
.uikit-guide-v { top: 0; bottom: 0; width: 1px; cursor: col-resize; }
.uikit-guide-h { left: 0; right: 0; height: 1px; cursor: row-resize; }

/* the 8 resize handles of the selected piece (drag-editing) */
.uikit-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -5px;
    background: var(--primary);
    border: 1px solid #fff;
    box-sizing: border-box;
    z-index: 2;
}
.uikit-h-nw { left: 0;    top: 0;    cursor: nwse-resize; }
.uikit-h-n  { left: 50%;  top: 0;    cursor: ns-resize; }
.uikit-h-ne { left: 100%; top: 0;    cursor: nesw-resize; }
.uikit-h-w  { left: 0;    top: 50%;  cursor: ew-resize; }
.uikit-h-e  { left: 100%; top: 50%;  cursor: ew-resize; }
.uikit-h-sw { left: 0;    top: 100%; cursor: nesw-resize; }
.uikit-h-s  { left: 50%;  top: 100%; cursor: ns-resize; }
.uikit-h-se { left: 100%; top: 100%; cursor: nwse-resize; }

/* the side panel */
.uikit-side {
    width: 250px;
    flex: 0 0 250px;
    border-left: 1px solid var(--line);
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.uikit-side-hdr {
    padding: 6px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
}
.uikit-list { overflow: auto; max-height: 45%; flex: 0 0 auto; }
.uikit-list-empty { padding: 10px; color: var(--text-2); font-size: 11px; }
.uikit-list-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.uikit-list-row:hover { background: rgba(255, 255, 255, 0.04); }
.uikit-list-row.sel { background: rgba(33, 147, 251, 0.16); }
.uikit-list-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uikit-conf-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.uikit-conf-dot.ok { background: var(--success, #3fb950); }
.uikit-conf-dot.warn { background: var(--danger, #f0883e); }
.uikit-kind-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    text-transform: uppercase;
}
.uikit-kind-panel { background: rgba(33, 147, 251, 0.2); color: var(--primary); }
.uikit-kind-sprite { background: rgba(255, 255, 255, 0.1); color: var(--text-2); }

/* the selection inspector */
.uikit-inspector {
    border-top: 1px solid var(--line);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
}
.uikit-insp-hint { color: var(--text-2); font-size: 11px; }
.uikit-field { display: flex; align-items: center; gap: 8px; }
.uikit-field-label { flex: 0 0 56px; font-size: 10px; color: var(--text-2); }
.uikit-field-readout {
    font-size: 11px;
    color: var(--text-1);
    font-family: ui-monospace, monospace;
}
.uikit-insp-actions { display: flex; gap: 6px; margin-top: 4px; }
.uikit-danger { color: var(--danger, #f0883e); }

/* export / reopen affordances (slice 5d) */
.uikit-export-btn { margin: 8px 10px 4px; }
.uikit-reopen-btn { margin-top: 4px; }

/* the universal path-field load entry — works on every host, no
   native file picker required (audit P1: importer must be startable) */
.uikit-path-row { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.uikit-path-input { flex: 1 1 auto; min-width: 0; }

/* multi-viewport responsive preview (audit #9 P1) */
.multiview-overlay {
    /* Non-modal comparison dock: the left half of the stage stays visible and
       editable while responsive previews remain open. */
    position: absolute; top: 8px; right: 8px; bottom: 8px; z-index: 50;
    width: 48%; min-width: 420px; max-width: 820px;
    background: transparent;
    display: flex; align-items: stretch; justify-content: center;
    pointer-events: none;
}
.multiview-box {
    margin: 0; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    pointer-events: auto;
}
.multiview-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.multiview-title { font-size: 13px; font-weight: 700; color: var(--text-0); }
.multiview-grid {
    flex: 1 1 auto; overflow: auto; padding: 16px;
    display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start;
}
.multiview-cell { display: flex; flex-direction: column; gap: 4px; }
.multiview-label { font-size: 11px; color: var(--text-2); }
.multiview-frame-wrap {
    position: relative; overflow: hidden;
    /* UX audit m3: the letterbox around portrait previews matches the dark
       stage instead of flashing white. */
    background: var(--bg-0, #101317); border: 1px solid var(--line);
}
.multiview-frame { border: 0; }
.multiview-frame-wrap .safe-area-guide {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    border: 1px dashed rgba(255, 179, 0, 0.65);
}
.multiview-frame-wrap .safe-area-guide--action {
    border-color: rgba(79, 140, 255, 0.7);
}
.multiview-frame-wrap .safe-area-tag {
    position: absolute;
    top: -1px;
    left: 2px;
    transform: translateY(-100%);
    font-size: 9px;
    color: rgba(255, 179, 0, 0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.multiview-frame-wrap .safe-area-guide--action .safe-area-tag {
    color: rgba(79, 140, 255, 0.9);
}

/* JS source editor (audit #8 P1/P2 — the JS author workflow) */
.jsedit-overlay {
    position: absolute; inset: 0; z-index: 50;
    background: rgba(8, 10, 14, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.jsedit-box {
    flex: 0 1 1120px; width: min(1120px, 100%); height: min(760px, 100%);
    min-width: 0; min-height: 360px;
    display: flex; flex-direction: column;
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.jsedit-header {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 7px 12px; border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.jsedit-title-wrap {
    display: flex; align-items: baseline; gap: 8px;
    min-width: 0; overflow: hidden;
}
.jsedit-title { font-size: 13px; font-weight: 700; color: var(--text-0); }
.jsedit-meta {
    flex: 0 0 auto; font-size: 10px; color: var(--text-2);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.jsedit-picker { max-width: 360px; }
.jsedit-body { flex: 1 1 auto; display: flex; min-height: 0; }
.jsedit-textarea {
    flex: 1 1 auto; resize: none; border: 0; outline: none;
    padding: 12px; background: var(--bg-0); color: var(--text-0);
    font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
    tab-size: 2;
}
.jsedit-empty {
    margin: auto; padding: 24px; color: var(--text-2);
    font-size: 12px; text-align: center;
}

/* ── Dock Tabs System (Redesign AAA) ─────────────────────────────────────── */
/* Docked source editor: the Pinegrow-style code companion for visual edits. */
.source-dock-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-0);
}
.source-dock-header {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    min-width: 0;
    min-height: var(--bar-h);
    padding: var(--gap-1) var(--gap-2);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-1);
    overflow: hidden;
}
.source-tabs {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.source-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    min-width: 0;
    max-width: 160px;
    height: var(--row-h);
    padding: 0 var(--gap-2);
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.source-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-0);
}
.source-tab.active {
    background: rgba(33, 147, 251, 0.16);
    border-color: rgba(33, 147, 251, 0.45);
    color: var(--text-0);
}
.source-tab .ms-icon { flex: 0 0 auto; font-size: 15px; color: var(--primary); }
.source-tab span:not(.ms-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-find {
    flex: 0 1 150px;
    min-width: 82px;
    height: var(--row-h);
    padding: 0 var(--gap-2);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-0);
    outline: none;
}
.source-find:focus { border-color: var(--primary-strong); }
.source-find-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 24px;
    height: var(--row-h);
    padding: 0 var(--gap-1);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--text-2);
    font: var(--fs-1)/1 "Chivo Mono", ui-monospace, Menlo, monospace;
}
.source-find-count.empty { color: var(--tertiary); }
.source-status {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    min-height: var(--row-h);
    padding: 0 var(--gap-2);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-0);
    color: var(--text-2);
    font: var(--fs-1)/1.2 "Chivo Mono", ui-monospace, Menlo, monospace;
}
.source-status-path {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-status-badge {
    flex: 0 0 auto;
    color: var(--text-2);
}
.source-status-badge.dirty { color: var(--tertiary); }
.source-selection-chip {
    flex: 0 1 220px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--primary);
    background: rgba(33, 147, 251, 0.10);
}
.source-editor-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.source-gutter {
    /* Explicit width alongside the flex basis: the engine currently drops
     * flex-basis on text-leaf items (see audit), width is the reliable rail. */
    flex: 0 0 42px;
    width: 42px;
    min-height: 0;
    margin: 0;
    padding: var(--gap-2) var(--gap-2) var(--gap-2) 0;
    overflow: hidden;
    border-right: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-2);
    font: var(--fs-2)/1.5 "Chivo Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    text-align: right;
    user-select: none;
}
/* Highlight stack: a colored layer under a transparent-text textarea. Both
 * share the exact font box + white-space:pre so glyphs align 1:1; the
 * textarea contributes only caret + selection + input handling. */
.source-editor-stack {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-0);
}
.source-highlight {
    /* Offset-follows the textarea's internal scroll via style.top (the layer
     * is not an engine scroll container) — the stack clips it. */
    position: absolute;
    left: 0; top: 0; right: 0;
    min-height: 100%;
    margin: 0;
    overflow: visible;
    padding: var(--gap-2) var(--gap-3);
    background: transparent;
    color: var(--text-0);
    font: var(--fs-2)/1.5 "Chivo Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre;
    tab-size: 2;
    pointer-events: none;
}
.source-highlight .hl-line {
    /* Core's inline-fragment path can reuse the same x origin for many
       syntax spans on a minified line. A no-wrap flex strip gives every
       token an explicit sequential box, preventing visible superposition. */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    white-space: pre;
    height: 18px;       /* = 12px font × 1.5 line-height, locked to the
                           textarea's own line grid */
    line-height: 18px;
}
.source-highlight .hl-line > span {
    display: block;
    flex: 0 0 auto;
    height: 18px;
    line-height: 18px;
    white-space: pre;
}
.source-highlight .tok-com  { color: #6a737d; font-style: italic; }
.source-highlight .tok-str  { color: #9ecb72; }
.source-highlight .tok-tag  { color: #6fb3f2; }
.source-highlight .tok-attr { color: #d2a8ff; }
.source-highlight .tok-kw   { color: #f08bb0; }
.source-highlight .tok-num  { color: #e5c07b; }
.source-highlight .tok-sel  { color: #6fb3f2; }
.source-highlight .tok-prop { color: #d2a8ff; }
.source-highlight .tok-val  { color: #9ecb72; }
.source-highlight .tok-punc { color: var(--text-2); }
.source-textarea {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    resize: none;
    border: 0;
    outline: none;
    padding: var(--gap-2) var(--gap-3);
    background: transparent;
    color: transparent;
    caret-color: var(--text-0);  /* text is transparent (colors come from the
                                    highlight layer) — keep the caret visible */
    font: var(--fs-2)/1.5 "Chivo Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre;
    tab-size: 2;
}
/* Exactly one glyph layer is opaque. These explicit state classes mirror the
 * source-panel transition and protect the editor from a stale inline-style
 * removal during Core's cascade: pending tokenization shows the textarea;
 * an installed snapshot shows only the coloured syntax layer. */
.source-textarea.source-highlight-plain {
    color: var(--text-0) !important;
}
.source-textarea.source-highlight-ready {
    color: transparent !important;
}
.source-dirty-dot {
    flex: 0 0 auto;
    color: var(--tertiary);
    font-size: 14px;
    line-height: 1;
}

.dock-tabs {
    display: flex;
    align-items: center;
    background: var(--bg-3);
    border-bottom: 1px solid var(--hairline);
    height: var(--bar-h);
    flex: 0 0 auto;
}
.dock-tab-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    height: 100%;
    padding: 0 var(--gap-2);
    border: none;
    border-right: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-1);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dock-tab-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-0);
}
.dock-tab-btn.active {
    background: var(--bg-2);
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.dock-tab-btn .ms-icon {
    font-size: 14px;
}
/* Slice 1 — apparence vs comportement. The right dock is 320px (280px
   minimum) and now carries FOUR inspector sub-tabs (Layout · Style ·
   States · Bindings) plus Agent. Five icon+label tabs do not fit, and a
   cut tab strip is worse than no icon: in THIS strip only, the icons are
   hidden and the padding is tightened so the four names stay readable.
   The icons stay in the DOM — detached/floating panels and the command
   surface read the same buttons. */
#right-dock-tabs {
    overflow-x: auto;
    scrollbar-width: none;
}
#right-dock-tabs::-webkit-scrollbar { width: 0; height: 0; }
#right-dock-tabs .dock-tab-btn {
    padding: 0 6px;
    gap: 0;
    white-space: nowrap;
}
#right-dock-tabs .dock-tab-btn .ms-icon { display: none; }
/* Agent is not part of the element inspector: it sits apart at the end
   of the strip so the four sub-tabs read as one group. */
#right-dock-tabs .dock-tab-aside {
    margin-left: auto;
    border-left: 1px solid var(--hairline);
}

/* ── Start Screen / Welcome Dashboard (Redesign AAA) ───────────────────── */
.start-screen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-1);
    padding: 28px 32px;
    overflow-y: auto;
    color: var(--text-1);
}
.start-content {
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.start-header {
    /* Slice 7 — brand lockup / headings / close, one row. The close control
       only exists in the overlay state (see [data-start-overlay]). */
    text-align: left;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}
.start-logo {
    width: 132px;
    height: auto;
    margin-bottom: 0;
}
.start-headings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.start-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-0);
}
.start-header p {
    font-size: 12px;
    color: var(--text-2);
}
.start-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--line, rgba(65, 71, 85, 0.4));
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.start-close:hover { color: var(--text-0); border-color: var(--primary); }
.start-close .ms-icon { font-size: 18px; }
.start-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
    gap: 14px;
    align-items: start;
}
.start-col-main,
.start-col-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.start-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
    margin-bottom: 6px;
}
.start-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.start-recent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
}
.start-recent-row:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.045);
}
.start-recent-row:disabled { cursor: default; opacity: 0.6; }
.start-recent-row .ms-icon { font-size: 17px; color: var(--primary); flex: 0 0 auto; }
.start-recent-row:disabled .ms-icon { color: var(--text-2); }
.start-recent-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.start-recent-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.start-recent-sub {
    font-size: 10px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.start-recent-flag {
    flex: 0 1 auto;
    max-width: 46%;
    font-size: 10px;
    color: var(--text-2);
    text-align: right;
    line-height: 1.3;
}
.start-recent-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1px dashed var(--line, rgba(65, 71, 85, 0.4));
    border-radius: 6px;
}
.start-recent-empty .ms-icon { font-size: 20px; color: var(--text-2); }
.start-recent-empty-title { font-size: 12px; font-weight: 700; color: var(--text-1); }
.start-recent-empty-hint { font-size: 10px; color: var(--text-2); line-height: 1.4; }
/* Overlay state — the start screen paints OVER the stage; the document
   behind it is untouched, so the surface must not participate in the flex
   flow of .studio-center-stage. */
.studio-center-stage { position: relative; }
.start-screen[data-start-overlay="true"] {
    position: absolute;
    inset: 0;
    z-index: 120;
}
.start-screen[data-start-overlay="true"] .start-close { display: inline-flex; }
.start-grid {
    display: flex;
    gap: 8px;
}
.start-card {
    background: var(--bg-2);
    border: 1px solid rgba(65, 71, 85, 0.3);
    border-radius: 6px;
    padding: 12px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    text-align: left;
    gap: 8px 10px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    outline: none;
    min-width: 0;
    flex: 1 1 0;
}
.start-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(33, 147, 251, 0.18);
}
.start-card .ms-icon {
    font-size: 24px;
    color: var(--primary);
    grid-row: span 2;
}
.start-card h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-0);
}
.start-card p {
    font-size: 10px;
    color: var(--text-2);
    line-height: 1.35;
}
/* Slice 7 — the .start-workflow / .start-step rules are gone with their
   markup: three static chips that claimed a session state they never read.
   The Session card (.start-status-info) is the single truthful readout. */
.start-status-info {
    background: rgba(33, 147, 251, 0.06);
    border: 1px solid rgba(33, 147, 251, 0.2);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.start-status-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}
.start-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.start-status-row span {
    flex: 0 0 74px;
    color: var(--text-2);
}
.start-status-row strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-0);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-weight: 700;
}
.start-status-row strong[data-ready="true"] {
    color: var(--success);
}
.start-status-info .status-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
}
.start-status-info p {
    font-size: 11px;
    color: var(--text-1);
    font-family: ui-monospace, monospace;
}

/* ── Floating panels (detached bottom tabs) ─────────────────────────────── */
.studio-float-window {
    position: absolute;
    width: 560px;
    height: 360px;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 160px;
    background: var(--bg-1);
    border: 1px solid var(--hairline-strong);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.studio-float-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--gap-1) var(--gap-2) var(--gap-1) var(--gap-3);
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
    cursor: move;
    user-select: none;
}
.studio-float-title {
    flex: 1 1 auto;
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--text-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.studio-float-redock {
    position: relative;
    z-index: 8;
}
.studio-float-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.studio-float-body > .panel-body { flex: 1 1 auto; min-height: 0; }
.studio-float-resize {
    position: absolute;
    z-index: 5;
    user-select: none;
    touch-action: none;
}
.studio-float-resize-n {
    top: 0;
    left: 16px;
    right: 44px;
    height: 7px;
    cursor: ns-resize;
}
.studio-float-resize-e {
    top: 16px;
    right: 0;
    bottom: 16px;
    width: 7px;
    cursor: ew-resize;
}
.studio-float-resize-s {
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
}
.studio-float-resize-w {
    top: 16px;
    left: 0;
    bottom: 16px;
    width: 7px;
    cursor: ew-resize;
}
.studio-float-resize-ne,
.studio-float-resize-nw,
.studio-float-resize-se,
.studio-float-resize-sw {
    /* Grab zones only. They used to carry a two-sided border as a corner
     * bracket; the renderer paints such a border as a closed ring, so each
     * corner showed a small square instead. The resize cursor is the
     * affordance. */
    width: 16px;
    height: 16px;
}
.studio-float-resize-ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}
.studio-float-resize-nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}
.studio-float-resize-se {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}
.studio-float-resize-sw {
    left: 0;
    bottom: 0;
    cursor: nesw-resize;
}
/* Drop feedback while a floating panel hovers its origin strip */
.dock-drop-hint {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: rgba(33, 147, 251, 0.10);
}
.studio-float-dropping { opacity: 0.75; }

/* ── Slice 8 (author → runtime seam) ──────────────────────────────────────
 * Provenance card in the Style tab + authored→computed divergence
 * markers + the statusbar divergence counter. Colours come from the Mako
 * theme (--tertiary = warning/divergence, --primary = action); no token
 * file is touched. */
.prov-card {
    margin: var(--gap-1) 0;
    padding: var(--gap-1) var(--gap-2);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: var(--ab-glass-surface);
    display: flex;
    flex-direction: column;
    gap: var(--gap-0);
}
.prov-head {
    font: 600 var(--fs-1) "Manrope", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3, #7d8894);
}
.prov-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    color: var(--text-1);
    font: 11px "Chivo Mono", monospace;
    text-align: left;
    padding: 2px 0;
    cursor: default;
    overflow: hidden;
}
.prov-row.clickable { cursor: pointer; }
.prov-row.clickable:hover { color: var(--primary); }
.prov-row .prov-sel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-row .prov-where {
    flex: 0 1 auto;
    color: var(--text-3, #7d8894);
    font-size: var(--fs-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prov-more { color: var(--text-3, #7d8894); font-size: var(--fs-1); }

/* Authored value → runtime value */
.div-pair {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gap-0);
    flex: 0 0 auto;
    font: var(--fs-1) "Chivo Mono", monospace;
    white-space: nowrap;
}
.div-pair .div-authored {
    color: var(--text-3, #7d8894);
    text-decoration: line-through;
}
.div-pair .div-arrow,
.div-pair .div-runtime { color: var(--tertiary); }

/* Statusbar divergence counter (selection scope) */
.status-div-badge {
    border: 1px solid var(--tertiary);
    border-radius: 999px;
    background: transparent;
    color: var(--tertiary);
    font: 600 var(--fs-1) "Manrope", sans-serif;
    padding: 1px var(--gap-2);
    cursor: pointer;
    margin-right: var(--gap-1);
}
.status-div-badge:hover { background: rgba(242, 140, 51, 0.12); }

/* Brief flash after the counter scrolls to a divergent property row */
.prop-row.div-flash {
    outline: 2px solid var(--tertiary);
    outline-offset: -1px;
}

/* ═══ Slice ⑨ — document tabs (screens as documents, Unity-scene style) ═══
 * Horizontal tab bar between the center dock tabs and the Stage. Lists the
 * OPEN screens of the project; the active one is underlined in Mako mineral
 * green (--primary). Orange dot = unsaved work on the ACTIVE screen only
 * (Core tracks dirty buffers for the open document; no per-background-doc
 * snapshot exists — documented choice, see slice9-report.md).
 */
#doc-tabs {
    display: none; /* shown once a project has ≥1 open screen */
    align-items: stretch;
    gap: var(--gap-1);
    padding: 0 var(--gap-2);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-1);
    min-height: var(--bar-h);
}
.doc-tabs-list {
    display: flex;
    align-items: stretch;
    gap: var(--gap-0);
    overflow-x: auto;
    scrollbar-width: thin;
    min-width: 0;
}
.doc-tab-wrap {
    display: inline-flex;
    align-items: stretch;
    border-bottom: 2px solid transparent;
}
.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--gap-1) var(--gap-1) var(--gap-1) var(--gap-3);
    border: none;
    background: transparent;
    color: var(--text-2);
    font: 500 var(--fs-2) "Manrope", "ForgeUI Studio CJK", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.doc-tab:hover { color: var(--text-1); background: var(--bg-3); }
.doc-tab-wrap.doc-tab-active {
    border-bottom-color: var(--primary);
}
.doc-tab-wrap.doc-tab-active .doc-tab {
    color: var(--text-0);
}
.doc-tab-label {
    font-family: "Chivo Mono", ui-monospace, Menlo, monospace;
    font-size: var(--fs-1);
}
.doc-tab-dirty {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tertiary); /* orange = warning/divergence per DA */
    flex: none;
}
.doc-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    padding: 0;
}
.doc-tab-close .ms-icon { font-size: 13px; }
.doc-tab-close:hover { color: var(--text-0); background: var(--bg-5); }
.doc-tabs-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    padding: 0;
}
.doc-tabs-add:hover { color: var(--primary); }
.doc-tabs-add .ms-icon { font-size: 17px; }

/* No document → the bar hides with the rest of the editor chrome (same
   rule set that folds the docks away behind the start screen). */
#studio-root[data-document-open="false"] #doc-tabs { display: none !important; }

/* ── Slice ⑩ — global STATE axis (editor-only view context) ─────────────── */
.state-axis {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--gap-1) var(--gap-3);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-2);
    min-height: var(--bar-h);
}
#studio-root[data-document-open="false"] #state-axis { display: none !important; }
.state-axis-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    font-family: "Chivo Mono", monospace;
    font-size: var(--fs-1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    user-select: none;
    white-space: nowrap;
}
.state-axis-label .ms-icon { font-size: 14px; color: var(--text-2); }
.state-axis-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-1);
}
/* One chip family = the existing .chip chrome; only the active-context
   accent is slice-specific: Mako green when Default, orange while a
   non-Default state is being VIEWED (never authored). */
.state-axis-chip {
    font-size: var(--fs-1);
    padding: 1px var(--gap-2);
}
.state-axis-chip-active {
    outline: 1px solid var(--primary);
    color: var(--text-0);
}
.state-axis-chip-viewing {
    outline-color: var(--tertiary);
    color: var(--tertiary);
}
.state-axis-viewing {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    margin-left: auto;
    padding: 1px var(--gap-2);
    border-radius: 10px;
    background: var(--tertiary);
    color: var(--bg-0);
    font-size: var(--fs-1);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.state-axis-viewing .ms-icon { font-size: 13px; }

/* ── Slice ⑫ — application menu bar (mockup mk-title row) ─────────────── */
.studio-menubar {
    display: flex;
    align-items: center;
    height: var(--bar-h, 30px);
    padding: 0 var(--gap-2, 8px);
    background: var(--bg-1);
    border-bottom: 1px solid var(--hairline, rgba(58,74,70,.32));
    font-size: var(--fs-2, 12px);
    -webkit-user-select: none;
    user-select: none;
}
.menubar-menus { display: flex; align-items: stretch; gap: 2px; }
.menubar-menus > button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-2);
    font: 500 var(--fs-2, 12px) inherit;
    font-family: inherit;
    padding: 0 var(--gap-2, 8px);
    height: 22px;
    align-self: center;
    border-radius: 4px;
    cursor: pointer;
}
.menubar-menus > button:hover,
.menubar-menus > button[aria-expanded="true"] {
    background: var(--bg-3);
    color: var(--text-1);
}
.menubar-doctitle {
    flex: 1;
    text-align: center;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 var(--gap-3, 12px);
}
.menubar-doctitle b {
    color: var(--text-1);
    font-weight: 600;
    font-family: var(--font-mono, "Chivo Mono", monospace);
    font-size: var(--fs-1, 11px);
}
.menubar-host {
    display: flex;
    align-items: center;
    gap: var(--gap-2, 8px);
    color: var(--text-2);
    white-space: nowrap;
}
.menubar-host-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3);
    box-shadow: none;
}
.menubar-host-dot.live {
    background: var(--primary-strong, #49C978);
    box-shadow: 0 0 0 3px rgba(73, 201, 120, .18);
}
.menubar-lang {
    height: 20px;
    padding: 0 6px;
    font-size: var(--fs-1, 11px);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Slice ⑫ — Tools + shortcuts moved into the menu bar; CI locks keep the
   toolbar nodes alive, rendered inert. */
.studio-header #tools-chip,
.studio-header #btn-shortcuts { display: none !important; }

/* ── Slice ⑬ — merged center tab row + on-stage zoom overlay ──────────── */
.center-tab-row {
    display: flex;
    align-items: stretch;
    min-height: var(--bar-h, 30px);
    border-bottom: 1px solid var(--hairline, rgba(58,74,70,.32));
    background: var(--bg-1);
}
.center-tab-row .center-dock-tabs {
    border-bottom: 0;                /* the row owns the hairline now */
    flex: 0 0 auto;
}
.center-tab-row .doc-tabs {
    border-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
}
.center-tab-row-right {
    display: flex;
    align-items: center;
    gap: var(--gap-1, 4px);
    padding: 0 var(--gap-2, 8px);
}
/* Slice ⑬ — the toolbar slims to the mockup set: zoom/fit live on-stage
   and in View; Safe lives in View; the multi-viewport summary chip
   duplicated the device chip. Nodes stay (CI locks + commands). */
.studio-header #stage-zoom,
.studio-header #stage-fit,
.studio-header #btn-safe,
.studio-header #responsive-summary { display: none !important; }

.stage-zoom-overlay {
    position: absolute;
    right: var(--gap-3, 12px);
    bottom: var(--gap-3, 12px);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bg-2);
    border: 1px solid var(--hairline, rgba(58,74,70,.32));
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);   /* floating surface */
}
.stage-zoom-overlay .szo-btn,
.stage-zoom-overlay .szo-label {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-2);
    height: 22px;
    min-width: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 500 var(--fs-1, 11px) inherit;
    font-family: var(--font-mono, "Chivo Mono", monospace);
    padding: 0 4px;
}
.stage-zoom-overlay .szo-btn .ms-icon { font-size: 15px; }
.stage-zoom-overlay .szo-btn:hover,
.stage-zoom-overlay .szo-label:hover { background: var(--bg-3); color: var(--text-1); }

/* ── Slice ⑭ — statusbar polish toward the mockup ─────────────────────── */
/* The workflow TEXT duplicated the workspace-map chips beside it. */
.studio-statusbar #status-workflow { display: none !important; }
/* Ready gets the mockup's status dot — a REAL element: the engine paints
   ::before at the box origin, over the text (observed live). */
.studio-statusbar .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary-strong, #49C978);
    flex: 0 0 auto;
    margin-right: 2px;
    align-self: center;
}
.studio-statusbar .status-breakpoint {
    color: var(--text-2);
    font-family: var(--font-mono, "Chivo Mono", monospace);
    font-size: var(--fs-1, 11px);
}

/* ── Slice ⑮ — right dock: Inspector | Agent + element header ─────────── */
.right-top-tabs { border-bottom: 1px solid var(--hairline, rgba(58,74,70,.32)); }
/* The agent switch lives in the top strip now. */
#right-dock-tabs .dock-tab-aside { display: none !important; }
/* Sub-strip reads subordinate: same height, quieter type. */
#right-dock-tabs .dock-tab-btn { font-size: var(--fs-1, 11px); }
.inspector-element-header {
    display: flex;
    align-items: center;
    gap: var(--gap-2, 8px);
    padding: var(--gap-2, 8px) var(--gap-3, 12px);
    border-bottom: 1px solid var(--hairline, rgba(58,74,70,.32));
    background: var(--bg-1);
    min-width: 0;
}
.inspector-element-header .ieh-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: var(--bg-3);
    color: var(--primary-strong, #49C978);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.inspector-element-header .ieh-main { min-width: 0; }
.inspector-element-header .ieh-name {
    color: var(--text-1);
    font-family: var(--font-mono, "Chivo Mono", monospace);
    font-size: var(--fs-2, 12px);
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inspector-element-header .ieh-meta {
    color: var(--text-2);
    font-size: var(--fs-1, 11px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Slice ⑯ — user feedback wave ─────────────────────────────────────── */
/* (1) The centered doc title duplicated the doc tabs; slot kept, hidden. */
#menubar-doctitle { display: none !important; }
/* (3) ONE language control: the compact EN chip in the menu bar (click
   opens the locale menu). The legacy select stays hidden wherever a
   stripped shell might still build it. */
#studio-lang { display: none !important; }
#menubar-lang { cursor: pointer; }
#menubar-lang:hover { background: var(--bg-3); color: var(--text-1); }
/* (4) The workspace-map chips confused more than they helped (and could
   paint over the docks); the panels' own tabs are the navigation. */
.studio-statusbar .workspace-map { display: none !important; }
/* (5) Stage|Theme is a mode SWITCH, not more file tabs: boxed segment +
   a separator before the document tabs. */
.center-tab-row .center-dock-tabs {
    align-self: center;
    margin: 0 var(--gap-2, 8px);
    padding: 2px;
    background: var(--bg-2);
    border: 1px solid var(--hairline, rgba(58,74,70,.32));
    border-radius: 6px;
    gap: 2px;
    height: auto;
}
.center-tab-row .center-dock-tabs .center-dock-tab {
    height: 20px;
    border-radius: 4px;
    border-bottom: 0 !important;
}
.center-tab-row .center-dock-tabs .center-dock-tab.center-dock-tab-active {
    background: var(--bg-4, #31313a);
}
.center-tab-row .doc-tabs {
    border-left: 1px solid var(--hairline, rgba(58,74,70,.32));
    padding-left: var(--gap-2, 8px);
}
/* The hidden doc title was the flex spacer: the host block now pushes
   itself to the right edge. */
.studio-menubar .menubar-host { margin-left: auto; }

/* ── Narrow shell: a dock collapses to its own tab strip ──────────────────
   The Stage is an <iframe> rendering the real document at a chosen device
   size, so taking width from it to fit a panel re-lays out the user's UI and
   moves what they were looking at. Below the width where all three columns
   fit their own chrome (230 + 297 + 170 + splitters = 709px), a dock therefore
   turns into a rail of the SAME tab buttons and opens over the stage instead
   of pushing it. Slice 3 removed a vertical rail because it was a second copy
   of these buttons; this is the strip itself, rotated, so nothing duplicates.
   The left dock yields first: it is navigation, it is the widest, and the
   right dock holds the context you consult while editing. */
/* Literals on purpose: tokens.studio.css is a byte-snapshot guarded by a CI
   parity test, and a second :root block does not resolve in this engine —
   an unresolved var() collapsed `flex: 0 0 44px` to a 0px rail. */
.studio-body { position: relative; }

/* Rail */
.studio-dock-left[data-collapsed="true"],
.studio-dock-right[data-collapsed="true"] {
    flex: 0 0 44px;
    width: 44px;
    min-width: 0;
}
[data-collapsed="true"] > .dock-tabs {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    border-bottom: none;
}
[data-collapsed="true"] > .dock-tabs .dock-tab-btn {
    height: 44px;
    justify-content: center;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
}
/* Only the icon survives; the label returns with the panel. */
[data-collapsed="true"] > .dock-tabs .dock-tab-btn > span:not(.ms-icon) { display: none; }
[data-collapsed="true"] > .dock-tabs .dock-tab-btn .ms-icon { font-size: 18px; }
[data-collapsed="true"] > .dock-tabs .dock-tab-btn.active { box-shadow: none; }
.studio-dock-left[data-collapsed="true"] > .dock-tabs .dock-tab-btn.active {
    box-shadow: inset 2px 0 0 var(--primary);
}
.studio-dock-right[data-collapsed="true"] > .dock-tabs .dock-tab-btn.active {
    box-shadow: inset -2px 0 0 var(--primary);
}
/* A collapsed dock hides its panels until the rail is used. */
[data-collapsed="true"] > .dock-panel { display: none !important; }

/* Peek: the panel floats over the stage at its real width, so the iframe
   never reflows just to consult a tree. Elevation is the shadow alone. */
[data-collapsed="true"][data-peek="true"] > .dock-panel {
    display: flex !important;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: calc(100% - 52px);
    z-index: 30;
    background: var(--bg-2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    animation: dock-peek-in 140ms cubic-bezier(0.2, 0, 0, 1);
}
.studio-dock-left[data-collapsed="true"][data-peek="true"] > .dock-panel { left: 44px; }
.studio-dock-right[data-collapsed="true"][data-peek="true"] > .dock-panel { right: 44px; }

@keyframes dock-peek-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}
.studio-dock-right[data-collapsed="true"][data-peek="true"] > .dock-panel {
    animation-name: dock-peek-in-right;
}
@keyframes dock-peek-in-right {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-collapsed="true"][data-peek="true"] > .dock-panel { animation: none; }
}

/* A rail cannot be dragged, so its splitter goes with it. */
#studio-root[data-shell="compact"] .studio-body > .studio-splitter[data-split="left"],
#studio-root[data-shell="focus"] .studio-body > .studio-splitter[data-split="left"],
#studio-root[data-shell="focus"] .studio-body > .studio-splitter[data-split="right"] {
    display: none;
}

/* Different embedded hosts resolve the same menu font with different glyph
   metrics (Forge measured 379px where Unity measured 259px). In focus mode the
   six real menu labels stay reachable; spacing compresses and the redundant
   host/locale badge yields. This preserves commands instead of hiding them in
   an undiscoverable hamburger. */
#studio-root[data-shell="focus"] .menubar-menus { gap: 0; }
#studio-root[data-shell="focus"] .menubar-menus > button {
    padding-inline: 2px;
    font-size: var(--fs-1, 11px);
}
#studio-root[data-shell="focus"] .menubar-host { display: none; }

/* ── Narrow shell: the status bar sheds what the toolbar already says ──────
   Measured at 340px the status bar needed 391px and was the ONLY row that did
   not fit -- the menubar (259px), header and body all did. Its two widest
   pieces duplicate the toolbar: `status-breakpoint` restates the device chip
   (1920x1080) and `status-runtime` restates the Run toggle. Hiding those in
   focus mode removes redundancy, not information, which is the product rule
   that system status has one source of truth. The document name stays and
   ellipsizes, because nothing else names the subject being edited. */
#studio-root[data-shell="focus"] #status-runtime,
#studio-root[data-shell="focus"] #status-breakpoint,
#studio-root[data-shell="focus"] #status-transport {
    display: none;
}
#studio-root[data-shell="focus"] .studio-statusbar .spacer { display: none; }
#studio-root[data-shell="focus"] #status-doc {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

/* Panel repair tranche — loaded after studio-kit.css; Timeline remains owned
   by its dedicated stylesheet/worker. */
.save-dirty-badge {
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 1;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 7px;
    box-sizing: border-box;
    background: var(--danger, #e54);
    color: #fff;
    font: 800 8px/13px Inter, sans-serif;
    text-align: center;
    pointer-events: none;
}
#btn-save > .ms-icon { transform: translate(-3px, 2px); }

/* Code owns both axes; fixed viewport width prevents the translated highlight
   layer from growing into Inspector/Agent. Floating Code has no outer scroll. */
.source-editor-stack { contain: layout; overflow: hidden; }
.source-highlight { right: auto; width: 100%; max-width: 100%; }
.source-highlight .hl-line { max-width: none; }
.studio-float-body { overflow: hidden; min-width: 0; min-height: 0; }
.studio-float-body > .source-dock-panel { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }

/* Open UI Screen tree. */
#screen-menu[role="tree"] { min-width: 280px; max-height: min(480px, 70vh); overflow: auto; }
#screen-menu .studio-menu-folder { font-weight: 700; color: var(--text-1); }
#screen-menu .studio-menu-item[aria-level] { box-sizing: border-box; }
#screen-menu .studio-menu-sub { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* Changes follows the mockup's master/detail ratio: finite 268px master and a
   bounded inline diff. */
.scm-master-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.scm-header { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-bottom: 1px solid var(--hairline); }
.scm-summary { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.scm-refresh, .scm-restore { appearance: none; min-height: 22px; padding: 0 8px; border: 1px solid var(--hairline-strong); border-radius: 4px; background: var(--bg-2); color: var(--text-1); }
.scm-split { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.scm-master { width: 268px; flex: 0 0 268px; min-height: 0; overflow: auto; border-right: 1px solid var(--hairline); background: var(--bg-1); }
.scm-item { appearance: none; display: flex; width: 100%; min-width: 0; align-items: center; gap: 7px; padding: 7px 8px; text-align: left; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; color: var(--text-1); }
.scm-item:hover, .scm-item.selected { background: var(--selection-soft); color: var(--text-0); }
.scm-mark { flex: 0 0 16px; color: var(--primary); text-align: center; font-weight: 800; }
.scm-item-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.scm-item-copy strong, .scm-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scm-item-copy small { color: var(--text-2); font-size: 9px; }
.scm-detail { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: 8px; }
.scm-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.scm-detail-head strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scm-state { flex: 0 0 auto; padding: 2px 6px; border-radius: 10px; background: var(--selection-soft); color: var(--text-1); font-size: 9px; text-transform: uppercase; }
.scm-inline-diff { max-width: 100%; max-height: 100%; margin: 0; overflow: auto; color: var(--text-1); background: var(--bg-0); font: 10px/16px "Chivo Mono", monospace; }
.scm-diff-line { display: grid; grid-template-columns: 42px 42px minmax(max-content, 1fr); min-height: 16px; white-space: pre; }
.scm-diff-line > code { display: block; min-width: 0; padding: 0 8px; background: transparent; color: inherit; font: inherit; }
.scm-diff-no { position: sticky; z-index: 1; padding: 0 6px; border-right: 1px solid var(--hairline); background: var(--bg-1); color: var(--text-3); text-align: right; user-select: none; }
.scm-diff-old { left: 0; }
.scm-diff-new { left: 42px; }
.scm-diff-add { color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 13%, transparent); }
.scm-diff-delete { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.scm-diff-hunk { color: var(--text-0); background: var(--selection-soft); }
.scm-diff-meta { color: var(--text-2); }
.scm-diff-context { color: var(--text-1); }
.scm-checkpoint-meta, .scm-detail-note { color: var(--text-2); }
.scm-checkpoint-files { margin: 8px 0; padding-left: 20px; color: var(--text-1); }
@media (max-width: 760px) { .scm-master { width: 210px; flex-basis: 210px; } }

/* Assets navigation + sticky preview. */
#assets-panel { position: relative; overflow: auto; }
#assets-panel .asset-preview { position: sticky; top: 0; z-index: 4; margin-top: 0; background: var(--bg-1); box-shadow: 0 1px 0 var(--hairline); }
.asset-tree { min-width: 0; padding-bottom: 8px; }
.asset-row { min-height: 24px; cursor: default; outline: none; }
.asset-row:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); background: var(--selection-soft); }
.asset-folder { font-weight: 650; }

/* Smart Templates are cards, not an unrelated nested toolbar. */
.insert-smart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px; }
.insert-smart-heading { grid-column: 1 / -1; color: var(--text-2); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.insert-smart-btn { display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--hairline); border-radius: 5px; background: var(--bg-2); color: var(--text-1); text-align: left; cursor: grab; }
.insert-smart-btn:hover, .insert-smart-btn:focus-visible { border-color: var(--primary); background: var(--selection-soft); }
.insert-smart-btn > .ms-icon { flex: 0 0 auto; color: var(--primary); }
.insert-smart-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.insert-smart-text strong, .insert-smart-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insert-smart-text small { color: var(--text-2); font-size: 9px; }
@media (max-width: 680px) { .insert-smart { grid-template-columns: minmax(0, 1fr); } }