/* The docked-panel workspace: top bar, tool rail, model panel, canvas, results
   panel, legend. One grid; the two panel widths are custom properties that
   workspace.js writes through the CSSOM — the CSP allows no style attributes,
   and none are needed. */

.workspace {
  --left-w: 220px;
  --right-w: 264px;
  display: grid;
  height: 100%;
  grid-template-columns: 40px var(--left-w) 5px minmax(0, 1fr) 5px var(--right-w);
  grid-template-rows: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "top  top  top   top    top    top"
    "rail left lgrip canvas rgrip  right"
    "foot foot foot  foot   foot   foot";
}
.workspace[data-left="closed"]  { --left-w: 0px; }
.workspace[data-right="closed"] { --right-w: 0px; }

.spacer { flex: 1; }
.muted { color: var(--color-fg-muted); }

.label {
  margin: 0 0 7px;
  font: 600 0.625rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* ---- top bar ----
   Left, what is being worked on: the mode, then the document (its name is
   its file menu). Right, what is done with it: horizon, state, calculate.
   Narrow, the status and the name give way first, then the modes' words
   (their icons and tooltips stay). */
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}
.topbar .spacer { flex: 1; min-width: 0; }
.brand { display: flex; flex: none; align-items: center; gap: 7px; font-weight: 600; }
.brand-mark { width: 9px; height: 9px; border-radius: var(--radius-sm); background: var(--color-accent); }

/* The three modes: one of them, always. */
.modes {
  display: flex; flex: none; gap: 2px; padding: 2px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}
.mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-fg-secondary);
  font: 500 var(--text-sm)/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mode:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.mode[aria-checked="true"] {
  background: var(--color-bg-elevated); color: var(--color-accent); font-weight: 600;
  box-shadow: 0 0 0 1px var(--color-accent-muted);
}
.mode:focus-visible, .doc-name:focus-visible, .icon-button:focus-visible, .quiet:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
@media (max-width: 860px) {
  .mode { padding: 5px 8px; font-size: 0; gap: 0; }
}

/* The document's name is its file menu. */
.doc-name {
  display: inline-flex; align-items: center; gap: 6px; min-width: 4em; flex: 0 1 auto;
  padding: 5px 8px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-fg-primary); font: 500 var(--text-base)/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.doc-name:hover { background: var(--color-bg-hover); }
.doc-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.doc-name span { flex: none; color: var(--color-fg-muted); font-size: var(--text-xs); }

/* Horizon and state: quiet words beside Calculate, not boxes. */
.quiet {
  flex: none; padding: 5px 7px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-fg-secondary); font: 500 var(--text-xs)/1 var(--font-sans);
  white-space: nowrap;
}
.quiet:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.quiet:disabled { color: var(--color-fg-muted); }
.status {
  flex: 0 100 auto; min-width: 2em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-fg-muted); font: 400 var(--text-xs)/1 var(--font-mono);
}

.icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-fg-secondary); cursor: pointer;
}
.icon-button:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* The theme button shows the theme in use: sun, moon, or half a disc (system). */
#theme-switch :is(.theme-disc, .theme-rays, .theme-moon, .theme-half, .theme-ring) { display: none; }
#theme-switch[data-state="light"] :is(.theme-disc, .theme-rays),
#theme-switch[data-state="dark"] .theme-moon,
#theme-switch[data-state="system"] :is(.theme-half, .theme-ring) { display: inline; }
#theme-switch .theme-half { fill: currentColor; }
.topbar > .btn { flex: none; }

.chip {
  font: 500 0.6875rem/1 var(--font-mono);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-fg-muted);
  white-space: nowrap;
}

.btn {
  font: 600 0.6875rem/1 var(--font-sans);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent-muted);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  cursor: pointer;
}
.btn-ghost { border-color: var(--color-border); background: var(--color-bg-surface); color: var(--color-fg-secondary); }
.btn:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Expandable asset and control rows share one disclosure affordance. */
.disclosure {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 2px 4px;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: inherit;
  font: inherit; font-weight: 500; text-align: left;
  overflow-wrap: anywhere; cursor: pointer;
}
.disclosure::after {
  content: "";
  width: 7px; height: 7px; margin: 0 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  color: var(--color-fg-secondary);
  transform: rotate(-45deg);
}
.disclosure:hover, .disclosure:focus-visible { background: var(--color-bg-hover); }
.disclosure[aria-expanded="true"] { background: var(--color-bg-active); }
.disclosure[aria-expanded="true"]::after { transform: rotate(45deg); }

/* ---- tool rail ---- */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
}
.tool {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: none;
  color: var(--color-fg-muted);
  cursor: pointer;
}
.tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.tool[aria-pressed="true"] { background: var(--color-accent-dim); color: var(--color-accent); }
.tool:disabled { opacity: 0.4; cursor: default; }
.rail-rule { width: 18px; height: 1px; margin: 5px 0; background: var(--color-border); }

