/* ============================================================================
   SPECTER — app.css  ·  the APLIKACIJA workspace from Specter.dc.html
   ========================================================================== */

.app-body{ overflow:hidden; background:var(--surface-3); height:100%; }
/* §52.1/§52.4 — JEDNA kolona. Traka ikonica je držala prvih 58 px i sve što je
   nosila stoji negde drugde (traka kartica, traka projekta, meni naloga), pa
   tih 58 px od sada ide prikazu. Red je određen (`minmax(0,1fr)`) da dete sme
   da se skupi ispod svoje sadržine umesto da izgura mrežu preko dna prozora —
   ranije je to pisalo samo u pravilu za niske ekrane, zbog trake koja se u
   njemu prelamala u dve kolone. */
.app{ --ws-pad:18px; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr);
  height:100vh; height:100dvh; overflow:hidden; }
.app-main{ display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ══════════════════════════ PROJECT BAR ════════════════════════════════ */
.projbar{ background:var(--surface); border-bottom:1px solid var(--line); padding:10px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:0 0 auto; }
.proj{ cursor:pointer; padding:4px 8px; margin-left:-8px; border-radius:var(--r-6); text-align:left;
  transition:background var(--t-1); }
.proj:hover{ background:var(--surface-3); }
.proj .pname{ display:block; font-size:var(--fs-16); font-weight:700; letter-spacing:-.025em; margin-top:2px; }
.projbar-btns{ gap:7px; flex-wrap:wrap; }
.tabbar{ background:var(--surface); border-bottom:1px solid var(--line); padding:0 18px;
  flex:0 0 auto; }
.app-content{ flex:1; overflow:auto; padding:12px 14px calc(18px + var(--safe-b)); min-height:0; }
/* the scene is not a document — it must not scroll, and it must not leave a
   band of unused paper under itself (§17.7) */
/* §45.1/N7 — jedna mera za bočni razmak radnog prostora. Gornje trake su
   nosile 18 px, a radni prostor 12 px, pa su trake išle 58→1920 a paneli
   ispod njih 70→1908 — **12 px razlike sa leve i 12 sa desne, jedno ispod
   drugog na istom ekranu.** Sada obe strane čitaju isti broj. */
.app-content.scene-mode{ overflow:hidden; padding:10px var(--ws-pad) calc(10px + var(--safe-b)); }
.app-content.scene-mode > .view[data-view=scene]{ height:100%; }
.view[hidden]{ display:none !important; }

/* ═══════════════════════════ SCENE EDITOR ══════════════════════════════ */
/* Column widths are live CSS variables so the splitters can drag them and the
   auto-hide can collapse them to a hair-line handle.                       */
.editor{
  /* *-open hold the user's dragged size (written inline by shell.js);
     the un-suffixed vars are what the grid reads, so a collapse rule wins. */
  --w-left-open: 300px; --w-right-open: 330px; --h-bottom-open: 210px;
  /* širina povlačne ručke (`.grab`) i sklopljenog panela — NIJE u vezi sa
     trakom ikonica, koje po §52.1 više nema */
  --rail-w: 14px;
  --w-left: var(--w-left-open); --w-right: var(--w-right-open); --h-bottom: var(--h-bottom-open);
  position:relative; display:grid; gap:8px;
  /* §17.7 — this used to be calc(100vh - 66px - 112px) against a --head-h
     the workspace does not even have, so there was always a strip of dead
     space under the viewport and the maths broke at every other size. The
     editor now simply takes the height its parent has left. */
  height:100%; min-height:0;
  grid-template-columns:var(--w-left) 1fr var(--w-right);
  grid-template-rows:1fr var(--h-bottom);
  /* §21.8 / §18.5 — the transition is OFF unless a panel is deliberately
     opening or closing.

     It used to be on always, and `grid-template-columns` is animatable, so a
     window resize started an interpolation between `var(--w-left) 1fr
     var(--w-right)` and the narrow layout's `0 1fr 0` — and the tracks parked
     half way. **Measured at 375 px: the columns sat at `250px 0px 292px` and
     the 3D viewport was 2 px wide; with the transition off they resolve
     immediately to `0px 347px 0px` and the viewport is 347 px.** That one
     line is most of "nothing is responsive with anything else".

     `shell.js` adds `.animating` for the 300 ms of a retract, which is the
     only time the movement is wanted. */
  transition:none;
}
/* §17.12 — snappy. 420 ms felt like syrup. */
.editor.animating{
  transition:grid-template-columns var(--t-2) var(--ease), grid-template-rows var(--t-2) var(--ease);
}
/* §17.9 — the retract used to judder because the WebGL buffer was only
   resized once the transition had finished; shell.js now drives
   Viewer.resize() every frame while this class is on. */
.editor.animating{ will-change:grid-template-columns, grid-template-rows; }
.editor.no-bottom{ grid-template-rows:1fr 0px; }
.editor.hid-left{ --w-left: var(--rail-w); }
.editor.hid-right{ --w-right: var(--rail-w); }
.editor.dragging{ transition:none; user-select:none; }
.editor.dragging *{ pointer-events:none; }
.editor.dragging .split-h,.editor.dragging .split-v{ pointer-events:auto; }
.dock{ position:relative; display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0;
  grid-row:1; transition:opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease); }
.dock[data-dock=left]{ grid-column:1; }
.dock-center{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:8px;
  min-height:0; min-width:0; position:relative; }
.dock[data-dock=right]{ grid-column:3; }
.dock.dock-bottom{ grid-column:1 / -1; grid-row:2; min-height:0; }

/* hidden dock: content slides away, only the handle stays */
.editor.hid-left  .dock[data-dock=left]  > .panel{ opacity:0; transform:translateX(-16px); pointer-events:none; }
.editor.hid-right .dock[data-dock=right] > .panel{ opacity:0; transform:translateX(16px);  pointer-events:none; }
.editor.no-bottom .dock-bottom > .panel{ opacity:0; transform:translateY(16px); pointer-events:none; }
.dock > .panel{ transition:opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease); }

/* ── iPhone-style pull handles ─────────────────────────────────────────── */
.grab{ position:absolute; z-index:8; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:transparent; border:0; padding:0; }
.grab::before{ content:""; display:block; border-radius:var(--r-pill); background:var(--mut-4);
  opacity:.55; transition:opacity var(--t-2), background var(--t-2), transform var(--t-2); }
.grab:hover::before{ opacity:1; background:var(--acc); }
/* §30.4 — tri ručke, jedan izgled. Bile su različite: uspravna 4 × 52,
   vodoravna 64 × 4 — druga dužina, druga debljina, drugi osećaj. Sada je
   ista šipka od 48 × 4, centrirana po SREDINI svog prostora u obe ose, i
   raste isto na prešao miš. */
.grab{ --grab-len:48px; --grab-thick:4px; }
.grab.v{ top:0; bottom:0; width:var(--rail-w); }
.grab.v::before{ width:var(--grab-thick); height:var(--grab-len); }
.grab.v:hover::before{ transform:scaleY(1.22); }
.grab.h{ left:0; right:0; height:var(--rail-w); }
.grab.h::before{ width:var(--grab-len); height:var(--grab-thick); }
.grab.h:hover::before{ transform:scaleX(1.22); }
.grab[data-grab=left]{ grid-column:1; grid-row:1; left:0; }
.grab[data-grab=right]{ grid-column:3; grid-row:1; right:0; }
.grab[data-grab=bottom]{ grid-column:1/-1; grid-row:2; bottom:0; }
.editor.hid-left  .grab[data-grab=left],
.editor.hid-right .grab[data-grab=right],
.editor.no-bottom .grab[data-grab=bottom]{ position:relative; }

/* §53.3 — ručka je 10 px široka (uspravna) odnosno 22 px visoka (vodoravna).
   To je tačno onoliko koliko treba oku i premalo prstu: mereno `dodir.js`,
   osetljiva površina uspravne ručke je **16 px** na telefonu.
   Šipka se ne deblja — deblja se samo ono što hvata prst, i to na tu stranu
   na koju se ručka i vuče. Uspravna dobija 44 px širine, vodoravna 44 px
   visine; oko i dalje vidi šipku od 4 px. */
@media (pointer: coarse){
  .grab.v::after{ content:""; position:absolute; top:0; bottom:0;
    left:50%; width:44px; transform:translateX(-50%); }
  .grab.h::after{ content:""; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%); }
  /* Cepač se NE širi, i to je odluka a ne propust. Cepač (`z-index:9`) i
     ručka (`z-index:8`) stoje na ISTOM šavu. Kad su se oba raširila na 44 px,
     cepač je — kao viši — pojeo ceo dodir ručke: mereno, ručka je i sa svojim
     proširenjem ostajala na 22 px. Na šavu prst radi jednu stvar, i to je
     sklopi/rasklopi (ručka); vučenje mere je potez miša i ostaje na 9 px. */
}

/* ── drag splitters ───────────────────────────────────────────────────── */
.split-v,.split-h{ position:absolute; z-index:9; background:transparent; }
.split-v{ top:0; bottom:0; width:9px; cursor:col-resize; }
.split-h{ left:0; right:0; height:9px; cursor:row-resize; }
.split-v::after,.split-h::after{ content:""; position:absolute; inset:0; margin:auto;
  background:var(--acc); opacity:0; transition:opacity var(--t-2); border-radius:var(--r-pill); }
.split-v::after{ width:2px; }
.split-h::after{ height:2px; }
.split-v:hover::after,.split-h:hover::after,.split-v.on::after,.split-h.on::after{ opacity:.55; }
.split-v[data-split=left]{ left:calc(var(--w-left) + 1px); }
.split-v[data-split=right]{ right:calc(var(--w-right) + 1px); }
.split-h[data-split=bottom]{ bottom:calc(var(--h-bottom) + 1px); }
.editor.hid-left .split-v[data-split=left],
.editor.hid-right .split-v[data-split=right],
.editor.no-bottom .split-h[data-split=bottom]{ display:none; }

.panel{ flex:1; }
.panel.fixed{ flex:0 0 auto; }
.panel-hd .moves{ display:flex; gap:1px; }
.panel-hd .t{ font-size:var(--fs-10); }

/* ── auto-hide affordance while the 3D view has focus ─────────────────── */
.editor.focus-3d .dock{ opacity:0; pointer-events:none; }
.editor.focus-3d .dock:hover,
.editor.peek .dock{ opacity:1; pointer-events:auto; }
/* §30.6 — pilula je natpis, ne traka: širina joj je tekst, ne ćelija u kojoj
   stoji. Bila je razvučena do ivica jer je `.vp-hud > *` daje `max-width:100%`
   a ništa joj nije reklo da bude po meri sadržaja. */
.hint-pill{ position:absolute; left:50%; top:10px; transform:translateX(-50%);
  z-index:12; font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.06em;
  background:color-mix(in srgb,var(--ink) 92%,transparent); color:var(--on-ink);
  padding:6px 12px; border-radius:var(--r-pill); pointer-events:none;
  width:max-content; max-width:min(92%,420px); text-align:center;
  opacity:0; transition:opacity var(--t-5) var(--ease); }
.hint-pill.on{ opacity:1; }

/* ═══════════════════════════ VIEWPORT ══════════════════════════════════ */
.viewport{ position:relative; flex:1; border:1px solid var(--border); border-radius:var(--r-10);
  background:var(--surface-2);
  background-image:linear-gradient(rgba(31,95,208,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,95,208,.055) 1px,transparent 1px);
  background-size:26px 26px; overflow:hidden; min-height:320px; touch-action:none; }
