/* THE APPLICATION SHELL's look (lib/shell/shell.js): a menu bar, the dock (dockview, themed here), a
   status bar. Load after lib/dockview/dockview.css.

   ONE PALETTE, the mockups' (ui-mockups/mock.css), which the user preferred to the
   first shell's VS Code greys: dark slate surfaces, blue-grey ink, the application's own selection
   blue-grey. As tokens on :root rather than on .shell, because a popped-out panel lives in another
   document (popout.html links this file) where .shell is not its ancestor.

   THE PROPERTY TABLES TAKE IT TOO. Tweakpane reads every colour as var(--tp-..., its default), so
   setting those on .shell-panel re-themes every table in every panel -- the Builder's properties,
   the renderer's folders, the view toolbar's popovers -- without touching lib/guistuff. */
:root {
    --sh-bg: #0f1214;          /* behind everything */
    --sh-panel: #16191c;       /* panels, the charts' own surface (polar.js POLAR_SURFACE) */
    --sh-raised: #1d2226;      /* headers, bars, a card on a panel */
    --sh-tabs: #13171a;        /* the tab strip */
    --sh-line: #2a3138;        /* dividers */
    --sh-ink: #dde3e8;         /* text */
    --sh-muted: #8fa3b3;       /* labels, units, secondary text */
    --sh-faint: #5d6b77;
    --sh-accent: #7896af;      /* the selection blue-grey, rgba(120,150,175) */
    --sh-accent-bg: rgba(120, 150, 175, 0.22);
    --sh-strong: #2f5d86;      /* a highlighted row, the chosen preset */
    --sh-warn: #d9a226;
    --sh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sh-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--sh-bg); color: var(--sh-ink);
         font: 13px/1.4 var(--sh-sans); color-scheme: dark; }
.shell-spacer { flex: 1; }

/* the menu bar */
.shell-menubar { display: flex; align-items: center; height: 28px; padding: 0 6px; background: var(--sh-raised); border-bottom: 1px solid var(--sh-line); flex: none; }
.shell-menus { display: flex; }
.shell-menu { font: inherit; color: var(--sh-ink); background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 2px 10px; cursor: default; }
.shell-menu:hover, .shell-menu.on { background: var(--sh-accent-bg); color: #fff; }
.shell-title { font-size: 11px; letter-spacing: 0.08em; color: var(--sh-faint); text-transform: uppercase; padding-right: 6px; }
.shell-dropdown { position: fixed; z-index: 10000; min-width: 260px; background: #20262b; border: 1px solid #36404a; border-radius: 5px;
                  padding: 4px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); font: 13px/1.4 var(--sh-sans); color: var(--sh-ink); }
