/* Ardit Designer – styly aplikace. Pouze tokeny design systému Ardit (var(--ardit-…)). */

/* ---------- barvy výkresu (2D canvas) odvozené z tokenů ---------- */
:root, [data-theme="light"] {
  /* Písmo: na přání Martina všude Mona Sans (odchylka od systému Ardit, kde je Inter + JetBrains Mono). */
  --ardit-font-sans: "Mona Sans", system-ui, sans-serif;
  --ardit-font-display: "Mona Sans", system-ui, sans-serif;
  --ardit-font-mono: "Mona Sans", system-ui, sans-serif;
  --font: 'Inter', var(--ardit-font-sans); /* písmo kresby (kóty, razítka, texty) – jako Martinovy studie; UI má Mona Sans */
  --mono: var(--ardit-font-mono);
  --cv-bg: var(--ardit-bg1);
  --cv-grid: var(--ardit-bg3);
  --cv-grid2: var(--ardit-line);
  --cv-axis: #b9c3d2;
  --cv-wall: #e3e7ed;
  --cv-wall-line: var(--ardit-fg1);
  --cv-slab: var(--ardit-bg2);
  --cv-slab-line: var(--ardit-fg3);
  --cv-col: var(--ardit-fg2);
  --cv-roof: var(--ardit-accent-text);
  --cv-ghost: #c3cad4;
  --cv-open: var(--ardit-fg1);
  --cv-glass: var(--ardit-action);
  --cv-dim: var(--ardit-fg2);
  --cv-guide: var(--ardit-accent);
  --cv-ref: var(--ardit-action);
  --cv-section: var(--ardit-ink);
  --cv-cut: #d6dbe3;
  --cv-elev: var(--ardit-bg2);
  --cv-elev-roof: #e9e4dc;
  --cv-elev-line: var(--ardit-fg3);
  --cv-level: #b9c3d2;
  --cv-elev-far: var(--cv-ghost); /* vzdálená oblast řezu / pohledu (světlejší pero) */
  --cv-study-work: #d5d8dd; /* řezané konstrukce studie v pracovním zobrazení (Volby modelu – src/studyview.js) */
  --cv-solid: #5d6675; /* plná výplň řezaných konstrukcí od 1:200 (pero 10 bez vlastní barvy) */
  --sel: var(--ardit-action);
  --sel2: var(--ardit-accent-text);
}
[data-theme="dark"] {
  --cv-study-work: #4a5262;
  --cv-solid: #8d97a8;
  --cv-axis: #3a4556;
  --cv-wall: #3a4252;
  --cv-ghost: #3a4556;
  --cv-wall-line: var(--ardit-fg1);
  --cv-cut: #4a5366;
  --cv-elev-roof: #3f3a35;
  --cv-level: #3a4556;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cv-study-work: #4a5262;
    --cv-solid: #8d97a8;
    --cv-axis: #3a4556;
    --cv-wall: #3a4252;
    --cv-ghost: #3a4556;
    --cv-cut: #4a5366;
    --cv-elev-roof: #3f3a35;
    --cv-level: #3a4556;
  }
}

