/* Drawing Interpreter nad WebTUI: aplikačný layout a SVG náhľad. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { min-width: 320px; }

.di-topbar { position: sticky; top: 0; z-index: 100; padding: .5lh 1ch 0; background: var(--background0); }
.di-topbar [is-~="nav"] { width: min(146ch, 100%); margin-inline: auto; flex-wrap: wrap; }
.di-main-links, .di-nav-actions { align-items: center; }
.di-nav-actions { margin-left: auto; }
.theme-dot.active { color: var(--background0); background: var(--foreground0); font-weight: 700; }

.di-app { width: min(146ch, calc(100% - 2ch)); padding-block: 1lh 2lh; }
.di-hero { padding: 1lh 2ch; }
.di-hero h1 { font-size: 1.35em; }
.di-protocol { margin-top: 1lh; padding-top: 1lh; border-top: 1px dashed var(--foreground2); color: var(--foreground1); }
.di-layout { display: grid; grid-template-columns: minmax(34ch, 46ch) minmax(0, 1fr); gap: 1lh 2ch; align-items: start; }
.di-sidebar, .di-panel { min-width: 0; }
.di-panel { padding: 1lh 1ch; }
.di-panel-header { padding: 0 1ch 1lh; border-bottom: 1px dashed var(--foreground2); }
.di-panel-header h2 { font-size: 1em; }
.di-panel-body { padding: 1lh 1ch 0; }
.di-panel-footer { margin: 1lh 1ch 0; padding-top: 1lh; border-top: 1px dashed var(--foreground2); color: var(--foreground1); }

.di-dropzone { display: flex; min-height: 6lh; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.di-dropzone:hover, .di-dropzone.drag { color: var(--background0); background: var(--foreground0); --box-border-color: var(--foreground0); }
.di-dropzone:hover [is-~="muted"], .di-dropzone.drag [is-~="muted"] { color: var(--background1); }
.di-upload-mark { font-size: 1.5em; }
.recent-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5lh 1ch; }
.recent-thumb { aspect-ratio: 1; min-width: 0; overflow: hidden; border: 1px solid var(--foreground1); background: #f5f2ec; cursor: pointer; }
.recent-thumb:hover { outline: 2px solid var(--foreground0); outline-offset: 1px; }
.recent-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.upload-tile { display: flex; align-items: center; justify-content: center; color: var(--foreground0); background: var(--background1); border-style: dashed; }
.upload-tile svg { width: 45%; height: 45%; }

.di-settings { gap: 1lh; }
.di-fieldset { min-width: 0; padding: 1lh 2ch; }
.di-fieldset legend { padding-inline: 1ch; color: var(--foreground0); font-weight: 700; }
.di-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1lh 2ch; }
.di-fields label { display: flex; min-width: 0; flex-direction: column; gap: .25lh; color: var(--foreground1); }
.di-fields input { width: 100%; min-width: 0; height: 2lh; }
.di-field-wide { grid-column: 1 / -1; }
.di-inline-check { display: flex; align-items: center; gap: 1ch; margin-bottom: 1lh; color: var(--foreground1); }
.di-fields input:disabled { opacity: .45; }
.di-choices { gap: .5lh; }
.di-choices label { display: flex; align-items: center; gap: 1ch; }
#btn-generate { width: 100%; }

.di-preview-panel { min-width: 0; }
.di-preview-content { min-height: 36lh; }
.di-toolbar { padding-bottom: 1lh; border-bottom: 1px dashed var(--foreground2); }
.bg-picker { gap: 1ch; }
.bg-dot, #bg-custom { width: 3ch !important; min-width: 3ch !important; height: 1.5lh !important; padding: 0 !important; border: 1px solid var(--foreground0) !important; cursor: pointer; }
.bg-dot-paper { background: #f5f2ec !important; background-image: none !important; }
.bg-dot-black { background: #111 !important; background-image: none !important; }
.bg-dot.active { outline: 1px solid var(--foreground0); outline-offset: 2px; }
.di-view-switch .seg.active { color: var(--background0); background: var(--foreground0); font-weight: 700; }
.layer-toggles { gap: .5lh 1ch; }
.layer-toggle { display: inline-flex; align-items: center; gap: 1ch; height: 1lh; padding-inline: 1ch; color: var(--background0); background: var(--foreground0); cursor: pointer; user-select: none; }
.layer-toggle:hover { text-decoration: underline; }
.layer-toggle.off { color: var(--foreground2); background: var(--background1); text-decoration: line-through; }
.swatch { display: inline-block; width: 1ch; height: .7lh; flex: none; border: 1px solid currentColor; }
.preview-wrap { display: flex; min-height: 30lh; flex: 1; align-items: center; justify-content: center; overflow: hidden; padding: 1lh 1ch; background: #f5f2ec; }
.preview-wrap svg, .preview-wrap img { display: block; max-width: 100%; max-height: 78vh; height: auto; }
.preview-wrap canvas { display: block; max-width: 100%; cursor: crosshair; }

/* ---------- umiestnenie na stôl ---------- */
.di-place-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr)); gap: 1lh 2ch; }
.di-place-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr)); gap: .5lh 2ch; }
.di-place-fields label { display: flex; min-width: 0; flex-direction: column; gap: .25lh; color: var(--foreground1); }
.di-place-fields input, .di-place-fields select { width: 100%; min-width: 0; height: 2lh; }
.di-place-exports { gap: .5lh 1ch; flex-wrap: wrap; }
.di-place-canvas-wrap { overflow: auto; background: var(--background1); padding: .5lh 1ch; }
#place-canvas { display: block; cursor: grab; }
#place-canvas:active { cursor: grabbing; }

