/* ================================================================
   Nasjicad app.css — owner: SHELL.  Implements SPEC §5.
   ================================================================

   GENERATED-DOM CONTRACT — exact markup app.js / commands.js are
   expected to emit into the empty containers (matches SPEC §4/§11
   structures; class names below are the ones this stylesheet keys on).

   #qat (quick access, titlebar)
     <button class="qat-btn" title="New (Ctrl+N)">{NasjIcons.get('qnew',16)}</button>

   #ribbon-tabs
     <button class="ribbon-tab active">Home</button>
     <button class="ribbon-tab">Insert</button> …
     (add/remove class "active"; plain <button> children also styled)

   #ribbon-content  (one page at a time)
     <div class="ribbon-panel">
       <div class="panel-body">
         <button class="rbtn rbtn-large" data-cmd="LINE">
           {NasjIcons.get('line',32)}<span>Line</span>
         </button>
         <div class="panel-col">
           <button class="rbtn rbtn-small" data-cmd="RECTANG">
             {NasjIcons.get('rectangle',16)}<span>Rectangle</span>
           </button> …
         </div>
         <select class="ribbon-select">…</select>
         <span class="layer-swatch" style="background:#e05252"></span>
       </div>
       <div class="panel-title">Draw</div>   <!-- app.js adds a .pt-chev ▾
                                                  only when the panel expands -->
     </div>
   #ribbon gains class "collapsed" to hide #ribbon-content
   (CSS auto-flips the #ribbon-collapse ▴ glyph when collapsed).

   #file-tabs
     <div class="ftab" data-tab="start">Start</div>
     <div class="ftab active" data-doc="0">
       <span class="ftab-label">Drawing1</span>
       <button class="ftab-close" title="Close">×</button>
     </div>
     <button class="ftab-plus" title="New drawing">+</button>

   #navbar
     <button class="nav-btn" title="Pan">{NasjIcons.get('pan',16)}</button> ×4

   #sb-toggles / #sb-right
     <button class="sb-btn on" data-setting="grid" title="Display drawing grid (F7)">
       {NasjIcons.get('sb-grid',16)}   <!-- sb-* icons stroke=currentColor -->
     </button>
     <span class="sb-sep"></span>
     <button class="sb-text-btn">1:1 ▾</button>

   .palette (fill #palette-layers / #palette-properties)
     <div class="pal-header"><span class="pal-title">LAYER PROPERTIES</span>
       <button class="pal-close" title="Close">×</button></div>
     <div class="pal-toolbar"><button title="New layer">{icon16}</button>
       <button disabled>{icon16}</button></div>
     <div class="pal-body">
       <div class="pal-row current" data-layer="0">
         <button class="lr-mark" title="Current layer">{NasjIcons.get('check',14)}</button>
         <span class="lr-name">0</span>
         <span class="layer-swatch" style="background:#ffffff"></span>
         <button class="lr-tog" data-k="on">{icon}</button>
         <button class="lr-tog off" data-k="frozen">{icon}</button>  <!-- .off = dimmed -->
         <button class="lr-tog" data-k="locked">{icon}</button>
       </div>
       — properties palette body —
       <div class="pal-section">General</div>
       <div class="pal-kv"><label>Layer</label><select class="ribbon-select">…</select></div>
       <div class="pal-note">No selection</div>
     </div>

   #command-history   <div class="echo">&gt; line</div> / <div class="err">Unknown …</div>
   #command-suggest   <div class="sug-item sel">
                        <span class="sug-name"><b>LI</b>NE</span>
                        <span class="sug-alias">L</span></div>

   #app-menu (two columns, exactly these two wrappers)
     <div class="menu-main">
       <button class="menu-item">{icon18}<span class="mi-label">New</span>
         <span class="mi-shortcut">Ctrl+N</span></button>
       <div class="menu-sep"></div> …
     </div>
     <div class="menu-recent">
       <div class="menu-recent-title">Recent Documents</div>
       <button class="menu-recent-item">{NasjIcons.get('file-drawing',16)} Bracket.njc</button>
     </div>

   #ctx-menu
     <button class="ctx-item">Repeat LINE</button>
     <button class="ctx-item disabled">Paste</button>
     <div class="ctx-sep"></div>

   #start-page
     <div class="start-left">
       <button class="start-btn primary" data-cmd="NEW">{icon}<span>New</span></button>
       <button class="start-btn" data-cmd="OPEN">{icon}<span>Open…</span></button>
       <div class="start-section">Recent Documents</div>
       <div class="start-recent">
         <button class="start-recent-item">
           <span class="sri-name">Bracket.njc</span>
           <span class="sri-path">C:\Drawings\Bracket.njc</span></button>
         (or <div class="start-recent-empty">No recent documents</div>)
       </div>
     </div>
     <div class="start-right">
       <img class="start-logo" src="../logo.png" alt="Nasjicad">
       <div class="start-wordmark">Nasjicad 2026</div>
       <div class="start-tagline">Precision 2D drafting, engineered for speed.</div>
       <ul class="start-features"><li>…</li><li>…</li><li>…</li></ul>
     </div>

   #toast      appended to <body>, plain text, removed by app.js after 2.2s
   #dyn-input  created once by commands.js, positioned via style.left/top (fixed)
   #win-max    app.js toggles class "maximized" when window maximizes
               (also honored: .is-maximized, [data-maximized="true"])
   ================================================================ */

/* ----------------------------------------------------------------
   0. Reset / base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body {
  display: grid;
  grid-template-rows: var(--titlebar-h) auto var(--filetabs-h) minmax(0,1fr) var(--statusbar-h);
  /* single column clamped to the viewport — wide rows (ribbon) scroll inside
     themselves instead of stretching the whole layout past the window edge */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: default;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
body > * { min-width: 0; }
/* Each band owns its row. Without this, hiding one of them (clean screen,
   or the View tab's file-tab switch) lets the rest auto-place one row up:
   the drawing area lands in the file-tab row and collapses to 26px while
   the status bar sits in the row meant for the drawing. */
#titlebar { grid-row: 1; }
#ribbon { grid-row: 2; }
#file-tabs { grid-row: 3; }
#workspace { grid-row: 4; }
#statusbar { grid-row: 5; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
button svg { pointer-events: none; display: block; }
button:disabled, button[disabled] { opacity: .35; pointer-events: none; }

input, select {
  font-family: inherit;
  color: var(--text);
}
input::placeholder { color: var(--text-dim); }
input, textarea { user-select: text; }
img { -webkit-user-drag: none; }
canvas { display: block; }

::selection { background: var(--accent-soft); }

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

/* thin dark scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3c3c3c;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #4d4d4d; }
::-webkit-scrollbar-corner { background: transparent; }

.hidden { display: none !important; }

/* ----------------------------------------------------------------
   1. Titlebar (38px, drag region)
   ---------------------------------------------------------------- */
#titlebar {
  display: flex;
  align-items: center;
  height: var(--titlebar-h);
  background: linear-gradient(180deg, #1c1c1c 0%, var(--bg-titlebar) 55%, #141414 100%);
  border-bottom: 1px solid #0f0f0f;
  box-shadow: inset 0 1px 0 var(--hairline);
  -webkit-app-region: drag;
}
#titlebar button, #titlebar input,
#titlebar-search { -webkit-app-region: no-drag; }

#app-button {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-button img { width: 24px; height: 24px; object-fit: contain; transition: filter var(--dur) var(--ease); }
#app-button:hover { background: rgba(255,255,255,.07); }
#app-button:hover img { filter: brightness(1.25); }
#app-button:active { background: rgba(255,255,255,.12); }

#qat {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
}
.qat-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qat-btn svg { width: 16px; height: 16px; }
.qat-btn:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.qat-btn:active { background: var(--active); }

#titlebar-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  letter-spacing: .2px;
}
#doc-title { color: var(--text-bright); }

#titlebar-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 240px;
  height: 24px;
  padding: 0 11px;
  margin: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#titlebar-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.search-ico {
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%238a8a8a' stroke-width='1.4'/%3E%3Cpath d='M9.3 9.3 L12.8 12.8' fill='none' stroke='%238a8a8a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
#search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text);
}

/* help button (runs HELP) — right of the command search */
#help-btn {
  flex: none;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border-radius: var(--radius);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23b4b4b4' stroke-width='1.3'/%3E%3Cpath d='M6.1 6.2 C6.2 5 7 4.4 8 4.4 C9.1 4.4 9.9 5.1 9.9 6.1 C9.9 7 9.4 7.4 8.8 7.9 C8.3 8.3 8 8.6 8 9.3' fill='none' stroke='%23b4b4b4' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='.9' fill='%23b4b4b4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
#help-btn:hover { background-color: var(--hover); }
#help-btn:active { background-color: var(--active); }

/* command search dropdown (under the titlebar search pill) */
#search-results {
  position: fixed;
  z-index: 1500;
  width: 380px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  background: #2a2a2b;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius);
  overflow: hidden;
}
.sr-item svg { width: 16px; height: 16px; flex: none; }
.sr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sr-name { font-size: 12px; font-weight: 600; color: var(--text-bright); line-height: 15px; }
.sr-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-alias { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.sr-item:hover { background: var(--hover); }
.sr-item.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(79,179,234,.4); }
.sr-empty { padding: 10px 12px; font-size: 12px; color: var(--text-dim); }

/* window controls — 46×38, crisp SVG glyphs */
#win-controls { flex: none; display: flex; height: 38px; margin-left: 2px; }
#win-controls button {
  width: 46px;
  height: 38px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  transition: background-color var(--dur) var(--ease);
}
#win-min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='0' y='5' width='10' height='1' fill='%23d6d6d6'/%3E%3C/svg%3E");
}
#win-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='0.5' y='0.5' width='9' height='9' fill='none' stroke='%23d6d6d6'/%3E%3C/svg%3E");
}
#win-max.maximized, #win-max.is-maximized, #win-max[data-maximized="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 V0.5 H9.5 V7.5 H7.5' fill='none' stroke='%23d6d6d6'/%3E%3Crect x='0.5' y='2.5' width='7' height='7' fill='none' stroke='%23d6d6d6'/%3E%3C/svg%3E");
}
#win-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0.5 0.5 L9.5 9.5 M9.5 0.5 L0.5 9.5' fill='none' stroke='%23d6d6d6' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
#win-min:hover, #win-max:hover { background-color: var(--hover); }
#win-min:active, #win-max:active { background-color: var(--active); }
#win-close:hover, #win-close:active {
  background-color: #c42b1c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0.5 0.5 L9.5 9.5 M9.5 0.5 L0.5 9.5' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
#win-close:active { background-color: #b3271a; }

/* ----------------------------------------------------------------
   2. Ribbon (26px tab strip + 92px body, collapsible)
   ---------------------------------------------------------------- */
#ribbon {
  position: relative;
  background: var(--bg-ribbon-tabs);
  border-bottom: 1px solid #1c1c1c;
}

#ribbon-tabs {
  display: flex;
  align-items: stretch;
  height: var(--ribbon-tabs-h);
  padding: 0 8px;
  background: linear-gradient(180deg, #292929, var(--bg-ribbon-tabs));
}
#ribbon-tabs > button, .ribbon-tab {
  position: relative;
  height: var(--ribbon-tabs-h);
  padding: 0 13px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
#ribbon-tabs > button:hover { background: rgba(255,255,255,.05); color: var(--text-bright); }
#ribbon-tabs > button.active {
  background: var(--bg-ribbon);
  color: var(--text-bright);
}
#ribbon-tabs > button.active::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}


/* The ribbon display control: the ▴ that minimizes and the ▾ that opens
   the industry standard's list of how far. It rides at the end of the tab strip, just
   past the last tab. */
.ribbon-min {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 4px;
  align-self: center;
}
.ribbon-min > button {
  height: 19px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ribbon-min > button:hover { background: var(--hover); color: var(--text-bright); }
#ribbon-collapse {
  width: 21px;
  border: 1px solid var(--border-soft);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.ribbon-min-chev { width: 14px; font-size: 10px; }
/* the glyph flips once the ribbon is down, whichever state it went to */
#ribbon:not([data-min="full"]) #ribbon-collapse { transform: rotate(180deg); }

/* minimized to panel titles: the titles are all that is left of the row */
#ribbon[data-min="panels"] #ribbon-content { height: auto; overflow: visible; }
#ribbon[data-min="panels"] .panel-content { display: none; }
#ribbon[data-min="panels"] .panel-title { cursor: pointer; padding: 2px 12px; }
#ribbon[data-min="panels"] .panel-title:hover { background: var(--hover); color: var(--text-bright); }
#ribbon[data-min="panels"] .panel-launcher { display: none; }

/* minimized to panel buttons: each panel is its own button, and clicking
   one drops the real panel underneath */
#ribbon[data-min="buttons"] #ribbon-content { height: 52px; }
#ribbon[data-min="buttons"] .panel-mini svg { width: 22px; height: 22px; }
#ribbon[data-min="buttons"] .panel-title { cursor: pointer; }

#ribbon-content {
  display: flex;
  align-items: stretch;
  height: var(--ribbon-body-h);
  background: linear-gradient(180deg, var(--bg-ribbon) 0%, #2f2f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  overflow-x: auto;
  overflow-y: hidden;
}
#ribbon-content::-webkit-scrollbar { height: 5px; }
#ribbon.collapsed #ribbon-content { display: none; }
/* minimized to tabs, a tab click drops the panels over the drawing for one
   pick (app.js: the peek) — the row is the same row, laid over the
   workspace instead of pushing it down, and it goes back up with the next
   click elsewhere. Under the dropped panels (2900) and slide-outs (3000). */
#ribbon.collapsed.peek #ribbon-content {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 950;
  border-bottom: 1px solid #1c1c1c;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}

/* --- ribbon panels --- */
.ribbon-panel {
  flex: none;
  display: flex;
  flex-direction: column;
  min-width: 62px;
}
.ribbon-panel + .ribbon-panel { border-left: 1px solid var(--border-soft); }

.panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 4px 2px 2px;
}
.panel-title {
  flex: none;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-panel-title);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.25);
  white-space: nowrap;
  padding: 0 8px;
  transition: color var(--dur) var(--ease);
}
/* the ▾ is the .pt-chev app.js puts on expanding panels — no ::after copy,
   which doubled the arrow and hung one on panels with nothing behind it */
.panel-title:hover { color: var(--text); }

.panel-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

/* --- ribbon buttons --- */
.rbtn {
  background: transparent;
  border-radius: var(--radius);
  color: var(--text);
}
.rbtn:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.rbtn:active, .rbtn.pressed { background: var(--active); box-shadow: inset 0 0 0 1px var(--border); }
.rbtn[disabled] { opacity: .35; }
.rbtn svg { flex: none; }

.rbtn-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 48px;
  height: 100%;
  padding: 5px 1px 3px;
}
.rbtn-large svg { width: 32px; height: 32px; }
.rbtn-large span {
  font-size: 11px;
  line-height: 12px;
  text-align: center;
  color: var(--text);
  white-space: normal;
}

.rbtn-small {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 5px 0 3px;
  font-size: 11px;
  white-space: nowrap;
}
.rbtn-small svg { width: 16px; height: 16px; }
.rbtn-small span { overflow: hidden; text-overflow: ellipsis; }