/* ---------- základ ---------- */
html, body { height: 100%; }
@supports (height: 100dvh) { html, body { height: 100dvh; } } /* iPad Safari: výška viditelné části okna, spodní lišta nezajede pod okraj */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ardit-bg1);
  color: var(--ardit-fg1);
  font: 400 14px/1.5 var(--ardit-font-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
input, select, .ro, .tracker, .nav .ifc, .info .sub, #coords { font-variant-numeric: tabular-nums; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ardit-tint-line); outline-offset: 2px; }
a { color: var(--ardit-action); }

#app {
  --app-tools-w: 48px; --app-status-row: calc(var(--ardit-app-statusbar-h) + env(safe-area-inset-bottom, 0px)); /* řádek lišty + spodní výřez obrazovky (iPad) */
  height: 100%;
  display: grid;
  grid-template-rows: var(--ardit-app-topbar-h) auto 1fr var(--app-status-row);
  grid-template-columns: var(--app-tools-w) var(--ardit-app-sidebar-w) 1fr var(--ardit-app-panel-w);
  grid-template-areas: "top top top top" "demo demo demo demo" "tools info views nav" "status status status status";
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ---------- horní lišta ---------- */
.top {
  grid-area: top;
  display: flex; align-items: center; gap: var(--ardit-space-4);
  padding: 0 var(--ardit-space-4);
  background: var(--ardit-bg1);
  border-bottom: 1px solid var(--ardit-line);
  min-width: 0;
}
.apptitle { margin: 0; font-size: 20px; line-height: 1; white-space: nowrap; }
.apptitle a { display: inline-flex; align-items: center; gap: var(--ardit-space-3); color: inherit; text-decoration: none; padding: var(--ardit-space-1) 0; }
.wordmark { font-family: var(--ardit-font-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--ardit-ink); }
.wordmark .dot { color: var(--ardit-dot); }
.sep { width: 1px; height: 20px; background: var(--ardit-line); }
.appname { font-family: var(--ardit-font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ardit-ink); }
.group { display: flex; align-items: center; gap: var(--ardit-space-1); flex-wrap: nowrap; min-width: 0; }
.actions { margin-left: auto; gap: var(--ardit-space-2); }
#stBar { gap: 2px; }
#stBar .btn { font-variant-numeric: tabular-nums; }

/* ---------- tlačítka ---------- */
.btn {
  height: var(--ardit-control-h);
  padding: 0 var(--ardit-space-4);
  border: 1px solid var(--ardit-line);
  border-radius: var(--ardit-radius-md);
  background: var(--ardit-bg1);
  color: var(--ardit-fg1);
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ardit-space-2);
  transition: background-color var(--ardit-duration-fast) var(--ardit-easing-standard), color var(--ardit-duration-fast) var(--ardit-easing-standard);
}
.btn:hover { background: var(--ardit-bg3); }
.btn.sm { height: 32px; padding: 0 var(--ardit-space-3); font-size: 13px; }
.btn.icon { width: 32px; padding: 0; }
.btn.icon svg { width: 18px; height: 18px; }
.btn.sm[data-ico] svg { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--ardit-action); border-color: var(--ardit-action); color: var(--ardit-on-action); }
.btn.primary:hover { background: var(--ardit-action-hover); border-color: var(--ardit-action-hover); }
.btn.on { background: var(--ardit-tint); border-color: var(--ardit-tint); color: var(--ardit-ink); }
.btn.danger { color: var(--ardit-danger); }
.btn.text { border-color: transparent; background: transparent; color: var(--ardit-action); }
.btn:disabled { background: var(--ardit-bg3); color: var(--ardit-fg3); cursor: default; }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: miter; }
.full .fs-out { display: none; }
:fullscreen .full .fs-in, :root.fs .full .fs-in { display: none; }
:fullscreen .full .fs-out, :root.fs .full .fs-out { display: block; }
.theme .sun { display: none; }
[data-theme="dark"] .theme .sun { display: block; }
[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

/* ---------- paleta nástrojů ---------- */
.tools {
  grid-area: tools;
  background: var(--ardit-bg2);
  border-right: 1px solid var(--ardit-line);
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--ardit-space-2) 0;
  overflow: auto;
}
.tool {
  border: 0; background: transparent; border-radius: var(--ardit-radius-sm);
  width: 36px; height: 30px; margin: 0 auto; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ardit-fg1);
}
.tool svg, .ico svg { width: 20px; height: 20px; }
.tool span { display: none; } /* paleta jako v AC29: jen ikony, název v tooltipu */
.tgrp { flex: none; height: 9px; margin: 0 var(--ardit-space-2); border-bottom: 1px solid var(--ardit-line); margin-bottom: 4px; } /* oddělovač skupin (Výběr / Návrh / Dokumentace – název v tooltipu) */
.tgrp:first-child { display: none; }
.tool:hover { background: var(--ardit-bg3); }
.tool.on { background: var(--ardit-action); color: var(--ardit-on-action); }
.tool.on span { color: var(--ardit-on-action); }
.tools hr { border: 0; border-top: 1px solid var(--ardit-line); margin: var(--ardit-space-1) var(--ardit-space-3); width: auto; }