html[data-theme=dark] .viewport{ background-image:
  linear-gradient(rgba(78,134,238,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(78,134,238,.07) 1px,transparent 1px); }
#viewport-gl{ position:absolute; inset:0; }
#viewport-gl canvas{ width:100% !important; height:100% !important; }

/* ── viewport overlays. Bigger, labelled, and self-hiding. ────────────── */
.vp-tools{ position:absolute; left:12px; top:12px; z-index:6; }
.hud-sep{ height:1px; background:var(--line-2); margin:4px 3px; }
.vp-tools .tool{ width:42px; height:42px; font-size:var(--fs-19); border-radius:var(--r-7); }
.vp-tools .tool.on{ box-shadow:var(--sh-1); }

.vp-views{ position:absolute; right:12px; top:12px; z-index:6; display:flex; gap:5px;
  flex-wrap:wrap; justify-content:flex-end; max-width:58%; }
.vp-views .badge{ font-size:var(--fs-11); padding:8px 11px; }

.vp-foot{ position:absolute; left:12px; bottom:12px; z-index:6; display:flex; gap:6px;
  align-items:center; flex-wrap:wrap; max-width:calc(100% - 24px); }
.hud-group > button:hover{ background:var(--surface-3); }
#snap-chip.off{ opacity:.5; text-decoration:line-through; }
.measure-pill{ color:var(--on-solid) !important; background:var(--warn) !important; border-color:var(--warn) !important; }

/* overlays fade out while the user is actually working in 3D */
.viewport.busy .vp-tools,
.viewport.busy .vp-explode,
.viewport.busy .vp-foot,
.viewport.busy .vp-explode{ opacity:.10; transition:opacity var(--t-5) var(--ease) var(--t-4); }
.viewport .vp-tools,.viewport .vp-views,.viewport .vp-foot,.viewport .vp-explode{
  transition:opacity var(--t-3) var(--ease); }
.viewport.busy .vp-tools:hover,
.viewport.busy .vp-views:hover,
.viewport.busy .vp-foot:hover,
.viewport.busy .vp-explode:hover{ opacity:1; transition-delay:0s; }

/* ── explode: unobtrusive, fine-grained, out of the way ───────────────── */
.vp-explode{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:9px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:var(--r-pill); padding:5px 14px; box-shadow:none; max-width:min(360px,60%); }
.vp-explode:hover{ background:var(--surface); border-color:var(--line); box-shadow:var(--sh-1); }
.vp-explode .label{ font-size:var(--fs-9); letter-spacing:.14em; opacity:.7; }
.vp-explode input{ width:150px; height:18px; }
.vp-explode input::-webkit-slider-runnable-track{ height:3px; }
.vp-explode input::-webkit-slider-thumb{ width:13px; height:13px; margin-top:-5px; }
.vp-explode .mono{ font-size:var(--fs-11); color:var(--mut); min-width:38px; text-align:right; }
@supports not (backdrop-filter:blur(1px)){ .vp-explode{ background:var(--surface); } }

.vp-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:6; padding:20px; }
.vp-empty-card{ text-align:center; max-width:420px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-14); padding:34px 30px; box-shadow:var(--sh-2); }
.vp-empty-ico{ margin:0 auto 14px; width:64px; height:64px; display:grid; place-items:center;
  animation:spFloat var(--t-loop-float) ease-in-out infinite; }
.vp-empty-ico .sp-mark{ filter:drop-shadow(0 6px 14px rgba(26,36,48,.13)); }
.vp-loading{ position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:color-mix(in srgb,var(--surface-2) 88%,transparent); }
.spin.big{ width:30px; height:30px; border:3px solid var(--line-3); border-top-color:var(--acc);
  border-radius:var(--r-pill); animation:spSpin var(--t-7) linear infinite; }

/* ═══════════════════════════ TREE PANEL ════════════════════════════════ */
.tree{ padding:6px 8px 12px; font-size:var(--fs-13); }
.tree-node{ margin-left:2px; }
.tree-row{ display:flex; align-items:center; gap:6px; min-height:32px; padding:2px 6px;
  border-radius:var(--r-5); cursor:pointer; transition:background var(--t-1); }
.tree-row:hover{ background:var(--surface-3); }
.tree-row.on{ background:var(--acc-soft); }
.tree-row .arw{ width:12px; font-size:var(--fs-9); color:var(--mut-4); flex:0 0 auto; text-align:center; }
.tree-row .eye{ position:static; transform:none; width:24px; height:24px; font-size:var(--fs-12); }
.tree-row .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-row.grp .nm{ font-weight:600; }
/* §9.4 — the name turns into a field in place; same size, same position, so
   nothing jumps when it does */
.tree-rename{ width:100%; min-width:0; font:inherit; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--acc); border-radius:var(--r-4); padding:1px 5px; margin:-2px 0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 12%,transparent); outline:none; }
.tree-row .iso{ opacity:0; font-family:var(--mono); font-size:var(--fs-9); color:var(--acc);
  border:1px solid var(--acc-line-2); padding:2px 5px; border-radius:var(--r-2); flex:0 0 auto; }
.tree-row:hover .iso,.tree-row.on .iso{ opacity:1; }
.tree-kids{ margin-left:12px; border-left:1px solid var(--line-3); padding-left:4px; }
.tree-kids.hid{ display:none; }
.tree-search{ padding:8px 10px; border-bottom:1px solid var(--line-5); }

/* ═══════════════════════════ INSPECTOR ═════════════════════════════════ */
.insp{ padding:10px 12px 16px; }
.insp .tabs{ margin:-4px -2px 12px; }
.insp .tabs > button{ padding:8px 10px; font-size:var(--fs-12); }
.ins-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ins-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ins-f .lbl{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.1em; color:var(--mut-3);
  text-transform:uppercase; }
.ins-f input{ width:100%; padding:7px 8px; border:1.5px solid var(--line); border-radius:var(--r-4);
  font-family:var(--mono); font-size:var(--fs-12); background:var(--surface-2); color:var(--ink); }
.ins-f input:focus{ border-color:var(--acc); box-shadow:var(--sh-focus-sm); }
.ins-f input.eq{ font-size:var(--fs-11); color:var(--acc); }
.ins-f.bad input{ border-color:var(--danger); }
.ins-sec{ margin-top:14px; }
.ins-sec > .label{ margin-bottom:7px; }
.ins-row{ display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-13);
  padding:6px 0; border-bottom:1px solid var(--line-4); }
.ins-row:last-child{ border-bottom:0; }
.ins-row .k{ color:var(--mut); }
.ins-row .v{ font-family:var(--mono); font-size:var(--fs-12); text-align:right; }

/* equation bar */
.eqbar{ position:relative; margin-top:10px; }
.eqbar .row{ gap:6px; }
.eqbar select{ width:auto; padding:7px 8px; font-size:var(--fs-12); border-radius:var(--r-4);
  border:1.5px solid var(--line); background:var(--surface-2); }
.eq-out{ font-family:var(--mono); font-size:var(--fs-11); margin-top:5px; color:var(--mut); min-height:15px; }
.eq-out.ok{ color:var(--ok); } .eq-out.bad{ color:var(--danger); }
.eq-ac{ position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-6); box-shadow:var(--sh-2);
  max-height:190px; overflow:auto; display:none; }
.eq-ac.open{ display:block; }
.eq-ac button{ display:flex; justify-content:space-between; gap:10px; width:100%; padding:7px 10px;
  font-family:var(--mono); font-size:var(--fs-11); text-align:left; }
.eq-ac button:hover,.eq-ac button.on{ background:var(--acc-soft); color:var(--acc); }
.eq-ac .v{ color:var(--mut); }

/* edge banding editor */
.edge-pic{ position:relative; width:100%; aspect-ratio:4/3; max-width:190px; margin:4px auto 12px;
  border:1.5px solid var(--ink); background:rgba(216,190,150,.22); }
.edge-pic button{ position:absolute; background:var(--line-3); transition:background var(--t-1); }
.edge-pic button.on{ background:var(--warn); }
.edge-pic .e-t{ left:0; right:0; top:-4px; height:7px; }
.edge-pic .e-b{ left:0; right:0; bottom:-4px; height:7px; }
.edge-pic .e-l{ top:0; bottom:0; left:-4px; width:7px; }
.edge-pic .e-r{ top:0; bottom:0; right:-4px; width:7px; }
.edge-pic .cap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:var(--fs-10); color:var(--mut-2); pointer-events:none; }

/* ops list in the dock */
.op-row{ display:grid; grid-template-columns:20px 1fr auto auto; gap:8px; align-items:center;
  padding:8px 10px; border-bottom:1px solid var(--line-4); font-size:var(--fs-12); }
.op-row:hover{ background:var(--surface-2); }
.op-row .i{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut-4); }
.op-row .dot{ width:8px; height:8px; border-radius:var(--r-pill); }
.op-row .prm{ font-family:var(--mono); font-size:var(--fs-11); color:var(--mut-2); }
/* zbir stoji na vrhu i ne pomera se kad se spisak skroluje — to je broj koji ide na mašinu */
.op-row.op-sum{ position:sticky; top:0; z-index:1; background:var(--surface-2);
  border-bottom:1px solid var(--line-2); font-weight:600; }

/* ═══════════════════════════ CNC TAB ═══════════════════════════════════ */
.grid-cnc{ display:grid; grid-template-columns:250px minmax(0,1.35fr) 300px; gap:12px; }
.grid-mach{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:12px; }
.grid-curve{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; }
.grid-two{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr); gap:14px; }
.grid-two.even{ grid-template-columns:1fr 1fr; }

.macro{ border:1.5px solid var(--line-2); border-radius:var(--r-8); padding:11px 12px; cursor:pointer;
  background:var(--surface-2); text-align:left; width:100%;
  transition:border-color var(--t-2), transform var(--t-2); }
.macro:hover{ border-color:var(--acc); transform:translateY(-2px); }
.macro .row{ justify-content:space-between; gap:8px; }
.macro .nm{ font-size:var(--fs-13); font-weight:600; }
.macro .add{ font-family:var(--mono); font-size:var(--fs-9); color:var(--acc);
  border:1px solid var(--acc-line-2); padding:3px 6px; border-radius:var(--r-3); }
.macro .d{ font-size:var(--fs-12); line-height:1.5; color:var(--mut); margin-top:4px; }

.part-preview{ position:relative; width:100%; padding-top:46%; border:1.5px solid var(--ink);
  border-radius:var(--r-2); background:var(--surface-2); overflow:hidden; }
.part-preview .hole{ position:absolute; border-radius:var(--r-pill); background:var(--surface);
  animation:spSlide var(--t-4) var(--ease) both; }
.part-preview .slot{ position:absolute; border:1px dashed var(--ink);
  background:repeating-linear-gradient(90deg,rgba(26,36,48,.2) 0 3px,transparent 3px 7px); }
/* §7.6 — the step counter walks the drawing: the operation it is on is lit,
   everything behind it is marked done. Without this the „SIMULACIJA" card was
   a number that changed and a part that never moved. */
/* `animation:none` on both states for the same reason: `spSlide … both` holds
   the first keyframe (opacity 0) through its delay, so a hole marked done
   could be marked invisible instead. */
.part-preview .hole.sim-done,
.part-preview .slot.sim-done{ opacity:.45; animation:none; }
/* `animation: spSlide … both` on `.hole` keeps its final transform for ever,
   and an animation beats a plain declaration — the highlight scaled to 0.99
   instead of 1.35. Turning the entry animation off is what lets the highlight
   take the element over. Measured before: matrix(0.99, 0, 0, 0.99, 0, 10). */
.part-preview .hole.sim-on{ background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 32%,transparent);
  animation:none; transform:scale(1.35); z-index:2; }
