/* workbench.css — the Builder room's workbench (js/workbench/*): the editor
   grammar's metrics — 22 px menu bar, 35 px tabs, 22 px status bar, 48 px
   activity bar, 13 px UI font, 14 px monospace in the editor — in this
   product's own tokens (--bg, --bg-sunken, --panel, --border, --text,
   --accent, --kit-seal). No literal colour. Phone first: on a phone the
   Explorer is the right sheet (side-panel.css), the editor is full width,
   the panel collapses to its tab strip, and every hand is 44 px; the
   phone rules sit at the END of this file. */

:root {
  --wb-menubar-h: 22px;
  --wb-tabs-h: 35px;
  --wb-status-h: 22px;
  --wb-activity-w: 48px;
  --wb-ui-font: 13px;
  --wb-panel-h: 200px;
  --wb-zoom: 1;
}

/* the room outlet gives the workbench its whole box */
.room-outlet.is-workbench { padding: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; }
.wb {
  flex: 1; min-height: 0; display: grid;
  grid-template-rows: var(--wb-menubar-h) minmax(0, 1fr) auto var(--wb-status-h);
  background: var(--bg-sunken); color: var(--text); font-size: var(--wb-ui-font); font-family: var(--font-mono);
}
.wb button { font-family: inherit; }

/* ---------- menu bar ---------- */
.wb-menubar { display: flex; align-items: stretch; height: var(--wb-menubar-h); background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.wb-menubar::-webkit-scrollbar { display: none; }
.wb-menu-btn { border: 0; background: transparent; color: var(--text); padding: 0 8px; font-size: var(--wb-ui-font); cursor: pointer; white-space: nowrap; border-radius: 0; }
.wb-menu-btn:hover, .wb-menu-btn[aria-expanded="true"] { background: var(--accent-soft); }
.wb-menu-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.wb-mn { text-decoration: underline; text-underline-offset: 2px; }
.wb-menu, .wb-ctx {
  position: fixed; z-index: 1200; min-width: 220px; max-width: min(360px, calc(100vw - 12px)); padding: 4px 0;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-family: var(--font-mono); font-size: var(--wb-ui-font);
}
.wb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 4px 12px 4px 8px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: var(--wb-ui-font); }
.wb-menu-item:hover, .wb-menu-item:focus-visible { background: var(--accent); color: var(--accent-contrast); outline: none; }
.wb-menu-item[disabled] { opacity: .45; cursor: default; }
.wb-menu-item[disabled]:hover { background: transparent; color: var(--text); }
.wb-menu-check { width: 14px; flex: none; text-align: center; font-size: 11px; }
.wb-menu-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-menu-keys, .wb-palette-keys { font: 11px/1 var(--font-mono); opacity: .7; white-space: nowrap; }
.wb-menu-sep { height: 1px; margin: 4px 8px; background: var(--border); }
.wb-menu-sub { opacity: .7; }
.wb-ctx-note { padding: 6px 12px 4px; font-size: 11px; color: var(--text-faint); }

/* ---------- editors ---------- */
.wb-editors { display: flex; min-height: 0; min-width: 0; background: var(--bg-sunken); }
.wb-group { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; border-right: 1px solid var(--border); }
.wb-group:last-child { border-right: 0; }
.wb-editors.is-split .wb-group { flex: 1 1 50%; }
.wb-group.is-active .wb-tabs { box-shadow: inset 0 -1px 0 var(--accent-soft); }
.wb-tabs { display: flex; align-items: stretch; height: var(--wb-tabs-h); background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; flex: none; }
.wb-tab { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; min-width: 120px; max-width: 220px; border-right: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; user-select: none; position: relative; font-size: var(--wb-ui-font); }
.wb-tab.is-active { background: var(--bg-sunken); color: var(--text); box-shadow: inset 0 1px 0 var(--accent); }
.wb-tab.is-preview .wb-tab-name { font-style: italic; }
.wb-tab.is-readonly .wb-tab-name { opacity: .8; }
.wb-tab.is-readonly .wb-tab-name::after { content: " ⊘"; opacity: .6; font-size: 11px; }
.wb-tab:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.wb-tab-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tab-pin { font-size: 10px; opacity: .8; }
.wb-tab-close { width: 22px; height: 22px; border: 0; background: transparent; color: inherit; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: 0; }
.wb-tab:hover .wb-tab-close, .wb-tab.is-active .wb-tab-close, .wb-tab.is-dirty .wb-tab-close { opacity: 1; }
.wb-tab-close:hover { background: var(--accent-soft); }
.wb-tab-x { font-size: 12px; }
.wb-tab.is-dirty .wb-tab-x { display: none; }
.wb-tab.is-dirty .wb-tab-close:hover .wb-tab-x { display: inline; }
.wb-tab.is-dirty .wb-tab-close:hover .wb-tab-dot { display: none; }
.wb-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
.wb-tabs-spacer { flex: 1; }
.wb-tabs-actions { display: flex; align-items: center; gap: 2px; padding: 0 4px; flex: none; }
.wb-tabs-act, .wb-view-act, .wb-panel-act { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wb-tabs-act:hover, .wb-view-act:hover, .wb-panel-act:hover { background: var(--accent-soft); color: var(--text); }
.wb-crumbs { display: flex; align-items: center; gap: 2px; min-height: 22px; padding: 0 10px; font-size: 12px; color: var(--text-muted); background: var(--bg-sunken); border-bottom: 1px solid var(--border); overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: none; }
.wb-crumbs:empty { display: none; }
.wb-crumb { border: 0; background: transparent; color: var(--text-muted); padding: 2px 4px; cursor: pointer; font-size: 12px; border-radius: 3px; }
.wb-crumb:hover { color: var(--text); background: var(--accent-soft); }
.wb-crumb-sep { opacity: .6; }
.wb-crumb-diff { flex: 1; }
.wb-crumb-back { margin-left: auto; color: var(--accent); }
.wb-editor-host, .wb-diff-host { flex: 1; min-height: 0; position: relative; }
.wb-editor-host[hidden], .wb-diff-host[hidden] { display: none; }
.wb-editor-host .monaco-editor, .wb-diff-host .monaco-editor { position: absolute; inset: 0; }
.wb-empty { position: absolute; inset: calc(var(--wb-tabs-h) + 1px) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-faint); text-align: center; padding: 20px; pointer-events: none; }
.wb-empty p { margin: 0; }
.wb-empty-hint { font-size: 12px; }
.wb-empty[hidden] { display: none; }
.wb-empty kbd { border: 1px solid var(--border-strong); border-radius: 3px; padding: 1px 5px; font-size: 11px; }

/* ---------- panel ---------- */
.wb-panel { display: flex; flex-direction: column; height: var(--wb-panel-h); min-height: 0; border-top: 1px solid var(--border); background: var(--bg); position: relative; }
.wb-panel.is-hidden { display: none; }
.wb-panel.is-max { position: absolute; left: 0; right: 0; bottom: var(--wb-status-h); top: var(--wb-menubar-h); height: auto; z-index: 3; }
.wb { position: relative; }
.wb-panel.is-resizing { user-select: none; }
.wb-panel-head { display: flex; align-items: center; height: 35px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--border); cursor: row-resize; flex: none; }
.wb-panel-tabs { display: flex; gap: 14px; flex: 1; align-self: stretch; }
.wb-panel-tab { border: 0; background: transparent; color: var(--text-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 0 2px; cursor: pointer; border-bottom: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.wb-panel-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.wb-panel-count { background: var(--kit-seal, var(--accent-2)); color: #f2f5f3; font-size: 10px; border-radius: 999px; padding: 1px 6px; letter-spacing: 0; }
.wb-panel-actions { display: flex; gap: 2px; cursor: default; }
.wb-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; }
.wb-panel-body[hidden] { display: none; }
.wb-panel-empty { margin: 8px 12px; color: var(--text-faint); font-size: 12px; }
.wb-problem { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 4px 12px; cursor: pointer; font-size: 12.5px; min-height: 28px; }
.wb-problem:hover { background: var(--accent-soft); }
.wb-problem-sev { width: 14px; flex: none; color: var(--danger); }
.wb-problem.sev-warning .wb-problem-sev { color: var(--amber); }
.wb-problem.sev-info .wb-problem-sev { color: var(--text-muted); }
.wb-problem-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wb-problem-loc { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.wb-output { padding: 4px 12px; font-size: 12.5px; line-height: 1.5; }
.wb-out-line { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-muted); }
.wb-out-cmd { color: var(--text); font-weight: 600; margin-top: 4px; }
.wb-out-ok { color: var(--text); }
.wb-out-err { color: var(--danger); }
.wb-out-warn { color: var(--amber); }

/* ---------- status bar ---------- */
.wb-status { display: flex; align-items: stretch; height: var(--wb-status-h); background: var(--bg-elevated); color: var(--text); border-top: 1px solid var(--accent); font-size: 12px; overflow: hidden; }
.wb-status-left, .wb-status-right { display: flex; align-items: stretch; min-width: 0; }
.wb-status-left { flex: 1; }
.wb-status-item { display: inline-flex; align-items: center; padding: 0 8px; white-space: nowrap; border: 0; background: transparent; color: inherit; font: inherit; cursor: default; }
button.wb-status-item { cursor: pointer; }
button.wb-status-item:hover { background: var(--accent-soft); }
.wb-status-item.is-online { color: inherit; }
.wb-status-item.is-online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fd39a; margin-right: 6px; box-shadow: 0 0 6px #6fd39a; }
.wb-status-item.is-offline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 6px; }
.wb-status-item.is-online, .wb-status-item.is-offline { text-indent: 0; }
.wb-status-item.is-bad { background: var(--kit-seal, var(--accent-2)); color: #f2f5f3; }
.wb-status-item.is-ro { opacity: .85; font-style: italic; }

/* ---------- right side panel: activity bar + views ---------- */
#side-panel .side-panel-scroll { overflow: hidden; }
.wb-side { display: flex; flex: 1; min-height: 0; font-family: var(--font-mono); font-size: var(--wb-ui-font); }
.wb-activity { width: var(--wb-activity-w); flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 4px; gap: 2px; border-right: 1px solid var(--border); background: var(--bg); }
.wb-act { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.wb-act:hover { color: var(--text); }
.wb-act.is-active { color: var(--text); }
.wb-act.is-active::before { content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); }
.wb-views { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.wb-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wb-view[hidden] { display: none; }
.wb-view-head { display: flex; align-items: center; gap: 2px; height: 35px; padding: 0 4px 0 12px; flex: none; }
.wb-view-title { flex: 1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.wb-filter-row, .wb-search-form { display: flex; gap: 4px; padding: 0 8px 6px; flex: none; }
.wb-filter, .wb-search { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); background: var(--bg-sunken); color: var(--text); border-radius: 3px; font-size: var(--wb-ui-font); font-family: inherit; }
.wb-filter:focus, .wb-search:focus { outline: none; border-color: var(--accent); }
.wb-search-go { height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); border-radius: 3px; cursor: pointer; font-size: 12px; }
.wb-search-go:hover { background: var(--accent-soft); }
.wb-tree, .wb-results { flex: 1; min-height: 0; overflow: auto; padding: 0 0 12px; outline: none; }
.wb-tree:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.wb-tree-row { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 calc(8px + var(--depth, 0) * 12px); cursor: pointer; white-space: nowrap; color: var(--text); user-select: none; }
.wb-tree-row:hover { background: var(--accent-soft); }
.wb-tree-row.is-selected { background: var(--accent); color: var(--accent-contrast); }
.wb-tree-row.is-readonly .wb-tree-name { opacity: .75; }
.wb-tree-root { font-weight: 700; font-size: 11px; letter-spacing: .06em; height: 26px; }
.wb-tree-chev { width: 14px; height: 14px; flex: none; position: relative; }
.wb-tree-chev::before { content: ""; position: absolute; left: 4px; top: 3px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .12s ease; }
.wb-tree-chev.is-open::before { transform: rotate(45deg); top: 2px; }
.wb-tree-chev.is-leaf::before { display: none; }
.wb-tree-name { overflow: hidden; text-overflow: ellipsis; }
.wb-tree-badge { margin-left: auto; color: var(--amber); font-weight: 700; }
.wb-tree-err, .wb-tree-empty { padding: 6px 12px; color: var(--text-faint); font-size: 12px; white-space: normal; }
.wb-ic { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.wb-ic-folder { color: var(--accent); }
.wb-tree-row.is-selected .wb-ic { color: inherit; }
.wb-ic-ext { font-size: 8.5px; font-weight: 700; letter-spacing: 0; line-height: 1; padding: 2px 2px; border-radius: 2px; border: 1px solid currentColor; }
.wb-ic-rs { color: #d98c5a; } .wb-ic-toml { color: #9ec5ff; } .wb-ic-md { color: #7fb3d5; } .wb-ic-json { color: #e6c384; } .wb-ic-js { color: #e6d27a; }
.wb-ic-css { color: #8fbcbb; } .wb-ic-html { color: #e07b53; } .wb-ic-py { color: #7fb3d5; } .wb-ic-sh { color: #9fd39a; } .wb-ic-yml { color: #c9a0dc; }
.wb-ic-txt { color: var(--text-faint); } .wb-ic-csv { color: #9fd39a; } .wb-ic-img { color: #c9a0dc; } .wb-ic-lock { color: var(--text-faint); }
html[data-theme="light"] .wb-ic-js, html[data-theme="light"] .wb-ic-json { color: #8a5a10; }
.wb-search-meta { padding: 0 12px 6px; font-size: 11px; color: var(--text-faint); flex: none; }
.wb-res-file { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; cursor: pointer; color: var(--text); white-space: nowrap; }
.wb-res-file:hover { background: var(--accent-soft); }
.wb-res-path { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.wb-res-count { font-size: 10px; background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; }
.wb-res-hit { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text-muted); padding: 2px 8px 2px 34px; min-height: 24px; cursor: pointer; font-size: 12px; font-family: inherit; }
.wb-res-hit:hover { background: var(--accent-soft); color: var(--text); }
.wb-res-hit[hidden] { display: none; }
.wb-res-ln { color: var(--text-faint); min-width: 26px; text-align: right; font-size: 11px; flex: none; }
.wb-res-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-res-text mark { background: rgba(var(--glow-rgb), .25); color: inherit; border-radius: 2px; }

/* ---------- quick input / command palette ---------- */
.wb-quick-scrim { position: fixed; inset: 0; z-index: 1300; }
.wb-palette { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: min(600px, calc(100vw - 24px)); background: color-mix(in srgb, var(--bg-elevated) 96%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; font-family: var(--font-mono); font-size: var(--wb-ui-font); }
.wb-palette-input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 3px; background: var(--bg-sunken); color: var(--text); font: inherit; box-sizing: border-box; }
.wb-palette-input:focus { outline: none; }
.wb-palette-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: min(50dvh, 420px); overflow: auto; }
.wb-palette-item { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 30px; border-radius: 3px; cursor: pointer; color: var(--text); }
.wb-palette-item.is-active { background: var(--accent); color: var(--accent-contrast); }
.wb-palette-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-palette-cat { opacity: .7; }
.wb-palette-detail { font-size: 11px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.wb-palette-empty { padding: 8px 10px; color: var(--text-faint); font-size: 12px; }

/* ---------- modals the workbench opens ---------- */
.wb-keys-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb-keys-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.wb-keys-table td:last-child { text-align: right; white-space: nowrap; }
.wb-keys-table kbd, .wb-keys-table td:last-child { font-family: var(--font-mono); }
.wb-keys { max-height: 80dvh; overflow: auto; }
.wb-about-word { font-family: var(--font-mono); font-size: 18px; margin: 4px 0 12px; color: var(--accent); }
.wb-about-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.wb-about-dl dt { color: var(--text-muted); }
.wb-about-dl dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

/* ---------- tablet ---------- */
@media (max-width: 899.98px) {
  .wb-editors.is-split { flex-direction: column; }
  .wb-editors.is-split .wb-group { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- phone (measured at 375×812) ---------- */
@media (max-width: 767.98px) {
  :root { --wb-menubar-h: 44px; --wb-tabs-h: 44px; --wb-status-h: 44px; }
  .wb-menubar { height: 44px !important; }
  .wb-menu-btn { padding: 0 14px !important; min-width: 44px; }
  .wb-tab { min-width: 44px; padding-right: 2px; }
  .wb-tab-close { width: 44px !important; height: 44px !important; opacity: 1 !important; }
  .wb-tabs-act, .wb-view-act, .wb-panel-act { width: 44px !important; height: 44px !important; }
  .wb-crumbs { min-height: 28px; }
  .wb-panel { height: var(--wb-panel-h); }
  .wb-panel.is-collapsed { height: 44px !important; }
  .wb-panel.is-collapsed .wb-panel-body { display: none !important; }
  .wb-panel-head { height: 44px !important; cursor: default; }
  .wb-panel-tab { min-height: 44px; padding: 0 6px !important; }
  .wb-panel.is-max { top: var(--wb-menubar-h); }
  .wb-status { height: 44px !important; }
  .wb-status-item { min-height: 44px; padding: 0 10px !important; }
  .wb-status-right { overflow-x: auto; scrollbar-width: none; }
  .wb-empty { inset: 45px 0 0; }
  .wb-tree-row { height: 44px !important; }
  .wb-res-file, .wb-res-hit { min-height: 44px !important; }
  .wb-filter, .wb-search, .wb-search-go { height: 44px !important; }
  .wb-view-head { height: 44px !important; }
  .wb-menu-item { min-height: 44px !important; }
  .wb-palette { top: 6%; }
  .wb-palette-input { height: 44px !important; }
  .wb-palette-item { min-height: 44px !important; }
  .wb-editors .monaco-editor .minimap { display: none !important; }
}