/* ---------- info box (vlevo) ---------- */
.info {
  grid-area: info;
  background: var(--ardit-bg2);
  border-right: 1px solid var(--ardit-line);
  overflow: auto;
  padding: var(--ardit-space-3) var(--ardit-space-4);
  min-width: 0;
}
.info h2 { margin: 0 0 2px; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ardit-ink); display: flex; align-items: center; gap: var(--ardit-space-2); }
.info h2 svg { width: 18px; height: 18px; flex: none; }
.info .sub { font: 12px/1.4 var(--ardit-font-mono); color: var(--ardit-fg2); margin-bottom: var(--ardit-space-2); word-break: break-word; }
.ib { border-top: 1px solid var(--ardit-line); padding: var(--ardit-space-2) 0 var(--ardit-space-1); }
.ib h4 { margin: 0 0 var(--ardit-space-1); font-size: 12px; font-weight: 600; color: var(--ardit-fg3); }
.icons { display: flex; gap: var(--ardit-space-1); flex-wrap: wrap; }
.ico {
  border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md);
  width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--ardit-fg1);
}
.ico:hover { background: var(--ardit-bg3); }
.ico.on { background: var(--ardit-action); color: var(--ardit-on-action); border-color: var(--ardit-action); }
.row { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: var(--ardit-space-2); margin: var(--ardit-space-1) 0; }
.row label { color: var(--ardit-fg2); font-size: 13px; line-height: 1.3; }
.row input, .row select {
  width: 100%; height: 32px; padding: 0 var(--ardit-space-2);
  border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md);
  font-family: var(--ardit-font-mono); font-size: 13px; min-width: 0; color: var(--ardit-fg1);
}
.row input:focus-visible, .row select:focus-visible, .storey-row input:focus-visible { border-color: var(--ardit-tint-line); outline-offset: 0; }
.row input[type=checkbox] { width: 18px; height: 18px; justify-self: start; accent-color: var(--ardit-action); margin: 0; }
.row .ro { font-family: var(--ardit-font-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ardit-fg1); }
.hint { color: var(--ardit-fg3); font-size: 12px; margin-top: var(--ardit-space-2); line-height: 1.4; }
.hint.warn { color: var(--ardit-warning); }
.layers { margin: var(--ardit-space-1) 0; border-top: 1px solid var(--ardit-line); }
.layers .lr { display: flex; justify-content: space-between; gap: var(--ardit-space-2); font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--ardit-line); color: var(--ardit-fg2); }
.layers .lr span:last-child { color: var(--ardit-fg1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ib .btn.sm { height: 32px; font-size: 13px; }
.kbd { font: 11px var(--ardit-font-mono); border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-sm); padding: 0 4px; background: var(--ardit-bg1); }

/* ---------- výřezy ---------- */
.views { grid-area: views; display: flex; min-width: 0; min-height: 0; background: var(--ardit-bg1); }
.view { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.c2d { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#c3d { width: 100%; height: 100%; touch-action: none; }
#c3d canvas { display: block; }
.vlabel {
  position: absolute; top: var(--ardit-space-2); left: var(--ardit-space-3);
  font: 600 12px/1.4 var(--ardit-font-sans); color: var(--ardit-fg2);
  background: var(--ardit-bg1); border: 1px solid var(--ardit-line); padding: 2px var(--ardit-space-2); border-radius: var(--ardit-radius-sm);
  pointer-events: none;
}
.vhead { position: absolute; top: var(--ardit-space-2); left: var(--ardit-space-3); display: flex; gap: var(--ardit-space-2); align-items: center; pointer-events: none; max-width: calc(100% - 24px); }
.vhead .vlabel { position: static; white-space: nowrap; }
.vbtns { position: absolute; top: var(--ardit-space-2); right: var(--ardit-space-2); display: flex; gap: var(--ardit-space-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 64px); }
.vbtns .chk { display: inline-flex; align-items: center; gap: var(--ardit-space-2); height: 32px; padding: 0 var(--ardit-space-3); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md); font-size: 13px; color: var(--ardit-fg1); cursor: pointer; }
.vbtns .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ardit-action); }
.vbtns select { height: 32px; padding: 0 var(--ardit-space-2); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md); font-size: 13px; color: var(--ardit-fg1); }

