/* popkern live: the model on a CAD viewport's graded ground, the tools
   on floating cards around it (colours: themes.css) — the document and build up top, the script on the
   left, the inspector on the right and the history along the bottom.
   One accent (mint) marks what acts and where you are. This file holds
   the tokens, controls, top bar, layout, viewport, menus and dialogs;
   panels.css the cards' contents; mobile.css the phone layout. */
:root {
  /* Colours are the theme's (themes.css); these are layout tokens. */
  /* The model view's corner buttons (larger on touch, mobile.css). */
  --tool: 2.1rem;
  --radius: 10px;
  --radius-small: 7px;
  --gap: 10px;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  font: 13px/1.4 var(--ui);
  background-color: var(--bg);
}
.muted { color: var(--muted); }
a { color: var(--accent); }
[hidden] { display: none !important; }
kbd { font: inherit; }

/* Controls */
button, select, input[type="number"] {
  font: inherit;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 0.25rem 0.65rem;
  min-height: 2rem;
}
select { padding-right: 0.3rem; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--raised-hover); border-color: var(--hover-line); }
button:disabled, select:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible, textarea:focus-visible, a:focus-visible, .scrubber:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }
.icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon.solid { fill: currentColor; stroke: none; }
.icon.chevron { width: 0.8rem; height: 0.8rem; opacity: 0.7; }
/* The play triangle beside a label: its box is trimmed to the ink
   (it is 9 of 16 units wide), so the label keeps the button's usual
   gap and the pair centres as drawn (Build read 1.6 px right of centre
   with the whole box, and wide-spaced with the triangle pushed left). */
.icon.play-mark { margin-inline: -0.22rem; }
.icon-only { padding: 0; width: 2rem; }
.chip { display: inline-flex; align-items: center; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--muted); font: 0.78rem/1.4 var(--mono); white-space: nowrap; }
.chip-ok { color: var(--ok); background: var(--accent-soft); border-color: transparent; }
.chip-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: transparent; }
.chip-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); border-color: transparent; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); }

/* Top bar: three floating cards, the view card centred on the page
   (the outer columns share what is left; one too wide for its half
   keeps its width and the centre gives way). */
.topbar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--gap); padding: var(--gap); flex: none; }
.bar-document { justify-self: start; }
.bar-build { justify-self: end; }
.bar-card { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.bar-button { background: transparent; border-color: transparent; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-small); border: 1px solid transparent; }
.bar-button:hover { background: var(--raised-hover); border-color: var(--line-strong); }
.brand { background: transparent; border: 0; gap: 0.5rem; padding: 0.2rem 0.6rem 0.2rem 0.4rem; color: var(--text); }
.brand:hover { background: transparent; }
.brand-mark { width: 20px; height: 20px; flex: none; }
.brand-accent { stroke: var(--accent); }
.brand-name { font-weight: 700; letter-spacing: 0.01em; }
.brand-name span { color: var(--muted); font-weight: 400; }
.project-button { border-color: var(--line-strong); background: var(--raised); max-width: 22rem; }
.project-label { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.project-kicker { font-weight: 600; }
.project-kicker::after { content: " ·"; color: var(--faint); }
.project-name { font-family: var(--mono); font-size: 0.92em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-view { gap: 0.6rem; }
.segment { display: flex; align-items: center; gap: 0.15rem; }
.segment + .segment { padding-left: 0.6rem; border-left: 1px solid var(--line); }
.segment-label { font: 600 0.68rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); padding: 0 0.45rem 0 0.25rem; }
.mode { background: transparent; border-color: transparent; color: var(--muted); padding: 0.25rem 0.7rem; }
.mode:hover { color: var(--text); }
.mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.mode:disabled { opacity: 0.35; }
.guide-link { border-color: var(--accent-line); color: var(--accent); }
.guide-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.build-key { font: 0.7rem var(--mono); opacity: 0.6; margin-left: 0.2rem; }
body.busy #run { opacity: 0.6; }
body:not(.busy) #cancel { color: var(--muted); }
body.busy #cancel { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }

/* Menus (menus.js): a popover under its button */
.menu-anchor { position: relative; display: flex; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 13rem; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem; background: var(--menu-bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 40px var(--shadow); }
.menu-end { left: auto; right: 0; }
.menu > button { justify-content: space-between; background: transparent; border-color: transparent; text-align: left; }
.menu > button:hover { background: var(--raised-hover); }
.menu hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 0.2rem 0; }
.menu-note { font: 0.8em var(--mono); color: var(--faint); }
.menu-field { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0.45rem; white-space: nowrap; color: var(--text); }
.menu-check { justify-content: flex-start; gap: 0.5rem; cursor: pointer; }
.menu-hint { margin: 0.2rem 0.45rem 0.1rem; color: var(--muted); font-size: 0.85em; white-space: normal; max-width: 16rem; }
.menu-range { margin: 0 0.45rem 0.3rem; }
/* Settings: a titled menu with a Done button (the phone's sheet). */
.settings-menu { min-width: 17rem; }
.settings-menu input[type="range"] { width: 7.5rem; }
.menu-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.2rem 0.35rem 0.45rem; border-bottom: 1px solid var(--line); margin-bottom: 0.2rem; }
.menu-title strong { font-weight: 650; }
.menu-done { min-height: 1.8rem; padding: 0 0.75rem; }
/* A menu that opened is plain to see: an accent edge, a deep shadow,
   and a short pop-in. */