#ctx-menu {
  position: fixed;
  z-index: 300;
  display: flex;
  flex-direction: column;
  min-width: 24ch;
  padding: .25lh 0;
  border: 1px solid var(--foreground0);
  background: var(--background0);
  box-shadow: .5ch .25lh 0 color-mix(in srgb, var(--foreground0) 30%, transparent);
}
#ctx-menu button {
  height: 1.5lh;
  padding-inline: 1ch;
  border: 0;
  background: transparent;
  color: var(--foreground0);
  text-align: left;
  cursor: pointer;
}
#ctx-menu button:hover { color: var(--background0); background: var(--foreground0); }
.di-empty-hint { width: min(46ch, 100%); color: var(--foreground0); background: var(--background0); }
.di-empty-hint pre { color: var(--foreground0); }

.di-warnings { gap: .5lh; }
.di-warnings:empty { display: none; }
.di-warnings div { padding: .5lh 1ch; border-left: 1ch solid var(--foreground0); color: var(--foreground0); background: var(--background2); }
.di-busy { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1lh 2ch; background: color-mix(in srgb, var(--background0) 25%, transparent); backdrop-filter: blur(2px); }
.di-busy-dialog { width: min(48ch, 100%); padding: 2lh 3ch; color: var(--foreground0); background: var(--background0); }

@media (max-width: 1040px) {
  .di-layout { grid-template-columns: 1fr; }
  .di-preview-content { min-height: 30lh; }
  .preview-wrap { min-height: 24lh; }
}

@media (max-width: 640px) {
  .di-topbar { padding-inline: 0; }
  .di-topbar [is-~="nav"] { align-items: stretch; }
  .di-main-links, .di-nav-actions { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: .5lh; }
  .di-nav-actions { flex-direction: row; flex-wrap: wrap; }
  .di-nav-actions > * { flex: 1; }
  .di-app { width: calc(100% - 1ch); }
  .di-fields { grid-template-columns: 1fr; }
  .di-field-wide { grid-column: auto; }
  .di-toolbar, .di-view-switch { align-items: stretch; flex-direction: column; }
  .di-toolbar > *, .di-view-switch > * { width: 100%; }
  .bg-picker { width: auto; }
  .recent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .di-preview-content { min-height: 24lh; }
  .preview-wrap { min-height: 20lh; }
}

/* Malé akčné tlačidlá — bez box- rámu (na 1-riadkových tlačidlách
   prechádzal cez text ako preškrtnutie). Aktívne/hover = plná inverzia. */
.di-nav-actions button, .di-toolbar button, .di-view-switch .seg,
.di-place-exports button {
  height: 1.5lh;
  padding: 0 1ch;
  border: 1px solid var(--foreground1);
  background: var(--background1);
  color: var(--foreground0);
  cursor: pointer;
  text-decoration: none !important;
}
.di-nav-actions button:hover, .di-toolbar button:hover,
.di-view-switch .seg:hover, .di-place-exports button:hover {
  background: var(--background2);
}
.di-view-switch .seg.active:hover, .theme-dot.active:hover {
  background: var(--foreground0);
}
.di-svg-size { padding: .25lh 1ch; color: var(--background0); background: var(--foreground0); font-weight: 700; }

.di-zoom { gap: .5ch; align-items: center; }
.di-zoom #zoom-label { min-width: 5ch; text-align: center; color: var(--foreground1); }