/* ---------- tracker a pet paleta (plovoucí) ---------- */
.tracker {
  position: absolute; pointer-events: none;
  background: var(--ardit-bg1); border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-md);
  padding: var(--ardit-space-1) var(--ardit-space-2);
  font: 12px/1.5 var(--ardit-font-mono); box-shadow: var(--ardit-shadow-1);
  display: grid; grid-template-columns: auto auto; gap: 0 var(--ardit-space-3); z-index: 5; min-width: 128px;
}
.tracker .k { color: var(--ardit-fg3); }
.tracker .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ardit-fg1); }
.tracker .on .k, .tracker .on .v { color: var(--ardit-action); font-weight: 600; }
.tracker .on .v::after { content: ""; display: inline-block; width: 1px; height: 11px; background: var(--ardit-action); vertical-align: -2px; margin-left: 1px; }
.tracker div { display: contents; }
.pet {
  position: absolute; background: var(--ardit-bg1); border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-lg);
  padding: var(--ardit-space-1); display: flex; flex-wrap: wrap; max-width: 226px; gap: 2px; box-shadow: var(--ardit-shadow-1); z-index: 6;
}
.pet .ico { width: 34px; height: 30px; border-color: transparent; }
.pet .ico.on { border-color: var(--ardit-action); }
.txted { position: absolute; z-index: 8; min-width: 120px; padding: 2px 4px; border: 1px solid var(--ardit-tint-line); border-radius: var(--ardit-radius-sm); background: var(--ardit-bg1); color: var(--ardit-fg1); font: 500 14px var(--ardit-font-sans); box-shadow: var(--ardit-shadow-1); }
/* info tag prvku pod kurzorem (jako v Archicadu) */
.tag {
  position: absolute; pointer-events: none; z-index: 7;
  background: var(--ardit-bg1); border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-md); box-shadow: var(--ardit-shadow-1);
  padding: var(--ardit-space-2) var(--ardit-space-3); font-size: 12px; line-height: 1.4; min-width: 168px; max-width: 260px;
}
.tag .tt { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--ardit-space-2); align-items: center; margin-bottom: var(--ardit-space-1); padding-bottom: var(--ardit-space-1); border-bottom: 1px solid var(--ardit-line); }
.tag .tt svg { width: 18px; height: 18px; grid-row: span 2; color: var(--ardit-ink); }
.tag .tt b { font-weight: 600; color: var(--ardit-ink); }
.tag .tt span { color: var(--ardit-fg3); font-size: 11px; }
.tag .tr { display: flex; justify-content: space-between; gap: var(--ardit-space-3); color: var(--ardit-fg2); }
.tag .tr span:last-child { color: var(--ardit-fg1); font-variant-numeric: tabular-nums; }

