/* Studio. A fixed three-pane app shell: the page itself never scrolls, each pane does.
 * That is the structural difference from the old Studio, which was eight vertical sections
 * on the marketing page and could only ever get longer as the catalog grew. */

html, body { height: 100%; overflow: hidden; }

/* ---------- top bar ---------- */
.bar {
  height: 52px;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.bar .brand-mark { width: 26px; height: 22px; }
.studio-nav { display: flex; gap: var(--s3); font-size: var(--text-sm); }
.studio-nav a { color: var(--muted); text-decoration: none; }
.studio-nav a:hover, .studio-nav a:focus-visible { color: var(--ink); }
.bar-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.title-input {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 var(--text-md) var(--font-display); color: var(--ink);
  padding: 2px var(--s2); margin-left: calc(var(--s2) * -1); width: 240px; max-width: 32vw;
}
.title-input:hover { border-color: var(--line); }
.title-input:focus { border-color: var(--violet); outline: none; background: var(--paper); }
.bar-status { font: var(--text-xs) var(--font-mono); color: var(--muted); padding-left: var(--s2); }
.bar-status.is-saving { color: var(--violet); }
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.segmented { display: flex; background: var(--surface-sunk); border-radius: var(--radius-pill); padding: 2px; gap: 2px; }
.segmented button {
  border: 0; background: transparent; border-radius: var(--radius-pill);
  padding: var(--s2) var(--s4); font-size: var(--text-base); font-weight: 600;
  color: var(--muted); cursor: pointer; transition: background var(--speed), color var(--speed);
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* Split needs two workspaces side by side; below this it would give each one half of a
   narrow column, which is worse than either view on its own. */
@media (max-width: 1399px) { .split-only { display: none; } }

/* ---------- shell ---------- */
.studio {
  height: calc(100vh - 52px);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  overflow: hidden;
}

/* ---------- library ---------- */
.library { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); min-height: 0; }
.library-search { padding: var(--s3); border-bottom: 1px solid var(--line-soft); }
/* Sized to hold the type facets without clipping a row in half. The type list is open-ended,
   so it still scrolls past four rows rather than pushing the results out of view. */
.facets { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s3); border-bottom: 1px solid var(--line-soft); max-height: 124px; overflow-y: auto; align-content: start; }
.facet {
  border: 1px solid var(--line); background: transparent; border-radius: var(--radius-pill);
  padding: 3px var(--s2); font-size: var(--text-xs); cursor: pointer; color: var(--ink-soft);
  display: inline-flex; gap: 4px; align-items: center; white-space: nowrap;
}
.facet:hover { border-color: var(--ink); }
.facet[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.facet b { font: var(--text-xs) var(--font-mono); opacity: 0.7; font-weight: 400; }

.library-results { flex: 1; overflow-y: auto; padding: var(--s2); min-height: 0; }
.lib-item {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--s2); background: transparent; text-align: left; cursor: pointer;
}
.lib-item:hover { background: var(--surface-sunk); border-color: var(--line); }
.lib-item[data-added="true"] { opacity: 0.5; }
.lib-dot { width: 6px; height: 6px; border-radius: 2px; flex: none; background: var(--c, var(--n-default)); }
.lib-text { min-width: 0; flex: 1; }
.lib-text b { display: block; font-size: var(--text-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-text small { display: block; font: var(--text-xs) var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lib-add { font-size: var(--text-md); color: var(--muted); flex: none; padding: 0 var(--s1); }
.lib-item:hover .lib-add { color: var(--violet); }
.unvetted { font: var(--text-xs) var(--font-mono); color: var(--accent); }
.lib-tags { display: flex; gap: var(--s1); margin-top: 2px; flex-wrap: wrap; }
.lib-tags i { font: var(--text-xs) var(--font-mono); font-style: normal; color: var(--muted); background: var(--surface-sunk); border-radius: var(--radius-sm); padding: 1px var(--s1); }

.library-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--line-soft); }
.hint { font-size: var(--text-sm); color: var(--muted); margin: 0; line-height: 1.5; }
.hint.error { color: var(--danger); }
.sentinel { height: 1px; }

/* ---------- workspace ---------- */
.workspace { display: grid; min-width: 0; min-height: 0; overflow: hidden; }
.view { display: none; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.studio[data-view="list"] .view-list,
.studio[data-view="map"] .view-map { display: flex; }
.studio[data-view="split"] .workspace { grid-template-columns: 1fr 1fr; }
.studio[data-view="split"] .view-list,
.studio[data-view="split"] .view-map { display: flex; }
.studio[data-view="split"] .view-map { border-left: 1px solid var(--line); }

.workspace-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); flex: none; }
.workspace-head h2 { font-family: var(--font-display); font-size: var(--text-md); margin: 0; letter-spacing: -0.02em; }
.workspace-tools { display: flex; gap: var(--s2); align-items: center; }
.field-slim { width: 160px; padding: var(--s2); }