.shell-dropdown hr { border: 0; border-top: 1px solid var(--sh-line); margin: 4px 0; }
.shell-item { display: flex; gap: 24px; padding: 4px 14px; white-space: nowrap; cursor: default; }
.shell-item:hover { background: var(--sh-accent-bg); color: #fff; }
.shell-item.off { color: var(--sh-faint); }
.shell-item.off:hover { background: transparent; }
.shell-item kbd { margin-left: auto; font: 11px var(--sh-mono); color: var(--sh-faint); }
.shell-item:hover kbd { color: var(--sh-muted); }

/* the dock: dockview's dark theme in this palette */
.shell-dock { position: relative; flex: 1; min-height: 0; }
.shell-dock.dockview-theme-dark, .dv-popout-window, .dockview-theme-dark {
    --dv-group-view-background-color: var(--sh-panel);
    --dv-tabs-and-actions-container-background-color: var(--sh-tabs);
    --dv-activegroup-visiblepanel-tab-background-color: var(--sh-panel);
    --dv-activegroup-hiddenpanel-tab-background-color: var(--sh-tabs);
    --dv-inactivegroup-visiblepanel-tab-background-color: #1a1e22;
    --dv-inactivegroup-hiddenpanel-tab-background-color: var(--sh-tabs);
    --dv-tab-divider-color: var(--sh-line);
    --dv-activegroup-visiblepanel-tab-color: #fff;
    --dv-activegroup-hiddenpanel-tab-color: var(--sh-muted);
    --dv-inactivegroup-visiblepanel-tab-color: #b9c4cd;
    --dv-inactivegroup-hiddenpanel-tab-color: var(--sh-faint);
    --dv-tabs-and-actions-container-height: 30px;
    --dv-tabs-and-actions-container-font-size: 12.5px;
    --dv-separator-border: var(--sh-line);
    --dv-drag-over-background-color: rgba(120, 150, 175, 0.28);
    --dv-sash-color: transparent;
    --dv-active-sash-color: var(--sh-accent);
}
.dv-tab, .dv-default-tab-content { display: flex; align-items: center; white-space: nowrap; }
.shell-panel { height: 100%; width: 100%; position: relative; overflow: auto; background: var(--sh-panel); color: var(--sh-ink);
               /* the property tables (Tweakpane) in this palette */
               --tp-base-background-color: var(--sh-panel);
               --tp-base-shadow-color: transparent;
               --tp-base-font-family: var(--sh-sans);
               --tp-container-background-color: rgba(120, 150, 175, 0.10);
               --tp-container-background-color-hover: rgba(120, 150, 175, 0.15);
               --tp-container-background-color-focus: rgba(120, 150, 175, 0.19);
               --tp-container-background-color-active: rgba(120, 150, 175, 0.24);
               --tp-container-foreground-color: var(--sh-muted);
               --tp-input-background-color: var(--sh-bg);
               --tp-input-background-color-hover: #13171a;
               --tp-input-background-color-focus: #171c20;
               --tp-input-background-color-active: #1b2126;
               --tp-input-foreground-color: var(--sh-ink);
               --tp-label-foreground-color: var(--sh-muted);
               --tp-monitor-background-color: var(--sh-bg);
               --tp-monitor-foreground-color: var(--sh-muted);
               --tp-button-background-color: #2a3640;
               --tp-button-background-color-hover: #33424e;
               --tp-button-background-color-focus: #3a4b58;
               --tp-button-background-color-active: #425566;
               --tp-button-foreground-color: var(--sh-ink);
               --tp-groove-foreground-color: var(--sh-line);
               --tp-container-unit-size: 22px;
               --tp-blade-border-radius: 3px;
               --tp-base-border-radius: 0; }
/* THE WORKBENCH MOCKUP'S TYPE, which the user found lighter than Tweakpane's: the system face at 13px,
   regular weight (Tweakpane sets 500 on everything and bold on its dropdowns and buttons), section
   titles as small muted capitals rather than bars of text, numbers in the monospace face. The size is
   also set on each table by its host, since PropertyTable callers set one inline. */
.shell-panel .tp-rotv { font-size: 13px; font-weight: 400; line-height: 1.25; }
.shell-panel .tp-lstv_s, .shell-panel .tp-btnv_b, .shell-panel .tp-btnv_t { font-weight: 400; }
.shell-panel .tp-fldv_b { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted);
                          background-color: transparent; }
.shell-panel .tp-fldv_b:hover { color: var(--sh-ink); }
.shell-panel .tp-txtv_i { font-family: var(--sh-mono); font-size: 12px; }
.shell-panel .tp-lblv_l { color: var(--sh-muted); }
.shell-missing { padding: 12px; color: var(--sh-muted); }