/* ---------- navigátor a nastavení prvku (vpravo) ---------- */
.nav {
  grid-area: nav;
  background: var(--ardit-bg2);
  border-left: 1px solid var(--ardit-line);
  overflow: auto;
  padding: var(--ardit-space-3) var(--ardit-space-4);
  min-width: 0;
}
.nav h3 { margin: 0 0 var(--ardit-space-2); font-size: 12px; font-weight: 600; color: var(--ardit-fg3); }
.nav h2 { margin: 0 0 var(--ardit-space-1); font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ardit-ink); text-wrap: balance; }
.nav .ifc { font: 12px/1.5 var(--ardit-font-mono); color: var(--ardit-fg2); word-break: break-all; margin-bottom: var(--ardit-space-3); }
.sect { border-top: 1px solid var(--ardit-line); margin-top: var(--ardit-space-4); padding-top: var(--ardit-space-3); }
.storey-row { display: grid; grid-template-columns: 1fr 64px 64px 24px; gap: var(--ardit-space-1); align-items: center; margin: var(--ardit-space-1) 0; }
.storey-row input {
  height: 32px; padding: 0 var(--ardit-space-2); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md);
  font-family: var(--ardit-font-mono); font-size: 13px; min-width: 0; width: 100%; color: var(--ardit-fg1);
}
.storey-row input[type=text] { font-family: var(--ardit-font-sans); }
.storey-row .x { border: 0; background: transparent; color: var(--ardit-fg3); padding: 0; font-size: 16px; line-height: 1; height: 24px; }
.storey-row .x:hover { color: var(--ardit-danger); }
.storey-row.on input:first-child { border-color: var(--ardit-tint-line); }
/* editor skladeb stěn */
.cmp { border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-md); background: var(--ardit-bg1); padding: var(--ardit-space-2); margin: var(--ardit-space-2) 0; }
.cmp-h { display: grid; grid-template-columns: 1fr 56px 20px; gap: var(--ardit-space-1); align-items: center; margin-bottom: var(--ardit-space-1); }
.cmp-h .ro { font-size: 12px; text-align: right; color: var(--ardit-fg2); font-variant-numeric: tabular-nums; }
.cmp-use, .stamp-use { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ardit-space-2); font-size: 12px; color: var(--ardit-fg2); margin: 0 0 var(--ardit-space-1); }
.cmp-use label, .stamp-use label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--ardit-fg1); }
.cmp .cmp-use input[type=checkbox], .stamp-use input[type=checkbox] { width: auto; height: auto; margin: 0; padding: 0; }
.cmp-l { display: grid; grid-template-columns: 1fr 58px 1fr 20px; gap: var(--ardit-space-1); align-items: center; margin: 2px 0; }
.cmp input, .cmp select { height: 28px; padding: 0 var(--ardit-space-1); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-sm); font-size: 12px; min-width: 0; width: 100%; color: var(--ardit-fg1); }
.cmp input[type=number] { font-family: var(--ardit-font-mono); }
.cmp-h input { font-weight: 600; }
.cmp .x { border: 0; background: transparent; color: var(--ardit-fg3); padding: 0; font-size: 16px; line-height: 1; height: 24px; }
.cmp .x:hover { color: var(--ardit-danger); }
/* ořez střechou v pravém panelu: „Ořez: střecha ד */
.trim-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ardit-space-2); margin: var(--ardit-space-1) 0; padding: 2px var(--ardit-space-2); border-radius: var(--ardit-radius-sm); background: var(--ardit-tint); color: var(--ardit-fg1); font-size: 13px; }
.trim-row .x { border: 0; background: transparent; color: var(--ardit-fg3); padding: 0; font-size: 16px; line-height: 1; height: 24px; cursor: pointer; }
.trim-row .x:hover { color: var(--ardit-danger); }
.cmp .btn.sm { height: 26px; font-size: 12px; margin-top: var(--ardit-space-1); }
/* pera v pravém panelu: číslo, název, barva podle motivu, barva, tloušťka (mm) */
.pens { display: flex; flex-direction: column; gap: 2px; }
.pen-row { display: grid; grid-template-columns: 20px 1fr 18px 30px 58px; gap: var(--ardit-space-1); align-items: center; font-size: 12px; }
.pen-row .pen-id { font-family: var(--ardit-font-mono); color: var(--ardit-fg2); text-align: right; font-variant-numeric: tabular-nums; }
.pen-row .pen-n { color: var(--ardit-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pen-row input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--ardit-action); }
.pen-row input[type=color] { width: 30px; height: 24px; padding: 1px; border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-sm); background: var(--ardit-bg1); }
.pen-row input[type=checkbox]:checked + input[type=color] { opacity: .35; }
.pen-row input[type=number] { height: 26px; padding: 0 var(--ardit-space-1); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-sm); font: 12px var(--ardit-font-mono); color: var(--ardit-fg1); min-width: 0; width: 100%; }
/* vrstvy a kombinace vrstev (src/layers.js) */
.lay-combo { display: grid; grid-template-columns: 1fr auto 20px; gap: var(--ardit-space-1); align-items: center; margin-bottom: var(--ardit-space-2); }
.lay-combo select, .lay-row input { height: 28px; padding: 0 var(--ardit-space-2); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-sm); font-size: 12px; min-width: 0; width: 100%; color: var(--ardit-fg1); }
.lay-combo .btn.sm { height: 28px; font-size: 12px; }
.lay-list { border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-md); background: var(--ardit-bg1); padding: 2px var(--ardit-space-1); margin-bottom: var(--ardit-space-2); }
.lay-row { display: grid; grid-template-columns: 26px 26px 26px 1fr 30px 20px; gap: 2px; align-items: center; padding: 1px 0; }
.lay-row + .lay-row { border-top: 1px solid var(--ardit-bg3); }
.lay-row input { border-color: transparent; background: transparent; }
.lay-row input:hover { border-color: var(--ardit-line); }
.lay-row input:focus-visible { border-color: var(--ardit-tint-line); background: var(--ardit-bg1); outline-offset: 0; }
.lay-row input[readonly] { color: var(--ardit-fg2); font-style: italic; }
.lay-row.off input { color: var(--ardit-fg3); }
.lay-row .ro { font: 12px var(--ardit-font-mono); text-align: right; color: var(--ardit-fg3); font-variant-numeric: tabular-nums; }
.lay-b { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ardit-radius-sm); background: transparent; color: var(--ardit-fg3); cursor: pointer; }
.lay-b svg { width: 17px; height: 17px; }
.lay-b:hover { background: var(--ardit-bg3); color: var(--ardit-fg1); }
.lay-b[data-laytog="visible"].on { color: var(--ardit-fg1); }
.lay-b[data-laytog="locked"].on { color: var(--ardit-warning); }
.lay-b[data-laytog="wire"].on { color: var(--ardit-action); }
.lay-row .x, .lay-combo .x { border: 0; background: transparent; color: var(--ardit-fg3); padding: 0; font-size: 16px; line-height: 1; height: 24px; cursor: pointer; }
.lay-row .x:hover, .lay-combo .x:hover:not(:disabled) { color: var(--ardit-danger); }
.lay-combo .x:disabled { opacity: .35; cursor: default; }
.storeys { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--ardit-space-2); }
.storeys .btn { height: 32px; text-align: left; display: flex; justify-content: space-between; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.storeys .btn.on { font-weight: 600; }

/* ---------- stavový řádek ---------- */
.status {
  grid-area: status;
  display: flex; gap: var(--ardit-space-4); align-items: center;
  padding: 0 var(--ardit-space-4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ardit-bg2); border-top: 1px solid var(--ardit-line);
  font: 12px/1.4 var(--ardit-font-sans); color: var(--ardit-fg3);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
#coords { display: none; } /* souřadnice ve stavové liště zrušené (Martin 2026-10-24) – prvek zůstává kvůli zápisům z app.js / edit3d.js */
.status select { height: 22px; padding: 0 var(--ardit-space-1); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-sm); font: 12px var(--ardit-font-mono); color: var(--ardit-fg1); }
.status .seg, .top .seg { gap: 0; flex: none; }
.top .seg .btn { border-radius: 0; margin-left: -1px; font-weight: 500; }
.top .seg .btn:first-child { border-radius: var(--ardit-radius-sm) 0 0 var(--ardit-radius-sm); margin-left: 0; }
.top .seg .btn:last-child { border-radius: 0 var(--ardit-radius-sm) var(--ardit-radius-sm) 0; }
.top .seg .btn.on { font-weight: 600; }
#coords { flex: none; }
.status .seg .btn { height: 22px; padding: 0 var(--ardit-space-2); font-size: 12px; font-weight: 500; border-radius: 0; margin-left: -1px; }
.status .seg .btn:first-child { border-radius: var(--ardit-radius-sm) 0 0 var(--ardit-radius-sm); margin-left: 0; }
.status .seg .btn:last-child { border-radius: 0 var(--ardit-radius-sm) var(--ardit-radius-sm) 0; }
.status .msg { display: none; } /* text nápovědy ukazuje (i) vpravo dole v okně – src/hinticon.js */

/* ---------- oznámení ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--ardit-app-statusbar-h) + var(--ardit-space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: #1b2026; color: #ffffff;
  padding: var(--ardit-space-2) var(--ardit-space-4); border-radius: var(--ardit-radius-lg); box-shadow: var(--ardit-shadow-2);
  font-size: 13px; opacity: 0; transition: opacity var(--ardit-duration-mid) var(--ardit-easing-standard);
  pointer-events: none; max-width: 90vw; z-index: 20;
}
[data-theme="dark"] .toast { background: #e5e8ed; color: #0e141d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #e5e8ed; color: #0e141d; } }
.toast.show { opacity: 1; }
.hidefile { display: none; }

/* ---------- menší obrazovky ---------- */
@media (max-width: 1279px) {
  #app { grid-template-columns: var(--app-tools-w) 240px 1fr 320px; }
  .actions .btn.sm[data-ico]:not(.icon) { width: 32px; padding: 0; }
  .actions .btn.sm[data-ico]:not(.icon) span { display: none; }
}
@media (max-width: 1023px) {
  #app {
    grid-template-rows: var(--ardit-app-topbar-h) auto 1fr 34vh var(--app-status-row);
    grid-template-columns: var(--app-tools-w) 1fr 1fr;
    grid-template-areas: "top top top" "demo demo demo" "tools views views" "tools info nav" "status status status";
  }
  .info { border-right: 0; border-top: 1px solid var(--ardit-line); }
  .nav { border-top: 1px solid var(--ardit-line); }
  .appname { display: none; } .sep { display: none; }
  .top { gap: var(--ardit-space-2); padding: 0 var(--ardit-space-3); }
  .status { gap: var(--ardit-space-3); padding: 0 var(--ardit-space-3); }
}
@media (prefers-reduced-motion: reduce) { .toast, .btn { transition: none; } }