/* ---- side panels ---- */
.panel {
  min-width: 0;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  background: var(--color-bg-surface);
  font-size: var(--text-xs);
}
.panel-left  { grid-area: left; }
.panel-right { grid-area: right; }
.workspace[data-left="closed"]  .panel-left,
.workspace[data-right="closed"] .panel-right { visibility: hidden; }
/* A small × in the corner that closes the panel, as its rail button does. */
.panel-close {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-fg-muted); cursor: pointer;
}
.panel-close:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.panel-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.panel-left > .panel-close { position: sticky; top: 6px; z-index: var(--z-hud); float: right; margin: 6px 6px -26px 0; }
.tabs > .panel-close { margin: 0 0 4px auto; align-self: center; }
.panel-section { padding: 11px; border-bottom: 1px solid var(--color-border-subtle); }
.empty { margin: 0; color: var(--color-fg-muted); }

.resizer {
  background: var(--color-border);
  background-clip: content-box;
  padding: 0 2px;            /* a 1px line with a 5px grip */
  cursor: col-resize;
  touch-action: none;
}
.resizer[data-resize="left"]  { grid-area: lgrip; }
.resizer[data-resize="right"] { grid-area: rgrip; }
.resizer:hover, .resizer:focus-visible, .resizer[data-dragging] { background-color: var(--color-accent); outline: none; }

/* ---- canvas ---- */
.canvas {
  grid-area: canvas;
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--viz-canvas);
}
.canvas-grid {
  position: absolute; inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* Above the graph, which is mounted after it and fills the canvas. */
.hud { position: absolute; z-index: var(--z-hud); display: flex; gap: 8px; }
.hud-top-right { top: 10px; right: 10px; }
/* An empty canvas says how to begin, quietly, in its middle. */
.hud-empty { top: 45%; left: 50%; transform: translateX(-50%); margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); pointer-events: none; }
.hud-card {
  display: grid;
  min-width: 118px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
.hud-card .label { margin-bottom: 5px; }
.stat { font-weight: 600; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.02em; }
.hud-sub { font-size: 0.6875rem; color: var(--color-fg-muted); }
/* The answer's card opens Results; its state line says when it is old. */
.hud-answer { cursor: pointer; }
.hud-answer:hover { border-color: var(--color-border-strong); }
.hud-answer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.hud-answer .label { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-state { color: var(--color-fg-secondary); }

/* ---- legend ---- */
.legend {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 6px 11px;
  font-size: 0.6875rem;
  color: var(--color-fg-muted);
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
}
.legend-group { display: inline-flex; align-items: center; gap: 5px; }
.legend a { color: var(--color-fg-secondary); text-underline-offset: 2px; }
.legend a:hover { color: var(--color-fg-primary); }
.legend .num { margin-right: 5px; }
/* The outline is what makes the pale steps a shape at all; see 00-tokens.css. */
.swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--viz-outline); }
.swatch-1 { background: var(--viz-imp-1); }
.swatch-2 { background: var(--viz-imp-2); }
.swatch-3 { background: var(--viz-imp-3); }
.swatch-4 { background: var(--viz-imp-4); }
.swatch-5 { background: var(--viz-imp-5); }
.swatch-none { background: var(--color-bg-elevated); }

/* A closed panel has nothing to resize. */
.workspace[data-left="closed"]  .resizer[data-resize="left"],
.workspace[data-right="closed"] .resizer[data-resize="right"] { visibility: hidden; }

/* The rail's text tool (?), pushed to its foot. */
.rail .spacer { flex: 1; }
.tool-text { font: 600 0.8125rem/1 var(--font-mono); }
/* A button inside running text, e.g. the notice's Undo. */
.link-button { background: none; border: 0; padding: 0; color: var(--color-accent); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
/* The canvas notice sits above the corner's controls and pins, never over them. */
.hud-note {
  left: 10px; bottom: 48px; z-index: var(--z-notice);
  max-width: 70%; margin: 0; padding: 5px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-fg-primary);
  font-size: var(--text-sm);
}


/* ---- the inspector: the selected node's form, floating at the canvas edge ----
   Over the graph, not beside it: selecting never resizes the canvas, so
   nothing under the pointer moves (a node it would cover is panned into view
   by the renderer). Its width is fixed; its height is what it holds, up to
   the canvas's, and eases from one selection's to the next (app.js sets it).
   The HUD steps aside while it is open. There while something is selected.
   Its scrollbar's room is always kept: a bar that came and went would change
   the width, the wrapping, the height, and bring the bar back — a flicker. */
.stage { position: relative; flex: 1; min-width: 0; }
.inspector {
  position: absolute; top: 8px; right: 8px; z-index: var(--z-inspector);
  width: 280px; max-height: calc(100% - 16px);
  transition: height 160ms ease-out;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.14);
  font-size: var(--text-xs);
  animation: inspector-in 120ms ease-out;
}
.inspector[hidden] { display: none; }
@keyframes inspector-in { from { opacity: 0; transform: translateX(8px); } }
.inspector.is-placing { transition: none; }
@media (prefers-reduced-motion: reduce) { .inspector { animation: none; transition: none; } .hud-top-right { transition: none; } }
.hud-top-right { transition: right 120ms ease-out; }
.canvas:has(.inspector:not([hidden])) .hud-top-right { right: 298px; }
.inspector .panel-section { border-bottom: 0; }
.inspector .count { text-transform: none; letter-spacing: 0; font-weight: 400; }