.part-preview .slot.sim-on{ border-color:var(--acc); border-style:solid;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 26%,transparent); z-index:2; }
.part-preview .hole,.part-preview .slot{ transition:opacity var(--t-1) var(--ease),
  transform var(--t-1) var(--ease), background var(--t-1) var(--ease),
  box-shadow var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.legend{ gap:14px; margin-top:11px; font-size:var(--fs-10); color:var(--mut); }
.sim-now{ padding:9px 17px; font-size:var(--fs-11); color:var(--ink-2);
  border-bottom:1px solid var(--line-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sim-note{ padding:16px 17px; font-size:var(--fs-13); color:var(--mut); line-height:1.6; }
.sim-code{ background:var(--ink); padding:12px 16px; font-family:var(--mono); font-size:var(--fs-12);
  line-height:1.75; overflow:auto; max-height:220px; color:#C7D3E0; }
.sim-code div{ border-radius:var(--r-2); padding:0 5px; }
.sim-code div.on{ background:rgba(31,95,208,.4); color:var(--on-solid); }

.wizard{ border:1.5px solid var(--acc); box-shadow:var(--sh-acc); }
.wz-q{ font-size:var(--fs-12); font-weight:600; margin:13px 0 6px; }
.wz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.wz-opt{ padding:8px 10px; border:1.5px solid var(--line-2); background:var(--surface-2);
  border-radius:var(--r-6); cursor:pointer; font-size:var(--fs-12); font-weight:500; text-align:center;
  transition:all var(--t-1); }
.wz-opt:hover{ border-color:var(--acc); }
.wz-opt.on{ border-color:var(--acc); background:var(--acc-soft); color:var(--acc); }
.wz-opt.mono{ font-family:var(--mono); font-size:var(--fs-10); }
.wz-sum{ margin-top:13px; padding:11px; border-radius:var(--r-7); background:var(--surface-2);
  border:1px solid var(--line-2); font-size:var(--fs-12); line-height:1.55; color:var(--ink-2); }
.send-card{ cursor:pointer; text-align:left; transition:transform var(--t-2); }
.send-card:hover{ transform:translateY(-2px); }

/* machine bed */
.bed{ position:relative; width:100%; padding-top:40%; border:2px solid var(--ink);
  border-radius:var(--r-4); background:var(--surface-5); overflow:hidden;
  background-image:repeating-linear-gradient(90deg,rgba(26,36,48,.05) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(0deg,rgba(26,36,48,.05) 0 1px,transparent 1px 26px); }
.bed .pod{ position:absolute; top:8%; height:84%; width:5%; background:rgba(26,36,48,.1);
  border:1px solid rgba(26,36,48,.25); border-radius:var(--r-2); }
.bed .part{ position:absolute; background:rgba(216,190,150,.85); border:2px solid var(--ink);
  border-radius:var(--r-2); display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:4px; box-shadow:var(--sh-1); }
.bed .zero{ position:absolute; width:11px; height:11px; margin:-6px 0 0 -6px;
  border-radius:var(--r-pill); background:var(--drill-dowel); box-shadow:var(--sh-halo); }
.bed .zlbl{ position:absolute; font-family:var(--mono); font-size:var(--fs-10); color:var(--drill-dowel); }
.bed .blbl{ position:absolute; right:10px; bottom:8px; font-family:var(--mono); font-size:var(--fs-10);
  color:var(--mut); }
.mach{ border:1.5px solid var(--line-2); background:var(--surface-2); border-radius:var(--r-8);
  padding:11px 12px; cursor:pointer; text-align:left; width:100%; transition:border-color var(--t-2); }
.mach:hover,.mach.on{ border-color:var(--acc); }
.mach.on{ background:var(--acc-soft); }
.mach .nm{ font-size:var(--fs-13); font-weight:600; }
.mach .sp{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut); margin-top:4px; }

/* curve editor */
.curve-stage{ position:relative; width:100%; padding-top:52%; border:1.5px solid var(--ink);
  border-radius:var(--r-4); background:var(--surface-2); overflow:hidden; cursor:crosshair;
  user-select:none; touch-action:none; }
.curve-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.curve-stage .cp{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:var(--r-pill); background:var(--surface); border:2px solid var(--acc);
  cursor:grab; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:var(--fs-9); color:var(--acc); touch-action:none; }
.curve-stage .cp:active{ cursor:grabbing; transform:scale(1.15); margin:-9px 0 0 -9px; }
.curve-hint{ position:absolute; left:10px; bottom:8px; font-size:var(--fs-10); color:var(--mut); }

/* materials */
.mat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;
  align-content:start; }
.mat-card{ border:1.5px solid var(--line); border-radius:var(--r-10); background:var(--surface);
  padding:15px; cursor:pointer; text-align:left;
  transition:transform var(--t-3), box-shadow var(--t-3), border-color var(--t-3); }
.mat-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.mat-card.on{ border-color:var(--acc); }
.mat-sw,.mat-swatch{ height:66px; border-radius:var(--r-6); border:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px); }
.mat-swatch{ height:54px; }
.mat-card .nm{ font-size:var(--fs-15); font-weight:600; margin-top:11px; letter-spacing:-.015em; }
.mat-card .sp{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut); margin-top:4px; }
.mat-card .ft{ display:flex; justify-content:space-between; align-items:center; margin-top:11px;
  padding-top:10px; border-top:1px solid var(--line-3); font-size:var(--fs-12); }

/* tables */
.c-stock{ grid-template-columns:1.6fr .9fr .8fr .8fr .9fr; }
.c-work{ grid-template-columns:1.4fr 1.2fr .8fr .9fr 1.2fr; }
.c-hw{ grid-template-columns:1.5fr .7fr .8fr .8fr; }
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.kpi{ border:1px solid var(--border); border-radius:var(--r-10); background:var(--surface); padding:16px; }
.kpi .v{ font-size:var(--fs-27); font-weight:700; letter-spacing:-.035em; }
.chart{ display:flex; align-items:flex-end; gap:14px; height:180px; }
.chart .m{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%;
  justify-content:flex-end; }
.chart .bars{ display:flex; align-items:flex-end; gap:4px; height:100%; width:100%;
  justify-content:center; }
.chart .bars i{ width:40%; border-radius:4px 4px 0 0; transition:height var(--t-7) var(--ease); }
.chart .bars i.in{ background:linear-gradient(180deg,var(--acc),var(--acc-4)); }
.chart .bars i.out{ background:#D9DFE5; }

/* timeline */
.tl{ display:grid; grid-template-columns:88px 22px 1fr; align-items:start; }
.tl .dt{ font-family:var(--mono); font-size:var(--fs-11); color:var(--mut-3); padding-top:2px; }
.tl .ln{ display:flex; flex-direction:column; align-items:center; height:100%; }
.tl .ln i{ width:9px; height:9px; border-radius:var(--r-pill); margin-top:4px; }
.tl .ln span{ flex:1; width:1px; background:var(--line-2); min-height:24px; }
.tl .bd{ padding-bottom:20px; }

/* chat */
.chat{ flex:1; min-height:260px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.chat-input{ display:flex; gap:8px; padding:12px 14px calc(12px + var(--safe-b));
  border-top:1px solid var(--line-5); }
.chat-input .inp{ flex:1; }

/* drop veil */
.drop-veil{ position:fixed; inset:0; z-index:500; display:none; align-items:center;
  justify-content:center; background:rgba(26,36,48,.55); backdrop-filter:blur(4px); padding:20px; }
.drop-veil.on{ display:flex; animation:spIn var(--t-2) ease both; }
.drop-card{ background:var(--surface); border:2px dashed var(--acc); border-radius:var(--r-14);
  padding:44px 52px; text-align:center; }
.drop-ico{ font-size:var(--fs-42); color:var(--acc); margin-bottom:10px; }

/* measure overlay labels */
#measure-layer{ position:fixed; inset:0; pointer-events:none; z-index:400; }
.m-lbl{ position:absolute; transform:translate(-50%,-50%); background:var(--ink); color:var(--on-ink);
  font-family:var(--mono); font-size:var(--fs-11); font-weight:500; padding:4px 8px; border-radius:var(--r-4);
  white-space:nowrap; box-shadow:var(--sh-1); }
.m-lbl.snap{ background:var(--warn); }
.m-lbl.hint{ background:var(--surface); color:var(--ink); border:1px solid var(--border); }
.m-del{ pointer-events:auto; cursor:pointer; margin-left:6px; opacity:.7; }
.m-del:hover{ opacity:1; }

/* ═══════════════ SNAP / ROTATION STEP popover ══════════════════════════ */
.snapwrap{ position:relative; }
.snapmenu{ position:absolute; bottom:calc(100% + 7px); left:0; z-index:30; min-width:220px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-9);
  box-shadow:var(--sh-3); display:none; }
.snapmenu.open{ display:block; animation:spSlide var(--t-2) var(--ease) both; }
.snapmenu .sec{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.13em; color:var(--mut-3);
  padding:9px 10px 5px; text-transform:uppercase; }
.snapgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:0 8px 8px; }
.snapgrid button{ padding:7px 4px; border:1px solid var(--line); border-radius:var(--r-4);
  background:var(--surface-2); font-family:var(--mono); font-size:var(--fs-11); color:var(--ink-2);
  cursor:pointer; transition:all var(--t-1); }
.snapgrid button:hover{ border-color:var(--acc); color:var(--acc); }
.snapgrid button.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

/* ═══════════════ FORMULA BAR (bottom-right, under the editor) ══════════ */
.fx{ position:absolute; right:12px; bottom:56px; z-index:7; width:min(420px,52%);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-9);
  box-shadow:var(--sh-2); overflow:visible; transition:opacity var(--t-3) var(--ease); }
/* §55.18 — položaj panela uvezenog modela. Ranije je stajao kao zapisani stil
   na samom elementu (`importers.js`), pa ga nijedno pravilo iz fajla nije
   moglo pomeriti — a na uskom ekranu mora, v. `chrome.css`. */
/* `max-height` NIJE ukras. Bez njega panel raste koliko ima sadržaja: mereno
   na 1440 × 900 bio je **768,5 px visok i završavao se na 949,5 px** — dakle
   49,5 px ISPOD donje ivice ekrana, i donji deo podešavanja se nije mogao ni
   videti ni doklizati. Kvar je stariji od preseljenja na telefon; našao se
   tek kad je panel počeo da se meri na sve četiri veličine.
   64 px gore je početna visina, 64 px dole ostavlja donju traku slobodnom. */
.fx.imp-fx{ top:64px; bottom:auto; right:12px; width:min(300px,46%);
  max-height:calc(100% - 128px); overflow:auto; }
.fx-hd{ display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-bottom:1px solid var(--line-5); }
.fx-hd .label{ flex:1; }
.fx-body{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.fx-row{ display:flex; gap:6px; align-items:center; }
.fx-row select{ padding:7px 8px; font-size:var(--fs-12); border-radius:var(--r-4);
  border:1.5px solid var(--line); background:var(--surface-2); width:auto; }
.fx-in{ position:relative; flex:1; min-width:0; }
.fx-in input{ width:100%; padding:9px 11px; border:1.5px solid var(--line);
  border-radius:var(--r-5); font-family:var(--mono); font-size:var(--fs-13);
  background:var(--surface-2); color:var(--acc); }
.fx-in input:focus{ border-color:var(--acc); box-shadow:var(--sh-focus-sm); }
.fx-out{ font-family:var(--mono); font-size:var(--fs-11); color:var(--mut); min-height:15px; }
.fx-out.ok{ color:var(--ok); } .fx-out.bad{ color:var(--danger); }
.fx-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.fx-chips button{ font-family:var(--mono); font-size:var(--fs-10); padding:4px 8px;
  border-radius:var(--r-4); border:1px solid var(--line); background:var(--surface-2);
  color:var(--mut-2); cursor:pointer; transition:all var(--t-1); }
.fx-chips button:hover{ border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }
.fx-ac{ position:absolute; left:0; right:0; bottom:calc(100% + 5px); z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-6);
  box-shadow:var(--sh-2); max-height:200px; overflow:auto; display:none; }