/* ---------- úklid UI (Martin 2026-10-23): bez posuvníků, ovládání zobrazení ve spodní liště, nápovědy pod (i) ---------- */
.tools, .info, .nav { scrollbar-width: none; } /* paleta i panely rolují kolečkem, posuvník se nekreslí */
.tools::-webkit-scrollbar, .info::-webkit-scrollbar, .nav::-webkit-scrollbar { display: none; }
.info, .nav { overflow-x: hidden; }
.row input, .row select, .cmp-l input, .cmp-l select, .cmp-h input, .storey-row input, .lay-row input, .lay-row select, .pen-row input, .pen-row select, .fs-row input, .fs-row select { min-width: 0; max-width: 100%; }
.info .sub, .nav .ifc { overflow-wrap: anywhere; }
.status .seg .btn svg { width: 14px; height: 14px; margin-right: 4px; }
.status .seg .btn.on { background: var(--ardit-action); color: var(--ardit-on-action); border-color: var(--ardit-action); }
.ih { display: inline-flex; vertical-align: middle; position: relative; margin-left: var(--ardit-space-1); }
.ih > button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ardit-line); background: var(--ardit-bg1); color: var(--ardit-fg3); font: 600 10px/1 var(--ardit-font-sans); padding: 0; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.ih > button:hover, .ih.open > button { color: var(--ardit-action); border-color: var(--ardit-action); }
.ih .hint { display: none; position: absolute; left: 0; top: 20px; z-index: 30; width: 260px; max-width: calc(100vw - 32px); margin: 0; padding: var(--ardit-space-2) var(--ardit-space-3); background: var(--ardit-bg1); color: var(--ardit-fg1); border: 1px solid var(--ardit-line); border-radius: var(--ardit-radius-sm); box-shadow: 0 6px 20px rgb(0 0 0 / .15); font-size: 12px; line-height: 1.45; white-space: normal; }
.ih.open .hint, .ih:hover .hint, .ih:focus-within .hint { display: block; }
.ih.right .hint { left: auto; right: 0; }
.vbtns .snapL { gap: 2px; padding-right: 2px; } .vbtns .snapL svg { width: 16px; height: 16px; flex: none; color: var(--ardit-fg2); } .vbtns .snapL select { height: 26px; border: 0; background: transparent; font: inherit; padding: 0 2px; cursor: pointer; }
.vbar { position: absolute; top: var(--ardit-space-2); right: var(--ardit-space-2); display: flex; flex-wrap: wrap; gap: var(--ardit-space-1); align-items: center; justify-content: flex-end; max-width: calc(100% - 16px); }
.vbar > .vbtns { display: contents; } .vbar > .vbtns[hidden] { display: none; } /* všechny volby jako položky jedné řady – v úzkém okně se zalomí doprava */
.vbar .chk { white-space: nowrap; padding: 0 var(--ardit-space-2); }
.vbar .pscale { height: 32px; padding: 0 var(--ardit-space-2); border: 1px solid var(--ardit-line); background: var(--ardit-bg1); border-radius: var(--ardit-radius-md); font: 500 13px var(--ardit-font-sans); color: var(--ardit-fg1); cursor: pointer; } .vbar .pscale[hidden] { display: none; }
.vbtns .btn.icon[data-vpan], .vbtns .btn.icon[data-vfit] { width: 32px; height: 32px; padding: 0; justify-content: center; background: var(--ardit-bg1); border: 1px solid var(--ardit-line); }
.vbtns .btn.icon.on[data-vpan] { background: var(--ardit-action); color: var(--ardit-on-action); border-color: var(--ardit-action); }
.ih-line { display: flex; align-items: center; gap: var(--ardit-space-1); }
/* nápověda nástroje vpravo na řádku s názvem v Info boxu (src/infohint.js); zvýraznění = zpráva čeká na vstup */
.info h2 .ih.ihtop { margin-left: auto; }
.ih.ihtop > button { width: 20px; height: 20px; font-size: 11px; }
.ih.ihtop.imp > button { color: var(--ardit-bg1); background: var(--ardit-action); border-color: var(--ardit-action); }
.ih.ihtop.pulse > button { animation: ihPulse 1.2s ease-out 2; }
@keyframes ihPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ardit-action) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.ih.ihtop .hint { font-weight: 400; }
.row .ro { min-width: 0; overflow-wrap: anywhere; }

/* ---------- řádek „technologický demonstrátor“ pod záhlavím a kontakty ve stavovém řádku (jako dss-prohlizec / mapy.ardit.cz, Martin 2026-10-24) ---------- */
.demo { grid-area: demo; display: flex; align-items: flex-start; gap: var(--ardit-space-2); margin: 0; padding: 6px var(--ardit-space-4); background: var(--ardit-tint); border-bottom: 1px solid var(--ardit-line-on-tint); color: var(--ardit-fg1); font-size: 13px; line-height: 1.4; }
.demo svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--ardit-ink); stroke-width: 1.6; stroke-linecap: square; }
.status .contacts { flex: none; margin-left: auto; color: var(--ardit-fg1); white-space: nowrap; }
.status .contacts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.status .contacts a:hover { color: var(--ardit-action); }
.status .contacts .ci + .ci::before { content: " · "; }
@media (max-width: 1599px) { .status .contacts .c2 { display: none; } }
@media (max-width: 1279px) { .status .contacts .cn, .status .contacts .c1 { display: none; } .status .contacts .c0::before { content: none; } }
@media (max-width: 1023px) { .status .contacts { display: none; } }
/* štítek 2D výřezu se zkrátí, aby se nepřekrýval s přepínači Ref. čáry / Mřížka */
#view2d, #view2dB { container-type: inline-size; } #view2d .vhead, #view2dB .vhead { max-width: calc(100% - 500px); }
@container (max-width: 700px) { .vhead .vlabel { display: none; } } /* úzké okno: název pohledu je v záložce, místo pro Ref. čáry / Mřížka / Přichytávání */
.vhead .vlabel { overflow: hidden; text-overflow: ellipsis; min-width: 0; }