.menu:not([hidden]) { border-color: var(--accent-line); box-shadow: 0 18px 48px var(--shadow), 0 0 0 1px var(--accent-soft); animation: menu-in 0.12s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
/* The section panel: a card under the corner tools while a section is
   on (the corner's standard views follow under it). */
.section-panel { display: flex; flex-direction: column; gap: 0.2rem; min-width: 14rem; padding: 0.35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-small); box-shadow: 0 8px 24px var(--shadow); }
.section-panel .menu-field { padding: 0.25rem 0.35rem; }
.section-tools { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0.45rem 0.3rem; }
.section-planes, .section-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.section-buttons > span { margin-right: auto; }
.section-planes button, .section-buttons button { min-height: 1.6rem; padding: 0 0.55rem; font-size: 0.85em; }
.section-planes button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.section-tools .menu-field { padding-left: 0; padding-right: 0; }

/* Workbench: script | model | inspector over the history dock */
.workbench {
  flex: 1;
  min-height: 0;
  display: grid;
  /* The side columns take a dragged width (panel-resize.js) when there
     is one, else their own range. */
  grid-template-columns: var(--editor-w, minmax(20rem, 27rem)) minmax(0, 1fr) var(--side-w, minmax(16rem, 19.5rem));
  grid-template-rows: minmax(0, 1fr) var(--dock-h, auto);
  grid-template-areas: "editor viewer side" "dock dock dock";
  gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
}
.pane-editor { grid-area: editor; }
.editor-rail { grid-area: editor; }
.pane-viewer { grid-area: viewer; }
.pane-side { grid-area: side; }
.dock { grid-area: dock; }
.sheet-tabs { display: none; }
body.editor-collapsed .workbench { grid-template-columns: 2.75rem minmax(0, 1fr) var(--side-w, minmax(16rem, 19.5rem)); }
/* Splitters: the gap beside a side panel, a line on hover and drag. */
.splitter { position: relative; z-index: 4; width: var(--gap); align-self: stretch; cursor: col-resize; touch-action: none; outline: none; }
.splitter-editor { grid-area: editor; justify-self: end; margin-right: calc(-1 * var(--gap)); }
.splitter-side { grid-area: side; justify-self: start; margin-left: calc(-1 * var(--gap)); }
.splitter-dock { grid-area: dock; justify-self: stretch; align-self: start; width: auto; height: var(--gap); margin-top: calc(-1 * var(--gap)); cursor: row-resize; }
.splitter-dock::after { top: 50%; bottom: auto; left: 0.75rem; right: 0.75rem; width: auto; height: 2px; margin: -1px 0 0; }
.splitter::after { content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: transparent; transition: background 0.12s; }
.splitter:hover::after, .splitter.dragging::after { background: var(--accent-line); }
.splitter:focus-visible::after { background: var(--accent); }
body.editor-collapsed .splitter-editor { display: none; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing-y { cursor: row-resize; }
body.resizing .pane-viewer canvas, body.resizing iframe { pointer-events: none; }
body.editor-collapsed .pane-editor { display: none; }
.editor-rail { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.75rem; padding: 0.6rem 0; min-height: 0; border-radius: var(--radius); color: var(--muted); }
.editor-rail span { writing-mode: vertical-rl; font: 0.75rem var(--mono); letter-spacing: 0.08em; }
.editor-rail:hover { color: var(--text); }

/* Viewport: the canvas is transparent over the graded ground */
.pane-viewer { position: relative; min-width: 0; min-height: 0; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--viewport-top) 0%, var(--viewport-bottom) 100%); }
.pane-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; border-radius: var(--radius); }
/* The top-right corner: the view tools, then the standard views. */
.view-corner { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.view-tools { display: flex; gap: 0.35rem; }
.float-button { width: var(--tool); height: var(--tool); min-height: 0; padding: 0; background: var(--card); border-color: var(--line); }
/* On a wide screen the corner tools carry their names. */
.float-button:has(.tool-label) { width: auto; padding: 0 0.65rem 0 0.55rem; gap: 0.4rem; font-weight: 600; }
/* An unfolded view cube: one clustered card of standard views. */
.view-orient { display: grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-small); }
.view-orient button { min-height: 1.6rem; min-width: 2.6rem; padding: 0 0.35rem; font: 600 0.7rem/1 var(--ui); color: var(--muted); background: transparent; border-color: transparent; border-radius: 5px; }
.view-orient button:hover { color: var(--text); background: var(--raised-hover); border-color: var(--line-strong); }
.pick { position: absolute; left: 0.4rem; bottom: 0.4rem; max-width: calc(100% - 0.5rem); padding: 0.15rem 0.5rem; border-radius: var(--radius-small); background: var(--glass); color: var(--muted); font: 0.8rem/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.scrubbed-note { display: none; position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%); padding: 0.1rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font: 0.78rem/1.5 var(--mono); pointer-events: none; }
body.scrubbed .scrubbed-note { display: block; }
.overlay { position: absolute; left: 0.25rem; right: 0.25rem; bottom: 2rem; z-index: 6; background: color-mix(in srgb, var(--bad) 12%, var(--dialog-bg)); border: 1px solid color-mix(in srgb, var(--bad) 60%, transparent); border-left: 3px solid var(--bad); border-radius: var(--radius-small); padding: 0.6rem 0.8rem; max-height: 45%; overflow: auto; }
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.overlay-class { color: var(--bad); text-transform: uppercase; font: 600 0.78rem var(--mono); letter-spacing: 0.08em; }
.overlay pre { margin: 0; white-space: pre-wrap; font: 0.88rem/1.45 var(--mono); }