.fx-ac.open{ display:block; }
.fx-ac button{ display:flex; justify-content:space-between; gap:10px; width:100%;
  padding:8px 11px; font-family:var(--mono); font-size:var(--fs-12); text-align:left; }
.fx-ac button:hover,.fx-ac button.on{ background:var(--acc-soft); color:var(--acc); }
.fx-ac .v{ color:var(--mut); }
.fx.min .fx-body{ display:none; }
.fx.min{ width:auto; }

/* ═══════════════ QUICK DIMENSIONS (right of the 3D view) ═══════════════ */
.dims{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 10px;
  border-bottom:1px solid var(--line-5); }
.dims .ins-f input{ padding:9px 8px; font-size:var(--fs-13); text-align:center; font-weight:600; }
.dims .ins-f .lbl{ text-align:center; font-size:var(--fs-9); }
.dims.two{ grid-template-columns:repeat(2,1fr); }
.dim-title{ padding:9px 12px 0; }

/* ══ §29.6 snimanje prostorije ═════════════════════════════════ */
.scan-stage{ position:relative; margin-top:14px; border-radius:var(--r-8); overflow:hidden;
  background:var(--ink); aspect-ratio:16/10; display:flex; align-items:center;
  justify-content:center; cursor:crosshair; }
.scan-video{ width:100%; height:100%; object-fit:cover; display:block; }
.scan-hud{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:7px; font-family:var(--mono); font-size:var(--fs-11); color:var(--mut); }
@media (max-aspect-ratio:1/1){ .scan-stage{ aspect-ratio:3/4; } }

/* ══ §29.9 bušenje mišem ═════════════════════════════════════ */
.pe-drill-tool{ display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:6px;
  margin-top:8px; }
.pe-side{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pe-side .lbl{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.09em;
  color:var(--mut-3); text-transform:uppercase; }
.pe-side .inp{ width:100%; min-width:0; }
.pe-arr{ display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:end; }
.pe-dir{ grid-column:1/-1; display:flex; }
.pe-dir button{ flex:1; font-size:var(--fs-10); padding:5px 4px; }

/* ══ §39.1 – §39.8 ekran bušenja ═══════════════════════════════
   Četiri koraka, jedan ispod drugog, i brojevi izabrane rupe uvek na ekranu.
   Ništa novo u paleti: sve boje, radijusi, senke i trajanja su postojeći
   tokeni, isti oni koje nosi panel editora komada. */
/* Zona `z-r` je `align-self:center`, pa joj je visina po sadržaju i
   `max-height:100%` na detetu nema prema čemu da se reši — traka onda preraste
   svoj red mreže i legne PREKO panela jednačina u donjem desnom uglu. Mereno:
   traka 779 px u redu od ~500 px, i `document.elementFromPoint` na dugmetu
   „Napravi niz" vraća `#fx-out`, ne dugme — dakle klik ne stiže do njega.
   Isti obrazac koji `chrome.css` već opisuje za `.z-bl`: visina se određuje na
   ZONI, pa se procenat na detetu reši. `app.css` se učitava PRE `chrome.css`,
   pa ista specifičnost gubi — otud ponovljena klasa: `.z-r.z-r` je jače, bez
   diranja `chrome.css`. */
.vp-hud .z-r.z-r{ align-self:stretch; pointer-events:none; }
.vp-hud .z-r.z-r > .drillbar{ max-height:100%; pointer-events:auto; }

/* ══ L7 · §46.5 — EKRAN BUŠENJA DOBIJA SVOJU VISINU ═══════════════════════
   Mereno `node tools/clicks.js --only sistem32`: okvir **191 px**, sadržaj
   **685 px**, **496 px ispod pregiba** — a ispod pregiba su bili izbor smera,
   izbor početka i dugme **„Napravi niz"**, dakle dugme koje radi posao.
   Merenje je to i uhvatilo: dva PROMAŠAJA i dva klizanja u jednom poslu, i
   klik koji bez klizanja pada na 3D platno — a klik na platno poništi izbor.
   Posao „Sistem 32" je zbog toga bio najgori u programu (10 koraka).

   Uzrok nije bio u traci nego u REDU u kom stoji. `.z-r` je u srednjem redu
   HUD mreže, a taj red je `1fr` — ono što pretekne. Otkako panel editora
   ploče uzima 56 % donjeg reda (`#viewport.pe-on`, §T2), srednjem redu ostane
   191 px. Traka bušenja se otvara ISKLJUČIVO zajedno sa editorom ploče, pa se
   ta dva uvek sudaraju.

   Rešenje: dok je traka bušenja otvorena, ona uzima **srednji I donji red
   svoje kolone** (desna kolona, redovi 2–3). Panel editora ploče je u LEVOJ
   koloni i ne gubi ništa. Jedino što je u tim ćelijama sa desne strane je
   traka jednačina i tastatura za let — a jednačina položaja komada nema smisla
   dok je ploča položena na pod i buši se po njoj, pa se to dvoje sklanja
   koliko traje bušenje. To je stanje PRIKAZA, ne projekta: ništa se ne gubi,
   `Esc` vrati sve.

   Bez `:has()` ostaje kako je bilo — traka i dalje kliza, ali ništa se ne
   lomi.                                                                     */
#viewport:has(#drillbar:not([hidden])) .vp-hud .z-r.z-r{
  grid-area:2 / 3 / 4 / 4; align-self:stretch; justify-self:end;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-end;
}
#viewport:has(#drillbar:not([hidden])) .vp-hud .z-br > .fx,
#viewport:has(#drillbar:not([hidden])) .vp-hud .z-br > .vp-drone{ display:none; }
.drillbar{ width:min(316px,100%); max-height:74vh; overflow:auto;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-right:3px solid var(--acc);
  border-radius:var(--r-10); box-shadow:var(--sh-3); }
.drillbar-hd{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:11px 12px 8px; }
.drill-step{ padding:10px 13px; border-top:1px solid var(--line-2); }
.drill-num{ display:flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:var(--fs-10); letter-spacing:.09em; text-transform:uppercase; color:var(--mut-2); }
.drill-num b{ display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:var(--r-full); background:var(--acc);
  color:var(--on-solid); font-size:var(--fs-10); }
.dia-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
  gap:5px; margin-top:8px; }
.dia-chip{ padding:7px 4px; border:1px solid var(--border); border-radius:var(--r-6);
  background:var(--surface); color:var(--ink-3); font-family:var(--mono);
  font-size:var(--fs-12); cursor:pointer;
  transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease),
             color var(--t-1) var(--ease); }
.dia-chip:hover{ border-color:var(--acc); color:var(--acc); }
.dia-chip.on{ background:var(--acc); border-color:var(--acc); color:var(--on-solid); font-weight:600; }
.drill-check{ display:flex; align-items:center; gap:7px; margin-top:8px;
  font-size:var(--fs-11); color:var(--mut); cursor:pointer; }
.drill-read{ margin-top:9px; padding:8px 10px; border:1px solid var(--line-2);
  border-radius:var(--r-6); background:var(--surface-2);
  font-family:var(--mono); font-size:var(--fs-11); line-height:1.6; color:var(--ink-3); }
.drill-read .k{ color:var(--mut-3); }
.drill-read .b{ color:var(--acc); font-weight:600; }
.drill-read .warn{ color:var(--warn); }
.drill-fold{ padding:9px 13px; border-top:1px solid var(--line-2); }
.drill-fold > summary{ font-family:var(--mono); font-size:var(--fs-10);
  letter-spacing:.09em; text-transform:uppercase; color:var(--mut-2);
  cursor:pointer; list-style:none; }
.drill-fold > summary::-webkit-details-marker{ display:none; }
.drill-fold > summary::before{ content:'▸ '; color:var(--acc); }
.drill-fold[open] > summary::before{ content:'▾ '; }
.drill-tpl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:8px; }
.drill-tpl-grid button{ padding:7px 8px; border:1px solid var(--border);
  border-radius:var(--r-6); background:var(--surface); color:var(--ink-3);
  font-size:var(--fs-11); text-align:left; cursor:pointer;
  transition:border-color var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.drill-tpl-grid button:hover{ border-color:var(--acc); color:var(--acc); }
.drill-row{ display:grid; grid-template-columns:auto 1fr auto; gap:8px;
  align-items:center; padding:5px 8px; border:1px solid var(--line-2);
  border-radius:var(--r-6); background:var(--surface-2); margin-bottom:4px;
  font-family:var(--mono); font-size:var(--fs-10); cursor:pointer; width:100%;
  text-align:left; color:var(--ink-3);
  transition:border-color var(--t-1) var(--ease); }
.drill-row:hover, .drill-row.on{ border-color:var(--acc); color:var(--acc); }
.drill-row .dot{ width:9px; height:9px; border-radius:var(--r-full); }
@media (max-width:760px){ .drillbar{ width:100%; max-height:44vh; } }

/* ══ §29.10 naleganje i tiplovi ═══════════════════════════════ */
.pe-join-list{ display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.pe-join-row{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  padding:6px 8px; border:1px solid var(--line-2); border-radius:var(--r-6);
  background:var(--surface-2); }
.pe-join-row .nm{ font-size:var(--fs-11); font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-join-row .mono{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut);
  white-space:nowrap; }
.pe-join-row .mono b{ color:var(--warn); }
.pe-join-row .btn{ padding:3px 8px; font-size:var(--fs-10); }

/* ══ §10.5 biblioteka naloga ════════════════════════════════════ */
.mat-acclib{ grid-column:1/-1; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.mat-acclib .tiny{ margin:4px 0 10px; color:var(--mut); }
.mat-accrow{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border:1px solid var(--line-2); border-radius:var(--r-6); background:var(--surface);
  cursor:pointer; margin-bottom:6px; text-align:left;
  transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease); }
.mat-accrow:hover{ border-color:var(--acc); background:var(--surface-2); }
.mat-accrow .sw{ width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-4);
  border:1px solid var(--line); }
.mat-accrow .nm{ flex:1; min-width:0; font-size:var(--fs-12); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mat-accrow .go{ font-family:var(--mono); font-size:var(--fs-10); color:var(--acc); }

/* ══ §10.4 / §10.7 vrste materijala i njihov izgled ═════════════════════ */
.mat-kind,.ma-kind,.ma-grain{ display:flex; width:100%; }
.mat-kind button,.ma-kind button,.ma-grain button{ flex:1; font-size:var(--fs-11); padding:6px 4px; }
.ins-f .lbl i{ font-family:var(--mono); font-style:normal; color:var(--acc); margin-left:4px;
  letter-spacing:0; text-transform:none; }
.ins-f input[type=range]{ width:100%; padding:0; border:0; background:transparent; }
.mat-col{ width:100%; height:34px; padding:2px; border:1.5px solid var(--line);
  border-radius:var(--r-4); background:var(--surface); cursor:pointer; }
.ma-tex{ display:flex; align-items:center; gap:10px; }
.ma-thumb{ width:52px; height:52px; flex:0 0 auto; border-radius:var(--r-6);
  border:1.5px dashed var(--line); background:var(--surface-2) center/cover no-repeat; }
.ma-thumb.has{ border-style:solid; border-color:var(--acc); }

/* ══ §9 explorer projekata ══════════════════════════════════════════════ */
.px-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.px-q{ flex:1 1 220px; min-width:0; }
.px-wrap{ display:grid; grid-template-columns:168px 1fr; gap:14px; align-items:start; }
.px-folders{ display:flex; flex-direction:column; gap:3px; }
.px-f{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border:0; background:transparent; border-radius:var(--r-6);
  font-size:var(--fs-12); font-weight:600; color:var(--ink-2); cursor:pointer;
  text-align:left; transition:background var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.px-f i{ font-family:var(--mono); font-size:var(--fs-10); font-style:normal; color:var(--mut); }
.px-f:hover{ background:var(--surface-2); }
.px-f.on{ background:var(--acc); color:var(--on-solid); }
.px-f.on i{ color:var(--on-solid); opacity:.75; }
.px-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
.px-card{ display:flex; flex-direction:column; gap:3px; padding:0 0 9px; border:1px solid var(--line);
  border-radius:var(--r-8); background:var(--surface); cursor:pointer; overflow:hidden;
  text-align:left; transition:border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease),
  transform var(--t-1) var(--ease); }
.px-card:hover{ border-color:var(--acc); box-shadow:var(--sh-2); transform:translateY(-2px); }
.px-card.on{ border-color:var(--acc); box-shadow:var(--sh-acc); }
.px-shot{ display:block; aspect-ratio:16/10; background:var(--surface-3); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.px-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.px-noshot{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut-3); }
.px-name{ font-size:var(--fs-12); font-weight:700; letter-spacing:-.01em; padding:8px 10px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-sub,.px-when{ font-size:var(--fs-10); color:var(--mut); padding:0 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-empty{ grid-column:1/-1; text-align:center; padding:34px 18px; color:var(--mut); }
.px-empty p{ margin:0 0 6px; }
.px-empty-mark{ font-size:34px; color:var(--mut-4); margin-bottom:10px; }
.px-detail{ display:grid; grid-template-columns:220px 1fr; gap:16px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--line-2); }
.px-detail[hidden]{ display:none; }
.px-d-shot{ aspect-ratio:16/10; border-radius:var(--r-8); overflow:hidden; background:var(--surface-3);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.px-d-shot img{ width:100%; height:100%; object-fit:cover; }
.px-d-name{ font-size:var(--fs-17); font-weight:700; letter-spacing:-.025em; }
.px-d-sub{ font-size:var(--fs-11); color:var(--mut); margin-top:2px; }
.px-d-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; margin:14px 0; }
.px-kpi{ background:var(--surface-2); border-radius:var(--r-6); padding:9px 10px; }
.px-kpi b{ display:block; font-size:var(--fs-16); font-weight:700; letter-spacing:-.02em; }
.px-kpi span{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut-3); }
.px-d-rows{ font-size:var(--fs-11); }
.px-d-rows > div{ display:flex; gap:10px; justify-content:space-between; padding:4px 0;
  border-bottom:1px solid var(--line-5); }
.px-d-rows span{ color:var(--mut); }
.px-d-rows b{ text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-d-act{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:640px){
  .px-wrap{ grid-template-columns:1fr; }
  .px-folders{ flex-direction:row; overflow-x:auto; padding-bottom:4px; }
  .px-f{ flex:0 0 auto; }
  .px-detail{ grid-template-columns:1fr; }
}

/* ══ §8 parametarski element ════════════════════════════════════════════ */
/* The master dimensions are marked because they are the cause and the board
   measures below them are the effect — the panel has to say which is which. */
.param-dims{ grid-template-columns:repeat(3,1fr); background:var(--surface-2);
  border-left:3px solid var(--acc); border-bottom:1px solid var(--line-5); }
.param-dims .ins-f input{ border-color:var(--acc-6,var(--line)); }

/* the dimension step of „iz biblioteke", and the admin panel's tables */
.pv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.pv-row{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pv-lab{ font-size:var(--fs-11); font-weight:600; display:flex; align-items:baseline;
  justify-content:space-between; gap:8px; }
.pv-lab i{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut); font-style:normal; }
.pa-head{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pa-tbl{ display:flex; flex-direction:column; gap:6px; }
.pa-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)) 30px;
  gap:6px; align-items:end; padding:8px; border:1px solid var(--line-2);
  border-radius:var(--r-6); background:var(--surface-2); }
.pa-cell{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pa-cell i{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.08em;
  color:var(--mut-3); font-style:normal; text-transform:uppercase; }
.pa-cell .inp{ width:100%; min-width:0; }
.pa-del{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r-4);
  width:30px; height:30px; color:var(--mut); cursor:pointer; line-height:1;
  transition:color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.pa-del:hover{ color:var(--danger); border-color:var(--danger); }
@media (max-width:640px){
  .pa-head{ grid-template-columns:1fr; }
  .pa-row{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
  .pa-del{ width:100%; }
}
.dim-title .n{ font-size:var(--fs-14); font-weight:600; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dim-title .g{ font-size:var(--fs-11); color:var(--mut); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══════════════ BOTTOM SHEET (client comments) ════════════════════════ */
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:220; max-height:64vh;
  background:var(--surface); border-top:1px solid var(--border);
  border-radius:var(--r-14) var(--r-14) 0 0; box-shadow:var(--sh-up);
  transform:translateY(102%); transition:transform var(--t-5) var(--ease);
  display:flex; flex-direction:column; }
.sheet.open{ transform:translateY(0); }
.sheet-grip{ width:44px; height:4px; border-radius:var(--r-pill); background:var(--mut-4);
  margin:9px auto 4px; flex:0 0 auto; opacity:.6; }
.sheet-hd{ display:flex; align-items:center; gap:10px; padding:4px 18px 10px;
  border-bottom:1px solid var(--line-5); flex:0 0 auto; }
.sheet-bd{ overflow:auto; padding:12px 18px calc(18px + var(--safe-b)); flex:1; min-height:0; }
.cmt{ border:1px solid var(--line); border-left:3px solid var(--warn);
  background:var(--warn-soft); border-radius:var(--r-8); padding:12px 14px; margin-bottom:9px;
  cursor:pointer; transition:border-color var(--t-2); }
.cmt:hover{ border-color:var(--warn); }
.cmt .who{ font-size:var(--fs-13); font-weight:600; color:var(--warn); }
.cmt .tx{ font-size:var(--fs-14); line-height:1.5; margin-top:5px; color:var(--ink-2); }
.cmt.done{ border-left-color:var(--ok); background:var(--ok-soft); }
.cmt.done .who{ color:var(--ok); }

/* ═══════════════ + NOVO menu ═══════════════════════════════════════════ */
.newmenu{ position:absolute; top:calc(100% + 6px); left:0; z-index:120; min-width:230px;
  padding:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-9); box-shadow:var(--sh-3); display:none; }
.newmenu.open{ display:block; animation:spSlide var(--t-2) var(--ease) both; }
.newmenu .sec{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.13em; color:var(--mut-3);
  padding:8px 10px 4px; text-transform:uppercase; }
.newmenu button{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  border-radius:var(--r-5); font-size:var(--fs-14); text-align:left; color:var(--ink-2);
  transition:background var(--t-1); }
.newmenu button:hover{ background:var(--acc-soft); color:var(--acc); }
.newmenu button .ico{ width:20px; text-align:center; font-size:var(--fs-15); opacity:.75; }
.newmenu button .kb{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-10); color:var(--mut-4); }
/* L8 · §50.7 — mera nove ploče stoji u vrhu menija, sa živim „Rezultat:" */
.newmenu .newb{ padding:0 4px 8px; border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.newmenu .newb .sec{ padding:6px 6px 4px; }
.newmenu .newb-in{ width:100%; }
.newmenu .newb .ask-res{ margin-top:7px; padding:7px 9px; font-size:var(--fs-11); }
.newwrap{ position:relative; }

/* ═══════════════ REPORT DESIGNER overlay ══════════════════════════════ */
.rep-ov{ position:fixed; inset:0; z-index:var(--z-work); background:var(--surface-3);
  display:flex; flex-direction:column; animation:spSlide var(--t-3) var(--ease) both; }
.rep-ov[hidden]{ display:none !important; }
.rep-top{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface);
  border-bottom:1px solid var(--line); flex:0 0 auto; flex-wrap:wrap; }
.rep-body{ flex:1; display:grid; grid-template-columns:190px 1fr 270px; min-height:0; }
.rep-rail{ background:var(--surface); border-right:1px solid var(--line); padding:12px;
  overflow:auto; display:flex; flex-direction:column; gap:6px; }
.rep-rail.right{ border-right:0; border-left:1px solid var(--line); }
.rep-pal{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-6);
  border:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-13); cursor:pointer;
  text-align:left; transition:border-color var(--t-1), color var(--t-1); }
