/* HMI presentation pass. The existing controls and configuration engine are retained. */
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]){--hmi-left:clamp(350px,28vw,420px);--hmi-right:clamp(280px,23vw,330px)}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools{top:176px;bottom:auto;left:18px;width:var(--hmi-left);height:auto;max-height:calc(100dvh - 222px);overflow:visible;border-radius:20px;border:1px solid #dce5ec;background:rgba(250,252,254,.97);box-shadow:0 12px 36px -24px #233f5655}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools>.poz-assist{display:none}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools:has(>.poz-intro:not(.is-out))>.poz-assist{display:flex}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools>.poz-plan__scene-hint{margin:12px 14px 0;padding:9px 11px;background:#edf3f7;border-radius:9px;font-size:13px;line-height:1.45}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__toollist{padding:12px 14px 0;gap:4px;overflow:visible;flex:0 0 auto}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__toollist::after{margin:8px 0 0;background:#dde5eb}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tool{flex:1 1 0;min-width:0;padding:11px 5px;min-height:42px;border-radius:9px;color:#435566}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tool-name{font:500 13px/1.4 'IBM Plex Sans',sans-serif}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tool.is-on{background:var(--ui-accent);color:white;box-shadow:none}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tool.is-on .poz-plan__tool-name{color:inherit}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panelwrap.is-open,#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tool.is-on+.poz-plan__panelwrap{max-height:none;overflow:visible;margin:0;width:100%;flex:0 0 100%}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panelwrap .poz-plan__panel{padding:12px 0 16px;overflow:visible;max-height:none}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__lbl{font:500 12px/1.45 'IBM Plex Sans',sans-serif;letter-spacing:.055em;color:#526575;margin:14px 0 8px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__lbl:first-child{margin-top:0}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 10px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chips:has(>:first-child:nth-last-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip{position:relative;min-width:0;width:100%;min-height:40px;height:auto;padding:9px 10px;border:1px solid #d5e0e8;border-radius:10px;background:#fff;color:#344b5c;box-shadow:none;font:500 13px/1.4 'IBM Plex Sans',sans-serif;white-space:normal;text-transform:none;letter-spacing:0;transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip.is-on{background:var(--ui-selected);border-color:var(--ui-accent);color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip:hover:not(:disabled){border-color:var(--ui-accent);background:var(--ui-selected)}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip.is-pic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:90px;padding:10px 6px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip:is(.is-pic,.has-ico) img{width:64px;height:46px;max-width:100%;object-fit:contain;margin:0}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chip.is-pic.is-on::after{content:'✓';position:absolute;right:6px;top:5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ui-accent);color:#fff;font:600 11px/1 sans-serif}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__hint{font:400 12px/1.5 'IBM Plex Sans',sans-serif;color:#526575;margin:8px 0 0}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-dock-left{left:auto;right:18px;bottom:46px;top:auto;width:var(--hmi-right);height:auto;max-height:none;padding:12px 14px;border-radius:20px;background:rgba(250,252,254,.97);border:1px solid #dce5ec;overflow:visible;box-shadow:0 12px 36px -24px #233f5655}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-dock-left .poz-plan__checks{padding:0;overflow:visible}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__checks-head{padding:0 0 8px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__check{padding:7px 0;gap:8px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__check-name{font-size:12px;line-height:1.4}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__check-tx{font-size:11px;line-height:1.4}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec{width:var(--hmi-right);bottom:calc(62px + var(--hmi-checks-height,224px));border-radius:20px;border:1px solid #dce5ec;background:rgba(250,252,254,.97)}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec-head{padding:16px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec-foot{padding:12px 14px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec-links{margin-top:7px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools:has(>.poz-intro){overflow:visible}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools>.poz-intro{padding:18px;max-height:none}
}
@media(prefers-reduced-motion:reduce){#planer .poz-plan__chip{transition:none}}
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-plan__chips:has(.poz-mod){grid-template-columns:repeat(4,minmax(0,1fr))}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-mod{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:62px;padding:7px 3px;font-size:12px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__panel .poz-mod :is(img,svg){width:48px;height:24px;margin:0;object-fit:contain}
#planer .hmi-duplicate-hint{display:none}
#planer.poz-plan.poz-skin-izlog .poz-ctx{box-sizing:border-box;width:350px;padding:18px;border:1px solid #d5e0e8;border-radius:18px;background:#f9fcfe;color:#344b5c;box-shadow:0 16px 50px -20px #243a5366}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__chip{min-width:0;min-height:38px;padding:8px 6px;font:500 13px/1.4 'IBM Plex Sans',sans-serif;border-radius:9px;white-space:normal}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__lbl{font:500 12px/1.5 'IBM Plex Sans',sans-serif;color:#435969}
#planer.poz-plan.poz-skin-izlog .poz-plan__presetbar{border:1px solid #d5e0e8;border-radius:20px;background:#f9fcfe;box-shadow:0 16px 50px -24px #243a5355}
#planer.poz-plan.poz-skin-izlog .poz-plan__pchip{border-radius:12px;border:1px solid #d7e2e9;background:white}
#planer.poz-plan.poz-skin-izlog .poz-plan__pchip:hover{border-color:var(--ui-accent);background:var(--ui-selected)}
}
@media(min-width:1200px) and (max-height:780px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools>.poz-plan__scene-hint{display:none}
#planer.poz-plan.poz-skin-izlog .poz-plan__tools>.poz-intro{padding:12px 16px}
#planer.poz-plan.poz-skin-izlog .poz-plan__tools>.poz-intro>p{font-size:13px;line-height:1.45;margin-bottom:10px}
#planer.poz-plan.poz-skin-izlog .poz-ui-help-keys{margin-top:12px;padding-top:12px}
#planer.poz-plan.poz-skin-izlog .poz-ui-help-keys p{margin-bottom:6px}
#planer.poz-plan.poz-skin-izlog .poz-dock-left{padding:10px 12px}
#planer.poz-plan.poz-skin-izlog .poz-plan__check{padding:5px 0}
}
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog .poz-plan__spec-foot{flex-shrink:0}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__lbl{margin:8px 0 6px}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__lbl:first-child{margin-top:0}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__hint{margin:6px 0;font-size:12px;line-height:1.4}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__hint:has(button){display:flex;gap:6px;margin-top:10px!important}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__mini{width:auto;min-width:0;padding:8px;font-size:11px}
}
@media(min-width:1200px) and (max-height:780px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__checks-head{margin:0;padding-bottom:4px}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__check{padding:3px 0}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__check-tx{margin:0}
}
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__bom{min-height:0;flex:1 1 auto}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec-foot{flex:0 0 auto}
}
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog .poz-ctx{z-index:500}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle>span:first-child{flex:1;font:400 9px/1.5 Michroma,sans-serif;letter-spacing:.04em}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle>span:last-child{font:600 12px/1.4 'IBM Plex Sans',sans-serif;color:var(--ui-accent);background:var(--ui-selected);padding:3px 9px;border-radius:12px}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle::after{content:'⌄';font:500 19px/1 sans-serif}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle[aria-expanded=true]::after{content:'⌃'}
#planer.poz-plan.poz-skin-izlog:not(.hmi-checks-expanded) .poz-dock-left .poz-plan__check:not(.is-warn){display:none}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__checks-head{padding:0;margin:0}
#planer.poz-plan.poz-skin-izlog.hmi-checks-expanded .poz-plan__spec{visibility:hidden;pointer-events:none}
#planer.poz-plan.poz-skin-izlog.hmi-checks-expanded .poz-dock-left{top:176px;bottom:auto}
}
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog:is(.is-tool-uredi,.is-tool-brisi) .poz-plan__tools::after{display:none}
}
/* Keep every safety check visible; details remain available through the disclosure. */
@media(min-width:1200px){
#planer.poz-plan.poz-skin-izlog:not(.hmi-checks-expanded) .poz-dock-left .poz-plan__check:not(.is-warn){display:flex}
#planer.poz-plan.poz-skin-izlog:not(.hmi-checks-expanded) .poz-dock-left .poz-plan__check:not(.is-warn) .poz-plan__check-tx{display:none}
#planer.poz-plan.poz-skin-izlog:not(.hmi-checks-expanded) .poz-dock-left .poz-plan__check{padding:4px 0}
#planer.poz-plan.poz-skin-izlog .hmi-checks-toggle>span:first-child{font-size:10px}
}
@media(min-width:1200px) and (min-height:1000px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-dock-left{left:18px;right:auto;width:var(--hmi-left)}
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__spec{bottom:46px}
#planer.poz-plan.poz-skin-izlog.hmi-checks-expanded .poz-plan__spec{visibility:visible;pointer-events:auto}
#planer.poz-plan.poz-skin-izlog.hmi-checks-expanded .poz-plan__tools{visibility:hidden;pointer-events:none}
}

