/* OBSCURA OS: the Engineering Suite's sketcher (pro-code/eng-sketch.js).

   The bar across the top of the view while a sketch is open, the plane
   chooser, the dimension editor and the box a size is typed into. The
   sketch itself is drawn on a canvas over the view, in the colours below,
   which the script reads from these tokens so they follow the colourway
   and the dark mode like everything else.
*/

:root {
  --eng-sk-fixed: var(--ink);
  --eng-sk-free: var(--accent);
  --eng-sk-bad: var(--danger);
  --eng-sk-aux: var(--ink-faint);
  --eng-sk-sel: var(--accent-strong);
  --eng-sk-proj: var(--warn);
  --eng-sk-grid: var(--eng-grid);
  --eng-sk-grid-major: var(--eng-grid-major);
  --eng-sk-region: var(--accent-soft);
  --eng-sk-region-hot: var(--accent-soft);
  --eng-sk-dim: var(--ink-mid);
  --eng-sk-paper: var(--paper-raised);
  --eng-sk-idle: var(--ink-soft);
  --eng-sk-ref: var(--ink-faint);
}

/* While a sketch is open its bar takes the place of the view's own. */
.eng-sketching .eng-viewbar { display: none; }

.eng-sk-bar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-1); font-size: var(--text-2xs); }
.eng-sk-bar[hidden] { display: none; }
.eng-sk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eng-sk-group { display: flex; flex-wrap: wrap; gap: 2px; padding-right: 6px; border-right: 1px solid var(--rule); }
.eng-sk-bar button { min-height: 28px; padding: 3px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-2xs); cursor: pointer; }
.eng-sk-bar button:hover { background: var(--paper-inset); color: var(--ink); }
.eng-sk-bar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.eng-sk-bar .eng-sk-finish { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.eng-sk-bar .eng-sk-finish:hover { background: var(--accent-strong); color: var(--on-accent); }
.eng-sk-quiet { color: var(--ink-faint); }
.eng-sk-row2 { padding: 0 2px; color: var(--ink-soft); }
.eng-sk-opt { display: inline-flex; align-items: center; gap: 6px; }
.eng-sk-opt .eng-in { width: auto; min-height: 28px; padding: 2px 6px; font-size: var(--text-2xs); }
.eng-sk-opt input.eng-in { width: 5.5em; }
.eng-sk-opt input.eng-sk-wide { width: 14em; }
.eng-sk-state { font-weight: 600; color: var(--accent-strong); }
.eng-sk-state.eng-good { color: var(--good); }
.eng-sk-state.eng-bad { color: var(--danger); }
.eng-sk-hint { flex: 1; min-width: 12em; color: var(--ink-faint); }
.eng-sk-list { margin: 0; padding: 4px 6px; list-style: none; border-top: 1px solid var(--rule); max-height: 8.5em; overflow-y: auto; }
.eng-sk-list[hidden] { display: none; }
.eng-sk-list li { display: flex; align-items: center; gap: 4px; }
.eng-sk-list li > button:first-child { color: var(--danger); text-align: left; }
.eng-sk-list span { color: var(--ink-faint); }

.eng-sk-chooser { position: absolute; top: 12px; left: 50%; z-index: 30; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; min-width: 260px; padding: 8px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-2); }
.eng-sk-chooser[hidden] { display: none; }
.eng-sk-chooser-h { margin: 2px 8px 6px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.eng-sk-chooser button { min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; font-size: var(--text-xs); cursor: pointer; }
.eng-sk-chooser button:hover, .eng-sk-chooser button:focus-visible { background: var(--paper-inset); outline: none; }

.eng-sk-dimed, .eng-sk-typed { position: absolute; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 360px; padding: 6px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule-strong), var(--elev-2); font-size: var(--text-2xs); }
.eng-sk-typed[hidden] { display: none; }
.eng-sk-dimed .eng-in, .eng-sk-typed .eng-in { width: 9em; min-height: 28px; padding: 2px 6px; font-size: var(--text-2xs); }
.eng-sk-dimed select.eng-in { width: auto; }
.eng-sk-dimed .eng-btn { min-height: 28px; padding: 2px 10px; font-size: var(--text-2xs); }
.eng-sk-dimed output, .eng-sk-typed output { flex-basis: 100%; }
.eng-sk-dimed output:empty, .eng-sk-typed output:empty { display: none; }

/* Fields in the Properties panel that name sketch things. */
.eng-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eng-pick .eng-btn { min-height: 30px; padding: 3px 10px; font-size: var(--text-2xs); }
.eng-pick-note { flex-basis: 100%; margin: 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.eng-pick-note.eng-bad { color: var(--danger); }

@media (max-width: 900px) {
  .eng-sk-bar { top: 4px; left: 4px; right: 4px; max-height: 45%; overflow-y: auto; }
  .eng-sk-bar button, .eng-sk-chooser button { min-height: 44px; }
}