.rep-pal:hover{ border-color:var(--acc); color:var(--acc); }
.rep-pal .ico{ width:20px; text-align:center; font-size:var(--fs-15); opacity:.7; }
.rep-canvas{ overflow:auto; padding:26px; display:flex; justify-content:center; align-items:flex-start;
  background:
    repeating-linear-gradient(0deg,rgba(26,36,48,.035) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(90deg,rgba(26,36,48,.035) 0 1px,transparent 1px 20px),
    var(--surface-3); }
.rep-page{ position:relative; background:var(--white); box-shadow:var(--sh-3); transform-origin:top center;
  flex:0 0 auto; }
.rep-page .pg{ position:absolute; inset:0; }
.rep-hit{ position:absolute; border:1px dashed transparent; cursor:move; z-index:5;
  transition:border-color var(--t-1), background var(--t-1); }
.rep-hit:hover{ border-color:var(--acc-line-2); background:rgba(31,95,208,.05); }
.rep-hit.on{ border:1.5px solid var(--acc); background:rgba(31,95,208,.09);
  box-shadow:var(--sh-focus-sm); }
@media (max-width:1024px){ .rep-body{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  .rep-rail{ flex-direction:row; flex-wrap:wrap; border:0; border-bottom:1px solid var(--line); } }

/* ═══════════════════════════ RESPONSIVE ════════════════════════════════ */
@media (max-width:1280px){
  .grid-cnc{ grid-template-columns:220px minmax(0,1fr); }
  .grid-cnc > :last-child{ grid-column:1 / -1; }
}
@media (max-width:1024px){
  /* The editor's own responsive behaviour lives in chrome.css now (§17.7):
     below 1100 px the docks become overlays instead of the whole editor
     collapsing into one stacked column, which is what used to leave a screen
     full of unused space with the model squeezed into a strip. Only the
     non-editor grids are handled here. */
  .grid-two,.grid-two.even,.grid-mach,.grid-curve{ grid-template-columns:1fr; }
  .grid-cnc{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .projbar{ padding:8px 12px; gap:8px; }
  .proj .pname{ font-size:var(--fs-14); }
  .tabbar{ padding:0 10px; }
  .app-content{ padding:10px 10px calc(14px + var(--safe-b)); }
  .editor{ height:auto; min-height:0; }
  .viewport{ min-height:62vh; }
  .vp-views{ max-width:52%; }
  .vp-explode{ position:static; margin-top:10px; max-width:none; }
  .mat-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}


/* ── project bar: client + city, and the autosave indicator (§14.3, §2.6) ── */
.proj{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
.proj .psub{ font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.08em;
  color:var(--mut); text-transform:uppercase; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:220px; }
.save-chip{ cursor:pointer; transition:opacity var(--t-2),background var(--t-2); }
.save-chip.warn{ opacity:.75; }
.save-chip.ok::before{ content:"\2713 "; margin-right:5px; }
.save-chip.danger::before{ content:"\26A0 "; margin-right:5px; }


/* export dialog: a row that carries its own two buttons (§6.4) */
.opt-split{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-8);
  background:var(--surface); }
.opt-split .t{ font-size:var(--fs-14); font-weight:600; display:flex; align-items:center; flex-wrap:wrap; }
.opt-split .d{ font-size:var(--fs-12); color:var(--mut); margin-top:3px; }
.opt-split .btn[disabled]{ opacity:.4; pointer-events:none; }


/* ══ CNC prikaz — REQUIREMENTS §7 ═══════════════════════════════════════ */
.cnc-panel{ position:absolute; left:16px; bottom:64px; width:min(380px,calc(100% - 32px));
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r-10); box-shadow:var(--sh-3); z-index:24;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity var(--t-1) ease, transform var(--t-1) cubic-bezier(.2,.8,.3,1); }
.cnc-panel.in{ opacity:1; transform:none; }
.cnc-panel.tone-ok{ border-left-color:var(--ok,#1F7A4A); }
.cnc-panel.tone-warn{ border-left-color:var(--warn,#C2703A); }
.cnc-panel.tone-err{ border-left-color:var(--danger,#B03A2E); }
.cnc-hd{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 8px; flex:0 0 auto; }
.cnc-title{ font-size:var(--fs-15); font-weight:700; letter-spacing:-.02em; margin-top:3px; }
/* the reading list is the only part allowed to give way when the window is
   short — the head, the simulation transport and the footer stay reachable */
.cnc-bd{ padding:0 14px 10px; max-height:38vh; overflow:auto; flex:1 1 auto; min-height:78px; }
.cnc-part{ font-family:var(--mono); font-size:var(--fs-11); color:var(--mut);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line-2); }
.cnc-bd .small{ margin:0 0 5px; }
.cnc-hits{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line-2); }
.cnc-hit{ display:flex; align-items:center; gap:8px; font-size:var(--fs-12); padding:3px 0; }
.cnc-hit .dot{ width:7px; height:7px; border-radius:50%; background:#ff2d55; flex:0 0 auto; }
.cnc-hit .mono{ font-family:var(--mono); font-size:var(--fs-11); color:var(--ink-3); }
.cnc-hit .k{ color:var(--danger); font-weight:600; }
.cnc-hit .f{ margin-left:auto; color:var(--mut); font-size:var(--fs-11); white-space:nowrap; }
.cnc-ft{ display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line-2);
  align-items:center; flex-wrap:wrap; flex:0 0 auto; }
.cnc-ft .btn{ flex:1; min-width:88px; }
.cnc-bed{ flex:0 0 auto; }
.cnc-bed button{ font-size:var(--fs-11); padding:5px 9px; }

/* §7.6 simulacija putanje alata.
   Held to one line each: measured, the three-line version left the verdict
   list 31 px tall — unreadable. The full sentence is on the element's title. */
.cnc-sim{ padding:8px 12px; border-top:1px solid var(--line-2); flex:0 0 auto; }
.cnc-sim[hidden]{ display:none; }
.cnc-sim-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cnc-sim-hd .mono{ color:var(--mut); }
.cnc-sim-op{ font-size:var(--fs-11); color:var(--ink-2); margin:4px 0 6px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cnc-sim-bar{ height:4px; border-radius:var(--r-2); overflow:hidden; background:var(--line-2); }
.cnc-sim-bar > i{ display:block; height:100%; background:var(--acc); border-radius:var(--r-2);
  transition:width var(--t-1) linear; }
.cnc-sim-ctl{ display:flex; align-items:center; gap:6px; margin-top:9px; }
.cnc-sim-ctl .btn{ flex:0 0 auto; min-width:38px; }
.cnc-sim-ctl #cnc-sim-play{ flex:1 1 auto; min-width:78px; }
.cnc-sim-speed{ flex:0 0 auto; margin-left:auto; }
.cnc-sim-speed button{ font-size:var(--fs-11); padding:5px 8px; font-family:var(--mono); }
@media (max-width:720px){
  .cnc-panel{ left:8px; right:8px; width:auto; bottom:calc(56px + env(safe-area-inset-bottom)); }
  .cnc-bd{ max-height:32vh; }
}


/* ══ §11 procena vremena ═══════════════════════════════════════════════ */
.chip.clickable{ cursor:pointer; }
.chip.clickable:hover{ border-color:var(--acc); color:var(--acc); }
.est-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; margin-bottom:18px; }
.est-kpi{ background:var(--inset); border:1px solid var(--line-2); border-radius:var(--r-8);
  padding:11px 12px; text-align:center; }
.est-kpi b{ display:block; font-size:var(--fs-19); font-weight:700; letter-spacing:-.03em; }
.est-kpi span{ display:block; font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); margin-top:3px; }
.est-bar{ display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden; background:var(--line-2); }
.est-bar i{ display:block; }
.est-bar i:nth-child(1){ background:#1F5FD0; }
.est-bar i:nth-child(2){ background:#1F7A4A; }
.est-bar i:nth-child(3){ background:#C2703A; }
.est-bar i:nth-child(4){ background:#A29A8B; }
.est-rows{ margin-top:16px; }
.est-row{ display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-2); }
.est-row .sw{ width:10px; height:10px; border-radius:var(--r-2); flex:0 0 auto; }
.est-row .sw.i0{ background:#1F5FD0; } .est-row .sw.i1{ background:#1F7A4A; }
.est-row .sw.i2{ background:#C2703A; } .est-row .sw.i3{ background:#A29A8B; }
.est-row .n{ flex:1; font-size:var(--fs-14); min-width:0; }
.est-row .n em{ display:block; font-style:normal; font-size:var(--fs-11); color:var(--mut); margin-top:2px; }
.est-row .v{ font-size:var(--fs-13); font-weight:600; white-space:nowrap; }
.est-total{ display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:13px; border-top:2px solid var(--ink); }
.est-total b{ font-size:var(--fs-27); font-weight:700; letter-spacing:-.03em; }


/* ══ §31.2 – §31.4 · oblak tačaka iz skena ══════════════════════════════ */
.cloud-panel{ width:min(320px,100%); background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r-10); box-shadow:var(--sh-3);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity var(--t-1) ease, transform var(--t-1) var(--ease); }
.cloud-panel.in{ opacity:1; transform:none; }
.cloud-hd{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px 7px; }
.cloud-title{ font-size:var(--fs-14); font-weight:700; letter-spacing:-.02em; margin-top:2px; }
.cloud-bd{ padding:0 12px 12px; }
.cloud-warn{ background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn);
  border-radius:var(--r-6); padding:7px 9px; font-size:var(--fs-11); margin-bottom:9px; }
.cloud-rows{ font-size:var(--fs-11); }
.cloud-rows > div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0;
  border-bottom:1px solid var(--line-5); }
.cloud-rows span{ color:var(--mut); }
.cloud-note{ margin:8px 0 10px; color:var(--mut); line-height:1.45; }
.cloud-unit{ display:flex; width:100%; }
.cloud-unit button{ flex:1; font-family:var(--mono); font-size:var(--fs-11); padding:5px 4px; }


/* ══ §30.9 · KARTICA KLIJENT — faze, istorija i razgovor ════════════════
   Balončić poruke je bio opisan samo u `site.css`, koji radni prostor uopšte
   ne učitava — pa je razgovor u editoru bio niz golog teksta bez oblika.
   Ovde stoji ono što editoru pripada, iz istih oznaka dizajna. */
.msg{ max-width:82%; border-radius:var(--r-9); padding:9px 12px; }
.msg .who{ font-size:var(--fs-9); font-family:var(--mono); letter-spacing:.06em;
  text-transform:uppercase; }
.msg .txt{ font-size:var(--fs-13); line-height:1.5; margin-top:4px; white-space:pre-wrap;
  overflow-wrap:anywhere; }
.msg.them{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line-2); }
.msg.them .who{ color:var(--mut-3); }
.msg.me{ align-self:flex-end; background:var(--ink); color:var(--on-ink); }
.msg.me .who{ color:var(--on-dark-2); }
.msg.sys{ align-self:center; background:color-mix(in srgb,var(--ok) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent); max-width:92%; }

/* jedna faza: ime, traka, procenat — i rečenica ODAKLE mu taj procenat */
.phase{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.phase .nm{ font-size:var(--fs-13); font-weight:600; color:var(--ink); }
.phase .pc{ font-family:var(--mono); font-size:var(--fs-12); color:var(--mut);
  font-variant-numeric:tabular-nums; }
.phase .bar{ grid-column:1/-1; }
.phase .why{ grid-column:1/-1; font-size:var(--fs-11); color:var(--mut-2); }
.phase.done .pc{ color:var(--ok); }

/* istorija: vreme levo u mono, događaj desno */
.tl{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; align-items:baseline; }
.tl .t{ font-family:var(--mono); font-size:var(--fs-10); color:var(--mut-3);
  white-space:nowrap; }
.tl .e b{ font-size:var(--fs-13); font-weight:600; color:var(--ink); }
.tl .e span{ display:block; font-size:var(--fs-11); color:var(--mut-2); margin-top:2px; }

/* prazno stanje koje KAŽE zašto je prazno — nikad prazna kartica */
.cli-empty{ font-size:var(--fs-12); color:var(--mut-2); line-height:1.55; }
.cli-empty b{ color:var(--ink-2); font-weight:600; }

/* ══ §30.10 / §30.11 · fotografije i potvrde u razgovoru ════════════════ */
.chat-photo-prev{ display:flex; align-items:center; gap:9px; padding:8px 12px;
  border-top:1px solid var(--line-2); }
.chat-photo-prev[hidden]{ display:none; }
.chat-photo-prev img{ width:56px; height:56px; object-fit:cover; border-radius:var(--r-6);
  border:1px solid var(--line); }
.chat-clip{ flex:0 0 auto; width:34px; padding:0; font-size:var(--fs-15); }
.msg-photo{ display:block; margin:6px 0 0; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--r-8); overflow:hidden; max-width:180px; }
.msg-photo img{ display:block; width:100%; height:auto; }
.msg-ok{ margin-top:7px; font-size:var(--fs-11); padding:4px 9px; }
.msg-tag{ display:inline-block; margin-top:6px; font-size:var(--fs-10); color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,transparent); padding:2px 7px;
  border-radius:var(--r-pill); }
.msg.sys .txt{ color:var(--ok); font-weight:600; }

/* §30.11 — stavka zna za komad i za fotografiju */
.cmt-photo{ display:block; margin-top:7px; max-width:140px; border-radius:var(--r-6);
  border:1px solid var(--line); }
.cmt-go{ margin-top:8px; font-size:var(--fs-10); padding:3px 9px; }

/* §30.9 — kad podatka nema, to se kaže i kaže se ODAKLE bi došao */
.mon-empty{ padding:18px 4px; text-align:center; color:var(--mut); }
.mon-empty b{ display:block; font-size:var(--fs-13); font-weight:600; color:var(--ink-3);
  margin-bottom:5px; }
.mon-empty span{ font-size:var(--fs-11); line-height:1.5; display:block; max-width:340px;
  margin:0 auto; }

/* ══ §40 — uputstvo za sken prostora ════════════════════════════════════
   Program ne skenira, nego uputi. Koraci su numerisani jer se rade redom. */
.scan-steps{ list-style:none; margin:14px 0 0; padding:0; display:flex;
  flex-direction:column; gap:10px; }
.scan-steps li{ display:grid; grid-template-columns:26px 1fr; gap:11px;
  align-items:start; font-size:var(--fs-13); line-height:1.55; color:var(--ink-3); }
.scan-steps .n{ display:grid; place-items:center; width:26px; height:26px;
  border-radius:var(--r-pill); background:var(--acc-soft); color:var(--acc);
  font-size:var(--fs-11); font-weight:700; }
.scan-steps b{ color:var(--ink); font-weight:650; }

/* ══ §39.11 – §39.15 — EDITOR PLOČE ═════════════════════════════════════
   Dugme koje se vidi, i panel sa tri režima.

   Zašto zasebno dugme: „✎" je i pre postojalo, ali u traci alata koja je
   podrazumevano sklopljena (`vp-tools collapsed slidebar`, §38.1). Izmereno:
   0×0 px na 1440, 1024, 844 i 390 — dugme koje se ne može ni izmeriti
   korisnik sigurno ne može ni naći.

   Zašto ide u zonu HUD-a: §18.4 kaže da nad prikazom nema slobodno plutajućih
   kutija — dve stvari u istoj tački se preklope. Prvo je bilo `position:
   absolute; top:12px; left:50%`, i `elementFromPoint` je na svih sedam
   formata vraćao `.z-tc` umesto dugmeta, jer zona HUD-a stoji iznad. Sada je
   dugme U zoni `z-tc`, pa ga ništa ne pokriva. */
.vp-edit{ display:flex; justify-content:center; }
.vp-edit[hidden]{ display:none; }
.vp-edit .pe-open{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 16px; font-size:var(--fs-12); letter-spacing:.06em; border-radius:var(--r-pill);
  box-shadow:var(--sh-acc); max-width:100%; }
.vp-edit .pe-open .ico{ font-size:var(--fs-15); line-height:1; }
.vp-edit .pe-open .lbl{ overflow:hidden; text-overflow:ellipsis; }
/* zona gore-desno postaje red, pa dugme stoji PORED čipa za poglede umesto
   ispod njega — inače prvi red HUD-a naraste za celu visinu dugmeta */
.vp-hud .z-tr{ display:flex; align-items:flex-start; justify-content:flex-end;
  gap:6px; flex-wrap:wrap; }
.vp-hud .z-tr > .vp-edit{ position:static !important; margin:0 !important;
  left:auto !important; top:auto !important; transform:none !important; }
@media (max-width:900px){
  .vp-edit .pe-open{ padding:8px 12px; font-size:var(--fs-11); }
}
/* natpis pada kad nema širine — i kad nema VISINE, jer je tada svaki red
   HUD-a skup (mereno na 844 × 390) */
@media (max-width:520px), (max-height:520px){
  .vp-edit .pe-open .lbl{ display:none; }
  .vp-edit .pe-open{ padding:9px 12px; }
}

/* Panel živi UNUTAR `#pe-panel`, kao njegov prvi odeljak — jedan panel za
   editor komada, a ne dva koja se otimaju o isti ugao prikaza. */
.pe-poly{ display:block; border-bottom:1px solid var(--line-2); }
.pe-poly[hidden]{ display:none; }
.pep-hd{ display:flex; align-items:center; gap:8px; padding:10px 13px 0; }
.pep-t{ font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.13em;
  color:var(--mut-3); }
.pep-hd .mono{ margin-left:auto; color:var(--mut); }
.pep-x{ display:none; }
.pep-modes{ margin:9px 13px 0; display:flex; }
.pep-modes > button{ flex:1; padding:7px 4px; font-size:var(--fs-11); gap:5px;
  display:inline-flex; align-items:center; justify-content:center; min-width:0; }
.pep-modes > button .lbl{ letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; }
.pep-hint{ margin:8px 13px 0; font-size:var(--fs-11); line-height:1.5; color:var(--mut); }
.pep-body{ padding:9px 13px 0; }
.pep-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:7px; }
.pep-f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pep-f .lbl{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.09em;
  color:var(--mut-3); }
.pep-f .inp{ width:100%; min-width:0; }
.pep-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.pep-row .btn{ flex:1 1 auto; }
.pep-list{ display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.pep-item{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:6px 9px; border:1px solid var(--line-2); border-radius:var(--r-6);
  background:var(--surface-2); font-size:var(--fs-11); }
.pep-item .btn{ padding:3px 8px; font-size:var(--fs-10); }
.pep-ft{ display:flex; align-items:center; gap:8px; padding:10px 13px 12px; }
.pep-ft .btn{ margin-left:auto; }
.pep-ft .mono{ color:var(--mut); min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ════════════ BRIF #34 · N8 · N13 · N16 · N17 · N18 · N19 · N21 ══════════
   Sve što ovde stoji nastalo je iz PREGLEDA DIZAJNA i uz svako pravilo je
   mera koja ga je tražila. Crta se iz `assets/js/app/ui.js`.               */

/* N13 — jedno dugme sa imenom umesto četiri gole strelice (bilo 12 znakova
   u tri zaglavlja, sada 3 dugmeta i spisak sa rečima). */
.panel-hd .moves > .panel-move{ font-size:var(--fs-12); }
.panel-hd .moves > .panel-move.on{ background:var(--acc-soft); color:var(--acc); }
.pmove-menu{ position:fixed; z-index:var(--z-pop); min-width:212px; max-width:288px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-10);
  box-shadow:var(--sh-2); padding:6px; animation:spIn var(--t-2) var(--ease) both; }
.pmove-hd{ padding:7px 9px 9px; border-bottom:1px solid var(--line-3); margin-bottom:5px; }
.pmove-hd b{ display:block; font-size:var(--fs-12); font-weight:600; color:var(--ink); }
.pmove-hd span{ display:block; margin-top:3px; font-family:var(--mono);
  font-size:var(--fs-10); color:var(--mut-3); }
.pmove-i{ display:block; width:100%; text-align:left; padding:8px 9px; border:0;
  border-radius:var(--r-6); background:none; font:inherit; font-size:var(--fs-12);
  color:var(--ink-2); cursor:pointer; transition:background var(--t-1), color var(--t-1); }
.pmove-i:hover{ background:var(--surface-3); color:var(--ink); }
.pmove-note{ padding:6px 9px 4px; font-size:var(--fs-11); line-height:1.5; color:var(--mut-2); }

/* N18 — uz ime iz fajla stoji opis koji je program IZMERIO iz modela */
.tree-row .nm-hint{ flex:0 0 auto; max-width:46%; font-size:var(--fs-9);
  color:var(--mut-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tree-row .nm-hint:empty{ display:none; }
.tree-row.on .nm-hint{ color:var(--mut-2); }

/* N16 — boja trake objašnjena tamo gde se čita: uz samo ime stavke */
.cost-key{ display:inline-block; width:9px; height:9px; border-radius:var(--r-pill);
  margin-right:8px; vertical-align:baseline; }
.cost-pct{ display:inline-block; min-width:44px; text-align:right; margin-right:12px;
  color:var(--mut-2); font-variant-numeric:tabular-nums; }

/* N8 — razrada po pozicijama (Troškovi) i okov iz modela (Okovi):
   bilo 570/1080 px na Troškovima i 458/1080 na Okovima */
.cost-pos,.hw-proj{ overflow:hidden; margin-top:14px; }
.c-pos{ grid-template-columns:minmax(0,2fr) .6fr .7fr .8fr .7fr 1.2fr; gap:10px; }
.c-hwp{ grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.c-pos .nm,.c-hwp .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pos-hw{ font-style:normal; font-size:var(--fs-10); color:var(--mut-3); }
/* spisak pozicija ima svoju visinu — 16 pozicija je inače gurnulo zbir i
   objašnjenje 362 px ispod donje ivice okna (mereno 1442 px u oknu 1080) */
.pos-rows{ max-height:min(28vh,300px); overflow-y:auto; }
.pos-sum{ background:var(--surface-2); border-bottom:0; font-weight:600; }
.pos-sum:hover{ background:var(--surface-2); }
.pos-note{ padding:12px 16px 14px; border-top:1px solid var(--line-3); }

/* N17 — kartica koja JESTE dugme sada i pokazuje da se pritiska */
.send-card{ display:flex; flex-direction:column; }
.send-cta{ display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  align-self:flex-start; font-family:var(--mono); font-size:var(--fs-10);
  letter-spacing:.1em; text-transform:uppercase; padding:5px 11px;
  border:1px solid currentColor; border-radius:var(--r-pill);
  transition:gap var(--t-1); }
.send-cta i{ font-style:normal; }
.send-card:hover .send-cta{ gap:11px; }

/* N19 — stanje, ne dugme: bez ivice, bez zaobljenja, bez pokazivača ruke */
.state-off{ display:inline-flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  min-width:0; cursor:default; }
.state-off .dot{ width:7px; height:7px; border-radius:var(--r-pill);
  background:var(--mut-4); flex:0 0 auto; align-self:center; }
.state-off b{ font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.1em;
  font-weight:600; color:var(--mut-2); text-transform:uppercase; }
.state-off .why{ font-size:var(--fs-11); line-height:1.5; color:var(--mut-3); flex:1 1 220px;
  min-width:0; }

/* N20 — koliko se čega broji, u jednoj rečenici iznad faza */
.cli-counts{ margin:0 0 4px; font-size:var(--fs-11); color:var(--mut-2); }

/* N21 — bilo 449 px praznog između objašnjenja i polja za poruku; ekran je
   koristio 722 od 1080 px. Prazno stanje stoji u sredini kutije koju drži,
   a ekran „Klijent" ide do dna radnog prostora. */
.chat.is-empty{ justify-content:center; align-items:center; text-align:center; }
.chat.is-empty .cli-empty{ max-width:46ch; }
.view[data-view=client]{ min-height:100%; display:flex; flex-direction:column; }
.view[data-view=client] > .grid-two{ flex:1; min-height:0; align-items:stretch; }
.view[data-view=client] > .grid-two > .stack{ min-height:0; }

/* ══ §45.1 — N4, N5, N7: dno prikaza i bočne ivice ═══════════════════════ */

/* N5 — klizač „RAZBIJANJE" je sada dete donje trake, pa mu ne treba ni
   sopstvena pozadina ni sopstveno mesto na ekranu. Bio je poseban sprat 8 px
   iznad trake (mereno: `.vp-explode` y 815→853, `.vp-foot` y 861→905). */
.vp-foot .vp-explode {
  position: static; transform: none; z-index: auto;
  background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0 4px; max-width: none;
}
.vp-foot .vp-explode:hover { background: transparent; border-color: transparent; box-shadow: none; }
.vp-foot .vp-explode input { width: 110px; }

/* N4 — hvataljka donjeg panela je stajala ISPOD prozora: mereno na 1920×1080,
   `.grab.h` y 1070→1084 dok je prozor visok 1080 — donja 4 px van ekrana, a
   počinjala je 8 px ispod prikaza. Sada leži na samom šavu između prikaza i
   donjeg panela, u oba stanja (otvoren i sklopljen), i visoka je 14 px da se
   može uhvatiti prstom. */
/* `bottom:100%` je merilo vezivalo za red 2, koji sam viri 4 px ispod prozora
   kad je donji panel sklopljen. Zato se hvataljka kači na ŠAV — donju ivicu
   prikaza — uvećanu za razmak mreže, pa je uvek cela u prozoru. */
.grab[data-grab=bottom] { grid-column: 1/-1; grid-row: 2; top: auto; bottom: calc(100% + 8px); height: 14px; }

/* Donja traka je posle dodatog klizača postala pretrpana: mereno
   `node tools/fit.js --only app` — 25 nalaza, `#snap-input`, `#rot-chip`,
   `#rot-input` i „−/+" pokriveni. Traka ostaje JEDAN red i kliza u stranu
   (§38.3), a klizač razbijanja se skuplja prvi jer je najređe potreban. */
.vp-foot .vp-explode { flex: 0 1 auto; min-width: 0; }
.vp-foot .vp-explode input { width: clamp(64px, 9vw, 110px); }
@media (max-width: 1500px) { .vp-foot .vp-explode .label { display: none; } }
@media (max-width: 1100px) { .vp-foot .vp-explode #explode-val { display: none; } }

/* §46.5 — broj obrada stoji u samom dugmetu, pa se ne upisuje spolja i ne može
   da se raziđe sa prikazom. Prazan `<span>` ne zauzima ništa. */
.tool .tool-n:empty { display: none; }
.tool .tool-n {
  margin-left: 5px; font-family: var(--mono); font-size: var(--fs-10);
  font-weight: 600; color: var(--acc); letter-spacing: .02em;
}

/* ══ Meni izvoza krojne liste je bio PROVIDAN ═══════════════════════════════
   Mereno iz strane: `background-color: rgba(0,0,0,0)`, a klasa `glass-strong`
   koju markup traži **ne postoji ni u jednom stilu** — 0 pravila u
   `document.styleSheets`. Ni `.nest-menu` nije imao nijedno pravilo. Meni je
   dakle stajao bez pozadine preko sadržaja ispod sebe: stavke se vide, ali se
   kroz njih čita tabela, pa se ne zna dokle meni ide.
   Sve vrednosti su sa postojeće skale (`--z-pop`, `--r-12`, `--sh-4`). */
.glass-strong {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  box-shadow: var(--sh-4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Meni izvoza je stajao na `--z-pop` (180), a poruke (`#toasts`) na `--z-toast`
   (300) — i `.toast` nosi `pointer-events:auto`. Mereno `node tools/clicks.js
   --only nalepnice`: stavka „Nalepnice sa QR-om" je bila na ekranu, ali je
   `document.elementFromPoint` na njenoj sredini vraćao `div.toast`, pa je klik
   padao na poruku. Alat je to prijavio kao PROMAŠAJ i morao da skroluje —
   jedan korak viška u poslu koji ih ima svega tri. Otvoren meni je ono što je
   čoveku u ruci; poruka je obaveštenje i ne sme da mu stane na put. */
/* ══ §46.5 — MENI IZVOZA JE BIO VIŠI OD SVOG PROZORA ═══════════════════════
   Mereno `node tools/clicks.js --only nalepnice` pa sondom u pravoj strani:
   meni ima **14 stavki**, sadržaj **740 px**, a kutija `max-height:60vh` =
   **620 px** — poslednja stavka („Nalepnice sa QR-om") stoji na y = 865, dakle
   **71 px ISPOD dna sopstvenog menija**. Tamo je već bila poruka (`div.toast`),
   pa je `document.elementFromPoint` na sredini stavke vraćao poruku i klik je
   padao na nju. Merenje je to prijavilo kao PROMAŠAJ i moralo da klizne —
   jedan korak viška u poslu koji ih ima svega tri.

   Ne rešava se višom kutijom (na laptopu od 800 px ne bi stalo ni tada) nego
   time što spisak od 14 stavki ide u **dve kolone**: 7 redova × 44 px = 308 px,
   staje na svakom ekranu i čita se odjednom. Ispod 560 px vraća se na jednu
   kolonu i tada kliza, jer tada ni jedna kolona nema gde.

   `nesting.js` ubacuje SVOJ `.nest-menu{…}` u `<head>` u toku rada, dakle
   POSLE ovog fajla — ista specifičnost tada gubi. Otud ponovljena klasa (isti
   postupak kao kod `.z-r.z-r` gore): jače je, bez diranja tuđeg modula.      */
.nest-menu.nest-menu {
  position: absolute; z-index: calc(var(--z-toast) + 10);
  min-width: min(468px, 92vw); padding: 6px;
  overflow: hidden auto; max-height: min(72vh, calc(100vh - 170px));
}
.nest-menu.nest-menu.open {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 0 4px; align-content: start;
}
@media (max-width: 560px) {
  .nest-menu.nest-menu { min-width: 244px; }
  .nest-menu.nest-menu.open { grid-template-columns: 1fr; }
}
.nest-menu [role=menuitem],
.nest-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--r-8); cursor: pointer; font-size: var(--fs-12);
}
.nest-menu button:hover { background: var(--surface-2); }

/* ══ §50.7 · L14 — SLOJ „PITANJE SA REZULTATOM" ════════════════════════════
   Zamenjuje `prompt()` i `confirm()` i nosi ono što sistemsko prozorče ne ume:
   red **`Rezultat:`** koji se menja dok se kuca. Stoji IZNAD `#app-modal`
   (`--z-modal` 200 → 210), pa spisak projekata ispod njega ostaje otvoren i
   vidljiv — a ne, kao ranije, zatvoren pa ponovo otvaran.
   Sve vrednosti su sa postojeće skale: bez novih boja, radijusa i senki. */
.ask-lay{ position:fixed; inset:0; z-index:210; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(20,26,34,.45); animation:spIn var(--t-2) var(--ease); }
.ask-box{ width:min(430px,100%); max-height:86vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-14); box-shadow:var(--sh-4); }
.ask-hd{ padding:16px 18px 0; }
.ask-t{ font-size:var(--fs-16); font-weight:600; color:var(--ink); margin-top:2px; }
.ask-body{ padding:12px 18px 4px; }
.ask-lead{ margin:0 0 10px; color:var(--mut); }
.ask-fields{ display:grid; grid-template-columns:1fr; gap:10px; }
.ask-fields .inp{ width:100%; }
.ask-ft{ display:flex; gap:8px; justify-content:flex-end; padding:14px 18px 16px; }

/* Red `Rezultat:` — isti izgled gde god da stoji (ovaj sloj, „Podaci o
   projektu", nova ploča), da se prepozna kao jedna te ista stvar. */
.ask-res{ margin-top:12px; padding:9px 11px; border:1px solid var(--line-2);
  border-radius:var(--r-8); background:var(--surface-2);
  font-size:var(--fs-12); line-height:1.55; color:var(--ink-3); }
.ask-res b{ color:var(--ink); font-weight:600; }
.ask-res .mono{ font-family:var(--mono); }
.ask-res-k{ font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut-3); }
.ask-res-d{ color:var(--mut-3); }
.ask-res-w{ color:var(--warn); font-weight:600; }
.ask-res.bad{ border-color:var(--warn); }

/* L14 — spisak prečica: taster levo, posao desno, naslov grupe preko oba
   stupca. Bio je jedan `<div class="code">` sa razmacima kao poravnanjem, pa
   se na uskom ekranu lomio nasred reda. */
.help-keys{ width:100%; border-collapse:collapse; }
.help-keys td{ padding:5px 8px; vertical-align:baseline; font-size:var(--fs-13); color:var(--ink-3); }
.help-keys td:first-child{ width:1%; white-space:nowrap; }
.help-keys tr.g td{ font-family:var(--mono); font-size:var(--fs-9); letter-spacing:.13em;
  text-transform:uppercase; color:var(--mut-3); padding:14px 8px 3px; }
.help-keys tr.g:first-child td{ padding-top:2px; }
.help-keys kbd{ display:inline-block; font-family:var(--mono); font-size:var(--fs-11);
  padding:2px 7px; border:1px solid var(--border); border-radius:var(--r-5);
  background:var(--surface-2); color:var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════
   B1 · B13 · B16 — GRUPA, KOPIJA I IZBOR ŠTA JE PLOČA
   ══════════════════════════════════════════════════════════════════════════ */

/* B16 — pločice uloga ispod polja za meru u meniju „+ Novo". Dve u redu na
   uskom, tri na širokom: ime uloge je duže od ikonice i mora da stane celo,
   jer je upravo ono ono što se bira („bočna leva", ne znak). */
.newmenu .newb-roles{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; padding:2px 6px 0; }
@media (min-width:420px){ .newmenu .newb-roles{ grid-template-columns:repeat(3,1fr); } }
.newmenu .newb-role{ display:block; width:100%; text-align:left; padding:6px 8px;
  border:1px solid var(--line-2); border-radius:var(--r-5); background:var(--surface-2);
  font-size:var(--fs-11); line-height:1.25; color:var(--ink-3); cursor:pointer; }
.newmenu .newb-role:hover{ background:var(--acc-soft); border-color:var(--acc); color:var(--ink); }
.newmenu .newb-roleNote{ padding:7px 8px 2px; color:var(--mut-3); }

/* B1 — red stabla koji je u višestrukom izboru, i grupa koja ima svoju meru.
   Grupa sa merom nema dopisan broj uz ime (ime se seče preko ivice, a broj
   bi stajao dvaput — desno već stoji izmereni gabarit): prepoznaje se po
   traci uz levu ivicu reda. Traka izbora je puna, traka mere je isprekidana
   dvojnom debljinom, pa se dve stvari ne mešaju. */
.tree-row.multi{ background:var(--acc-soft); box-shadow:inset 2px 0 0 var(--acc); }
.tree-row.measured{ box-shadow:inset 3px 0 0 var(--acc); }
.tree-row.measured.multi{ box-shadow:inset 3px 0 0 var(--acc), inset 0 0 0 1px var(--acc); }
.tree-row.measured .nm{ font-weight:600; }

/* B1 — polje mere grupe stoji IZNAD mere daske i mora da se razlikuje od nje:
   ono je uzrok, ona je posledica. */
.ins-f .grp-in{ border-color:var(--acc); }

/* B1 — tabela formula: pet stubaca, srednji je polje za upis */
.tbl-wrap{ overflow-x:auto; }
table.grp-f{ width:100%; border-collapse:collapse; font-size:var(--fs-12); }
table.grp-f th{ text-align:left; padding:6px 8px; font-family:var(--mono);
  font-size:var(--fs-9); letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut-3); border-bottom:1px solid var(--line-2); white-space:nowrap; }
table.grp-f td{ padding:5px 8px; border-bottom:1px solid var(--line-2);
  color:var(--ink-3); vertical-align:middle; }
table.grp-f td .inp{ width:100%; min-width:130px; }
table.grp-f td .inp.bad{ border-color:var(--warn); }
table.grp-f td.mono{ font-family:var(--mono); white-space:nowrap; }
table.grp-f .bad{ color:var(--warn); }

/* B13 — pitanje sa da/ne u prozorčetu kopije: kvadratić i rečenica u istom
   redu, cela rečenica je meta za klik. */
.ask-check{ display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:var(--fs-13); line-height:1.5; color:var(--ink-3); }
.ask-check input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--acc); }
.ask-check:hover{ color:var(--ink); }

/* ══ §46.5e — TRAKA REŽIMA ČITANJA ═══════════════════════════════════════
   Stoji IZNAD trake projekta, u toku strane — ne pluta preko sadržaja i ne
   krade nijedan piksel prikazu dok je nema. Boja je upozorenje, ne greška:
   režim čitanja nije kvar nego stanje naloga, i čovek u njemu i dalje radi.
   Zato traka prvo kaže šta MOŽE (otvoriti, izvesti), pa tek onda šta ne. */
.readonly-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px var(--ws-pad, 14px); background:var(--warn-soft, #FFF6E5);
  border-bottom:1px solid var(--warn-line, #F0D9A8); color:var(--ink);
  font-size:var(--fs-13); }
.readonly-bar b{ font-weight:700; white-space:nowrap; }
.readonly-bar span{ min-width:0; }
.readonly-bar .btn{ margin-left:auto; flex:0 0 auto; }
@media (max-width: 620px){
  .readonly-bar{ font-size:var(--fs-12); gap:8px; }
  .readonly-bar .btn{ margin-left:0; width:100%; }
}