/* ==== 2026-09-15 · tools card scrolls, never spills ====
   Line 4 above caps the card at 100dvh-222px AND leaves it overflow:visible,
   so a tall step ran out of the rounded bottom. Same selector, same media,
   later in the file: the card scrolls. .poz-ctx hangs off .poz-plan, so
   nothing that matters is clipped. */
@media (min-width:1200px){
#planer.poz-plan.poz-skin-izlog:is([data-planner="stage"],[data-planner="truss"],[data-planner="zbor"]) .poz-plan__tools{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ==== 2026-09-15 · planner action buttons (.poz-plan__mini) ====
   Zakreni/Ukloni, Kopiraj link, Skica, undo/redo. poz-buttons.css forces the
   brand CTA look (Michroma 11px caps, radius 12) onto EVERY button with
   !important; inside a 350px popover that wrapped and read as cheap. These
   are in-panel secondary controls, not CTAs: the HIG bordered-white button,
   body face 13px/500, sentence case, 40px (44px on touch), never wrapping.
   The five properties the theme forces are re-asserted the same way. */
#planer.poz-plan.poz-skin-izlog .poz-plan__mini{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 16px;margin:0;width:auto;min-width:0;
  border:1px solid rgba(22,23,27,.22);background:#fff;color:#16171B;
  box-shadow:0 1px 2px rgba(12,13,16,.06);
  font-family:'IBM Plex Sans',system-ui,sans-serif!important;
  font-size:13px!important;font-weight:500!important;line-height:1;
  letter-spacing:0!important;text-transform:none!important;border-radius:12px!important;
  white-space:nowrap;cursor:pointer;user-select:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}#planer.poz-plan.poz-skin-izlog .poz-plan__mini:hover{background:#F7F8FA;border-color:rgba(22,23,27,.38);color:#0B0C0F}
#planer.poz-plan.poz-skin-izlog .poz-plan__mini:active{transform:scale(.98);background:#EEF1F4;transition-duration:.08s}
#planer.poz-plan.poz-skin-izlog .poz-plan__mini:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #16171B}
#planer.poz-plan.poz-skin-izlog .poz-plan__mini[disabled]{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
#planer.poz-plan.poz-skin-izlog .poz-plan__mini[data-act="udel"]{color:#B42318}
#planer.poz-plan.poz-skin-izlog .poz-plan__mini[data-act="udel"]:hover{background:#FDF1F0;border-color:rgba(180,35,24,.45);color:#8E1B12}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__hint:has(>.poz-plan__mini){display:flex;gap:8px;flex-wrap:wrap;max-width:none}
#planer.poz-plan.poz-skin-izlog .poz-ctx .poz-plan__mini{flex:1 1 auto;padding:0 14px}
#planer.poz-plan.poz-skin-izlog .poz-plan__spec-links .poz-plan__mini{flex:1 1 0}
@media (pointer:coarse){#planer.poz-plan.poz-skin-izlog .poz-plan__mini{min-height:44px}}

/* ==== 2026-09-15 · the step-by-step button in the top bar ====
   Sits beside the view switch; label at desktop width, icon only where the
   bar gets tight; never on touch, where the guide is the only mode anyway. */
#planer.poz-plan.poz-skin-izlog .poz-plan__guided{gap:8px;padding:0 14px;margin-right:10px}
#planer.poz-plan.poz-skin-izlog .poz-plan__guided svg{flex:0 0 16px}
@media (max-width:1399px){#planer.poz-plan.poz-skin-izlog .poz-plan__guided span{display:none}#planer.poz-plan.poz-skin-izlog .poz-plan__guided{padding:0 12px}}
@media (pointer:coarse){#planer.poz-plan.poz-skin-izlog .poz-plan__guided{display:none!important}}
/* ==== 2026-09-15 · the guide button sits OUT of the flow ====
   In flow it pushed "Kreni ispočetka" under the tool icons. The bar is the
   containing block; the view switch is absolute at right:0 (258px wide), so
   the button parks just left of it, label shown from 1100px up. */
#planer.poz-plan.poz-skin-izlog .poz-plan__guided{position:absolute;right:270px;top:3px;margin:0;gap:8px;padding:0 14px}
@media (min-width:1100px){#planer.poz-plan.poz-skin-izlog .poz-plan__guided span{display:inline}}
@media (max-width:1099px){#planer.poz-plan.poz-skin-izlog .poz-plan__guided span{display:none}#planer.poz-plan.poz-skin-izlog .poz-plan__guided{padding:0 12px}}
/* ==== 2026-09-15 · the tool strip keeps clear of the top-bar buttons ====
   The strip is centred on the scene, but the left cluster (Upute · Primjeri ·
   undo · Kreni ispočetka) ends near 490px and the guide + view switch take
   ~370px on the right, so on anything narrower than ~1750px the strip was
   drawn over "Kreni ispočetka" (it sits above it in z-order). Centre it in
   the free span instead. Stage planner only.
   Below 1760px the strip cannot fit one row beside the buttons, so it becomes
   a tidy two-row grid of six (four below 1300px) with the group separators
   dropped, instead of a long row with one orphan on the second line. */
@media (min-width:1200px) and (max-width:1759px){
#planer.poz-plan.poz-skin-izlog[data-planner="stage"] .poz-tb{left:calc(50% + 57px);max-width:none;width:max-content;display:grid;grid-template-columns:repeat(6,50px);gap:5px 3px}
#planer.poz-plan.poz-skin-izlog[data-planner="stage"] .poz-tb button{flex-basis:50px;min-width:50px;width:50px;margin:0}
#planer.poz-plan.poz-skin-izlog[data-planner="stage"] .poz-tb .poz-tb__sep{display:none}
}
@media (min-width:1200px) and (max-width:1299px){
#planer.poz-plan.poz-skin-izlog[data-planner="stage"] .poz-tb{grid-template-columns:repeat(4,50px)}
}