.view-switcher { display: flex; align-items: center; gap: var(--s1); }
.view-switcher select.field-slim { width: 150px; }
.view-menu { display: flex; gap: 1px; }
.view-menu .button { padding: var(--s2); min-width: 26px; justify-content: center; }
.view-visibility-toggle { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-base); cursor: pointer; }
.view-visibility-toggle input { accent-color: var(--violet); }

.list-body { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4) var(--s8); min-height: 0; }
.group-head { font: var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin: var(--s4) 0 var(--s2); display: flex; gap: var(--s2); align-items: center; }
.group-head::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

.item-row {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--s2) var(--s3); margin-bottom: var(--s1);
  cursor: pointer; transition: border-color var(--speed);
}
.item-row:hover { border-color: var(--violet); }
.item-row.is-selected { border-color: var(--violet); background: var(--violet-soft); }
.item-flag { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c, var(--n-default)); flex: none; }
.item-name { font-size: var(--text-base); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-note { font-size: var(--text-sm); color: var(--muted); flex: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { font: var(--text-xs) var(--font-mono); color: var(--muted); white-space: nowrap; }
.status-pill { font: var(--text-xs) var(--font-mono); border-radius: var(--radius-pill); padding: 2px var(--s2); background: var(--surface-sunk); color: var(--ink-soft); border: 0; cursor: pointer; }
.status-pill[data-status="active"] { background: color-mix(in srgb, var(--green) 20%, var(--surface)); color: var(--green); }
.status-pill[data-status="exploring"] { background: var(--violet-soft); color: var(--violet); }
.status-pill[data-status="retired"] { opacity: 0.6; text-decoration: line-through; }

.empty-state { text-align: center; padding: var(--s16) var(--s4); color: var(--muted); }
.empty-state h3 { font-family: var(--font-display); color: var(--ink); font-size: var(--text-md); margin: 0 0 var(--s2); }
.empty-state p { font-size: var(--text-base); margin: 0 auto; max-width: 320px; line-height: 1.6; }

/* ---------- map ---------- */
.map-canvas { flex: 1; overflow: auto; padding: var(--s4); background: var(--surface-sunk); display: grid; place-items: center; min-height: 0; position: relative; }
.map-canvas .graph { width: 100%; height: 100%; transform: scale(var(--map-zoom, 1)); transform-origin: center; }
.studio.is-connecting .map-canvas { cursor: crosshair; }

/* Graph rendering, shared with the landing page but scoped here for the dense scale. */
.graph { display: block; }
.lane-band { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.lane-label { font: var(--text-xs) var(--font-mono); fill: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.edge-line { fill: none; stroke: color-mix(in srgb, var(--violet) 55%, transparent); stroke-width: 1.4; }
.edge { cursor: pointer; }
.edge.is-selected .edge-line { stroke: var(--ink); stroke-width: 4; }
.edge-head { fill: color-mix(in srgb, var(--violet) 55%, transparent); }
.edge-label { font: var(--text-xs) var(--font-mono); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--surface-sunk); stroke-width: 4px; stroke-linejoin: round; }
.edge { cursor: pointer; transition: opacity var(--speed); }
.edge.is-dim { opacity: 0.15; }
.node-box { fill: var(--surface); stroke: var(--node-color, var(--n-default)); stroke-width: 1.3; }
.node-label { font: 600 11px var(--font-body); fill: var(--ink); text-anchor: middle; }
.node { cursor: pointer; }
.node:hover .node-box, .node.is-selected .node-box { fill: color-mix(in srgb, var(--node-color) 14%, var(--surface)); stroke-width: 2; }

/* View-specific containers (issue #23): grouping boxes drawn behind nodes, scoped to Map. */
.container-box { fill: color-mix(in srgb, var(--violet) 6%, transparent); stroke: var(--violet); stroke-width: 1.2; stroke-dasharray: 5 4; cursor: move; pointer-events: all; }
.studio.is-connecting .container-box { cursor: crosshair; }
.container-label { font: 600 11px var(--font-mono); fill: var(--violet); text-transform: uppercase; letter-spacing: 0.04em; cursor: text; user-select: none; }
.container-delete { fill: var(--surface); stroke: var(--line); cursor: pointer; }
.container-delete-mark { font: 9px var(--font-body); fill: var(--muted); text-anchor: middle; pointer-events: none; }
.container:hover .container-delete { fill: var(--danger); stroke: var(--danger); }
.container:hover .container-delete-mark { fill: var(--surface); }
.container-handle { fill: var(--violet); opacity: 0.5; cursor: nwse-resize; }
.container:hover .container-handle { opacity: 0.9; }

/* Container search filter (issue #24): dims what doesn't match without touching any data —
   the same non-destructive dim-on-hover language already used for edges elsewhere in Map. */
.container.is-dim, .node.is-dim { opacity: 0.18; transition: opacity var(--speed); }

/* ---------- inspector ---------- */
.inspector { border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: var(--s4); min-height: 0; }
.inspector h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 var(--s1); letter-spacing: -0.02em; line-height: 1.3; }
.inspector-type { font: var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c, var(--muted)); }
.inspector section { border-top: 1px solid var(--line-soft); margin-top: var(--s4); padding-top: var(--s4); }
.inspector label { display: block; font: var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: var(--s2); }
.inspector .field { margin-bottom: var(--s3); }
textarea.field { resize: vertical; min-height: 64px; font-family: var(--font-body); line-height: 1.5; }
.stat-row { display: flex; gap: var(--s4); margin-bottom: var(--s4); }
.stat { flex: 1; }
.stat b { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.stat span { font: var(--text-xs) var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.conn-list { display: flex; flex-direction: column; gap: var(--s1); }
.conn {
  display: flex; align-items: center; gap: var(--s2); font-size: var(--text-sm);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: var(--s2);
}
.conn-dir { font: var(--text-xs) var(--font-mono); color: var(--violet); flex: none; }
.conn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 2px; }
.conn-remove:hover { color: var(--danger); }
.inspector-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.danger { color: var(--danger); }

/* ---------- dialogs ---------- */
.sheet { width: min(420px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); padding: var(--s5); box-shadow: var(--shadow-lg); }
.sheet::backdrop { background: #16171a99; backdrop-filter: blur(2px); }
.sheet h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--s2); }
.sheet .field { margin-top: var(--s3); }
.sheet-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.suggest-matches { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); max-height: 180px; overflow-y: auto; }
.suggest-match { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s2); cursor: pointer; font-size: var(--text-base); text-align: left; }
.suggest-match:hover { border-color: var(--violet); }
.suggest-match span { font: var(--text-xs) var(--font-mono); color: var(--muted); }
/* [hidden] must win the display fight: a plain `.suggest-parent-wrap { display: flex }` rule
   has the same specificity as the browser's default `[hidden] { display: none }` UA rule, and
   an author rule beats a UA rule at equal specificity — so the "hidden" attribute would
   silently stop hiding this element the moment `display: flex` was declared on the bare class. */
.suggest-parent-wrap:not([hidden]) { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); padding: var(--s3); background: var(--surface-sunk); border-radius: var(--radius-sm); }
.suggest-parent-wrap .field { margin-top: 0; }

/* ---------- narrow ---------- */
/* The drawer toggle only exists where a pane is a drawer. */
.pane-toggle { display: none; font-size: var(--text-md); }
.inspector-close { display: inline-flex; float: right; margin: calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s2) 0; position: relative; z-index: 1; }
.studio.hide-inspector { grid-template-columns: 280px minmax(0, 1fr); }
.studio.hide-inspector .inspector { display: none; }
.scrim { display: none; }

@media (max-width: 1080px) {
  .studio { grid-template-columns: 240px minmax(0, 1fr); }
  .inspector { position: fixed; right: 0; top: 52px; bottom: 0; width: min(300px, 88vw); z-index: 6; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--speed); }
  .studio.show-inspector .inspector { transform: none; }
  .studio.hide-inspector { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .studio { grid-template-columns: 1fr; }
  .library { position: fixed; left: 0; top: 52px; bottom: 0; width: min(300px, 88vw); z-index: 6; transform: translateX(-100%); transition: transform var(--speed); box-shadow: var(--shadow-lg); }
  .studio.show-library .library { transform: none; }
  .pane-toggle { display: inline-flex; }
  /* Reclaim the bar: the save status is reassurance, not navigation. */
  .bar-status { display: none; }
  .title-input { width: 130px; }
  .bar { gap: var(--s2); padding: 0 var(--s2); }
  .segmented button { padding: var(--s2) var(--s3); }
  /* Tapping outside a drawer should close it, which needs something to tap. */
  .scrim { display: block; position: fixed; inset: 52px 0 0; background: #00000055; z-index: 5; }
  .studio:not(.show-library):not(.show-inspector) .scrim { display: none; }
}
.stack-picker-label { color: var(--muted); font: 11px var(--mono); text-transform: uppercase; }
#stack-picker { max-width: 190px; }