.rbtn-icononly {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rbtn-icononly svg { width: 16px; height: 16px; }

/* --- ribbon selects --- */
.ribbon-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 100px;
  max-width: 170px;
  height: 22px;
  padding: 0 6px 0 8px;
  font-size: 12px;
  color: var(--text);
  /* chevron is a real element (.rs-chevron) supplied by app.js */
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ribbon-select:hover { border-color: #565656; }
.ribbon-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.ribbon-select option { background: var(--bg-input); color: var(--text); }

.layer-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 1px;
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   QUICKCALC palette — floats over the drawing, dragged by its strip
   ---------------------------------------------------------------- */
.qcalc {
  position: fixed;
  left: 64px;
  top: 46px;
  z-index: 3400;
  display: flex;
  width: 246px;
  max-height: calc(100vh - 90px);
  background: var(--bg-palette);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  font-size: 12px;
}
.qcalc-strip {
  flex: none;
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: var(--bg-panel-title, #2b2b2b);
  border-right: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.qcalc-strip-t {
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.qcalc-x {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
.qcalc-x:hover { color: var(--text-bright); }
.qcalc-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 5px 6px 8px;
}
.qcalc-tools { display: flex; gap: 2px; padding-bottom: 4px; }
.qcalc-tbtn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.qcalc-tbtn:hover { background: var(--hover); border-color: var(--border); }
.qcalc-hist {
  height: 62px;
  overflow-y: auto;
  margin-bottom: 4px;
  padding: 2px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.qcalc-hrow { padding: 1px 0; cursor: pointer; }
.qcalc-hrow:hover { color: var(--text-bright); }
.qcalc-input, .qcalc-uin {
  width: 100%;
  height: 22px;
  padding: 0 5px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.qcalc-input:focus, .qcalc-uin:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}
.qcalc-mode {
  margin: 8px 0 2px;
  padding-bottom: 2px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}
.qcalc-sec { margin-top: 4px; }
.qcalc-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding: 0 4px;
  background: var(--bg-panel-title, #2b2b2b);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}
.qcalc-sec-h:hover { color: var(--text-bright); }
.qcalc-chev { font-size: 9px; color: var(--text-dim); transform: rotate(-90deg); }
.qcalc-sec.open .qcalc-chev { transform: none; }
.qcalc-sec-b { display: none; padding: 4px 0 2px; }
.qcalc-sec.open .qcalc-sec-b { display: block; }
.qcalc-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.qcalc-pad-sci { grid-template-columns: repeat(4, 1fr); }
.qcalc-key {
  height: 22px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
}
.qcalc-key:hover { background: var(--hover); border-color: #565656; }
.qcalc-key.warn { color: #e07070; border-color: #6d3a3a; }
.qcalc-key.eq { color: var(--accent-bright); border-color: var(--accent); }
.qcalc-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.qcalc-lab { flex: none; width: 96px; color: var(--text-dim); }
.qcalc-sel {
  flex: 1;
  min-width: 0;
  height: 22px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
}
.qcalc-vars { margin-top: 4px; }
/* the Sample variables tree: the industry standard's C for the constant, x for functions */
.qcalc-samp-h {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
}
.qcalc-samp-h:hover { background: var(--hover); }
.qcalc-samp .qcalc-tw { font-size: 9px; color: var(--text-dim); transition: transform .12s; }
.qcalc-samp.closed .qcalc-tw { transform: rotate(-90deg); }
.qcalc-samp.closed .qcalc-samp-b { display: none; }
.qcalc-samp-b { margin-left: 14px; border-left: 1px dotted var(--border); padding-left: 4px; }
.qcalc-vic {
  flex: none;
  width: 14px;
  text-align: center;
  font: italic 600 12px Georgia, 'Times New Roman', serif;
  color: var(--text-dim);
}
.qcalc-vic.const { color: var(--accent-bright, #3fa9e0); }
.qcalc-vrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
}
.qcalc-vrow:hover { background: var(--hover); }
.qcalc-vn { flex: 1; color: var(--text); }
.qcalc-vv { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.qcalc-vdel {
  width: 16px;
  font-size: 9px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
.qcalc-vdel:hover { color: #e07070; }
.qcalc-empty { padding: 3px 4px; color: var(--text-dim); }

/* --- ribbon panel slide-out (the ▾ on a panel title) --- */
.panel-title.pt-has-slide { cursor: pointer; }
.panel-title.pt-has-slide:hover { background: var(--hover); color: var(--text-bright); }
.panel-title.pt-open .pt-chev { transform: rotate(180deg); display: inline-block; }
.panel-slide {
  position: fixed;
  z-index: 3000;
  min-width: 210px;
  padding: 6px 8px 2px;
  background: var(--bg-panel, #333);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.panel-slide-foot { display: flex; justify-content: flex-start; padding-top: 2px; }
.panel-slide-pin {
  width: 18px;
  height: 16px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: .55;
}
.panel-slide-pin:hover, .panel-slide-pin.on { opacity: 1; color: var(--accent-bright); }
.lay-slide { gap: 4px; }
.lay-slide-row { align-items: center; gap: 5px; }
/* .plab is the plot dialog's light-theme label; in the dark slide-out the
   panel's own colours have to win */
.lay-slide .lay-fade-lab { flex: 1; width: auto; font-size: 12px; color: var(--text); }
.lay-slide .lay-fade-num { width: 52px; }
.lay-slide .plab { color: var(--text-dim); }
.lay-fade-btn.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* --- Hatch Creation / Gradient contextual tab --- */
/* one scrollable strip of swatches, as the industry-standard gallery is: a second row
   would have its names clipped by the ribbon's fixed height */
.hatch-gallery {
  display: flex;
  flex-wrap: nowrap;   /* the ribbon's panel rows wrap by default; this must not */
  gap: 3px;
  max-width: 330px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.hatch-gallery::-webkit-scrollbar { height: 6px; }
.hatch-gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.hatch-gallery::-webkit-scrollbar-thumb:hover { background: #565656; }
.hatch-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 1px;
  width: 52px;
  padding: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hatch-tile:hover { background: var(--hover); border-color: var(--border); }
.hatch-tile.sel { background: var(--accent-soft); border-color: var(--accent); }
.hatch-tile canvas {
  display: block;
  width: 44px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 1px;
}
.hatch-tile-name {
  max-width: 48px;
  overflow: hidden;
  font-size: 9px;
  line-height: 10px;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hatch-prow { align-items: center; gap: 6px; }
.hatch-plab { flex: none; width: 78px; font-size: 12px; color: var(--text-dim); }
.hatch-pnum {
  width: 62px;
  height: 22px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.hatch-pnum:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
/* a control the current mode does not use (Tint under Two color, and back) */
.hatch-prow.disabled, .ribbon-select.disabled { opacity: .4; pointer-events: none; }
/* a latched ribbon button (Gradient > Centered) */
.rbtn.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* ----------------------------------------------------------------
   3. File tabs (26px)
   ---------------------------------------------------------------- */
#file-tabs {
  display: flex;
  align-items: stretch;
  height: var(--filetabs-h);
  padding-left: 0;
  background: linear-gradient(180deg, #272727, #232323);
  border-bottom: 1px solid #191919;
}
.ftab-menu {
  flex: none;
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border-right: 1px solid var(--border-soft);
}
.ftab-menu svg { width: 16px; height: 16px; }
.ftab-menu:hover { background: rgba(255,255,255,.06); color: var(--text-bright); }
.ftab-menu:active { background: var(--active); }
.ftab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-dim);
  border-right: 1px solid var(--border-soft);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ftab:hover { background: rgba(255,255,255,.045); color: var(--text); }
.ftab.active {
  background: #2c333d;                 /* joins model space below */
  color: var(--text-bright);
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.ftab-label { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ftab-close {
  width: 16px;
  height: 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.ftab.active .ftab-close, .ftab:hover .ftab-close { opacity: 1; }
.ftab-close:hover { background: rgba(255,255,255,.14); color: var(--text-bright); }
.ftab-plus {
  width: 27px;
  height: 100%;
  font-size: 15px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ftab-plus:hover { background: rgba(255,255,255,.06); color: var(--text-bright); }

/* ----------------------------------------------------------------
   4. Workspace / viewport
   ---------------------------------------------------------------- */
#workspace {
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
#viewport-container {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-canvas);
}
#canvas, #overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Without this a finger dragged across the drawing gets one pointermove
     and then a pointercancel: the browser decides the gesture was a scroll
     and takes it. js/touch.js owns touch here instead. */
  touch-action: none;
}
#canvas { z-index: 1; }
#overlay-canvas { z-index: 2; cursor: none; }

/* ----- Viewport label [-][Top][2D Wireframe] ----- */
#vp-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  gap: 1px;
  font-size: 12px;
  color: var(--vp-label);
  white-space: nowrap;
}
.vp-seg {
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vp-seg:hover { color: var(--text-bright); background: rgba(255,255,255,.08); }

/* Paper space: the sheet has no viewport of its own, so the label, the cube
   and the WCS pill stand down until a viewport is activated. A frame too
   small to hold the cube and the bar does without them. */
#viewport-container.space-paper #vp-label,
#viewport-container.space-paper #viewcube,
#viewport-container.space-paper #wcs-pill,
.vp-cramped { display: none !important; }

/* ----- View navigator (axis gizmo + home/roll buttons) ----- */
#viewcube {
  position: absolute;
  top: 16px;
  right: 64px;
  width: 120px;
  height: 120px;
  z-index: 5;
  opacity: .6;
  cursor: pointer;
  transition: opacity 160ms var(--ease);
  user-select: none;
}
#viewcube:hover { opacity: 1; }

.vc-home {
  position: absolute;
  top: -4px;
  left: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #c8cdd4;
  cursor: pointer;
  z-index: 2;
}
.vc-home:hover { color: #fff; }

.vc-roll {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  gap: 1px;
  z-index: 2;
}
.vc-roll button {
  width: 18px;
  height: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #c8cdd4;
  cursor: pointer;
}
.vc-roll button:hover { color: #fff; }

/* the gizmo itself is canvas-rendered (tools3d.js) so it truly rotates in 3D */
.vc-canvas {
  position: absolute;
  inset: 0;
  width: 120px;
  height: 120px;
}

/* ----- WCS pill (under the ViewCube, industry-standard-style gray pill) ----- */
#wcs-pill {
  position: absolute;
  top: 146px;
  right: 88px;
  min-width: 72px;
  height: 21px;
  padding: 0 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #2e343b;
  background: rgba(198, 203, 210, .85);
  border: 1px solid #878e97;
  border-radius: 4px;
  opacity: .6;
  transition: opacity 160ms var(--ease), background var(--dur) var(--ease);
}
#wcs-pill .wcs-chev { font-size: 8px; opacity: .8; }
#wcs-pill:hover { opacity: 1; background: rgba(215, 220, 226, .95); }
#wcs-pill:active { background: rgba(180, 186, 194, .95); }

/* ----- Navigation rail: a fixed vertical strip on the drawing's right
   edge. The view navigator sits just to its left; the Agent button is
   the first seat, under the gizmo. Corner docks (Customize) shrink it
   back to a pill. ----- */
#navbar {
  position: absolute;
  top: 12px;
  right: 10px;
  bottom: 12px;
  width: 40px;
  height: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  padding-left: 0;
  background: rgba(22, 26, 32, .78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#navbar:empty { display: none; }
#navbar button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 140ms var(--ease), color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}
#navbar button svg { width: 16px; height: 16px; }
#navbar button:hover { background: rgba(255, 255, 255, .07); color: var(--text-bright); }
#navbar button:active { background: rgba(255, 255, 255, .12); }
/* Agent is the product's front door — first seat, lit, split from view tools */
#navbar .nav-agent {
  color: var(--accent-bright, #4fb3ea);
  margin-bottom: 8px;
}
#navbar .nav-agent::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
#navbar .nav-agent.on {
  background: rgba(63, 169, 224, .2);
  box-shadow: inset 0 0 0 1px rgba(79, 179, 234, .45),
    0 0 14px rgba(63, 169, 224, .22);
  color: #d8f0ff;
}
.nav-corner {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  color: var(--text-dim);
  border-radius: 2px;
}
.nav-corner:hover { color: var(--text-bright); background: rgba(255,255,255,.14); }

/* Customize (the ▾ at the foot of the bar) and the docking positions the
   list offers: under the ViewCube, or in a corner of the drawing area */
#navbar .nav-customize {
  height: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  margin-top: auto;
  color: var(--text-dim);
}
#navbar .nav-customize svg { width: 12px; height: 12px; }
#navbar .nav-customize.nav-alone { border-top: none; margin-top: auto; }
/* a corner dock shrinks the rail back to a compact pill */
#navbar[data-dock="topleft"],
#navbar[data-dock="topright"],
#navbar[data-dock="bottomleft"],
#navbar[data-dock="bottomright"] {
  width: 34px;
  height: auto;
  bottom: auto;
  padding: 0;
  border-radius: 0;
}
#navbar[data-dock="topleft"]     { top: 10px; left: 10px; right: auto; }
#navbar[data-dock="topright"]    { top: 10px; right: 10px; left: auto; }
#navbar[data-dock="bottomleft"]  { bottom: 10px; left: 10px; right: auto; top: auto; }
#navbar[data-dock="bottomright"] { bottom: 10px; right: 10px; left: auto; top: auto; }

/* ----- UCS icon (2D-wireframe: light-gray thin axes + X/Y labels) ----- */
/* The live icon is drawn on the overlay canvas at the UCS origin, where it
   can be picked and dragged; this element stays only for the View-tab
   toggle to hang its class on. */
#ucs-icon {
  display: none;
  position: absolute;
  left: 16px;
  bottom: 124px;
  width: 64px;
  height: 64px;
  z-index: 5;
  opacity: .8;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M10 54 H56' fill='none' stroke='%23cfd3d7' stroke-width='1.4' stroke-linecap='square'/%3E%3Cpath d='M10 54 V8' fill='none' stroke='%23cfd3d7' stroke-width='1.4' stroke-linecap='square'/%3E%3Cpath d='M10 54 L21 43' fill='none' stroke='%23cfd3d7' stroke-width='1.1'/%3E%3Ctext x='50' y='48' font-family='Segoe UI, Arial, sans-serif' font-size='10' fill='%23cfd3d7'%3EX%3C/text%3E%3Ctext x='15' y='13' font-family='Segoe UI, Arial, sans-serif' font-size='10' fill='%23cfd3d7'%3EY%3C/text%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----------------------------------------------------------------
   5. Command panel — v3 (§21): DOCKED CENTERED like the reference
   ---------------------------------------------------------------- */
#command-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: clamp(560px, 46vw, 900px);
  max-width: calc(100% - 24px);
  z-index: 10;
  background: transparent;
  border: none;
  box-shadow: none;
  /* the wrench's Transparency dialog: at rest, and on mouse-over */
  opacity: var(--cli-op, 1);
}
#command-panel:hover, #command-panel:focus-within { opacity: var(--cli-op-roll, 1); }

/* v2: transparent container, each line its own translucent pill.
   v3 (§21): pills stack above the centered dock at the SAME width. */
#command-history {
  max-height: var(--cli-lines, 66px);
  overflow-y: auto;
  padding: 0 0 4px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-dim);
  user-select: text;
  transition: max-height 160ms var(--ease);
}
#command-panel:focus-within #command-history { max-height: 180px; }
/* the ⌄ at the end of the row opens the history the way the industry standard's does:
   a tall pane of past lines that STAYS open, rather than the few lines
   that appear while the row happens to have focus. Same specificity as
   the :focus-within rule above, so it must stay below it to win. */
#command-panel.cli-open #command-history { max-height: var(--cli-open-h, 340px); }
#command-panel.cli-open #command-history:empty { display: block; }
#command-history:empty { display: none; }
#command-history::-webkit-scrollbar { width: 6px; }
#command-history div {
  flex: none;
  max-width: 100%;
  padding: 0 10px;
  background: var(--bg-pill);
  backdrop-filter: blur(6px);
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
#command-history .echo { color: #b9c1c9; }
#command-history .err  { color: var(--danger); }

#command-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  gap: 7px;
  padding: 0 10px 0 6px;
  background: var(--bg-command);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

/* the ⣿ at the row's left edge: hold it and the whole command line goes
   where the pointer goes, exactly the industry standard's floating command line */
#cmd-grip {
  flex: none;
  width: 10px;
  align-self: stretch;
  cursor: grab;
  background-image: radial-gradient(circle, var(--text-dim) 1px, transparent 1.2px);
  background-size: 5px 5px;
  background-position: 2px 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  opacity: .75;
}
#cmd-grip:hover { opacity: 1; background-color: var(--hover); }
#command-panel.cli-dragging #cmd-grip { cursor: grabbing; }
#command-panel.cli-dragging { transition: none; }

.cmdrow-btn {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-dim);
}
.cmdrow-btn svg { width: 14px; height: 14px; }
.cmdrow-btn:hover { background: var(--hover); color: var(--text-bright); }
.cmdrow-btn:active { background: var(--active); }
#cmd-recent svg { transform: rotate(180deg); }
/* points up while the history is closed — the direction it will open —
   and flips down to close it again */
#cmd-expand svg { transform: rotate(180deg); transition: transform 160ms var(--ease); }
#command-panel.cli-open #cmd-expand svg { transform: rotate(0deg); }

/* Esc and ↵ at the end of the row, drawn as the keycaps they stand in for.
   A touch screen shows no keyboard until a text field asks for one, so
   without these a running tool could not be cancelled and a selection
   could not be accepted. They ride in the row, so wherever the command
   line is dragged they go with it. */
.cmd-key {
  flex: none;
  height: 22px;
  min-width: 28px;
  padding: 0 7px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1;
  color: var(--text);
  touch-action: manipulation;
}
#cmd-enter { font-size: 14px; font-weight: 400; margin-left: 2px; }
.cmd-key:hover { background: var(--hover); color: var(--text-bright); border-color: var(--text-dim); }
.cmd-key:active { background: var(--active); box-shadow: none; transform: translateY(1px); }

#cmd-badge {
  flex: none;
  color: var(--accent-bright);
  font-size: 13px;
  font-family: var(--font-mono);
  opacity: .9;
  transform: translateY(1px);
}
#command-prompt-label {
  /* the prompt's bracket list is the clickable part, so it gets the room it
     needs and the typing area keeps a floor (min-width below) rather than
     the prompt being cut off at a fixed share of the row */
  flex: 0 1 auto;
  max-width: 82%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-bright);
}
#command-prompt-label:empty { display: none; }
#command-input {
  flex: 1 1 140px;
  min-width: 140px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-bright);
  caret-color: var(--accent-bright);
}

/* autocomplete popup — opens ABOVE the row (§21: icon rows, max 9, scroll) */
#command-suggest {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  max-width: 100%;
  max-height: 244px;              /* ~9 rows (first row taller) */
  overflow-y: auto;
  z-index: 20;
  padding: 3px;
  background: rgba(38,42,47,.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
#command-suggest::-webkit-scrollbar { width: 6px; }
.sug-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 24px;
  padding: 0 10px 0 7px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
#command-suggest .sug-item:first-child { height: 30px; }  /* top match slightly taller */
.sug-item b { color: var(--text-bright); font-weight: 700; }
.sug-item .sug-ico {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
}
.sug-item .sug-ico svg { width: 16px; height: 16px; }
.sug-item .sug-name { flex: none; }
.sug-item .sug-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 4px;
}
.sug-item .sug-alias,
.sug-item > span:last-child:not(:only-child):not(.sug-desc):not(.sug-name) {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 11px;
}
.sug-item:hover { background: rgba(255,255,255,.06); }
.sug-item.sel {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(79,179,234,.4);
  color: var(--text-bright);
}
.sug-item.sel .sug-alias { color: var(--text); }
/* selected row: right-aligned dim "?" help glyph (unless the row renders its own) */
.sug-item.sel:not(:has(.sug-help))::after {
  content: "?";
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12px;
}
.sug-item.sel:has(.sug-desc)::after,
.sug-item.sel:has(.sug-alias)::after { margin-left: 6px; }
.sug-item .sug-help { flex: none; margin-left: 6px; color: var(--text-dim); font-family: var(--font-ui); }

/* ----------------------------------------------------------------
   6. Palettes (right-docked 260px)
   ---------------------------------------------------------------- */
.palette {
  flex: 0 0 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-palette);
  border-left: 1px solid var(--border);
}

.pal-header {
  flex: none;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 4px 0 10px;
  background: linear-gradient(180deg, #2f2f30, #29292a);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.pal-header .pal-title, .pal-header > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--text);
}
.pal-header button {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pal-header button:hover { background: var(--hover); color: var(--text-bright); }

.pal-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.pal-toolbar button {
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--text);
}
.pal-toolbar button svg { width: 16px; height: 16px; }
.pal-toolbar button:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.pal-toolbar button:active { background: var(--active); }

.pal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0; }

.pal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.pal-row:hover { background: rgba(255,255,255,.045); }
.pal-row.current { background: var(--accent-soft); box-shadow: inset 2px 0 0 0 var(--accent); }
.pal-row .lr-name, .pal-row > span:not(.layer-swatch) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pal-row button {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.pal-row button svg { width: 14px; height: 14px; }
.pal-row button:hover { background: var(--hover); }
.pal-row button.off { opacity: .3; }
.pal-row .layer-swatch { cursor: pointer; }
.pal-row input {
  flex: 1;
  min-width: 0;
  height: 18px;
  padding: 0 5px;
  font-size: 12px;
  color: var(--text-bright);
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 2px;
  outline: none;
}

/* properties palette internals */
.pal-section {
  padding: 5px 10px 4px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: #2c2c2d;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.pal-kv {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  min-height: 24px;
  padding: 1px 10px;
  font-size: 12px;
  gap: 8px;
}
.pal-kv label { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-kv > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-kv .ribbon-select, .pal-kv select { min-width: 0; max-width: none; width: 100%; }
.pal-kv input {
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  outline: none;
}
.pal-kv input:focus { border-color: var(--accent); }
.pal-note { padding: 12px 10px; font-size: 12px; color: var(--text-dim); }

/* ----------------------------------------------------------------
   7. Status bar (28px)
   ---------------------------------------------------------------- */
#statusbar {
  display: flex;
  align-items: stretch;
  height: var(--statusbar-h);
  padding: 0 6px 0 0;
  background: linear-gradient(180deg, #2f2f2f, var(--bg-statusbar));
  border-top: 1px solid #242424;
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: 12px;
}
/* LEFT: hamburger + Model/Layout sheet tabs */
#sb-left { display: flex; align-items: stretch; min-width: 0; }
.sb-burger {
  width: 32px;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b4b4b4;
  border-right: 1px solid var(--border-soft);
}
.sb-burger svg { width: 16px; height: 16px; }
.sb-burger:hover { background: var(--hover); color: var(--text-bright); }
.sb-burger:active { background: var(--active); }
#sheet-tabs { display: flex; align-items: stretch; }
.sheet-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 13px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  border-right: 1px solid var(--border-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sheet-tab:hover { background: var(--hover); color: var(--text); }
.sheet-tab.sel { background: var(--accent-soft, rgba(33,150,217,.35)); color: var(--text-bright); }
.sheet-rename {
  width: 76px;
  background: #fff;
  color: #111;
  border: 1px solid var(--accent);
  font: 12px "Segoe UI", sans-serif;
  padding: 0 3px;
  outline: none;
}
/* layout tabs docked in their own strip above the status bar */
#sheet-dock {
  display: flex;
  align-items: stretch;
  height: 26px;
  background: var(--bg-panel-title, #2b2b2b);
  border-top: 1px solid var(--border, #3f3f3f);
}
/* the panel dialog launcher: the industry standard's little arrow in the title corner */
.panel-launcher {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim, #8a8a8a);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.panel-title { position: relative; }
/* the centred "Section ▾" steps left of the corner arrow, as the industry standard's does */
.panel-title.pt-has-launcher { padding-right: 18px; }
.panel-launcher svg { display: block; }
.panel-launcher:hover { color: var(--text-bright, #fff); }

/* the Properties palette's no-selection sheet */
.prop-nosel {
  margin: 4px 6px;
  padding: 2px 8px;
  background: var(--bg-input, #1e1e1e);
  border: 1px solid var(--border, #3f3f3f);
  font-size: 12px;
  color: var(--text, #d6d6d6);
}
.prop-v.prop-dim { opacity: .55; }
.prop-num {
  width: 100%;
  min-width: 0;
  height: 20px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text, #d6d6d6);
  border: 1px solid var(--border, #3f3f3f);
  font: 12px "Segoe UI", sans-serif;
  padding: 0 4px;
  box-sizing: border-box;
}

/* the Properties panel slide-out rows */
.props-slide { gap: 3px; }
.props-row { display: flex; align-items: center; gap: 6px; padding: 1px 2px; }
.props-ic { display: inline-flex; flex: none; }
.props-lab { font-size: 12px; color: var(--text, #d6d6d6); }
.props-sel {
  flex: 1;
  min-width: 120px;
  height: 20px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text, #d6d6d6);
  border: 1px solid var(--border, #3f3f3f);
  font: 12px "Segoe UI", sans-serif;
}
.props-sel:disabled { opacity: .5; }
.props-num {
  width: 48px;
  height: 20px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text, #d6d6d6);
  border: 1px solid var(--border, #3f3f3f);
  font: 12px "Segoe UI", sans-serif;
  text-align: right;
  padding: 0 4px;
}
.pdlg.movecopy-dlg { position: absolute; width: 300px; height: auto; color-scheme: light }
#movecopy-ov { position: fixed; inset: 0; z-index: 3840 }
.movecopy-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 4px; background: #f0f0f0 }
.mc-lab { font-size: 12px; color: #1b1b1b }
.mc-list { height: 110px }
.sheet-tab.active { background: var(--sheet-active); color: var(--text-bright); }
.sheet-tab.active::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
.sheet-tab.st-plus { padding: 0 10px; font-size: 14px; }

/* RIGHT cluster: coords · MODEL · toggles · 1:1 · isolate · gear · clean */
#sb-cluster { display: flex; align-items: center; gap: 1px; margin-left: auto; min-width: 0; }
#coords-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  min-width: 172px;
  text-align: right;
  white-space: nowrap;
}
#sb-toggles { display: flex; align-items: center; gap: 1px; margin-left: 4px; }
#sb-right { display: flex; align-items: center; gap: 1px; margin-left: 8px; }

.sb-btn {
  width: 26px;
  height: 22px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b4b4b4;
}
.sb-btn svg { width: 16px; height: 16px; }
.sb-btn:hover { background: var(--hover); color: var(--text-bright); }
.sb-btn:active { background: var(--active); }
.sb-btn.on { background: var(--toggle-on-bg); color: var(--toggle-on-icon); }
.sb-btn.on:hover { background: #234a66; }

.sb-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 6px;
  flex: none;
}
.sb-text-btn {
  height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.sb-text-btn:hover { background: var(--hover); color: var(--text-bright); }
/* Display Workspace Label: the current workspace's name beside the gear */
.sb-ws-label {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 4px;
  white-space: nowrap;
  align-self: center;
}
.sb-text-btn:active { background: var(--active); }

/* ----------------------------------------------------------------
   8. Start page (landing-quality)
   ---------------------------------------------------------------- */
#start-page {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  background: var(--bg-app);
}

/* While the Start page stands there is no drawing to work on: the ribbon's
   tools grey out, as the industry standard's Start tab shows no drawing ribbon at all.
   The tab strip stays live (the ribbon can still be browsed), and New and
   Open keep their colour — they are the way off this page. */
body.start-mode #ribbon-content,
body.start-mode #qat .qat-btn:not([data-cmd="NEW"]):not([data-cmd="OPEN"]) {
  opacity: .4;
  pointer-events: none;
}

/* --- left sidebar (216px) --- */
.st-side {
  flex: none;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 14px 14px;
  background: var(--bg-palette);
  border-right: 1px solid var(--border-soft);
}
.st-wordmark {
  padding: 2px 4px 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-bright);
}

/* split buttons: main half + chevron half */
.st-split { flex: none; display: flex; width: 100%; }
.st-split button {
  height: 34px;
  background: #2d2d2d;
  border: 1px solid var(--border);
  color: var(--text);
}
.st-split-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  font-size: 13px;
  text-align: left;
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none !important;
}
.st-split-main svg { width: 16px; height: 16px; flex: none; }
.st-split-chev {
  flex: none;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
}
.st-split button:hover { background: var(--hover); color: var(--text-bright); }
.st-split button:active { background: var(--active); }
.st-split.primary button {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.st-split.primary .st-split-chev { border-left-color: rgba(0,0,0,.3) !important; font-weight: 400; }
.st-split.primary button:hover { background: var(--accent-bright); color: #fff; }
.st-split.primary button:active { background: #1d84c0; }

/* nav list */
.st-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.st-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.st-nav-item svg { width: 16px; height: 16px; flex: none; }
.st-nav-item:hover { background: var(--hover); color: var(--text-bright); }
.st-nav-item.active {
  background: var(--accent-soft);
  color: var(--text-bright);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* footer links */
.st-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 6px 0;
  border-top: 1px solid var(--border-soft);
}
.st-foot-link { font-size: 12px; color: var(--text-dim); cursor: pointer; width: fit-content; }
.st-foot-link:hover { color: var(--accent-bright); }

/* --- main area: Recent heading, toolbar, cards / empty state --- */
.st-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 30px 18px;
}
.st-head { flex: none; font-size: 22px; font-weight: 600; color: var(--text-bright); }
.st-toolbar { flex: none; display: flex; align-items: center; gap: 6px; margin: 14px 0 16px; }
.st-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 260px;
  height: 26px;
  padding: 0 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.st-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: 12px; color: var(--text); }
.st-viewbtn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-dim);
}
.st-viewbtn svg { width: 16px; height: 16px; }
.st-viewbtn:hover { background: var(--hover); color: var(--text-bright); }
.st-viewbtn.active { background: var(--accent-soft); color: var(--accent-bright); }
/* Sort by [Last Opened ⌄] [↓], then the search at the far end */
.st-sort-lab { flex: none; margin-left: 10px; font-size: 12px; color: var(--text-dim); }
.st-sortbtn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 150px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
}
.st-sortbtn:hover { background: var(--hover); }
.st-sort-chev { color: var(--text-dim); font-size: 10px; }
.st-sortdir { font-size: 14px; }
.st-toolbar .st-search { margin-left: auto; }

.st-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
}
.st-cards.list { display: flex; flex-direction: column; gap: 3px; }
.st-cards.empty { display: flex; align-items: center; justify-content: center; }
.st-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 14px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.st-card:hover { background: #303032; border-color: #4a4a4a; }
.st-card:active { background: var(--active); }
.st-card-art { color: var(--accent-bright); margin-bottom: 6px; }
.st-card-art svg { width: 32px; height: 32px; }
.st-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-card:hover .st-card-name { color: var(--text-bright); }
.st-card-path {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-cards.list .st-card { flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px; border: none; background: transparent; border-radius: var(--radius); }
.st-cards.list .st-card:hover { background: var(--hover); }
.st-cards.list .st-card-art { margin-bottom: 0; }
.st-cards.list .st-card-art svg { width: 16px; height: 16px; }
.st-cards.list .st-card-name { flex: none; max-width: 40%; }
.st-cards.list .st-card-path { flex: 1; min-width: 0; }

/* empty state */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 40px;
}
.st-empty-art { color: #9aa0a6; margin-bottom: 12px; }
.st-empty-art svg { width: 140px; height: 140px; }
.st-empty-title { font-size: 16px; color: var(--text); }
.st-empty-sub { font-size: 12px; color: var(--text-dim); }

/* --- right panel (300px): Tips + About cards --- */
.st-tipscol {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  overflow-y: auto;
  border-left: 1px solid var(--border-soft);
}
.tip-card {
  flex: none;
  padding: 13px 16px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
.tip-title { font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 8px; }
.tip-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text);
}
.tip-row .tip-ic { flex: none; display: inline-flex; margin-top: 1px; color: var(--accent-bright); }
.tip-row .tip-ic svg { width: 16px; height: 16px; }
.tip-row.about-kv { color: var(--text-dim); padding: 3px 0; }

/* the Start page's update notice: a strip above Recent, gone on Later
   unless the update is required, when it stays until the update */
.st-update {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(63, 169, 224, .3);
  background: linear-gradient(135deg, rgba(63, 169, 224, .13), rgba(63, 169, 224, .04));
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.st-update.required {
  border-color: rgba(224, 160, 63, .4);
  background: linear-gradient(135deg, rgba(224, 160, 63, .14), rgba(224, 160, 63, .04));
}
.st-update-txt { flex: 1 1 auto; min-width: 0; }
.st-update-txt strong { color: var(--text-bright); }
.st-update-notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-dim);
  white-space: pre-line;
}
.st-update-btn {
  flex: none;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.st-update-btn:hover { background: var(--hover); }
.st-update-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.st-update-btn.primary:hover { background: var(--accent-bright); }
/* "Clear recent": a small link in the toolbar, shown while there is a list */
.st-clear-link { font-size: 12px; color: var(--text-dim); cursor: pointer; margin-left: 10px; white-space: nowrap; }
.st-clear-link:hover { color: var(--accent-bright); }

/* ----------------------------------------------------------------
   9. App menu (big file dropdown, under app button)
   ---------------------------------------------------------------- */
#app-menu {
  position: fixed;
  top: 39px;
  left: 4px;
  width: 460px;
  z-index: 1000;
  display: grid;
  grid-template-columns: 252px 1fr;
  background: #2a2a2b;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.menu-main {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-right: 1px solid var(--border-soft);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
.menu-item svg { width: 18px; height: 18px; flex: none; }
.menu-item:hover { background: var(--hover); color: var(--text-bright); }
.menu-item:active { background: var(--active); }
.menu-item.disabled { opacity: .4; pointer-events: none; }
.menu-item .mi-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item .mi-shortcut,
.menu-item > span + span {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--text-dim);
}
.menu-sep { height: 1px; background: var(--border-soft); margin: 5px 8px; }

.menu-recent {
  display: flex;
  flex-direction: column;
  min-height: 264px;
  padding: 10px 8px;
  background: #252526;
}
.menu-recent-title {
  padding: 0 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.menu-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
  text-align: left;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-recent-item svg { width: 16px; height: 16px; flex: none; }
.menu-recent-item:hover { background: var(--hover); color: var(--text-bright); }
.menu-recent-empty { padding: 6px; font-size: 12px; color: var(--text-dim); }

/* ----------------------------------------------------------------
   10. Context menu
   ---------------------------------------------------------------- */
#ctx-menu, .nasj-menu {
  position: fixed;
  /* over the panel slide-out (3000) AND the modal dialogs (3830-3840): a
     flyout ▾ that lives IN a slide-out drops its menu across the box it
     came from, and a combo opened INSIDE a dialog (Save Workspace's name
     list, the CUI's Open) must drop in front of the dialog itself */
  z-index: 3900;
  min-width: 210px;
  padding: 4px;
  background: #2b2b2c;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.nasj-menu { min-width: 176px; }
.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
.ctx-item svg { width: 16px; height: 16px; flex: none; }
.ctx-item:hover { background: var(--hover); color: var(--text-bright); }
.ctx-item:active { background: var(--active); }
.ctx-item.disabled { opacity: .4; pointer-events: none; }
.ctx-sep { height: 1px; background: var(--border-soft); margin: 4px 6px; }
.ctx-item .ci-icon { flex: none; display: inline-flex; width: 16px; }
.ctx-item .ci-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-item .ctx-check { flex: none; margin-left: auto; display: inline-flex; color: var(--accent-bright); }
/* the default right-click menu: sixteen rows must not scroll at 320px, and
   its cascading submenus must not be clipped */
#ctx-menu.ctx-rich { max-height: none; overflow: visible; }

/* --- SteeringWheels: the 2D navigation wheel at the cursor --- */
#navwheel { position: fixed; z-index: 1500; width: 132px; height: 132px; pointer-events: none; }
#navwheel .nw-wedge {
  pointer-events: auto;
  cursor: pointer;
  fill: rgba(43, 49, 56, .92);
  stroke: #555;
  stroke-width: 1;
}
#navwheel .nw-wedge:hover { fill: rgba(63, 169, 224, .5); }
#navwheel .nw-label {
  fill: #d6d6d6;
  font: 600 9px 'Segoe UI', sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
#navwheel .nw-close { pointer-events: auto; cursor: pointer; fill: #2b3138; stroke: #555; }
#navwheel .nw-close:hover { fill: #e05252; }
#navwheel .nw-x {
  fill: #d6d6d6;
  font: 10px 'Segoe UI', sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
/* the wheel-type menu button, and the Full wheel's quartered hub */
#navwheel .nw-menu { pointer-events: auto; cursor: pointer; fill: #2b3138; stroke: #555; }
#navwheel .nw-menu:hover { fill: #3fa9e0; }
#navwheel .nw-v { pointer-events: auto; cursor: pointer; }
#navwheel .nw-label-hub { font-size: 7px; }
/* UP/DOWN's gauge: the track with its Top and Bottom, the thumb on the ride */
#nw-updown { position: fixed; z-index: 1500; width: 12px; height: 90px; pointer-events: none; }
#nw-updown .nwud-track {
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #d6d6d6;
  box-shadow: 0 0 3px rgba(0, 0, 0, .7);
}
#nw-updown .nwud-track::before, #nw-updown .nwud-track::after {
  content: '';
  position: absolute;
  left: -5px;
  width: 12px;
  height: 2px;
  background: #d6d6d6;
}
#nw-updown .nwud-track::before { top: -1px; }
#nw-updown .nwud-track::after { bottom: -1px; }
#nw-updown .nwud-thumb {
  position: absolute;
  left: 0;
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: #e8930c;
  border: 1px solid #7a4c00;
}
#nw-updown .nwud-cap {
  position: absolute;
  left: 18px;
  padding: 1px 4px;
  font: 9px 'Segoe UI', sans-serif;
  color: #d6d6d6;
  background: rgba(43, 49, 56, .9);
  border: 1px solid #555;
}
#nw-updown .nwud-top { top: -4px; }
#nw-updown .nwud-bottom { bottom: -4px; }
.ctx-item .ctx-key { flex: none; margin-left: auto; padding-left: 18px; color: var(--text-dim); font-size: 11px; }
.ctx-item .ctx-check svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------------
   11. Toast + dynamic input
   ---------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: 60%;
  padding: 8px 18px;
  background: rgba(45,47,51,.96);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-2);
  font-size: 12px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: nasj-toast-in 160ms var(--ease);
}
@keyframes nasj-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#dyn-input {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  padding: 3px 8px;
  background: rgba(24,26,29,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--text);
  white-space: nowrap;
}
#dyn-input b { font-weight: 400; color: var(--accent-bright); }

/* ----------------------------------------------------------------
   12. v3 (SPEC3 §21/§24) — menus scroll, ribbon flyouts, mini
       buttons, toggles, color/linetype/lineweight previews,
       popovers, blocks palette, UI-flag visibility
   ---------------------------------------------------------------- */

/* §21: every custom dropdown menu scrolls at 320px with a thin bar */
.rs-menu, .nasj-menu, #ctx-menu, #app-menu {
  max-height: 320px;
  overflow-y: auto;
}
.rs-menu::-webkit-scrollbar, .nasj-menu::-webkit-scrollbar,
#ctx-menu::-webkit-scrollbar, #app-menu::-webkit-scrollbar { width: 6px; }

/* --- ribbon flyout buttons (.rbtn-flyout): main button + ▾ strip --- */
.rbtn-flyout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border-radius: var(--radius);
}
.rbtn-flyout > .rbtn-large {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding-bottom: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.rbtn-flyout-arrow {
  flex: none;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: var(--text-dim);
  border-radius: 0 0 var(--radius) var(--radius);
}
.rbtn-flyout-arrow:hover { background: var(--hover); color: var(--text-bright); box-shadow: inset 0 0 0 1px var(--border); }
.rbtn-flyout-arrow:active { background: var(--active); }
/* horizontal (small-row) variant: arrow beside the button */
.rbtn-flyout-h {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 22px;
  border-radius: var(--radius);
}
.rbtn-flyout-h > .rbtn-small {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
.rbtn-flyout-h > .rbtn-flyout-arrow {
  width: 12px;
  height: 100%;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- mini icon buttons (20×20, 16px icon) for dense grids --- */
.rbtn-mini {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 0;
}
.rbtn-mini svg { width: 16px; height: 16px; }
/* the mini row's split button (Modify slide-out ▸ Draw Order▾) */
.rbtn-flyout-mini { height: 20px; }
.rbtn-flyout-mini > .rbtn-mini { border-radius: 2px 0 0 2px; }
.rbtn-flyout-mini > .rbtn-flyout-arrow { width: 11px; height: 100%; border-radius: 0 2px 2px 0; }
.mini-grid { display: grid; gap: 1px; align-content: center; }

/* --- pressed/on state for real ribbon toggles (View tab) --- */
.rbtn.on, .rbtn-large.on, .rbtn-small.on {
  background: var(--toggle-on-bg);
  box-shadow: inset 0 0 0 1px rgba(79,179,234,.45);
}
.rbtn.on:hover { background: #234a66; }
.rbtn.on svg { color: var(--toggle-on-icon); }

/* --- ribbon inline text input (Annotate find-text) --- */
.ribbon-input {
  height: 22px;
  width: 118px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  outline: none;
}
.ribbon-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* --- linetype dash / lineweight bar previews (selects + menus) --- */
.lt-preview { flex: none; display: inline-flex; align-items: center; }
.lt-preview svg { display: block; }
.lw-preview {
  flex: none;
  display: inline-block;
  width: 52px;
  min-height: 1px;
  background: #d3d7db;
  border-radius: 1px;
}

/* --- "More Colors…" swatch-grid popover --- */
.color-pop {
  position: fixed;
  z-index: 1300;
  padding: 9px 10px 10px;
  background: #2b2b2c;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.color-pop-title { font-size: 11px; color: var(--text-dim); padding-bottom: 7px; }
.color-grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 4px; }
.color-cell {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
}
.color-cell:hover { outline: 2px solid var(--accent-bright); outline-offset: 0; }

/* --- View Manager (VIEW): the views tree, the property grid beside it,
   and the action buttons down the right — the industry standard's own arrangement --- */
#viewmgr-ov { position: fixed; inset: 0; z-index: 3830; }
#viewnew-ov { position: fixed; inset: 0; z-index: 3840; }
.pdlg.viewmgr-dlg { position: absolute; width: 580px; height: auto; color-scheme: light; }
.pdlg.viewnew-dlg { position: absolute; width: 320px; height: auto; color-scheme: light; }
.viewmgr-body { display: flex; flex-direction: column; gap: 6px; }
.viewmgr-cur { font: 12px "Segoe UI", sans-serif; color: #1b1b1b; }
.viewmgr-cols { display: flex; gap: 8px; align-items: stretch; }
.viewmgr-tree {
  flex: none; width: 168px; height: 252px; overflow-y: auto; padding: 2px 0;
  background: #fff; border: 1px solid #7a7a7a; border-radius: 2px;
  font: 12px "Segoe UI", sans-serif; color: #111;
}
.viewmgr-node { padding: 2px 8px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewmgr-node.child { padding-left: 24px; }
.viewmgr-node.on { background: #2a6fd6; color: #fff; }
.viewmgr-grid {
  flex: 1; min-width: 0; height: 252px; overflow-y: auto;
  background: #fff; border: 1px solid #7a7a7a; border-radius: 2px;
  font: 12px "Segoe UI", sans-serif; color: #111;
}
.viewmgr-grid table { width: 100%; border-collapse: collapse; }
.viewmgr-ghead td { background: #dbe6f4; font-weight: 600; padding: 2px 6px; border-bottom: 1px solid #c4c4c4; }
.viewmgr-grid td { padding: 2px 6px; border-bottom: 1px solid #ececec; }
.viewmgr-grid td.lab { width: 45%; color: #333; border-right: 1px solid #ececec; }
.viewmgr-grid td.val { color: #666; }
.viewmgr-none { padding: 10px; font-size: 12px; color: #666; }
.viewmgr-btns { flex: none; width: 126px; display: flex; flex-direction: column; gap: 6px; }
.viewmgr-btn { width: 100%; justify-content: center; }
.viewnew-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.viewnew-row { display: flex; align-items: center; gap: 8px; }
.viewnew-lab { flex: none; font-size: 12px; color: #1e1e1e; }
.viewnew-row .pnum { flex: 1; min-width: 0; }
.viewnew-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1e1e1e; }
/* --- Save Workspace: the Name combo, Save beside it, Cancel below --- */
#wssave-ov { position: fixed; inset: 0; z-index: 3830; }
.pdlg.wssave-dlg { position: absolute; width: 400px; height: auto; color-scheme: light; }
.wssave-body { padding: 14px 12px 16px; }
.wssave-row { display: flex; gap: 8px; align-items: flex-start; }
.wssave-row .viewnew-lab { padding-top: 4px; }
.wssave-combo { flex: 1; min-width: 0; display: flex; }
.wssave-in { flex: 1; min-width: 0; border-radius: 2px 0 0 2px; }
.wssave-drop {
  flex: none; width: 20px; font-size: 10px; color: #333;
  background: #e8e8e8; border: 1px solid #7a7a7a; border-left: none;
  border-radius: 0 2px 2px 0; cursor: default;
}
.wssave-drop:hover { background: #dcdcdc; }
.wssave-btns { flex: none; display: flex; flex-direction: column; gap: 6px; }
.wssave-btns .pbtn { min-width: 74px; justify-content: center; }
/* --- CUI (Customize User Interface): tabs, trees, command list, props --- */
#cui-ov { position: fixed; inset: 0; z-index: 3830; }
.pdlg.cui-dlg { position: absolute; width: 780px; height: auto; color-scheme: light; }
.cui-tabs { display: flex; gap: 2px; border-bottom: 1px solid #c4c4c4; padding: 2px 4px 0; }
.cui-tab {
  font: 12px "Segoe UI", sans-serif; padding: 4px 14px; color: #222; cursor: default;
  background: #e4e4e4; border: 1px solid #c4c4c4; border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.cui-tab.on { background: #fff; font-weight: 600; }
.cui-page { display: flex; gap: 8px; align-items: stretch; }
.cui-colL, .cui-colR { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cui-colL { flex: 1.15; }
.cui-cap {
  font: 600 12px "Segoe UI", sans-serif; color: #1b1b1b;
  background: #dbe6f4; border: 1px solid #c4c4c4; padding: 2px 6px;
}
.cui-file {
  font: 12px "Segoe UI", sans-serif; color: #333; background: #fff;
  border: 1px solid #7a7a7a; border-radius: 2px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cui-tree {
  height: 168px; overflow: auto; background: #fff;
  border: 1px solid #7a7a7a; border-radius: 2px;
  font: 12px "Segoe UI", sans-serif; color: #111; padding: 2px 0;
}
.cui-ttree { height: 240px; }
.cui-list { height: 148px; }
.cui-node { display: flex; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; cursor: default; }
.cui-node.on { background: #2a6fd6; color: #fff; }
.cui-tw { width: 12px; flex: none; text-align: center; color: #555; }
.cui-node.on .cui-tw { color: #fff; }
.cui-ci { flex: none; display: inline-flex; }
.cui-ci svg { filter: invert(.35); }
.cui-node.on .cui-ci svg { filter: none; }
.cui-src { margin-left: auto; color: #888; font-size: 11px; }
.cui-node.on .cui-src { color: #dce6f4; }
.cui-search { display: flex; gap: 4px; align-items: center; }
.cui-search .pnum { flex: 1; min-width: 0; }
.cui-cat { flex: none; width: 168px; }
.cui-props { flex: 1; min-height: 330px; height: auto; }
.cui-note { font: 11px "Segoe UI", sans-serif; color: #555; padding: 3px 4px; }
.cui-io-btn { flex: none; padding: 1px 8px; }

/* --- Blocks palette (View ▸ Palettes ▸ Blocks) --- */
#palette-blocks .blk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
}
#palette-blocks .blk-row:hover { background: rgba(255,255,255,.04); }
.blk-prev {
  flex: none;
  width: 58px;
  height: 42px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.blk-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blk-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-count { font-size: 10px; color: var(--text-dim); }
.blk-insert {
  flex: none;
  height: 21px;
  padding: 0 9px;
  font-size: 11px;
  color: var(--text);
  background: #333;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.blk-insert:hover { background: var(--accent); border-color: transparent; color: #fff; }
.blk-empty { padding: 14px 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
/* the palette's two tabs: what this drawing defines, and a library on disk */
.blk-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 4px 4px 0;
  border-bottom: 1px solid var(--border);
}
.blk-tab {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.blk-tab:hover { color: var(--text); }
.blk-tab.on { color: var(--text); background: var(--bg-canvas); border-color: var(--border); }
.blk-libwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.blk-libhead {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.blk-libname {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blk-libbtn {
  flex: none;
  height: 21px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--text);
  background: #333;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.blk-libbtn:hover { background: var(--accent); border-color: transparent; color: #fff; }

/* --- Tool Palettes (View ▸ Palettes ▸ Tool Palettes, Ctrl+3) ---
   The tabs stand on the docked edge, reading down their own spines, and the
   tools fill the rest — the industry standard's list view: icon, then name, one click. */
#palette-tools .tp-main { flex: 1; min-height: 0; display: flex; }
.tp-tabs {
  flex: none;
  width: 23px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 3px;
  overflow: hidden;
  background: #232324;
  border-right: 1px solid var(--border);
}
.tp-tab {
  writing-mode: vertical-rl;
  flex: 0 1 auto;
  min-height: 30px;
  padding: 7px 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  background: #2b2b2c;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 3px 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.tp-tab:hover { color: var(--text-bright); background: var(--hover); }
.tp-tab.on { color: var(--text-bright); background: var(--bg-palette); }
.tp-body { flex: 1; min-width: 0; overflow-y: auto; padding: 3px 0; }
.tp-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.tp-tool:hover { background: var(--hover); border-color: var(--border); color: var(--text-bright); }
.tp-tool:active { background: var(--active); }
.tp-tool svg { flex: none; width: 20px; height: 20px; }
.tp-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* wide enough that even the loosest pattern (ANSI34, six times the base
   spacing) still lands a line inside the tile rather than beside it */
.tp-swatch {
  flex: none;
  width: 34px;
  height: 20px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.tp-sep {
  margin: 7px 8px 3px;
  padding-top: 5px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid var(--border-soft);
}
.tp-empty { padding: 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* --- §24 View-tab UI visibility flags (Nasj.uiFlags) --- */
.uif-hidden { display: none !important; }
body.uif-no-filetabs { grid-template-rows: var(--titlebar-h) auto 0 minmax(0,1fr) var(--statusbar-h); }
body.uif-no-filetabs #file-tabs { display: none; }

/* CLEANSCREEN (Ctrl+0): the ribbon, the file tabs and every palette step
   aside and the drawing takes the room. The title bar, the command line
   and the status bar stay, which is what the industry standard leaves standing. */
body.clean-screen { grid-template-rows: var(--titlebar-h) 0 0 minmax(0,1fr) var(--statusbar-h); }
body.clean-screen #file-tabs { display: none; }

/* ----------------------------------------------------------------
   Plot dialog — light, native-looking "Plot — Model" modal
   ---------------------------------------------------------------- */
#plot-dialog-ov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .38);
  z-index: 3800;
}
.pdlg {
  position: absolute;
  width: 1100px;
  max-width: calc(100vw - 24px);
  height: auto;               /* hug the groups, as the industry-standard dialog does */
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  color: #1e1e1e;
  /* the dialog is light, so its <select> popup lists must be too — without
     this they inherit the app's dark scheme and drop open black-on-black */
  color-scheme: light;
  border: 1px solid #7a7a7a;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .65);
  font-size: 12px;
  font-family: "Segoe UI", sans-serif;
}
.pdlg.pdlg-collapsed { width: 700px; }
.pdlg.pdlg-collapsed .pdlg-right { display: none; }

/* --- ArcAlignedText Workshop (ARCTEXT) --- a light modal, the industry standard's own */
#arctext-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 3800; }
/* the injected .pdlg.units-dlg rule pins width 404px and, being injected,
   outranks equal-specificity stylesheet rules — the Workshop's rows need
   the full 500px or the OK/Cancel column overflows the box */
.pdlg.units-dlg.at-dlg { position: absolute; width: 500px; }
.at-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.at-menubar { display: flex; gap: 2px; border-bottom: 1px solid #d0d0d0; padding-bottom: 2px; }
.at-menubtn {
  height: 20px; padding: 0 8px; background: none; border: none; border-radius: 2px;
  color: #1b1b1b; font: 12px "Segoe UI", sans-serif; cursor: pointer;
}
.at-menubtn:hover { background: #d9e6f7; }
.at-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.at-tbtn {
  width: 24px; height: 22px; padding: 0;
  background: #f4f4f4; border: 1px solid #b8b8b8; border-radius: 2px;
  color: #1b1b1b; font: 12px "Segoe UI", sans-serif; cursor: pointer;
}
.at-tbtn:hover { background: #e2ecf9; }
.at-tbtn.on { background: #cfe0f5; border-color: #7b9cc4; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.at-tsep { width: 1px; height: 18px; background: #c8c8c8; margin: 0 3px; }
.at-fontrow { display: flex; align-items: center; gap: 6px; }
.at-sample {
  flex: 1; min-width: 0; height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid #b8b8b8; border-radius: 2px;
  color: #1b1b1b; font-size: 13px; overflow: hidden; white-space: nowrap;
}
.at-textrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1b1b1b; }
.at-textinput {
  flex: 1; min-width: 0; height: 22px; padding: 0 6px;
  background: #ffffff; color: #1b1b1b; border: 1px solid #7a92ab; border-radius: 2px;
  font: 13px "Segoe UI", sans-serif;
}
.at-proplabel { font-size: 12px; color: #1b1b1b; }
.at-lower { display: flex; gap: 10px; align-items: flex-start; }
.at-grid {
  flex: 1; display: grid; grid-template-columns: auto 72px auto 72px;
  gap: 4px 8px; align-items: center;
}
.at-k { font-size: 12px; color: #1b1b1b; white-space: nowrap; }
.at-num {
  height: 20px; padding: 0 5px; min-width: 0;
  background: #ffffff; color: #1b1b1b; border: 1px solid #b8b8b8; border-radius: 2px;
  font: 12px "Segoe UI", sans-serif;
}
.at-num:disabled { background: #e8e8e8; color: #8a8a8a; }
.at-okcol { display: flex; flex-direction: column; gap: 6px; }
.at-btn {
  width: 72px; height: 24px;
  background: #f4f4f4; border: 1px solid #8a8a8a; border-radius: 3px;
  color: #1b1b1b; font: 12px "Segoe UI", sans-serif; cursor: pointer;
}
.at-btn:hover { background: #e2ecf9; }
/* the dialog is light, so its dropdown lists must be too */
.at-dlg .ribbon-select { color-scheme: light; }

/* Text Window (TEXTSCR / F2): the same dialog chrome, but a palette — it
   floats over the drawing without an overlay, so the drawing stays live
   underneath it, and its log is text the user can select and copy. */
.txtwin {
  width: 720px;
  height: 380px;
  min-width: 320px;
  min-height: 160px;
  resize: both;
  overflow: hidden;
  z-index: 3600;
}
/* the menu bar under the title, the industry standard's own: one Edit menu */
.txtwin-menu {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 22px;
  background: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
}
.txtwin-menubtn {
  height: 20px;
  padding: 0 8px;
  background: none;
  border: none;
  border-radius: 2px;
  color: #1b1b1b;
  font: 12px "Segoe UI", sans-serif;
  cursor: pointer;
}
.txtwin-menubtn:hover { background: #d9e6f7; }
.txtwin-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 8px;
  background: #ececec;
  color: #1b1b1b;
  font: 12px/1.45 "Cascadia Mono", Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  cursor: text;
}
/* the live command line at the foot — typing here is typing down below */
.txtwin-cmd {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #ffffff;
  border-top: 1px solid #d0d0d0;
  border-radius: 0 0 6px 6px;
  font: 12px "Cascadia Mono", Consolas, "Courier New", monospace;
}
.txtwin-cmdlabel {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1b1b1b;
}
.txtwin-cmdinput {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #1b1b1b;
  font: inherit;
}

/* ----- side palettes: Materials Browser / Editor, Visual Styles Manager -----
   The QuickCalc strip-and-body chrome, shared. Each drags by its strip. */
.sidepal {
  position: fixed;
  left: 72px;
  top: 46px;
  z-index: 3400;
  display: flex;
  width: 280px;
  max-height: calc(100vh - 90px);
  background: var(--bg-palette);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  font-size: 12px;
}
#mat-browser { left: auto; right: 12px; width: 330px; }
#mat-editor { left: 96px; }
#vsm { left: 8px; width: 268px; }
.sidepal-strip {
  flex: none;
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: var(--bg-panel-title, #2b2b2b);
  border-right: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.sidepal-strip-t {
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-dim);
  white-space: nowrap;
}
.sidepal-x {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
.sidepal-x:hover { color: var(--text-bright); }
.sidepal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 6px;
  gap: 4px;
}

/* --- Materials Browser --- */
.mb-search {
  flex: none;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
}
.mb-h {
  flex: none;
  padding: 3px 4px;
  background: var(--bg-panel-title, #2b2b2b);
  color: var(--text-dim);
  font-size: 11px;
  border-radius: 2px;
}
.mb-doclist { flex: none; max-height: 110px; overflow-y: auto; }
.mb-cols { display: flex; min-height: 0; flex: 1; gap: 4px; }
.mb-cats {
  flex: none;
  width: 88px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding-right: 2px;
}
.mb-catrow {
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-catrow:hover { background: var(--hover); color: var(--text); }
.mb-catrow.sel { background: var(--accent-soft, #234); color: var(--text-bright); }
.mb-liblist { flex: 1; min-width: 0; overflow-y: auto; }
.mb-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.mb-row:hover { background: var(--hover); }
.mb-row.sel { background: var(--accent-soft, #1d4b63); color: var(--text-bright); }
.mb-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 2px;
}
.mb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mb-type, .mb-cat { flex: none; color: var(--text-dim); font-size: 11px; }
.mb-rename {
  flex: 1;
  min-width: 0;
  height: 18px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text);
  border: 1px solid var(--accent);
  font-size: 12px;
}
.mb-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.mb-createbtn {
  height: 22px;
  padding: 0 8px;
  background: var(--bg-btn, #333);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
}
.mb-createbtn:hover { background: var(--hover); }
.mb-libcount { color: var(--text-dim); font-size: 11px; }

/* --- Materials Editor --- */
.me-tabs { display: flex; gap: 2px; }
.me-tab {
  flex: 1;
  height: 22px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  font-size: 12px;
}
.me-tab.active { background: var(--bg-panel-title, #2b2b2b); color: var(--text-bright); }
.me-prevwrap { position: relative; display: flex; justify-content: center; padding: 4px 0; }
.me-preview { border: 1px solid var(--border); border-radius: 2px; }
.me-shapebtn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--bg-btn, #333);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
}
.me-name {
  height: 22px;
  padding: 0 6px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
  min-width: 0;
}
.me-grid {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 3px 6px;
  align-items: center;
}
.me-sech {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  margin-top: 2px;
  background: var(--bg-panel-title, #2b2b2b);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}
.me-secchev { font-size: 10px; color: var(--text-dim); }
.me-sech.open .me-secchev { transform: rotate(90deg); }
.me-seccb { margin: 0; }
.me-secbody.hidden { display: none; }
.me-sl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.me-sl input[type=range] { flex: 1; min-width: 0; height: 16px; }
.me-slnum {
  flex: none;
  width: 44px;
  height: 20px;
  padding: 0 4px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  text-align: right;
}
.me-num { width: 64px; }
.me-imgbtn {
  flex: 1;
  min-width: 0;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-input, #1e1e1e);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.me-imgbtn:hover { color: var(--text); background: var(--hover); }
.me-imgclear {
  flex: none;
  width: 18px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
}
.me-imgclear:hover { color: #e07070; }

/* --- Sheet Set Manager (SHEETSET / Ctrl+4) ---
   Left-docked like the industry standard's, its three tabs reading down the palette's
   RIGHT edge, the sheets in a sunken list under the Open… row. */
#sheetset { left: 8px; width: 306px; }
#sheetset .sidepal-body {
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
.ss-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.ss-head .ribbon-select { flex: 1; min-width: 0; }
.ss-main { flex: 1; display: flex; min-height: 260px; }
.ss-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 2px;
  background: var(--bg-input, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: 2px 0 0 2px;
}
.ss-tabs {
  flex: none;
  width: 23px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px 4px 0;
  background: #232324;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 2px 2px 0;
}
.ss-tab {
  writing-mode: vertical-rl;
  flex: 0 1 auto;
  min-height: 30px;
  padding: 7px 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  background: #2b2b2c;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 3px 3px 0;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.ss-tab:hover { color: var(--text-bright); background: var(--hover); }
.ss-tab.on { color: var(--text-bright); background: var(--bg-input, #1e1e1e); }
.ss-subset {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-subset svg { flex: none; }
.ss-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 16px;
  font-size: 12px;
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.ss-row:hover { background: var(--hover); }
.ss-row.sel { background: var(--accent); color: #fff; }
.ss-row.cur .ss-name { font-weight: 600; color: var(--text-bright); }
.ss-row.sel .ss-name { color: #fff; }
.ss-row svg { flex: none; }
.ss-num { flex: none; width: 16px; text-align: right; font-size: 11px; color: var(--text-dim); }
.ss-row.sel .ss-num { color: #fff; }
.ss-name { overflow: hidden; text-overflow: ellipsis; }
.ss-empty { padding: 12px 10px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.ss-details {
  margin-top: 6px;
  padding: 6px 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .035);
  border-left: 2px solid var(--border);
  border-radius: 2px;
}
.ss-details b { color: var(--text); }

/* --- Sun Properties (SUNPROPERTIES) ---
   The Materials Editor's section chrome again, with a wider label column for
   the industry standard's long property names and a read-only style for the three rows of
   the Sun Angle Calculator that are answers rather than settings. */
#sun-props { left: 8px; width: 268px; }
#sun-props .sp-grid { grid-template-columns: 104px 1fr; }
.sp-num {
  width: 100%;
  min-width: 0;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  background: var(--bg-input, #1e1e1e);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
}
.sp-rgb { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sp-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
}
/* computed, so it reads as a value and not as something to type in */
.sp-ro {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-geo { padding: 4px 2px 2px; }
.sp-geo.hidden { display: none; }
.sp-georow { font-size: 11px; line-height: 1.5; color: var(--text); }
.sp-georow b { color: var(--text-bright); font-weight: 600; margin-right: 4px; }

/* --- Lights in Model (LIGHTLIST) ---
   A sunken list box with sortable column headings, and the industry standard's note under
   it. The palette hugs its content, so a drawing with no lights shows the
   empty box exactly as the industry standard does. */
#lightlist { left: 8px; width: 252px; }
.ll-lead { padding: 2px 2px 5px; font-size: 12px; color: var(--text); }
.ll-table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-input, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.ll-head { display: flex; flex: none; border-bottom: 1px solid var(--border); }
.ll-h {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #333334, #2c2c2d);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.ll-h:hover { color: var(--text-bright); }
.ll-h-type { flex: 0 0 76px; border-right: 1px solid var(--border); }
.ll-h-name { flex: 1; min-width: 0; }
.ll-arrow { font-size: 8px; color: var(--text-dim); }
.ll-list { flex: 1; min-height: 190px; max-height: 320px; overflow-y: auto; }
.ll-row { display: flex; align-items: center; cursor: pointer; }
.ll-row:hover { background: var(--hover); }
.ll-row.sel { background: var(--accent); }
.ll-row.sel .ll-c { color: #fff; }
.ll-row.off .ll-c { opacity: .55; }
.ll-c {
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-c-type { flex: 0 0 76px; display: flex; align-items: center; gap: 4px; }
.ll-c-type svg { flex: none; width: 14px; height: 14px; }
.ll-c-name { flex: 1; min-width: 0; }
.ll-note {
  margin-top: 7px;
  padding: 6px 7px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .035);
  border-left: 2px solid var(--border);
  border-radius: 2px;
}

/* --- Render Presets Manager (RENDERPRESETS / RP) ---
   The Materials Editor's section chrome, with the industry standard's preset toolbar on the
   Current Preset row and radio rows for the duration modes. */
/* left-docked like the Visual Styles Manager, and a wider label column than
   the Materials Editor's 92px: "Until Satisfactory" and "Render By Level:"
   are the longest labels in any of these palettes and wrapped at 92 */
#render-presets { left: 8px; width: 300px; }
#render-presets .me-grid { grid-template-columns: 116px 1fr; }
#render-presets .rp-head { margin-bottom: 4px; }
.rp-presetrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rp-presetrow .ribbon-select { flex: 1; min-width: 0; }
.rp-iconbtn {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
}
.rp-iconbtn:hover:not(:disabled) { background: var(--hover); color: var(--text-bright); }
.rp-del:hover:not(:disabled) { color: #e07070; border-color: #e07070; }
.rp-iconbtn:disabled { opacity: .35; cursor: default; }
.rp-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.rp-radio input { margin: 0; flex: none; }
.rp-radio input:disabled + span { color: var(--text-dim); }
/* the industry standard stacks Low / Draft / High down the column, not across */
.rp-radios { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rp-unit { flex: none; font-size: 11px; color: var(--text-dim); }
#render-presets input:disabled,
#render-presets .me-name:disabled { opacity: .5; cursor: default; }
.rp-note {
  margin: 8px 2px 2px;
  padding: 6px 7px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .035);
  border-left: 2px solid var(--border);
  border-radius: 2px;
}

/* --- Activity Insights --- */
#ains-pal {
  left: auto;
  right: 12px;
  width: 300px;
  height: 520px;
  max-height: calc(100vh - 140px);
}
#ains-pal .sidepal-strip-t { margin-top: auto; }   /* title rides the foot */
#ains-pal.ains-min { width: auto; height: auto; min-height: 260px; }
#ains-pal.ains-min .sidepal-body { display: none; }
.ains-gear { display: inline-flex; }
.ains-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 0 20px;
}
.ains-h { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.ains-p { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.ains-why { text-align: left; }
.ains-link {
  font-size: 12px;
  color: var(--accent-bright, #4fb3ea);
  text-decoration: underline;
  cursor: pointer;
}
.ains-day {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 2px 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.ains-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  border-radius: 2px;
}
.ains-row:hover { background: var(--hover); }
.ains-ic { flex: none; display: inline-flex; }
.ains-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ains-time { flex: none; color: var(--text-dim); font-size: 11px; }

/* --- Visual Styles Manager --- */
.vsm-title { color: var(--text-dim); padding: 2px 2px 0; }
.vsm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.vsm-thumb {
  display: flex;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  background: #20262c;
  padding: 1px;
}
.vsm-thumb:hover { border-color: var(--border-bright, #5a6470); }
.vsm-thumb.sel { border-color: #e8c25a; }
.vsm-thumb canvas { width: 100%; height: auto; display: block; }
.vsm-namerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}
.vsm-name { color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsm-tools { display: flex; gap: 2px; }
.vsm-tbtn {
  width: 22px;
  height: 20px;
  padding: 0;
  background: var(--bg-btn, #333);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.vsm-tbtn:hover { background: var(--hover); }
.vsm-sec {
  padding: 3px 4px;
  margin-top: 2px;
  background: var(--bg-panel-title, #2b2b2b);
  color: var(--text);
  border-radius: 2px;
}
.vsm-props { padding: 0 2px; }
.vsm-props .me-num, .vsm-props .me-slnum { width: 100%; text-align: left; }

.pdlg-title {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  font-size: 13px;
  color: #1a1a1a;
  background: linear-gradient(#fdfdfd, #e6e6e6);
  border-bottom: 1px solid #c5c5c5;
  border-radius: 6px 6px 0 0;
  cursor: default;
  user-select: none;
}
.pdlg-title-ic { display: inline-flex; filter: invert(.75); }
.pdlg-x {
  margin-left: auto;
  width: 34px;
  height: 26px;
  border: none;
  background: transparent;
  color: #444;
  font-size: 12px;
  border-radius: 3px;
}
.pdlg-x:hover { background: #c42b1c; color: #fff; }

.pdlg-body {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 14px 14px 8px;
  overflow: auto;
  min-height: 0;
}
.pdlg-left { flex: 1.2; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.pdlg-right { flex: .8; display: flex; flex-direction: column; gap: 13px; min-width: 0; }

/* group boxes with floating captions (classic dialog look) */
.pgrp {
  position: relative;
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  padding: 12px 10px 9px;
  margin-top: 6px;
  background: #f0f0f0;
}
.pgrp-cap {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 5px;
  background: #f0f0f0;
  font-size: 11px;
  color: #2b2b2b;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcols { display: flex; gap: 10px; align-items: stretch; }
.pcol { display: flex; flex-direction: column; gap: 13px; }
.pflex { flex: 1; min-width: 0; }
.pfix { flex: none; }

.prow { display: flex; align-items: center; gap: 6px; margin: 3px 0; min-width: 0; }
.plab { flex: none; color: #2b2b2b; }

.psel, .pnum, .pdlg input[type="text"].pnum {
  height: 22px;
  background: #ffffff;
  border: 1px solid #a5a5a5;
  border-radius: 2px;
  color: #111;
  font-size: 12px;
  font-family: "Segoe UI", sans-serif;
  padding: 0 4px;
}
.psel { flex: 1; min-width: 0; }
.psel-narrow { flex: none; width: 72px; }
/* the plotter field carries a printer glyph, as the industry-standard one does */
#plot-device {
  padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23444' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5v-4h7v4'/%3E%3Crect x='1.6' y='5.5' width='12.8' height='5.6' rx='1'/%3E%3Crect x='4.5' y='9' width='7' height='5.4'/%3E%3Cpath d='M12.4 7.6h.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 4px center;
  background-size: 14px 14px;
}
.psel:disabled, .pnum:disabled { background: #e4e4e4; color: #8a8a8a; }
.psel option:disabled { color: #9a9a9a; }
.psel:focus, .pnum:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.pnum { flex: none; width: 76px; }

.pbtn {
  flex: none;
  height: 24px;
  padding: 0 14px;
  background: linear-gradient(#fefefe, #e3e3e3);
  border: 1px solid #979797;
  border-radius: 3px;
  color: #111;
  font-size: 12px;
  font-family: "Segoe UI", sans-serif;
}
/* MLEDIT — the twelve tool thumbnails, four across as the industry standard lays them out */
.mle-help { padding: 10px 12px 4px; font-size: 12px; color: #1b1b1b; line-height: 1.45; }
.mle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
  padding: 6px 4px 2px;
}
.mle-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 11px "Segoe UI", sans-serif;
  color: #1b1b1b;
  cursor: pointer;
}
.mle-tool:hover { border-color: var(--accent); background: rgba(0, 120, 215, .08); }
.mle-tool:focus { outline: 1px dotted #555; outline-offset: -2px; }
.mle-tool.on { border-color: var(--accent); background: rgba(0, 120, 215, .16); }
.mle-ic {
  width: 52px;
  height: 44px;
  background: #f4f6f8;
  border: 1px solid #9aa0a6;
}
.mle-ic svg { display: block; width: 100%; height: 100%; }

.pbtn:hover { border-color: var(--accent); background: linear-gradient(#ffffff, #e9f3fa); }
.pbtn:disabled { opacity: .45; }
.pbtn:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
.pbtn-ic { padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; }
.pbtn-ic svg { filter: invert(.8); }
.pbtn-primary { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.pchk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2b2b2b;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.pchk input { accent-color: #2b6cb0; margin: 0; }
.pchk input:disabled + span { color: #9a9a9a; }

/* printer group: info lines + paper thumbnail */
.pprn-grid { display: flex; gap: 10px; align-items: flex-start; }
.pprn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.pprn-line { display: flex; gap: 6px; min-width: 0; }
.pprn-line .plab { width: 68px; }
.pprn-v {
  flex: 1;
  min-width: 0;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pthumb {
  flex: none;
  background: #f7f7f7;
  border: 1px solid #b9b9b9;
  border-radius: 2px;
}

/* fixed-width groups */
.pcopies { width: 150px; }

/* plot scale block */
.pscale { width: 220px; }
.pscale .pnum { width: 58px; }

/* drawing orientation */
.porient { display: flex; align-items: center; gap: 10px; }
.porient-radios { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.porient-glyph { flex: none; background: #f7f7f7; border: 1px solid #b9b9b9; border-radius: 2px; }

/* footer */
.pdlg-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #c5c5c5;
  background: #ececec;
  border-radius: 0 0 6px 6px;
}
.pdlg-spring { flex: 1; }

/* device properties popover */
.pdev-pop {
  position: absolute;
  z-index: 10;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px 10px;
  background: #fdfdfd;
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.pdev-title { font-size: 12px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.pdev-row { display: flex; gap: 6px; font-size: 12px; }
.pdev-k { flex: none; width: 62px; color: #666; }
.pdev-v { flex: 1; min-width: 0; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Add Color-Dependent Plot Style Table wizard (the style list's "New…") */
#plot-ctbwiz-ov {
  position: fixed;
  inset: 0;
  z-index: 3860;
}
#plot-ctbwiz { width: 472px; }
.pwiz-body {
  display: flex;
  gap: 16px;
  padding: 10px 14px 14px;
}
.pwiz-steps {
  flex: none;
  width: 92px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pwiz-step { display: flex; gap: 3px; font-size: 12px; color: #1e1e1e; }
.pwiz-arr { flex: none; width: 10px; font-size: 9px; line-height: 15px; visibility: hidden; }
.pwiz-cur .pwiz-arr { visibility: visible; }
.pwiz-off { color: #9a9a9a; }
.pwiz-page {
  flex: 1;
  min-width: 0;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
}
.pwiz-note { color: #1e1e1e; line-height: 1.45; }
.pwiz-sub { margin: -5px 0 0 21px; color: #555; }
.pwiz-name { width: 100%; text-align: left; }
.pwiz-err { min-height: 15px; color: #b02020; }

/* Plot Style Table Editor — General / Table View / Form View */
#plot-ctbed-ov {
  position: fixed;
  inset: 0;
  z-index: 3880;
}
#plot-ctbed { width: 520px; }
.ptabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid #b9b9b9;
}
.ptab {
  padding: 4px 12px 3px;
  font-size: 12px;
  color: #1e1e1e;
  background: #e4e4e4;
  border: 1px solid #b9b9b9;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  cursor: default;
}
.ptab-on {
  background: #f0f0f0;
  font-weight: 600;
  position: relative;
  top: 1px;
}
.pted-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 6px;
  min-height: 380px;
  font-size: 12px;
  color: #1e1e1e;
}
/* General */
.pted-ghead { display: flex; gap: 12px; align-items: center; }
.pted-gicon { flex: none; line-height: 0; }
.pted-gname { display: flex; flex-direction: column; gap: 3px; }
.pted-gfile { font-weight: 600; }
.pted-desc {
  height: 64px;
  resize: none;
  background: #ffffff;
  border: 1px solid #9a9a9a;
  border-radius: 2px;
  font: inherit;
  padding: 3px 5px;
}
.pted-gline { padding: 2px 4px; }
/* Table View */
.pted-table { display: flex; min-height: 0; }
.pted-labels { flex: none; width: 132px; border: 1px solid #b9b9b9; border-right: none; }
.pted-cell {
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  border-bottom: 1px solid #d6d6d6;
  overflow: hidden;
}
.pted-cell:last-child { border-bottom: none; }
.pted-lab { background: #e7e7e7; font-weight: 600; }
.pted-cell .psel, .pted-cell .pnum, .pted-cell .pted-txt { width: 100%; min-width: 0; }
.pted-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid #b9b9b9;
  position: relative;
}
.pted-inner { position: relative; height: calc(26px * 14); }
.pted-col {
  position: absolute;
  top: 0;
  width: 128px;
  border-right: 1px solid #d6d6d6;
}
.pted-name { display: flex; align-items: center; gap: 5px; }
.pted-sw {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid #777;
}
.pted-foot2 { display: flex; gap: 8px; align-items: center; }
.pted-btns { display: flex; gap: 8px; }
/* Form View */
.pted-form { display: flex; gap: 12px; min-height: 0; }
.pted-fleft { flex: none; width: 168px; display: flex; flex-direction: column; gap: 5px; }
.pted-list {
  height: 214px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #9a9a9a;
}
.pted-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 5px;
}
.pted-item-on { background: #2f7bd6; color: #ffffff; }
.pted-sdesc { height: 74px; }
.pted-fright { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pted-btns-r { justify-content: flex-end; margin-top: 4px; }
/* Edit Lineweights sub-dialog */
.pted-lwov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pted-lwdlg { position: static; width: 250px; }
.pted-lwbody {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
}
.pted-saveas { padding: 0 14px 4px; }

/* full-screen plot preview */
#plot-preview-ov {
  position: fixed;
  inset: 0;
  z-index: 3900;
  background: #3c3f43;
  display: flex;
  flex-direction: column;
}
.ppv-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: #2b2d30;
  border-bottom: 1px solid #1d1f21;
}
.ppv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 12px;
  background: #3d4045;
  border: 1px solid #55585d;
  border-radius: 3px;
  color: #e3e3e3;
  font-size: 12px;
}
.ppv-btn:hover { background: #4a4e54; border-color: var(--accent); }
.ppv-x { padding: 0 10px; }
.ppv-hint { margin-left: auto; font-size: 11px; color: #9a9ea3; }
.ppv-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  /* margin:auto on the sheet does the centring instead of align/justify:
     a flex item centred that way cannot be scrolled back to once it is
     larger than its container, which is exactly what zooming in makes it */
  padding: 26px;
  overflow: auto;
  cursor: grab;
}
.ppv-wrap.ppv-grabbing { cursor: grabbing; }
.ppv-sheet {
  margin: auto;
  flex: none;
  background: #ffffff;
  max-width: calc(100vw - 110px);
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  box-shadow: 0 14px 48px rgba(0, 0, 0, .7), 0 3px 12px rgba(0, 0, 0, .5);
}
.ppv-zoom {
  min-width: 46px;
  font-size: 12px;
  color: #d6d6d6;
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------
   14. AI agent panel (#agent-panel) — right dock. Owner: PANEL.
   A drafting instrument: one accent, quiet paper, motion only where
   it means something. The pipeline never appears. draw_cad is the
   only tool the architect is allowed to see.
   ---------------------------------------------------------------- */
#agent-panel {
  position: relative;
  flex: 0 0 420px;
  width: 420px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 100% -40px, rgba(79, 179, 234, .09), transparent 58%),
    linear-gradient(180deg, #1c2026 0%, #161a1f 48%, #13171c 100%);
  border-left: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: .01em;
}

/* ---- header: the brand orb + icon-only ghosts ---- */
.ag-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
}
.ag-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ag-brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18px;
  color: var(--text-bright);
}
/* the orb is the agent's pulse: still when listening, breathing while it
   works — the only status lamp the panel needs */
.ag-orb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #b8e2ff, #3fa9e0 58%, #1c6ba0);
  box-shadow: 0 0 6px rgba(63, 169, 224, .55);
}
.ag-orb.busy { animation: ag-orb 1.15s ease-in-out infinite; }
@keyframes ag-orb {
  0%, 100% { transform: scale(1); box-shadow: 0 0 5px rgba(63, 169, 224, .5); }
  50% { transform: scale(1.28); box-shadow: 0 0 14px rgba(63, 169, 224, .95); }
}
.ag-head-sp { flex: 1 1 auto; }
.ag-ghost {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-dim);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ag-ghost svg { width: 15px; height: 15px; }
.ag-ghost:hover { background: rgba(255, 255, 255, .06); color: var(--text-bright); }
.ag-ghost:active { background: rgba(255, 255, 255, .1); }
.ag-ghost.ag-sm { width: 24px; height: 24px; }
.ag-ghost.ag-sm svg { width: 14px; height: 14px; }

/* ---- thread ---- */
.ag-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.ag-thread > * { max-width: 100%; animation: ag-rise 200ms var(--ease); }
@keyframes ag-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ---- the empty room: a hero and four things worth clicking ---- */
.ag-empty {
  margin: auto 0;
  text-align: center;
  color: var(--text-dim);
  padding: 0 8px;
  animation: ag-rise 320ms var(--ease);
}
.ag-empty p { margin: 0; }
.ag-hero-ico {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.ag-hero-ico img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
}
.ag-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -.2px;
}
.ag-empty-sub {
  margin-top: 8px !important;
  font-size: 12.5px;
  line-height: 1.65;
  opacity: .78;
}
.ag-empty-sub strong {
  color: var(--accent-bright);
  font-weight: 600;
}
.ag-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
  text-align: left;
}
.ag-preset {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 12px;
  text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.ag-preset:hover {
  border-color: rgba(63, 169, 224, .5);
  background: rgba(63, 169, 224, .09);
  color: var(--text-bright);
  transform: translateY(-1px);
}
.ag-preset:active { transform: none; }

/* ---- messages ---- */
.ag-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(180deg, rgba(79, 179, 234, .2), rgba(63, 169, 224, .1));
  border: 1px solid rgba(79, 179, 234, .2);
  color: var(--text-bright);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.ag-answer {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.ag-error {
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  background: rgba(224, 76, 76, .1);
  border: 1px solid rgba(224, 76, 76, .18);
  color: #f0a0a0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- the first-run doorstep: bring your own key ---- */
.ag-setup {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(63, 169, 224, .3);
  background: linear-gradient(135deg, rgba(63, 169, 224, .13), rgba(63, 169, 224, .04));
}
.ag-setup-ico { flex: none; display: flex; color: var(--accent-bright); }
.ag-setup-txt { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.55; }
.ag-setup-txt strong { color: var(--text-bright); }
.ag-setup-btn {
  flex: none;
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  transition: background var(--dur) var(--ease);
}
.ag-setup-btn:hover { background: var(--accent-bright); }
/* the device sign-in code, read off the card into the browser */
.ag-signin-code {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--text-bright);
  user-select: text;
}

/* ---- thinking: dim, monospace, collapsible, self-summarising ---- */
.ag-think { margin: -2px 0; }
.ag-think-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  color: var(--text-dim);
  font-size: 12px;
}
.ag-think-head:hover { color: var(--text); }
.ag-think-chev {
  display: flex;
  color: inherit;
  transition: transform 140ms var(--ease);
}
.ag-think-chev svg { width: 12px; height: 12px; }
.ag-think.open .ag-think-chev { transform: rotate(90deg); }
.ag-think:not(.done) .ag-think-label { animation: ag-pulse 1.6s ease-in-out infinite; }
@keyframes ag-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.ag-think-body { display: none; }
.ag-think.open .ag-think-body {
  display: block;
  margin: 5px 0 0 5px;
  padding-left: 11px;
  border-left: 1px solid var(--border-soft);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- the one tool card. Its exhibits are the brief and the finished
   strokes drawn small — never a stage of the pipeline. ---- */
.ag-tool {
  border-radius: 14px;
  background: rgba(255, 255, 255, .032);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ag-tool.running {
  border-color: rgba(79, 179, 234, .42);
  box-shadow: 0 0 0 1px rgba(79, 179, 234, .08), 0 10px 28px rgba(20, 40, 56, .25);
}
.ag-tool.failed { border-color: rgba(224, 76, 76, .35); }
.ag-tool.done { border-color: rgba(95, 191, 95, .22); }
.ag-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: default;
  transition: background var(--dur) var(--ease);
}
.ag-tool-head:hover { background: rgba(255, 255, 255, .03); }
.ag-tool-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent-bright);
}
.ag-tool-ico svg { width: 13px; height: 13px; }
.ag-tool.done .ag-tool-ico { color: #5fbf5f; }
.ag-tool.failed .ag-tool-ico { color: var(--danger); }
.ag-spin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-soft);
  border-top-color: var(--accent-bright);
  animation: ag-spin 700ms linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }
.ag-tool-name {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-bright);
}
.ag-tool-sum {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ag-tool-chev {
  flex: none;
  display: flex;
  color: var(--text-dim);
  transition: transform 140ms var(--ease);
}
.ag-tool-chev svg { width: 12px; height: 12px; }
.ag-tool.open .ag-tool-chev { transform: rotate(90deg); }

/* the moving light under the head while the tool works */
.ag-tool-track { display: none; height: 2px; overflow: hidden; }
.ag-tool.running .ag-tool-track { display: block; }
.ag-tool-track i {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  animation: ag-slide 1.3s ease-in-out infinite;
}
@keyframes ag-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}

.ag-tool-body { display: none; }
.ag-tool.open .ag-tool-body {
  display: block;
  padding: 2px 12px 12px 32px;
  animation: ag-in 140ms var(--ease);
}
@keyframes ag-in { from { opacity: 0; } to { opacity: 1; } }

.ag-brief {
  color: var(--text);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ag-kvhead {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .65;
  margin: 8px 0 3px;
}
.ag-err {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: rgba(224, 76, 76, .1);
  color: #f0a0a0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the finished strokes on the panel's own paper — a viewport you can
   scroll, not a clipped thumbnail trapped under the brief */
.ag-pv-wrap {
  margin-top: 8px;
  max-height: min(340px, 46vh);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 8px;
  border: 1px solid rgba(143, 214, 255, .14);
  background:
    repeating-linear-gradient(0deg, rgba(143, 214, 255, .045) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(143, 214, 255, .045) 0 1px, transparent 1px 20px),
    #0c1218;
}
.ag-pv {
  display: block;
  width: 100%;
  height: auto;
}
.ag-tool-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ag-stat {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(143, 214, 255, .16);
  background: rgba(143, 214, 255, .07);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.ag-stat-warn {
  border-color: rgba(232, 163, 61, .35);
  background: rgba(232, 163, 61, .1);
  color: #e8c27d;
}

/* ---- menus (history, overflow, mode) ---- */
.ag-menu {
  position: fixed;
  z-index: 420;
  min-width: 168px;
  max-width: 260px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-2);
  animation: ag-in 120ms var(--ease);
}
.ag-menu-item {
  display: block;
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-menu-item:hover:not(:disabled) { background: var(--hover); color: var(--text-bright); }
.ag-menu-item:disabled { color: var(--text-dim); }
.ag-menu-item.on { color: var(--accent-bright); }

/* ---- composer: the centre of gravity ---- */
.ag-composer {
  flex: none;
  padding: 8px 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .18));
}
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ag-chips.ag-chips-empty { display: none; }
.ag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 11.5px;
  color: var(--text);
}
.ag-chip svg { width: 13px; height: 13px; flex: none; color: var(--accent-bright); }
.ag-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-chip-x {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
}
.ag-chip-x:hover { background: var(--hover); color: var(--text-bright); }

.ag-box {
  display: flex;
  flex-direction: column;
  padding: 12px 10px 8px 14px;
  background: rgba(12, 15, 19, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ag-box:focus-within {
  border-color: rgba(79, 179, 234, .55);
  box-shadow: 0 0 0 4px rgba(63, 169, 224, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#ag-input {
  min-height: 52px;
  max-height: 160px;
  padding: 0 4px 0 0;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 20px;
}
#ag-input::placeholder { color: var(--text-dim); }

.ag-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.ag-bar-sp { flex: 1 1 auto; }
.ag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 5px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 11.5px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ag-pill:hover { color: var(--text); border-color: var(--border); }
.ag-pill svg { flex: none; }
.ag-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11.5px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ag-model:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.ag-model svg { flex: none; opacity: .8; }
.ag-model-ico { display: inline-flex; flex: none; }
/* the balance, on the site only: green while there is some, red when out */
.ag-credit { flex: none; color: #8fd68f; }
.ag-credit.low { color: #f0a0a0; }
/* the price of a turn, said once at the foot of the answer */
.ag-cost {
  font-size: 10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-top: -4px;
}
.ag-model span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-send {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.ag-send svg { width: 15px; height: 15px; }
.ag-box:focus-within .ag-send { background: var(--accent); color: #fff; }
.ag-send:hover { background: var(--accent-bright); color: #fff; transform: scale(1.06); }
.ag-send:active { transform: scale(.96); }
.ag-send.stop,
.ag-box:focus-within .ag-send.stop { background: var(--danger); color: #fff; }
.ag-send.stop:hover { background: #ef6060; }

/* ---- AI Selection: the prompt that sits on the drawing ---- */
.ag-region {
  position: fixed;
  z-index: 260;
  width: 320px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  background: var(--panel, #1b2027);
  border: 1px solid var(--accent-bright, #3fa9e0);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.ag-region-row { display: flex; align-items: center; gap: 6px; }
.ag-region input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line, #333b45);
  background: var(--bg, #12161b);
  color: var(--text, #dfe3e7);
  font: inherit;
}
.ag-region input:focus { outline: none; border-color: var(--accent-bright, #3fa9e0); }
.ag-region-go, .ag-region-x {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #dfe3e7);
  cursor: pointer;
}
.ag-region-go { background: var(--accent, #2b7fb8); color: #fff; }
.ag-region-go:hover { background: var(--accent-bright, #3fa9e0); }
.ag-region-x:hover { background: var(--line, #333b45); }
.ag-region-acts { gap: 6px; }
.ag-region-btn {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line, #333b45);
  background: transparent;
  color: var(--text, #dfe3e7);
  font-size: 12px;
  cursor: pointer;
}
.ag-region-btn:hover { border-color: var(--accent-bright, #3fa9e0); }
.ag-region-note { margin-left: auto; font-size: 11px; opacity: .6; }

/* the brief scrolls instead of clipping; the drafting stream sticks to its tail */
.ag-brief { max-height: 200px; overflow-y: auto; }
.ag-drafting { border-left: 2px solid var(--accent-bright, #3fa9e0); padding-left: 6px; }

/* ---- BYOK: the agent settings slide-over ---- */
.ag-keys {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--bg-palette);
  animation: ag-keys-in 200ms var(--ease);
}
.ag-keys.hidden { display: none; }
@keyframes ag-keys-in {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
.ag-keys-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-soft);
}
.ag-keys-title { font-size: 12.5px; font-weight: 600; color: var(--text-bright); }
.ag-keys-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ag-keys-hero {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(63, 169, 224, .2);
  background: rgba(63, 169, 224, .07);
  color: var(--accent-bright);
}
.ag-keys-hero svg { flex: none; margin-top: 1px; }
.ag-keys-hero > div { flex: 1 1 auto; min-width: 0; }
.ag-keys-hero p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.ag-keys-hero p strong { color: var(--text-bright); font-weight: 600; }
.ag-keys-hero .ag-setup-btn { margin-top: 10px; }
/* the account line: who is signed in, and the way out */
.ag-keys-who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
}
.ag-keys-who svg { flex: none; color: var(--accent-bright); }
.ag-keys-mail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-bright);
}
/* the one choice: the NASJI model on the balance, or a key of your own */
.ag-choice { display: flex; flex-direction: column; gap: 8px; }
.ag-choice-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ag-choice-btn:hover { border-color: rgba(63, 169, 224, .45); background: rgba(63, 169, 224, .06); }
.ag-choice-btn.on { border-color: rgba(63, 169, 224, .6); background: rgba(63, 169, 224, .1); }
.ag-choice-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: var(--accent-bright);
}
.ag-choice-ico img { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }
.ag-choice-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-choice-txt strong { font-size: 12.5px; font-weight: 600; color: var(--text-bright); }
.ag-choice-txt small {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-choice-dot {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .28);
  transition: border-color var(--dur) var(--ease);
}
.ag-choice-btn.on .ag-choice-dot { border-color: var(--accent-bright); }
.ag-choice-btn.on .ag-choice-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent-bright);
}
.ag-field { display: flex; flex-direction: column; gap: 7px; }
.ag-field-top { display: flex; align-items: baseline; gap: 8px; }
.ag-field-name { font-size: 12.5px; font-weight: 600; color: var(--text-bright); }
.ag-field-vendor { font-size: 11px; color: var(--text-dim); }
.ag-key-row { display: flex; gap: 6px; }
.ag-key-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-input);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ag-key-row input:focus {
  outline: none;
  border-color: rgba(63, 169, 224, .55);
  box-shadow: 0 0 0 3px rgba(63, 169, 224, .12);
}
.ag-key-save {
  flex: none;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 12px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.ag-key-save:hover { background: var(--accent); border-color: transparent; color: #fff; }
.ag-key-save:disabled { opacity: .55; }
.ag-field-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.ag-key-x, .ag-keys-signout {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ag-key-x:hover, .ag-keys-signout:hover { color: #f0a0a0; background: rgba(224, 76, 76, .1); }
.ag-keys-signout { margin-left: 4px; }
.ag-keys-signin { align-self: flex-start; }
.ag-key-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ag-key-dot.on { background: #5fbf5f; box-shadow: 0 0 5px rgba(95, 191, 95, .6); }
.ag-key-dot.off { background: rgba(255, 255, 255, .22); }
.ag-seg {
  display: flex;
  width: max-content;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  overflow: hidden;
}
.ag-seg-btn {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ag-seg-btn + .ag-seg-btn { border-left: 1px solid var(--border-soft); }
.ag-seg-btn:hover { color: var(--text); }
.ag-seg-btn.on { background: rgba(63, 169, 224, .16); color: var(--text-bright); }
.ag-seg-wide { width: 100%; }
.ag-seg-wide .ag-seg-btn { flex: 1 1 0; text-align: center; padding: 6px 8px; }
.ag-model-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-model-chip {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.ag-model-chip:hover { color: var(--text); border-color: rgba(63, 169, 224, .4); }
.ag-model-chip.on {
  background: rgba(63, 169, 224, .16);
  color: var(--text-bright);
  border-color: transparent;
}

/* ---- dynamic input (industry-standard-style near-cursor prompt + value boxes) ---- */
.dyn-tip, .dyn-box, .dyn-menu, .dyn-cmd { position: absolute; z-index: 40; }
/* the white box a command is typed into beside the crosshair — an echo of
   the command line, which keeps the focus and every key behaviour */
.dyn-cmd {
  align-items: center;
  background: #ffffff;
  color: #111111;
  border: 1px solid #6f6f6f;
  font: 12px "Segoe UI", sans-serif;
  padding: 2px 7px;
  min-width: 40px;
  white-space: pre;
  pointer-events: none;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .45);
}
.dyn-cmd .dc-caret {
  width: 1px;
  height: 12px;
  margin-left: 1px;
  background: #111;
  animation: dc-blink 1.06s steps(1) infinite;
}
@keyframes dc-blink { 50% { opacity: 0; } }
/* the suggestion list, docked under the crosshair box while it shows */
#command-suggest.sug-at-cursor { max-height: 196px; z-index: 41; }
.dyn-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Drafting Tooltip Appearance sets these three; unset they are exactly
     the colour, size and opacity the tooltip has always had */
  background: var(--dyn-tip-bg, #d4d4d4);
  opacity: var(--dyn-tip-op, 1);
  /* Drawing Window Colors names the tooltip's ink and its contour too */
  color: var(--dyn-tip-fg, #1c1c1c);
  border: 1px solid var(--dyn-tip-bd, #6f6f6f);
  font: calc(12px * var(--dyn-tip-scale, 1)) "Segoe UI", sans-serif;
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .45);
}
.dyn-arrow {
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid #8a8a8a;
  background: #c2c2c2;
  font-size: 10px;
  line-height: 11px;
  padding: 0 3px;
}
.dyn-box {
  background: #d4d4d4;
  border: 1px solid #6f6f6f;
  padding: 1px 3px;
  pointer-events: none;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .45);
}
.dyn-box.locked { outline: 1px solid #e8a33d; }
.dyn-field {
  pointer-events: none; /* tooltip-like: focused programmatically, never clicked */
  background: #f2f2f2;
  color: #111;
  border: none;
  outline: none;
  font: 12px Consolas, monospace;
  padding: 1px 2px;
  min-width: 4ch;
}
.dyn-field.hot { background: #3390ff; color: #fff; }
.dyn-field::selection { background: #3390ff; color: #fff; }
.dyn-menu {
  pointer-events: auto;
  background: #2b3138;
  border: 1px solid #555;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  min-width: 96px;
  font: 12px "Segoe UI", sans-serif;
  color: #ddd;
}
/* the wrench dialogs float over everything, industry-standard-modal */
.pdlg-ov { position: fixed; inset: 0; z-index: 2000; }

/* Light theme: the hardcoded dark chrome surfaces follow the tokens, and
   the light-stroke line-art icons invert so they stay legible */
:root[data-theme="light"] #ctx-menu,
:root[data-theme="light"] .nasj-menu { background: #f4f4f4; }
:root[data-theme="light"] .dyn-menu { background: #f0f0f0; color: #2b2b2b; border-color: #9a9a9a; }
:root[data-theme="light"] .dyn-mi:hover,
:root[data-theme="light"] .dyn-mi.sel { background: #d9e6f2; }
:root[data-theme="light"] #titlebar {
  background: linear-gradient(180deg, #ececec 0%, var(--bg-titlebar) 55%, #cfcfcf 100%);
  border-bottom-color: #b0b0b0;
}
:root[data-theme="light"] #ribbon-tabs {
  background: linear-gradient(180deg, #eeeeee, var(--bg-ribbon-tabs));
}
:root[data-theme="light"] #file-tabs {
  background: linear-gradient(180deg, #e6e6e6, #dedede);
}
:root[data-theme="light"] #statusbar {
  background: linear-gradient(180deg, #efefef, var(--bg-statusbar));
}
:root[data-theme="light"] .pal-header {
  background: linear-gradient(180deg, #e8e8e8, #dedede);
}
:root[data-theme="light"] #command-history .echo { color: #4c4c4c; }
:root[data-theme="light"] :is(#ribbon-content, #ribbon-tabs, #titlebar, #statusbar,
  #file-tabs, #sheet-tabs, .nasj-menu, #ctx-menu, .panel-slide, .panel-drop, #command-row,
  #command-suggest, .rs-menu, .pal-header) svg {
  filter: invert(.82) hue-rotate(180deg);
}

/* OPTIONS dialog */
.opt-dlg { width: 760px !important; }
.opt-body .dset-page.iso-cols { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
.opt-body .pchk { display: flex; }
.opt-head {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  border-bottom: 1px solid #c9c9c9;
}
.opt-head-right { margin-left: auto; }
.opt-body { max-height: 460px; overflow-y: auto; }
.opt-body .iso-col > .pgrp { margin-bottom: 8px; }
.opt-tree { min-height: 280px; max-height: 300px; overflow-y: auto; flex: 1 1 auto; }
.opt-tree-row { cursor: default; }
.opt-twist { margin-right: 6px; opacity: .6; }
.opt-filebtns .pbtn { min-width: 108px; }
.opt-wide { display: block; width: 100%; margin: 4px 0; }
.opt-selrow select { max-width: 100%; }
.opt-sliderow { align-items: center; gap: 10px; }
.opt-preview {
  width: 44px;
  height: 44px;
  background: #23272c;
  border: 1px solid #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.opt-pickbox { border: 1px solid #e8e8e8; }
.opt-grip { background: #3fa9e0; border: 1px solid #fff; }
.opt-marker { border: 2px solid #5fbf5f; }
.opt-aperture { border: 1px dashed #e8e8e8; }
.opt-proflist { min-height: 220px; flex: 1 1 auto; }
.opt-path-row {
  padding-left: 26px;
  font-size: 11px;
  color: #444;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* OPTIONS sub-dialogs (Colors…, Fonts…, Lineweight Settings…, …) */
.optsub-dlg { width: 360px; z-index: 3960; }
#optsub-ov { z-index: 3950; }
.optsub-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 8px;
  max-height: 420px;
  overflow-y: auto;
}
.optsub-body .pchk { display: flex; }
.opt-colorrow { align-items: center; justify-content: space-between; }
.opt-color {
  width: 54px;
  height: 22px;
  padding: 1px;
  border: 1px solid #9a9a9a;
  background: #fff;
}
.opt-fontsample {
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #c5c5c5;
  color: #1b1b1b;
}
.opt-scalelist { min-height: 140px; max-height: 180px; overflow-y: auto; }
.opt-scale-custom { color: #1a6ea8; }
.opt-dim { color: #8a8a8a; font-size: 11px; }

/* OPTIONS ▸ Display: real scroll bars over the drawing */
.vp-scroll {
  position: absolute;
  z-index: 6;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
}
.vp-scroll-h { left: 8px; right: 24px; bottom: 8px; height: 9px; }
.vp-scroll-v { top: 8px; bottom: 24px; right: 8px; width: 9px; }
.vp-thumb {
  position: absolute;
  background: rgba(160, 170, 180, .55);
  border-radius: 3px;
  cursor: pointer;
}
.vp-scroll-h .vp-thumb { top: 0; bottom: 0; }
.vp-scroll-v .vp-thumb { left: 0; right: 0; }
.vp-thumb:hover { background: rgba(190, 200, 210, .75); }
#viewport-container.space-paper .vp-scroll { display: none; }

/* Graphics Performance dialog */
.gfx-head { padding: 8px 12px 4px; border-bottom: 1px solid #c9c9c9; font-size: 12px; }
.gfx-hrow { display: flex; gap: 8px; margin: 2px 0; }
.gfx-hrow2 { display: flex; gap: 26px; }
.gfx-hlab { color: #6e6e6e; }
.gfx-body { max-height: 480px; overflow-y: auto; }
.gfx-item { padding: 7px 2px; border-bottom: 1px solid #dcdcdc; }
.gfx-cap { font-weight: 600; margin: 6px 0 2px; }
.gfx-desc { color: #5c5c5c; font-size: 11px; margin: 3px 0 0 22px; }
.gfx-desc.hidden { display: none; }
.gfx-toggle {
  min-width: 64px;
  padding: 2px 10px;
  border: 1px solid #9a9a9a;
  border-radius: 10px;
  background: #d9d9d9;
  color: #444;
}
.gfx-toggle.on { background: #2196d9; border-color: #1b7fba; color: #fff; }
.gfx-diag { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #dcdcdc; }
.gfx-mark { color: #d99a21; font-size: 14px; }
.gfx-diag.ok .gfx-mark { color: #1d9e46; }
.gfx-log { font: 11px var(--font-mono, Consolas, monospace); white-space: pre-wrap; color: #333; }

/* a tool hanging a live reading above the prompt (MEASUREGEOM Distance) */
.dyn-tip.dyn-tip-2 { align-items: flex-start; }
.dyn-tip.dyn-tip-2 span { white-space: pre; }

/* cascading child menu (Input Settings ▸) — lives inside its parent row's menu */
.nasj-sub { position: absolute; }
.ctx-sub-arrow { margin-left: auto; padding-left: 14px; opacity: .75; font-size: 10px; }

/* Input Search Options dialog */
.iso-cols { display: flex; gap: 16px; align-items: flex-start; }
.iso-col { flex: 1 1 0; min-width: 0; }
.pchk-ind { margin-left: 18px; }
.pchk.disabled { opacity: .45; }
.ctype-wrap { align-items: flex-start; }
.ctype-list {
  flex: 1 1 auto;
  border: 1px solid var(--border, #555);
  background: rgba(0, 0, 0, .18);
  min-height: 148px;
}
.ctype-row { display: flex; align-items: center; gap: 7px; padding: 3px 8px; cursor: default; }
.ctype-row.sel { background: rgba(79, 179, 234, .25); }
.ctype-row.disabled { opacity: .45; }
.ctype-arrows { display: flex; flex-direction: column; gap: 4px; margin-left: 6px; }
.ctype-btn { padding: 2px 8px; }
.cli-op-lab { text-align: center; }
.cli-preview { display: block; margin: 8px auto 2px; }

/* TEXT in-place editor: the white box, and the echo strip beneath it that
   shows the line as the classic tooltip would (non-ASCII runs become "?") */
.text-edit-wrap { position: absolute; z-index: 30; }
.text-edit {
  display: block;
  height: 1.45em;
  min-width: 2.6ch;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  border: 1px solid #808080;
  border-radius: 0;
  font-size: inherit;
  font-family: "Segoe UI", sans-serif;
  padding: 0 4px;
  outline: none;
}
.text-echo {
  position: absolute;
  top: calc(100% + 4px);
  left: 12%;
  min-width: 44px;
  padding: 2px 12px;
  text-align: center;
  background: #3c4148;
  color: #ddd;
  border: 1px solid #6a6a6a;
  font: 13px "Segoe UI", sans-serif;
  white-space: pre;
}

.dyn-mi { padding: 3px 12px 3px 22px; cursor: pointer; position: relative; }
.dyn-mi:hover, .dyn-mi.sel { background: #3a434d; }
/* the row the arrows are standing on, which Enter takes */
.dyn-mi.sel { box-shadow: inset 0 0 0 1px #6f7d8c; }
/* the <default> option carries the industry standard's dot */
.dyn-mi.cur::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
}


/* ---- Insert ▸ Reference: the external-reference dialogs ----------------
   The shared .pdlg chrome is 1100px wide, which suits the ten-tab dialogs;
   these are small, so each names its own width. */
.xref-dlg { width: 520px !important; }
.xref-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.xref-row { display: flex; align-items: center; gap: 8px; }
.xref-lab { flex: none; width: 104px; font-size: 12px; color: #1e1e1e; }
.xref-in { flex: 1; min-width: 0; }
.xref-sub { font-size: 11px; color: #5a5a5a; }
.xref-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #c5c5c5;
  background: #ffffff;
}
.xref-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 12px;
}
.xref-item + .xref-item { border-top: 1px solid #ededed; }
.xref-item.on { background: #cde8f7; }
.xref-item.xr-head { font-weight: 600; background: #e9e9e9; position: sticky; top: 0; }
.xref-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-c-name { flex: 2; }
.xr-c-status { flex: 1.2; }
.xr-missing { color: #c0392b; }
.xref-btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.xref-fade { flex: 1; }

/* ---- the External References palette (the panel launcher's arrow) ------
   Three columns like the industry standard's: Reference Name, Status, Size — with the host
   drawing as the root row and a Details pane under the list. */
#palette-xref { flex-basis: 300px; width: 300px; }
.pal-spring { flex: 1; }
.xr-missing-btn { font-size: 11px; color: var(--text-dim); }
.xr-missing-btn.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.xr-section {
  flex: none;
  padding: 5px 8px 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  border-top: 1px solid var(--border-soft);
}
.xr-cols {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 3px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}
.xr-cols > span, .xr-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-c-size { flex: 1; text-align: right; }
.xr-row { cursor: default; }
.xr-row .xr-c-name { display: flex; align-items: center; gap: 5px; }
.xr-row .xr-c-name svg { width: 14px; height: 14px; flex: none; }
/* a reference is a child of the drawing that holds it — indented, as in the tree */
.xr-row .xr-child { padding-left: 12px; }
.xr-details {
  flex: none;
  max-height: 170px;
  overflow-y: auto;
  padding: 2px 0 6px;
}
.xr-details .pal-kv { display: flex; gap: 6px; padding: 2px 8px; font-size: 11px; }
.xr-k { flex: 0 0 96px; color: var(--text-dim); }
.xr-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* ---- "Save changes to <drawing>?" — the three-button close box --------
   The shared .pdlg is 1100px wide for the big tabbed dialogs; this one hugs
   its sentence, the way the system box it stands in for does. */
.savechg-dlg { width: 380px !important; }
.savechg-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 14px;
}
.savechg-q {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  background: #2f7bd6;
}
.savechg-msg { flex: 1; font-size: 13px; color: #1e1e1e; }
.savechg-dlg .pdlg-foot .pbtn { min-width: 76px; }

/* ---- "The selected layout(s) ... will be permanently deleted" --------
   The warning that stands between a layout and its deletion. Wider than the
   save box because it carries the industry standard's three paragraphs, not one line. */
.dellay-dlg { width: 430px !important; }
.dellay-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 16px;
}
.dellay-warn { flex: none; line-height: 0; }
.dellay-msg { flex: 1; font-size: 13px; color: #1e1e1e; line-height: 1.5; }
.dellay-msg p { margin: 0 0 15px; }
.dellay-msg p:last-child { margin-bottom: 0; }
.dellay-dlg .pdlg-foot .pbtn { min-width: 76px; }

/* ------------------------------------------------------------------ *
 * Small screens — a tablet held upright, a phone, a half-screen split,
 * a phone on its side.
 *
 * The shell is a desktop program's: a titlebar, a ribbon, a floating
 * command line, a status bar of thirty controls. None of it was drawn
 * for 375px, and the rows do not give — each is a flex row of fixed
 * widths that runs out past the window edge. That is worse than it
 * looks: a mobile browser lays the page out at the width of its widest
 * row (833px for a 375px phone) and reports THAT as the window, so
 * every dialog and menu that centres or clamps itself lands in the wrong
 * place, and opening a palette scrolls the whole program sideways.
 *
 * The rules below are in width order, each taking from the row what it
 * no longer has room for — first the readouts and labels, then the
 * duplicates (the doc name is on its tab), then the room itself: the
 * agent panel and the palettes lie OVER the drawing instead of beside it,
 * the ribbon's tab strip and the status bar's cluster scroll, the file
 * menu becomes one column. Nothing is removed that has no other way in:
 * every command is still in the ribbon, the search, the menu.
 * ------------------------------------------------------------------ */

/* the bands may not grow the page: what does not fit a band scrolls or
   clips inside it, and the window stays the size of the screen */
html { overflow: hidden; }
#titlebar, #file-tabs, #statusbar { overflow: hidden; }
#workspace { position: relative; }
#ribbon-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#ribbon-tabs::-webkit-scrollbar { display: none; }
#ribbon-tabs > button { flex: none; }
/* the ▴ stays in reach while the tabs scroll under it */
#ribbon-tabs .ribbon-min {
  flex: none;
  position: sticky;
  right: 0;
  padding-left: 6px;
  background: var(--bg-ribbon-tabs);
}
#file-tabs { overflow-x: auto; scrollbar-width: none; }
#file-tabs::-webkit-scrollbar { display: none; }
#file-tabs > * { flex: none; }
#sb-cluster > *, #sb-toggles, #sb-right { flex: none; }
/* the viewcube is dragged to orbit; without this the page takes the drag */
#viewcube, #viewcube canvas, #navbar { touch-action: none; }
#canvas, #overlay-canvas { -webkit-touch-callout: none; }

/* --- 1100px: the status bar is 30 controls in one row; the coordinate
   readout is the one that is also on the cursor, so it goes first, and
   the cluster scrolls rather than run out past the edge --- */
@media (max-width: 1100px) {
  #coords-readout { display: none; }
  #coords-readout + .sb-sep { display: none; }
  #sb-cluster { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #sb-cluster::-webkit-scrollbar { display: none; }
}

/* --- 1000px: the agent panel lies over the drawing --- */
@media (max-width: 1000px) {
  /* the panel is a hard 420px; beside the drawing it left one pixel of
     it. Over the drawing it keeps its width and the drawing keeps its
     room — close it and the whole canvas is back. */
  #agent-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    flex: none;
    width: min(420px, 100%);
    z-index: 40;
    box-shadow: -14px 0 36px rgba(0, 0, 0, .45);
  }
  #titlebar-search { flex: 1 1 160px; width: auto; min-width: 100px; max-width: 240px; }
  /* 560px of command line was the floor; a prompt still needs to read */
  #command-panel { width: clamp(480px, 72vw, 900px); }
  #search-results { max-width: calc(100vw - 8px); }
  /* the file menu's two columns need 460px of a window that may have 375 */
  #app-menu { max-width: calc(100vw - 8px); max-height: calc(100vh - 44px); overflow-y: auto; }
  body .panel-drop { max-width: calc(100vw - 8px); overflow-x: auto; }
  body .panel-slide { max-width: calc(100vw - 8px); max-height: calc(100vh - 100px); overflow: auto; }
  .pdlg { overflow: auto; }
  #toast { max-width: calc(100vw - 24px); }
}

/* --- 800px: what is said twice is said once --- */
@media (max-width: 800px) {
  #titlebar-title { display: none; }
  /* the sheet tabs show the current one; the ☰ beside it lists them all */
  #sheet-tabs .sheet-tab:not(.active):not(.sel) { display: none; }
  .st-tipscol { display: none; }
  .st-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .st-search { flex: 1 1 200px; width: auto; }
  .st-sort-lab { margin-left: 0; }
  .st-main { padding: 20px 18px 14px; }
}

/* --- 700px: the palettes lie over the drawing too --- */
@media (max-width: 700px) {
  .palette {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    flex: none;
    width: min(300px, 86%);
    z-index: 35;
    box-shadow: -14px 0 36px rgba(0, 0, 0, .45);
  }
}

/* --- 640px: a phone. The status cluster scrolls, the QAT keeps the
   commands that have no other one-touch route (New, Open, Save, Undo,
   Redo); Save As and Plot are in the file menu. --- */
@media (max-width: 640px) {
  #qat { padding: 0 2px; }
  #qat .qat-btn:nth-child(4), #qat .qat-btn:nth-child(5) { display: none; }
  #titlebar-search { margin: 0 4px; }
  #help-btn { margin-right: 2px; }
  #statusbar { padding-right: 0; }
  #sb-left { flex: none; }
  #sb-cluster {
    flex: 1 1 auto;
    justify-content: flex-start;
    margin-left: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #sb-cluster::-webkit-scrollbar { display: none; }
  .sb-ws-label { display: none; }
  /* the file menu is two columns (app.js .menu-cols); on a phone the
     recent files go under the commands instead of beside them */
  #app-menu { width: calc(100vw - 8px); grid-template-columns: 1fr; }
  #app-menu .menu-cols { flex-direction: column; }
  #app-menu .menu-left { border-right: none; border-bottom: 1px solid var(--border-soft); }
  #app-menu .menu-right { width: auto; }
  /* the command line fills the width it has; the wrench and the recent
     list are in the ⌄ history's row-menu and the line's own history */
  #command-panel { width: auto; left: 8px; right: 8px; max-width: none; transform: none; }
  #cmd-wrench, #cmd-recent { display: none; }
  #command-input { min-width: 90px; flex-basis: 90px; }
  #command-prompt-label { max-width: 60%; }
  #command-suggest { min-width: 0; width: 100%; }
  #ctx-menu, .nasj-menu { max-width: calc(100vw - 16px); }
  #viewcube { transform: scale(.8); transform-origin: top right; right: 56px; top: 10px; }
  #navbar { top: 8px; right: 6px; bottom: 8px; }
  /* the Start page stacks: the sidebar becomes a header, its Open and
     New side by side, the recent files below */
  #start-page { flex-direction: column; overflow-y: auto; }
  .st-side {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .st-wordmark { flex: 1 1 100%; padding: 0 0 4px; font-size: 18px; }
  .st-split { flex: 1 1 40%; width: auto; }
  .st-nav { flex: 1 1 100%; flex-direction: row; margin-top: 4px; }
  .st-foot { display: none; }
  .st-main { flex: 1 0 auto; padding: 16px 14px 14px; }
  .st-head { font-size: 18px; }
  .st-sortbtn { min-width: 0; }
}

/* --- 480px: the narrowest phones --- */
@media (max-width: 480px) {
  #qat .qat-btn { width: 28px; }
  #qat .qat-btn:nth-child(8) { display: none; }
  #titlebar-search { min-width: 84px; }
  #ribbon-tabs { padding: 0 4px; }
  #ribbon-tabs > button { padding: 0 10px; }
  #sb-model { display: none; }
  #cmd-badge { display: none; }
  #command-row { gap: 5px; padding: 0 6px 0 4px; }
  /* a prompt is the one thing a person must be able to read in full;
     when one is up it takes a line of its own above the typing area */
  #command-row:has(#command-prompt-label:not(:empty)) { flex-wrap: wrap; height: auto; min-height: 34px; row-gap: 0; }
  #command-row:has(#command-prompt-label:not(:empty)) #command-prompt-label {
    order: -1;
    flex: 1 1 100%;
    max-width: none;
    padding: 5px 4px 0 6px;
  }
  #command-row:has(#command-prompt-label:not(:empty)) #cmd-grip { height: 34px; }
  #cmd-enter { margin-left: 0; }
  #command-panel { left: 4px; right: 4px; bottom: 4px; }
  #viewcube { transform: scale(.66); }
  .pdlg { max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); }
}

/* --- short windows: a phone on its side. The ribbon starts minimized
   (app.js), the history keeps to a line, and the menus scroll. --- */
@media (max-height: 560px) {
  #command-history { max-height: 22px; }
  #command-panel:focus-within #command-history { max-height: 66px; }
  #command-panel.cli-open #command-history { max-height: min(var(--cli-open-h, 340px), 45vh); }
  #ctx-menu, .nasj-menu, #ctx-menu.ctx-rich { max-height: calc(100vh - 12px); overflow-y: auto; }
  #app-menu { max-height: calc(100vh - 44px); overflow-y: auto; }
  #navbar { overflow-y: auto; scrollbar-width: none; }
  #navbar::-webkit-scrollbar { display: none; }
  #viewcube { transform: scale(.66); transform-origin: top right; }
  .pdlg { max-height: calc(100vh - 8px); overflow: auto; }
}

/* --- fingers: what is tapped is bigger than what is clicked --- */
@media (pointer: coarse) {
  .cmd-key { height: 26px; min-width: 34px; font-size: 12px; }
  .cmdrow-btn { width: 26px; height: 26px; }
  #command-row { height: 34px; }
  #cmd-grip { width: 14px; }
  .sb-btn { width: 30px; height: 26px; }
  .sb-text-btn { height: 26px; }
  #navbar button { min-height: 34px; }
  .ribbon-tab, #ribbon-tabs > button { padding: 0 14px; }
  .pal-header button { width: 28px; height: 28px; }
  .ctx-item { height: 32px; }
  .menu-item { height: 38px; }
}
/* iOS zooms the page into any field whose text is under 16px the moment
   it is focused; a 16px field is left alone */
@media (pointer: coarse) and (max-width: 1024px) {
  #command-input, #search-input, .st-search input, #ag-input { font-size: 16px; }
}