/* whose panel it is, on its tab: a dot in the module's colour */
.shell-mod { width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; flex: none; }
.shell-mod-renderer { background: #6fa6d6; }
.shell-mod-optics { background: #8cc46a; }
.shell-mod-builder { background: #d9a266; }
.shell-mod-app { background: #b58ad6; }

/* a group's own buttons: float, pop out, maximise */
/* shown only while the pointer is over the tab strip: three buttons on every group, all the time, was noise */
.shell-gact { display: flex; height: 100%; align-items: center; padding-right: 4px; opacity: 0; transition: opacity 0.12s; }
.dv-tabs-and-actions-container:hover .shell-gact, .shell-gact:focus-within { opacity: 1; }
.shell-gact button { font: 13px/1 var(--sh-sans); color: var(--sh-faint); background: transparent; border: 0; padding: 2px 6px; cursor: pointer; border-radius: 3px; }
.shell-gact button:hover { color: #fff; background: var(--sh-accent-bg); }

/* the status bar */
.shell-status { display: flex; align-items: center; gap: 16px; height: 22px; padding: 0 10px; background: #12304a; color: #cfe0ee;
                font: 11.5px var(--sh-mono); flex: none; white-space: nowrap; overflow: hidden; }
.shell-status-left { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shell-status-jobs { display: flex; gap: 14px; align-items: center; }
/* an element of the owner's at the right (SHELL.statusRight): the raytracer's says which build is shown (builder/modeline.js),
   `baked` lit so a switch is seen at a glance */
.shell-status-right { flex: none; color: var(--sh-muted); cursor: default; }
.shell-status-right .baked { color: #ffcc33; }
.shell-job { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.shell-job-bar { position: relative; width: 90px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.shell-job-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #6cb6ff; transition: width 0.2s; }
/* no total: a slice that runs across, working and nothing more */
.shell-job-bar.busy > i { width: 30%; animation: shell-job-run 1.2s linear infinite; }
@keyframes shell-job-run { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
/* a panel waiting (busyOverlay): dimmed, the wait said in its middle, the pointer taken */
.shell-busy { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
    background: rgba(8, 14, 20, 0.55); cursor: progress; }
.shell-busy-card { min-width: 220px; padding: 12px 16px; border-radius: 6px; background: rgba(20, 30, 40, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08); color: #dfe8f0; text-align: center; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); }
.shell-busy-text { font-size: 13px; margin-bottom: 8px; }
.shell-busy-bar { width: 100%; height: 6px; }
.shell-busy-secs { font: 11px var(--sh-mono); color: var(--sh-muted); margin-top: 6px; min-height: 1em; }

/* the layout presets, in the menu bar */
.shell-presets { display: flex; gap: 2px; margin-right: 12px; background: #111417; border: 1px solid var(--sh-line); border-radius: 5px; padding: 1px; }
.shell-preset { font: 12px var(--sh-sans); color: var(--sh-muted); background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 1px 10px; cursor: pointer; }
.shell-preset:hover { color: #fff; background: var(--sh-accent-bg); }
.shell-preset.on { color: #fff; background: #2b3a48; border-color: #3b5268; }
.shell-presets:empty { display: none; }

/* the command palette */
.shell-palette { position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, 0.35); }
.shell-palette[hidden] { display: none; }
.shell-palette-box { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: 600px; max-width: calc(100% - 32px);
                     background: var(--sh-raised); border: 1px solid #3a444d; border-radius: 7px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); overflow: hidden; }
.shell-palette-box input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--sh-line); background: transparent; color: var(--sh-ink);
                           padding: 10px 12px; font: 14px var(--sh-sans); outline: none; }
.shell-palette-item { display: flex; gap: 12px; padding: 5px 12px; font: 12.5px var(--sh-sans); color: var(--sh-ink); cursor: pointer; }
.shell-palette-item.on, .shell-palette-item:hover { background: var(--sh-accent-bg); color: #fff; }
.shell-palette-item.none { color: var(--sh-faint); cursor: default; background: transparent; }
.shell-palette-where { margin-left: auto; color: var(--sh-faint); font: 11px var(--sh-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.shell-palette-item.on .shell-palette-where { color: var(--sh-muted); }

/* the parameters panel (paramspanel.js): every setting by the name a script or a timeline uses */
.shell-params { display: flex; flex-direction: column; height: 100%; min-height: 0; font: 12.5px var(--sh-sans); }
.shell-params-top { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--sh-line); background: var(--sh-raised); flex: none; }
.shell-params-top input { flex: 1; min-width: 0; font: inherit; color: var(--sh-ink); background: var(--sh-bg); border: 1px solid var(--sh-line); border-radius: 3px; padding: 3px 6px; }
.shell-params-top .shell-params-only { flex: none; display: flex; align-items: center; white-space: nowrap; color: var(--sh-muted); cursor: pointer; }
.shell-params-top .shell-params-only input { flex: none; margin: 0; padding: 0; }
.shell-params-list { flex: 1; overflow: auto; min-height: 0; padding-bottom: 8px; }
.shell-params-group { font-size: 11px; letter-spacing: 0.04em; color: var(--sh-muted); padding: 8px 10px 3px; }
.shell-param { display: grid; grid-template-columns: minmax(0, 1fr) 128px 40px 22px; gap: 6px; align-items: center; padding: 0 10px; min-height: 24px; }
.shell-param:hover { background: rgba(120, 150, 175, 0.07); }
.shell-param-label { color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-param-unit { color: var(--sh-faint); font-size: 11px; white-space: nowrap; overflow: hidden; }
.shell-param-value { width: 100%; box-sizing: border-box; font: 12px var(--sh-mono); color: var(--sh-ink); background: var(--sh-bg);
                     border: 1px solid var(--sh-line); border-radius: 3px; padding: 2px 5px; min-width: 0; }
.shell-param-value:focus { outline: 2px solid var(--sh-accent); outline-offset: 0; }
.shell-param-go { visibility: hidden; font: 13px/1 var(--sh-sans); color: var(--sh-faint); background: transparent; border: 0; border-radius: 3px; padding: 2px 5px; cursor: pointer; }
.shell-param:hover .shell-param-go { visibility: visible; }
.shell-param-go:hover { color: #fff; background: var(--sh-accent-bg); }

/* A CHART PANEL (the raytracer's optics charts, mockup F): the chart's own strip of controls along the top
   (lib/pathtracer/strip.js, which styles itself), the canvas filling the rest edge to edge, one line of readout
   about the pointer over it, bottom left. The plot is a box of its own so the canvas, the readout and a zoom's
   rectangle share its corner -- whatever height the strip has once it wraps. */
.shell-chart { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }
.shell-chart .shell-plot { position: relative; flex: 1 1 0; min-height: 0; }
.shell-chart canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shell-readout { position: absolute; left: 8px; bottom: 6px; max-width: calc(100% - 16px); font: 11.5px var(--sh-mono); color: var(--sh-ink);
                 background: rgba(15, 18, 20, 0.78); padding: 2px 6px; border-radius: 3px; pointer-events: none;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-readout:empty { display: none; }
.shell-band { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.9); background: rgba(127, 224, 255, 0.12); pointer-events: none; display: none; }

/* A PANE THAT RUNS SOMETHING AND SAYS WHAT CAME OUT (the optics Analysis pane): a run bar, headings,
   results as cards, a faint note */
.shell-runbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--sh-line); }
.shell-runbar input { width: 48px; font: 12px var(--sh-mono); color: var(--sh-ink); background: var(--sh-bg); border: 1px solid var(--sh-line);
                      border-radius: 3px; padding: 2px 5px; }
/* the ray count's multiplier, beside the number (optics/page.js TIMES) */
.shell-runbar select { font: 12px var(--sh-mono); color: var(--sh-ink); background: var(--sh-bg); border: 1px solid var(--sh-line);
                       border-radius: 3px; padding: 1px 2px; }
.shell-runbar button { font: 12px var(--sh-sans); color: #fff; background: var(--sh-strong); border: 1px solid #3b6f9c; border-radius: 4px;
                       padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.shell-runbar button:disabled { opacity: 0.5; cursor: default; }
/* a switch beside ▶ Run, not a second ▶: outlined while off, filled while on */
.shell-runbar button.live, .shell-runbar button.sum { color: var(--sh-muted); background: transparent; border-color: var(--sh-line); padding: 3px 8px; }
.shell-runbar button.live.on, .shell-runbar button.sum.on { color: #fff; background: #2d6a4f; border-color: #3f8f6b; }
/* when it ran, at the right; onto a line of its own in a pane too narrow for it beside the buttons */
.shell-runbar .when { flex: 1 1 auto; min-width: 120px; text-align: right; font-size: 11.5px; color: var(--sh-faint); white-space: nowrap;
                      overflow: hidden; text-overflow: ellipsis; }
.shell-runbar .when.stale { color: var(--sh-warn); }
.shell-head { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted); padding: 10px 10px 2px;
              display: flex; gap: 6px; align-items: center; min-height: 26px; }
.shell-head .name { color: var(--sh-accent); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.shell-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; padding: 4px 10px 6px; }
.shell-card { background: var(--sh-raised); border: 1px solid var(--sh-line); border-radius: 5px; padding: 5px 8px; min-width: 0; }
.shell-card .k { font-size: 11px; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-card .v { font: 600 15px/1.25 var(--sh-mono); color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-card .e { font: 11px var(--sh-mono); color: var(--sh-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-note { font: 12px var(--sh-sans); color: var(--sh-faint); padding: 2px 10px 6px; }
.shell-note:empty { display: none; }

/* THE ANALYSIS PANE'S SECTIONS, a box each (mockup G, proposal B): the data's folders (Intensity, Map) and
   the results' section (the selected chart's was one too, until a chart's settings went onto the chart), headed in the ink colour with an icon; what folds away below
   stays in the small muted capitals, which is what makes it read as "more". The icons are masks the
   pane sets as --ic-* (optics/page.js). */
.shell-ana .ana-data .tp-fldv, .shell-ana .ana-sec { margin: 8px; border: 1px solid #36404a; border-radius: 7px; background: #1a1e22; overflow: hidden; }
.shell-ana :is(.ana-data .tp-fldv_b, .ana-sec > .shell-head) {
    position: relative; color: var(--sh-ink); font: 600 12.5px var(--sh-sans); text-transform: none; letter-spacing: 0;
    padding: 8px 10px 4px 33px; height: auto; background: transparent; }
.shell-ana :is(.ana-data .tp-fldv_b, .ana-sec > .shell-head)::before {
    content: ''; position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; margin-top: -5.5px; background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.shell-ana .ana-data .tp-fldv:nth-child(1) .tp-fldv_b { --ic: var(--ic-polar); }
.shell-ana .ana-data .tp-fldv:nth-child(2) .tp-fldv_b { --ic: var(--ic-map); }
.shell-ana .ana-results > .shell-head { --ic: var(--ic-table); }
.shell-ana .ana-sec .shell-card { background: #22282d; }
.shell-ana .ana-more { margin-top: 6px; }

/* THE RENDERER PANEL'S BOXES, the same look (the user, 2026-10-04: "groups with boxed outlines, like the analysis
   settings"; lib/pathtracer/settingsui.js RENDERER_BOXES): a panel marked .shell-boxes makes each of its table's
   top-level folders a box, headed in the ink colour with the icon settingsui puts on the folder (--ic, data-icon).
   A folder inside a box -- a developer's groups in Light sources -- keeps the small muted capitals, set in a
   little, so it reads as part of its box. */
.shell-boxes .tp-rotv_c > .tp-fldv { margin: 8px; border: 1px solid #36404a; border-radius: 7px; background: #1a1e22; overflow: hidden; }
.shell-boxes .tp-rotv_c > .tp-fldv > .tp-fldv_b {
    position: relative; color: var(--sh-ink); font: 600 12.5px var(--sh-sans); text-transform: none; letter-spacing: 0;
    padding: 8px 10px 4px 12px; height: auto; background: transparent; }
.shell-boxes .tp-rotv_c > .tp-fldv[data-icon] > .tp-fldv_b { padding-left: 33px; }
.shell-boxes .tp-rotv_c > .tp-fldv[data-icon] > .tp-fldv_b::before {
    content: ''; position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; margin-top: -5.5px; background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.shell-boxes .tp-rotv_c > .tp-fldv .tp-fldv { margin: 2px 4px 2px 8px; }
.shell-boxes .tp-rotv_c > .tp-fldv > .tp-fldv_c { padding-bottom: 4px; }

/* A LIBRARY PANEL (library/panel.js): a search bar, chips to filter, items by category */
.shell-lib { display: flex; flex-direction: column; height: 100%; min-height: 0; font: 13px var(--sh-sans); }
.shell-lib-bar { display: flex; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--sh-line); background: var(--sh-raised); flex: none; }
.shell-lib-bar input, .shell-lib-form input, .shell-lib-rename { flex: 1; min-width: 0; font: inherit; color: var(--sh-ink); background: var(--sh-bg);
    border: 1px solid var(--sh-line); border-radius: 3px; padding: 3px 6px; }
.shell-lib-form { display: flex; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--sh-line); flex: none; }
.shell-lib-form[hidden] { display: none; }
.shell-lib-chips { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 4px; flex: none; }
.shell-lib-chiprow { display: flex; flex-wrap: wrap; gap: 3px; }
.shell-lib-chip { font: 12px var(--sh-sans); color: var(--sh-muted); background: transparent; border: 1px solid var(--sh-line); border-radius: 10px;
    padding: 1px 9px; cursor: pointer; }
.shell-lib-chip:hover { color: var(--sh-ink); }
.shell-lib-chip.on { color: #fff; background: var(--sh-accent-bg); border-color: var(--sh-accent); }
/* the tag row: smaller than the kind chips, dashed until lit; its fold toggle plainer still */
.shell-lib-tags[hidden] { display: none; }
.shell-lib-tag { font-size: 11px; padding: 0 7px; border-style: dashed; }
.shell-lib-tag.on { border-style: solid; }
.shell-lib-tag.more { border-color: transparent; color: var(--sh-faint); }
.shell-lib-list { flex: 1; min-height: 0; overflow: auto; padding: 0 0 8px; }
.shell-lib-cat { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted); padding: 10px 10px 3px; }
.shell-lib-item { display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 12px; min-height: 28px; cursor: default; }
.shell-lib-item:hover { background: var(--sh-accent-bg); }
.shell-lib-icon { color: var(--sh-muted); display: grid; place-items: center; }
.shell-lib-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-lib-mine { font-size: 10.5px; color: var(--sh-faint); border: 1px solid var(--sh-line); border-radius: 3px; padding: 0 4px; }
.shell-lib-acts { display: flex; visibility: hidden; }
.shell-lib-item:hover .shell-lib-acts { visibility: visible; }
.shell-lib-acts button { width: 22px !important; height: 22px !important; }
.shell-lib-empty { padding: 16px 12px; color: var(--sh-faint); }
.shell-lib-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--sh-line); }
/* the library's grid (the default view): a picture per item, its name under it, its kind in a corner */
.shell-lib-viewrow { display: flex; align-items: center; gap: 2px; }
.shell-lib-viewrow button { width: 24px !important; height: 24px !important; }
.shell-lib-viewrow input[type=range] { flex: 1; max-width: 140px; margin-left: 6px; accent-color: var(--sh-accent); }
.shell-lib-list.grid .shell-lib-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 112px), 1fr)); gap: 8px; padding: 2px 10px 6px; }
.shell-lib-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; min-height: 0; border-radius: 6px; }
.shell-lib-tile:hover { background: transparent; }
.shell-lib-pic { aspect-ratio: 1; border-radius: 6px; overflow: hidden; display: grid; place-items: center; color: var(--sh-faint);
    background: radial-gradient(120% 90% at 50% 20%, #2b3137 0%, #1a1e22 60%, #15181b 100%); border: 1px solid var(--sh-line); }
.shell-lib-pic img, .shell-lib-pic canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.shell-lib-tile:hover .shell-lib-pic { border-color: var(--sh-accent); }
.shell-lib-tile .shell-lib-name { font-size: 12px; color: var(--sh-ink); text-align: center; line-height: 1.25; padding: 0 2px;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shell-lib-kind { position: absolute; left: 5px; top: 5px; color: var(--sh-muted); background: rgba(15, 18, 20, 0.6); border-radius: 3px; padding: 2px; display: grid; }
.shell-lib-tile .shell-lib-mine { position: absolute; right: 5px; top: 5px; background: rgba(15, 18, 20, 0.6); }
.shell-lib-tile .shell-lib-acts { position: absolute; right: 4px; top: 4px; background: rgba(18, 21, 24, 0.75); border-radius: 5px;
                                  /* five on one's own item: a second row on a small tile rather than past its edge */
                                  flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 8px); }
.shell-lib-tile:hover .shell-lib-mine { display: none; }
.shell-lib-tile .shell-lib-rename { font-size: 12px; }
/* a tile made live by the studio: over its picture, turned by dragging */
.shell-lib-pic { position: relative; }
/* live: a press drags the item out (the cursor says so); after a click, moving turns it (outlined, a move cursor) */
.shell-lib-live { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.shell-lib-live.turning { cursor: move; outline: 2px solid var(--sh-accent, #6cb6ff); outline-offset: -2px; }
/* where a library item may be dropped, while one is dragged over it */
.shell-drop-target { outline: 2px dashed var(--sh-accent, #6cb6ff); outline-offset: -3px; }
.shell-lib-progress { font: 11px var(--sh-mono); color: var(--sh-muted); margin-left: 4px; white-space: nowrap; }
/* A LIBRARY ITEM BEING EDITED (library/edit.js): its name, a dot while unsaved, Save and
   Close, across the top right of the view -- the one panel that cannot be closed away. The view's own
   toolbar holds the top left. */
.shell-edit-strip { position: absolute; top: 8px; right: 8px; z-index: 12; display: flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 10px; background: rgba(18, 21, 24, 0.72); border: 1px solid rgba(160, 175, 190, 0.18); border-radius: 8px;
    backdrop-filter: blur(3px); font: 13px var(--sh-sans); color: var(--sh-ink); }
.shell-edit-strip { max-width: calc(100% - 16px); box-sizing: border-box; }   /* never past the view's edge: the name gives way */
.shell-edit-name { display: flex; align-items: center; gap: 6px; margin-right: 2px; min-width: 0; }
.shell-edit-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-edit-name svg, .shell-edit-strip button { flex: none; }
.shell-edit-dot { color: var(--sh-accent, #6cb6ff); font-size: 11px; }
.shell-edit-dot[hidden] { display: none; }
.shell-edit-q { margin-right: 4px; }
.shell-edit-btn { font: 12px var(--sh-sans); color: var(--sh-ink); background: transparent; border: 1px solid var(--sh-line);
    border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.shell-edit-btn:hover { background: var(--sh-accent-bg); }
.shell-lib-wait { font-size: 11px; color: var(--sh-muted); padding: 2px 2px 0; font-style: italic; }
/* a muted heading inside a dropdown (lib/shell/menu.js { header: true }; the project menu's Scenes and Project) */
.shell-item-head { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted) !important; padding-top: 6px; }
.shell-item-head:hover { background: transparent !important; }
/* THE ROW OVER THE TREE (builder/projectrow.js): the project's name, a ▶ when needed, Undo and
   Redo at its end (builder/toolbar.js) */
.shell-sw { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; min-width: 0; flex: none; }
.shell-sw-title { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 13px var(--sh-sans); color: var(--sh-ink); padding: 3px 0; }
.shell-sw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-sw-note { flex: none; white-space: nowrap; font-weight: 400; font-size: 11px; color: var(--sh-faint); }
.shell-sw-act { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--sh-muted); background: transparent;
    border: 0; border-radius: 4px; cursor: pointer; }
.shell-sw-act:hover { color: #fff; background: rgba(120, 150, 175, 0.3); }
/* THE PROJECTS LIST (workspace/dialog.js): a card over the page, a row per project kept */
.shell-proj { position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.shell-proj-box { width: min(760px, 94vw); max-height: 82vh; display: flex; flex-direction: column; background: #1b2024;
    border: 1px solid #36404a; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); font: 13px var(--sh-sans); color: var(--sh-ink); }
.shell-proj-top { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--sh-line); }
.shell-proj-title { flex: 1; font-size: 15px; font-weight: 600; }
.shell-proj-list { flex: 1; min-height: 80px; overflow: auto; padding: 4px 0; }
.shell-proj-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 16px; border-bottom: 1px solid rgba(42, 49, 56, 0.6); }
.shell-proj-row:hover { background: rgba(120, 150, 175, 0.08); }
.shell-proj-row.here { background: rgba(47, 93, 134, 0.18); }
.shell-proj-main { flex: 1; min-width: 0; }
.shell-proj-name { font-weight: 600; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shell-proj-badge { font-weight: 400; font-size: 10.5px; color: var(--sh-muted); border: 1px solid var(--sh-line); border-radius: 3px; padding: 0 5px; }
.shell-proj-badge.other { color: var(--sh-warn); border-color: rgba(217, 162, 38, 0.4); }
.shell-proj-sub { font-size: 11.5px; color: var(--sh-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 1px; }
.shell-proj-acts { display: flex; align-items: center; gap: 3px; flex: none; }
.shell-proj-q { font-size: 12px; color: var(--sh-warn); margin-right: 4px; }
.shell-proj-btn { font: 12px var(--sh-sans); color: var(--sh-ink); background: transparent; border: 1px solid var(--sh-line); border-radius: 5px;
    padding: 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.shell-proj-btn:hover:not(:disabled) { background: var(--sh-accent-bg); border-color: var(--sh-accent); }
.shell-proj-btn:disabled { opacity: 0.4; cursor: default; }
.shell-proj-btn.main { border-color: var(--sh-accent); }
.shell-proj-btn.icon { padding: 3px 5px; border-color: transparent; color: var(--sh-muted); }
.shell-proj-btn.icon:hover:not(:disabled) { color: #fff; }
.shell-proj-btn.danger { color: #ffb4a8; border-color: rgba(229, 115, 115, 0.6); }
.shell-proj-rename { width: 100%; font: 600 13px var(--sh-sans); color: var(--sh-ink); background: var(--sh-bg); border: 1px solid var(--sh-accent);
    border-radius: 3px; padding: 2px 6px; }
.shell-proj-empty { padding: 18px 16px; color: var(--sh-faint); }
.shell-proj-foot { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--sh-line); font-size: 11.5px; color: var(--sh-faint); }
.shell-proj-foot span { flex: 1; }
/* a submenu's row (lib/shell/menu.js { items }, the project menu's Examples): its ▸ in the shortcut's place */
.shell-item-sub kbd { font-family: var(--sh-sans); }
/* a button beside the project's name: the ▶ */
.shell-sw-side { width: 24px; height: 24px; flex: none; }
/* the project menu's ▶: only while the scene worked on is not the one shown (a safe start, a scene that did not compile) */
.shell-sw-play { color: var(--sh-warn) !important; }
.shell-sw-play[hidden] { display: none; }