/* Dialogs */
.dialog { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.dialog-box { background: var(--dialog-bg); border: 1px solid var(--line-strong); border-radius: 12px; max-width: 60rem; width: 100%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px var(--shadow); overflow: hidden; }
.dialog-small { max-width: 32rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.dialog pre { margin: 0; padding: 0.9rem; overflow: auto; font: 0.9rem/1.5 var(--mono); }
.dialog-body { padding: 0.5rem 1rem 0.9rem; line-height: 1.5; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.dialog-body h2 { font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 1rem 0 0.4rem; }
.dialog-head-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
body:has(.dialog:not([hidden])) { overflow: hidden; }
.projects-where { margin: 0 0 0.4rem; font-size: 0.85em; overflow-wrap: anywhere; }
.dialog-foot { margin: 0.5rem 0 0; }
.project-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.project-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.project-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.project-text .muted { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.danger:hover { border-color: var(--bad); color: var(--bad); }

/* Narrower screens: the top bar's outer cards shed text so the view
   card stays centred — the view card's labels and the brand's name
   (About keeps the mark), then the project's storage chip (the editor
   tab's title and notices still say where it is kept and that an
   example is read only). */
@media (max-width: 96rem) {
  .segment-label, .brand-name { display: none; }
  .brand { padding: 0.2rem 0.5rem; }
}
/* Medium widths: the inspector narrows. */
@media (max-width: 82rem) {
  .workbench { grid-template-columns: var(--editor-w, minmax(18rem, 23rem)) minmax(0, 1fr) var(--side-w, minmax(15rem, 17rem)); }
  body.editor-collapsed .workbench { grid-template-columns: 2.75rem minmax(0, 1fr) var(--side-w, minmax(15rem, 17rem)); }
  .build-key { display: none; }
}
@media (max-width: 70rem) {
  .bar-text, #project-where { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }