/* OBSCURA OS: the Engineering Suite.

   One working surface: the top bar across, the features to add under it,
   the model's history and variables on the left, the 3D view in the middle,
   the chosen feature's dimensions and the chosen body's measurements on the
   right, a status line across the foot. On a phone the columns stack under
   the view and the page scrolls.

   Every colour is a theme.css token, so the suite follows the colourway and
   the dark mode the rest of the site does. The view reads its own colours
   from the --eng-* tokens below (eng-view.js), and they are hex or tokens
   that are hex, because three.js parses them itself.
*/

:root {
  --eng-view: var(--paper-inset);
  --eng-grid: #dedbd3;
  --eng-grid-major: #c3bfb5;
  --eng-solid: #b3bcc9;
  --eng-solid-selected: var(--accent);
  --eng-edge: #2a2e36;
  --eng-measure: #c2410c;
  --eng-left: 264px;
  --eng-right: 316px;
}
:root[data-theme="dark"] {
  --eng-grid: #25252b;
  --eng-grid-major: #393941;
  --eng-solid: #8a94a4;
  --eng-edge: #0c0e12;
  --eng-measure: #ff7a45;
}

body.eng { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--font-sans); }
.eng *, .eng *::before, .eng *::after { box-sizing: border-box; }
.eng button, .eng input, .eng select, .eng textarea { font: inherit; color: inherit; }
.eng-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eng-grow { flex: 1; }

.eng-app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: var(--eng-left) minmax(0, 1fr) var(--eng-right);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "tools tools tools" "left stage right" "status status status";
}

/* ---------------------------------------------------------------- top bar */

.eng-top { grid-area: top; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); min-width: 0; }
.eng-home { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--ink-soft); flex: none; }
.eng-home:hover { background: var(--paper-inset); color: var(--ink); }
.eng-home svg { width: 20px; height: 20px; }
.eng-brand { margin: 0 6px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.eng-name { width: 220px; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-size: 14px; }
.eng-name:hover { border-color: var(--rule); }
.eng-name:focus { border-color: var(--accent); outline: none; background: var(--paper); }

.eng-menus { display: flex; gap: 2px; }
.eng-menu { position: relative; }
.eng-menu-btn { min-height: 36px; padding: 6px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
.eng-menu-btn:hover, .eng-menu-btn[aria-expanded="true"] { background: var(--paper-inset); }
.eng-menu-list { position: absolute; z-index: 40; top: 100%; left: 0; min-width: 250px; margin-top: 4px; padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); }
.eng-menu-list[hidden] { display: none; }
.eng-menu-list button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 36px; padding: 8px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.eng-menu-list button:hover, .eng-menu-list button:focus-visible { background: var(--paper-inset); outline: none; }
.eng-menu-list button span, .eng-menu-list kbd { font-size: 12px; color: var(--ink-faint); }
.eng-menu-list kbd { font-family: var(--font-mono); }
.eng-menu-list hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.eng-menu-help { width: 340px; padding: 10px 14px 12px; }
.eng-help-h { margin: 8px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.eng-help-p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.eng-help-p code { font: 12px var(--font-mono); color: var(--ink); background: var(--paper-inset); padding: 1px 4px; border-radius: 4px; }
.eng-keys { margin: 0; font-size: 13px; }
.eng-keys div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.eng-keys dt { color: var(--ink); font-weight: 500; }
.eng-keys dd { margin: 0; color: var(--ink-soft); text-align: right; }

.eng-ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; flex: none; }
.eng-ib:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.eng-ib:disabled { opacity: .35; cursor: default; }
.eng-ib svg { width: 17px; height: 17px; }
.eng-top-ib { width: 36px; height: 36px; }
.eng-top-ib svg { width: 19px; height: 19px; }
.eng-quality { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13px; color: var(--ink-soft); }
.eng-quality .eng-in { width: auto; min-height: 34px; }

/* ---------------------------------------------------------------- toolbar */

.eng-tools { grid-area: tools; display: flex; gap: 6px; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
.eng-tgroup { display: flex; gap: 2px; padding-right: 6px; border-right: 1px solid var(--rule); }
.eng-tgroup:last-child { border-right: 0; }
.eng-tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 60px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.eng-tools button:hover { background: var(--paper-inset); color: var(--ink); }
.eng-tools button:active { background: var(--accent-soft); color: var(--accent-strong); }
.eng-tools svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- panels */

.eng-side { background: var(--paper-raised); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.eng-left { grid-area: left; border-right: 1px solid var(--rule); }
.eng-right { grid-area: right; border-left: 1px solid var(--rule); }
.eng-panel { padding: 10px 10px 14px; }
.eng-panel + .eng-panel { border-top: 1px solid var(--rule); }
/* The panels are filled once the kernel has loaded, and a History that
   grows from nothing pushes the panel under it down the page. Until then
   they hold their place unseen, and arrive already filled. */
html:not(.eng-ready) .eng-side > * { visibility: hidden; }
.eng-ready .eng-side > * { animation: eng-arrive .24s ease-out both; }
@keyframes eng-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eng-ready .eng-side > * { animation: none; } }
.eng-ph { display: flex; align-items: center; gap: 8px; margin: 2px 4px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.eng-count { font: 11px var(--font-mono); letter-spacing: 0; padding: 1px 6px; border-radius: 99px; background: var(--paper-inset); color: var(--ink-soft); }
.eng-hint { margin: 4px; font-size: 13px; color: var(--ink-faint); }
.eng-empty { padding: 6px 4px; font-size: 13px; color: var(--ink-faint); list-style: none; }

/* History */
.eng-tree { list-style: none; margin: 0; padding: 0; }
.eng-row { position: relative; display: flex; align-items: center; border-radius: var(--radius-sm); }
.eng-row:hover { background: var(--paper-inset); }
.eng-row.eng-on { background: var(--accent-soft); }
.eng-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 32px; padding: 4px 6px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.eng-row-main svg { width: 17px; height: 17px; flex: none; color: var(--ink-soft); }
.eng-on .eng-row-main svg { color: var(--accent-strong); }
.eng-row-n { width: 18px; flex: none; font: 11px var(--font-mono); color: var(--ink-faint); text-align: right; }
.eng-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.eng-on .eng-row-name { color: var(--accent-strong); font-weight: 550; }
.eng-off .eng-row-name { text-decoration: line-through; color: var(--ink-faint); }
.eng-off .eng-row-main svg { opacity: .5; }
.eng-err .eng-row-name { color: var(--danger); }
.eng-flag { display: inline-flex; flex: none; }
.eng-flag svg { width: 15px; height: 15px; }
.eng-flag-err svg { color: var(--danger); }
.eng-flag-warn svg { color: var(--warn); }
/* The row's buttons sit over the end of its name rather than beside it,
   so a name is not cut short by four buttons nobody is pointing at. */
.eng-row-acts { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); display: flex; padding-left: 10px; border-radius: var(--radius-sm); background: var(--paper-inset); opacity: 0; pointer-events: none; transition: opacity .12s; }
.eng-row.eng-on .eng-row-acts { background: var(--accent-soft); }
.eng-row:hover .eng-row-acts, .eng-row:has(:focus-visible) .eng-row-acts { opacity: 1; pointer-events: auto; }
.eng-row-acts .eng-ib { width: 26px; height: 26px; }
.eng-row-acts .eng-ib svg { width: 15px; height: 15px; }

/* Variables */
.eng-vars { list-style: none; margin: 0 0 8px; padding: 0; }
.eng-var { display: grid; grid-template-columns: 62px auto minmax(0, 1fr) auto auto; align-items: center; gap: 5px; padding: 2px 0; }
.eng-eq { color: var(--ink-faint); font-family: var(--font-mono); }
.eng-var .eng-in { min-height: 30px; padding: 4px 6px; font: 12.5px var(--font-mono); }
.eng-var-val { min-width: 34px; font: 12px var(--font-mono); color: var(--ink-faint); text-align: right; }
.eng-var-val svg { width: 15px; height: 15px; color: var(--danger); vertical-align: middle; }
.eng-var.eng-err .eng-var-expr { border-color: var(--danger); }

/* Fields */
.eng-in { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font-size: 13.5px; }
.eng-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
select.eng-in { cursor: pointer; }
textarea.eng-in { resize: vertical; line-height: 1.45; }
.eng-mono { font-family: var(--font-mono) !important; font-size: 12.5px !important; }

.eng-props-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 4px 12px; }
.eng-props-head svg { width: 26px; height: 26px; flex: none; color: var(--accent); margin-top: 1px; }
.eng-props-head b { display: block; font-size: 14.5px; }
.eng-props-head span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.eng-field { display: grid; gap: 4px; margin: 0 4px 10px; }
.eng-field > span, .eng-set legend { font-size: 12.5px; color: var(--ink-soft); }
.eng-numrow { display: flex; align-items: center; gap: 8px; }
.eng-numrow .eng-in { font-family: var(--font-mono); font-size: 13px; }
.eng-numrow output { flex: none; min-width: 0; max-width: 45%; font: 12px var(--font-mono); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-numrow output:empty { display: none; }
.eng-numrow output.eng-bad { color: var(--danger); white-space: normal; }
.eng-check { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 13.5px; cursor: pointer; }
.eng-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.eng-set { border: 0; padding: 0; }
.eng-set legend { padding: 0; margin-bottom: 6px; }
.eng-set .eng-check { margin-left: 0; }
.eng-msg { margin: 0 4px 10px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.eng-msg:empty { display: none; }
.eng-msg.eng-bad { background: var(--danger-soft); color: var(--danger); }
.eng-msg.eng-warn { background: var(--warn-soft); color: var(--warn); }

/* Body */
.eng-h { margin: 0 4px 8px; font-size: 14.5px; }
.eng-facts { margin: 0 4px 12px; }
.eng-facts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.eng-facts dt { color: var(--ink-soft); flex: none; }
.eng-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.eng-facts select.eng-in { max-width: 190px; min-height: 30px; padding: 3px 6px; font-size: 12.5px; }
.eng-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px; }
.eng-btn { min-height: 34px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font-size: 13px; cursor: pointer; }
.eng-btn:hover { background: var(--paper-inset); }
.eng-add { width: 100%; border-style: dashed; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the view */

.eng-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; background: var(--eng-view); overflow: hidden; }
.eng-view { position: absolute; inset: 0; }
.eng-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.eng-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: 14px; color: var(--ink-faint); pointer-events: none; }
.eng-ready .eng-loading { display: none; }
.eng-viewbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.eng-vgroup { display: flex; gap: 1px; padding: 3px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(16, 16, 24, .08); pointer-events: auto; }
.eng-viewbar button { min-height: 30px; padding: 4px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.eng-viewbar button:hover { background: var(--paper-inset); color: var(--ink); }
.eng-viewbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.eng-measure-out { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 8px 14px; border-radius: 99px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 6px 18px rgba(16, 16, 24, .12); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.eng-measure-out[hidden] { display: none; }
.eng-measure-out b { font: 600 15px var(--font-mono); color: var(--ink); }
.eng-measure-out span { font: 12px var(--font-mono); }

/* ---------------------------------------------------------------- status */

.eng-status { grid-area: status; display: flex; align-items: center; gap: 14px; min-height: 28px; padding: 4px 12px; background: var(--paper-raised); border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-soft); }
.eng-status .eng-bad { color: var(--danger); }
.eng-xyz, .eng-units { font-family: var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
#engBuilt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .eng-row-acts { transition: none; } }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1180px) {
  :root { --eng-left: 232px; --eng-right: 288px; }
  .eng-name { width: 160px; }
  .eng-tools button { min-width: 54px; }
}

/* A phone, or a narrow window: one column, the view first, the page
   scrolls. Everything a finger presses is at least 44px. */
@media (max-width: 760px) {
  /* The view straight after the toolbar, then what is chosen, then the
     history: the order a finger works in, whatever the order in the page. */
  .eng-app { display: flex; flex-direction: column; height: auto; }
  .eng-top { order: 1; } .eng-tools { order: 2; } .eng-stage { order: 3; }
  .eng-right { order: 4; } .eng-left { order: 5; } .eng-status { order: 6; }
  .eng-top { flex-wrap: wrap; position: sticky; top: 0; z-index: 30; }
  .eng-top .eng-grow { display: none; }
  .eng-top-ib, .eng-quality { order: 11; }
  .eng-home, .eng-top-ib, .eng-menu-btn { min-width: 44px; min-height: 44px; }
  .eng-brand { font-size: 14px; }
  .eng-name { order: 10; flex: 1 1 0; width: auto; border-color: var(--rule); min-height: 44px; }
  .eng-quality .eng-in { min-height: 44px; }
  .eng-quality span { display: none; }
  .eng-menu-list { position: fixed; left: 10px; right: 10px; top: auto; min-width: 0; width: auto; }
  .eng-menu-help { width: auto; }
  .eng-menu-list button { min-height: 44px; }
  .eng-tools button { min-height: 56px; min-width: 60px; }
  .eng-stage { height: 58vh; height: 58svh; min-height: 300px; }
  .eng-viewbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; pointer-events: auto; left: 0; right: 0; top: 0; padding: 8px 10px; }
  .eng-vgroup { flex: none; }
  .eng-viewbar button { min-height: 44px; min-width: 44px; padding: 4px 8px; }
  .eng-side { overflow: visible; border: 0; }
  .eng-right { border-bottom: 1px solid var(--rule); }
  .eng-ib, .eng-row-acts .eng-ib { width: 44px; height: 44px; }
  .eng-row-acts { position: static; transform: none; padding: 0; background: transparent; opacity: 1; pointer-events: auto; }
  .eng-row-main, .eng-in, .eng-btn, .eng-var .eng-in, .eng-facts select.eng-in { min-height: 44px; }
  .eng-check { min-height: 44px; }
  .eng-var { grid-template-columns: 70px auto minmax(0, 1fr) auto auto; }
  .eng-status { position: sticky; bottom: 0; }
  .eng-xyz { display: none; }
  .eng-measure-out { white-space: normal; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 20px); border-radius: var(--radius-lg); }
}
@media (pointer: coarse) {
  .eng-ib, .eng-row-acts .eng-ib, .eng-top-ib { width: 44px; height: 44px; }
  .eng-row-acts { position: static; transform: none; padding: 0; background: transparent; opacity: 1; pointer-events: auto; }
  .eng-row-main, .eng-menu-list button, .eng-viewbar button, .eng-menu-btn { min-height: 44px; }
}

/* The lock screen (theme.css draws it) quotes one expression. */
.pro-lock-gets code { font: 13.5px var(--font-mono); color: var(--ink); background: var(--paper-inset); padding: 1px 5px; border-radius: 4px; }