/* ==========================================================================
   Kontrola návrhov · vcg
   Tmavé a svetlé rozhranie podľa náhľadu D z 3. 11. 2026: úzky pás ikon vľavo, karty s tenkou linkou,
   fialová zo značky na vybrané a hlavné tlačidlo. Logo je bez rámčeka v farbe textu. Okolie návrhu je
   v oboch vzhľadoch čisto neutrálne (R = G = B), aby neovplyvňovalo vnímanie farieb.
   Vzhľad nastavuje web/js/theme-boot.js do data-theme, predvolene podľa systému.
   ========================================================================== */

/* Písmo Geist 1.8.2 z balíka geist od Vercelu, licencia SIL OFL 1.1 v assets/fonts/Geist-OFL.txt.
   Jeden variabilný súbor pre hrúbky 100 až 900. Je priamo v Portali, nie na Google Fonts (GDPR nález S-1). */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Fialová zo značky ako plocha s bielym textom je rovnaká v oboch vzhľadoch. Ako čiara a text je v tmavom svetlejšia, aby bola na čiernej čitateľná. */
  --accent: #6c4dd5;
  --accent-hover: #7b5ee0;
  --accent-active: #5d3fc6;
  --on-accent: #ffffff;
  --accent-line: #a594f2;
  --accent-text: #a594f2;
  --accent-edge: transparent;
  --sel-bg: rgb(165 148 242 / .07);
  --focus: #a594f2;
  --control: #a594f2;
  --brand: #6c4dd5;

  --bg: #0b0d11;
  --rail: #0e1014;
  --surface: #14161b;
  --surface-2: #1f2229;
  --surface-3: #272b33;
  --raised: #14161b;
  --raised-hover: #1f2229;
  --field: #1b1e24;
  --row-hover: #191c22;
  --line: #22252c;
  --line-2: #2e323a;
  --line-3: #444a55;
  --hover-soft: rgb(255 255 255 / .025);
  --text: #eef0f3;
  --text-2: #a7adb7;
  --text-3: #868c97;

  --ok: #7ddc95;
  --card: #14161b;
  --mine: color-mix(in srgb, var(--accent) 15%, var(--card));
  --info-soft: rgb(58 91 255 / .16);
  --err-soft: rgb(255 154 143 / .12);
  --warn-soft: rgb(242 196 110 / .12);
  --ok-soft: rgb(125 220 149 / .12);
  --warn: #f2c46e;
  --on-warn: #1a1305;
  --err: #ff9a8f;
  --err-hover: #ffb3aa;
  --on-err: #1a0806;
  --info: #9cb0ff;

  /* Prevrátené prvky: oznámenie a popis ovládača majú farbu textu ako podklad. */
  --inverse-ok: #23702c;
  --inverse-err: #b42318;
  --inverse-line: rgb(0 0 0 / .25);
  --inverse-fill: rgb(0 0 0 / .08);

  --swatch-edge: rgb(255 255 255 / .28);
  --swatch-edge-hover: rgb(255 255 255 / .6);
  --ink-edge: rgb(255 255 255 / .2);

  /* Okolie návrhu a značky na ňom sú rovnaké v oboch vzhľadoch: ležia nad tlačovými dátami, nie nad rozhraním. */
  --stage-gray: #707070;
  --stage-dark: #1e1e1e;
  --stage-light: #d2d2d2;
  --stage-label: #ffffff;
  /* Náhľad loga v Marketingu na pozadí, pre ktoré je určené. Rovnaké v oboch vzhľadoch, ako dlaždice Vizuálu systému. */
  --logo-light: #ffffff;
  --logo-dark: #0e1014;
  /* Grafy Marketingu: jedna modrá pre údaje, sivá pre porovnanie, rad modrých pre lievik. Overené na ploche karty v oboch vzhľadoch. */
  --viz-1: #3987e5;
  --viz-track: #1c2a40;
  --viz-muted: #898781;
  --viz-step-1: #184f95;
  --viz-step-2: #256abf;
  --viz-step-3: #3987e5;
  --viz-step-4: #6da7ec;
  --stage-label-on-light: #141414;
  /* Vybraná značka na návrhu je v svetlejšej fialovej zo značky, na sivom okolí sa nestratí. */
  --mark-accent: #a594f2;
  --mark-err: #ff5a47;
  --mark-warn: #ffb020;
  --mark-muted: #55555a;
  --mark-dark: #0c0c0d;
  --mark-hover: #2c2c30;
  --mark-ring: rgb(255 255 255 / .6);

  --thumb-bg: #2a2a2a;
  --scroll: #3c3c42;
  --scroll-hover: #55555c;
  --backdrop: rgb(0 0 0 / .6);

  --font-display: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  /* Čísla, časy a počty: rovnako široké znaky, aby sa hodnoty pod sebou nehýbali. */

  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 999px;
  --t: .16s;
  --float: 0 12px 32px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06);
  --glow: radial-gradient(1100px 680px at 80% -14%, rgb(40 70 255 / .34), transparent 70%), radial-gradient(800px 520px at -6% 108%, rgb(190 235 60 / .07), transparent 70%);
  --grid: rgb(255 255 255 / .025);

  --z-bar: 20;
  --z-menu: 40;
  --z-toast: 50;
  --z-tip: 60;
}

:root[data-theme="light"] {
  color-scheme: light;

  --viz-1: #2a78d6;
  --viz-track: #cde2fb;
  --viz-step-1: #86b6ef;
  --viz-step-2: #5598e7;
  --viz-step-3: #2a78d6;
  --viz-step-4: #1c5cab;

  --accent-line: #6c4dd5;
  --accent-text: #6c4dd5;
  --accent-edge: transparent;
  --sel-bg: rgb(108 77 213 / .06);
  --focus: #6c4dd5;
  --control: #6c4dd5;

  --bg: #f2f3f5;
  --rail: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e7e9ed;
  --raised: #ffffff;
  --raised-hover: #eef0f3;
  --field: #f4f5f7;
  --row-hover: #f4f5f7;
  --line: #e3e5e9;
  --line-2: #d6d9df;
  --line-3: #aab0ba;
  --hover-soft: rgb(0 0 0 / .02);
  --text: #111318;
  --text-2: #4a505b;
  --text-3: #686e79;

  --ok: #1f7a3a;
  --card: #ffffff;
  --mine: color-mix(in srgb, var(--accent) 13%, var(--card));
  --info-soft: #e5eaff;
  --err-soft: #fbe4e1;
  --warn-soft: #fbefd3;
  --ok-soft: #e2f4e7;
  --warn: #875700;
  --on-warn: #ffffff;
  --err: #b3322a;
  --err-hover: #962a23;
  --on-err: #ffffff;
  --info: #1d3fd6;

  --inverse-ok: #93dc98;
  --inverse-err: #ff9685;
  --inverse-line: rgb(255 255 255 / .3);
  --inverse-fill: rgb(255 255 255 / .12);

  --swatch-edge: rgb(0 0 0 / .3);
  --swatch-edge-hover: rgb(0 0 0 / .6);
  --ink-edge: rgb(0 0 0 / .25);

  --thumb-bg: #e2e2e2;
  --scroll: #cdd1d8;
  --scroll-hover: #aab0ba;
  --backdrop: rgb(16 18 24 / .4);
  --float: 0 12px 32px rgb(16 18 24 / .12), 0 0 0 1px rgb(16 18 24 / .06);
  --glow: radial-gradient(1100px 620px at 82% -12%, rgb(36 72 255 / .09), transparent 70%);
  --grid: rgb(16 18 24 / .035);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(.page-wrap) { scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--scroll) var(--bg); scrollbar-width: thin; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 .875rem/1.5 var(--font-body);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Jemná žiara a mriežka za stránkami. V otvorenom návrhu nie sú, aby farby návrhu nič neovplyvňovalo. */
body:has(.page-wrap)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--glow), linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 64px 64px; }
#app { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border: 2px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: currentColor; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1:focus, main:focus, [tabindex="-1"]:focus { outline: none; }

h1 { font: 400 1.625rem/1.2 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
h2 { font: 450 1.125rem/1.3 var(--font-display); letter-spacing: -.005em; }
h3 { font: 500 .8125rem/1.4 var(--font-body); }
h4 { font: 400 .75rem/1.4 var(--font-body); color: var(--text-3); }

.muted { color: var(--text-2); }
.small { font-size: .8125rem; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hash { font-variant-numeric: tabular-nums; word-break: break-all; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { flex: none; display: block; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.stack > .field, .stack > input, .stack > form { width: 100%; }
.title-icon { display: flex; align-items: center; gap: 10px; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: var(--z-tip); padding: 8px 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 8px; }

kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--field); color: var(--text); font: 500 .6875rem/1.6 var(--font-body); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- ovládacie prvky ---------- */

/* Tlačidlá s malým zaoblením. Hlavné je fialové, ostatné majú plochu poľa a tenkú linku. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 7px 14px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn-small { min-height: 30px; padding: 4px 10px; font-size: .75rem; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { border-color: var(--line); background: var(--field); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn-secondary:active { background: var(--surface-3); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:active { background: var(--surface-3); }
.btn-danger { background: var(--err); color: var(--on-err); }
.btn-danger:hover { background: var(--err-hover); }
.btn:disabled { opacity: .45; }
.btn.is-busy { opacity: .75; }
.btn.is-busy > .icon { display: none; }
.btn.is-busy::before, .link-btn.is-busy::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.danger-text { color: var(--err); }

.link-btn { color: var(--text-2); font-size: .8125rem; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; text-decoration: none; transition: color var(--t); }
.link-btn:hover { color: var(--accent-text); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.link-btn:disabled { opacity: .45; text-decoration: none; }
.link-danger:hover { color: var(--err); }

.tool {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--text-2);
  transition: background var(--t), color var(--t);
}
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool:active { background: var(--surface-3); }
.tool:disabled { opacity: .35; background: none; color: var(--text-2); }
.tool.is-active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="search"], textarea, select {
  width: 100%; min-height: 36px; padding: 7px 11px;
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--t), background var(--t);
}
input:hover, textarea:hover, select:hover { border-color: var(--line-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; background-color: var(--card); }
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.45; display: block; }
::placeholder { color: var(--text-3); opacity: 1; }
select { padding-right: 28px; cursor: pointer; }
.select-small { width: auto; max-width: 260px; min-height: 32px; padding: 4px 28px 4px 10px; font-size: .8125rem; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378808c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
select[multiple] { background-image: none; padding-right: 11px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--control); cursor: pointer; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
input[type="file"] { max-width: 100%; }
progress { width: 100%; height: 4px; accent-color: var(--control); border: 0; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: .8125rem; color: var(--text-2); }
.field-optional { color: var(--text-3); font-size: .75rem; }
.field-hint { font-size: .75rem; color: var(--text-3); line-height: 1.4; }
.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check-text { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; line-height: 1.4; }
.check-text small { color: var(--text-3); font-size: .75rem; }
.check-row { display: flex; gap: 10px 26px; flex-wrap: wrap; }
.check-row .check { flex: 1 1 220px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; align-items: start; }
.form-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.form-error { color: var(--err); font-size: .8125rem; }
.form-note { color: var(--text-2); font-size: .8125rem; }
.form-note:empty { display: none; }
.form-success { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.notice { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); padding: 10px 0; }
.notice-warn { color: var(--warn); padding: 4px 0; font-size: .8125rem; }
.empty { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; color: var(--text-2); padding: 18px 0; max-width: 62ch; }
.link-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; font-size: .8125rem; }
.link-box p { width: 100%; color: var(--text-2); }
.link-box-warn { display: flex; align-items: center; gap: 6px; }
.link-box code { flex: 1 1 280px; min-width: 0; padding: 7px 10px; background: var(--surface-2); border-radius: var(--r-sm); font: .75rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }

/* Prepínač: vybraná voľba je vyvýšená karta na ploche poľa. */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; max-width: 100%; background: var(--field); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 3px 12px; border-radius: 5px; font-size: .8125rem; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background var(--t), color var(--t), box-shadow var(--t); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"], .segmented button[aria-current="page"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--line); }
:root:not([data-theme="light"]) .segmented button[aria-pressed="true"], :root:not([data-theme="light"]) .segmented button[aria-current="page"] { background: var(--surface-3); box-shadow: none; }
.segmented-full { display: flex; }
.segmented-full button { flex: 1 1 0; }
.segmented-count { margin-left: 6px; opacity: .7; }

.status-text { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.status-approved { color: var(--ok); }
.status-changes_requested { color: var(--warn); }
.status-in_review, .status-draft { color: var(--text-2); }
.status-processing { color: var(--info); }
.status-failed { color: var(--err); }

.spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; }
.loading { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: .8125rem; }
.page-loading { display: flex; justify-content: center; padding: 64px 0; }

.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast); width: min(480px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 8px; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--float); font-size: .8125rem; animation: rise .2s ease-out; }
.toast-ok .icon { color: var(--inverse-ok); }
.toast-error .icon { color: var(--inverse-err); }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-action { flex: none; min-height: 24px; margin: -2px -6px -2px 0; padding: 2px 6px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; border-radius: var(--r-sm); pointer-events: auto; }

.tooltip { position: fixed; z-index: var(--z-tip); display: flex; align-items: center; gap: 8px; max-width: 300px; padding: 5px 9px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); box-shadow: var(--float); font-size: .75rem; line-height: 1.35; pointer-events: none; animation: fade-in .12s ease-out; }
.tooltip kbd { border-color: var(--inverse-line); background: var(--inverse-fill); color: inherit; }

.dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: var(--float); animation: dialog-in .16s ease-out; }
.dialog:has(.dialog-wide) { width: min(780px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--backdrop); }
.dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 20px; }
.dialog-body h2 { font-size: 1.125rem; overflow-wrap: anywhere; }
.dialog-body p { overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; }
.keys h3 { margin-bottom: 8px; color: var(--text-2); }
.keys dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: .8125rem; align-items: baseline; }
.keys-row { display: contents; }
.keys-row dt { display: flex; flex-wrap: wrap; gap: 3px; max-width: 86px; }

.menu { position: relative; flex: none; }
.menu-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px 4px 10px; border-radius: var(--r-sm); font-size: .8125rem; font-weight: 500; transition: background var(--t); }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background: var(--surface-2); }
.menu-avatar { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #8cc8ff; color: #0b1730; font-size: .6875rem; font-weight: 500; user-select: none; }
.menu-trigger-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Meno pri avatare: v hlavičke vždy, len na telefóne sa nezmestí. V lište návrhu až na širokej obrazovke. */
@media (max-width: 560px) { .menu-trigger-name { display: none; } }
@media (max-width: 1279px) { .menu-trigger.is-compact .menu-trigger-name { display: none; } }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); width: 290px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 72px); overflow: auto; border: 0; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--float); animation: fade-in .12s ease-out; }
.menu-who { display: flex; flex-direction: column; padding: 12px 14px; overflow-wrap: anywhere; }
.menu-who strong { font-weight: 500; }
.menu-section { padding: 6px 0; border-top: 1px solid var(--line); }
.menu-title { padding: 6px 14px 4px; color: var(--text-3); font: 400 .6875rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.menu-item { display: flex; align-items: center; gap: 10px; width: calc(100% - 12px); min-height: 36px; margin: 0 6px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text); font-size: .8125rem; text-align: left; text-decoration: none; transition: background var(--t); }
.menu-item:hover { background: var(--raised-hover); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.menu-item-text small { color: var(--text-2); font-size: .75rem; }
.menu-item.is-current .icon { color: var(--accent-text); }

/* Zbaliteľná skupina: nadpis so šípkou a počtom. */
details > summary { cursor: pointer; }
.fold { border-top: 1px solid var(--line); }
.fold > summary { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: .8125rem; font-weight: 600; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t); }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { color: var(--text); }
.fold-count { margin-left: auto; color: var(--text-3); font: 400 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.fold[open] { padding-bottom: 8px; }

/* ---------- účet ---------- */

.password-field { position: relative; display: block; width: 100%; }
.password-field input { padding-right: 44px; }
.password-toggle { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.auth-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.auth-switch .link-btn { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.account { gap: 0; }
.account-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-section:first-of-type { border-top: 0; padding-top: 0; }
.account-action { margin-top: 12px; }
/* Nastavenia › Moduly: riadok s ikonou, názvom, popisom a prepínačom. Kliknúť sa dá na celý riadok. */
.module-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.module-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.module-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.module-row:hover::before { opacity: 1; }
.module-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.module-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-name { font-weight: 600; color: var(--text); }
.module-hint { color: var(--text-3); font-size: .8125rem; line-height: 1.45; }
.module-row:has(.switch:not(:checked)) .module-icon { color: var(--text-3); }
/* Prepínač zapnuté a vypnuté: checkbox s role="switch". Stav nesie poloha bodky, nielen farba.
   Zápis input.switch[type="checkbox"] prebije bežný checkbox a pole so zameraním vyššie v súbore. */
input.switch[type="checkbox"] { appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border: 0; border-radius: 999px; background: var(--text-3); cursor: pointer; transition: background-color var(--t); }
input.switch[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--t); }
input.switch[type="checkbox"]:checked { background: var(--accent); }
input.switch[type="checkbox"]:checked::before { background: var(--on-accent); transform: translateX(16px); }
input.switch[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input.switch[type="checkbox"]:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { input.switch[type="checkbox"], input.switch[type="checkbox"]::before { transition: none; } }
/* Vizuál systému v nastaveniach správcu. Dlaždice ukazujú logo a farby na pozadí panela vľavo v oboch vzhľadoch,
   preto majú pevné farby zo svetlého a tmavého vzhľadu vyššie. */
.brand-settings h3 { margin: 0; font-size: .9375rem; font-weight: 600; }
.brand-part { margin-top: 22px; }
.brand-tiles, .brand-samples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: stretch; }
.brand-tile { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.brand-tile.is-light, .brand-sample.is-light { background: #ffffff; color: #111318; }
.brand-tile.is-dark, .brand-sample.is-dark { background: #0e1014; color: #eef0f3; }
.brand-tile-logo { display: flex; align-items: center; height: 30px; min-width: 0; }
.brand-tile-logo .brand-logo { height: 30px; width: auto; }
.brand-tile-logo .brand-img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.brand-tile figcaption { font-size: .75rem; }
.brand-tile.is-light figcaption { color: #686e79; }
.brand-tile.is-dark figcaption { color: #868c97; }
.brand-dark-logo { gap: 4px; margin-top: 6px; }
.brand-dark-logo .field-label, .brand-checks-wrap .field-label { margin: 0; }
.brand-color { display: flex; align-items: center; gap: 8px; }
.brand-swatch { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--field); cursor: pointer; }
.brand-color .brand-code { flex: none; width: 11ch; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.brand-code[aria-invalid] { border-color: var(--err); }
.brand-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .8125rem; }
.brand-sample-btn { padding: 6px 12px; border-radius: var(--r-sm); background: var(--sample-accent); color: var(--sample-on); font-weight: 500; }
.brand-sample-tab { padding: 2px 0 4px; border-bottom: 2px solid var(--sample-text); font-weight: 500; }
.brand-sample-link { color: var(--sample-text); text-decoration: underline; text-underline-offset: 2px; }
.brand-checks-wrap { gap: 6px; }
.brand-checks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.brand-checks li { display: flex; align-items: flex-start; gap: 6px; color: var(--text-2); }
.brand-checks .icon { flex: none; margin-top: 2px; }
.brand-checks .is-ok .icon { color: var(--ok); }
.brand-checks .is-low .icon { color: var(--warn); }
@media (max-width: 480px) { .brand-tiles, .brand-samples { grid-template-columns: minmax(0, 1fr); } }
.code-input { max-width: 200px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.qr-code { display: block; width: 216px; height: 216px; border-radius: var(--r-sm); }
.secret-fold { width: 100%; }
.secret-key { display: block; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); font: .8125rem/1.5 ui-monospace, Consolas, monospace; word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; width: 100%; max-width: 360px; list-style: decimal inside; color: var(--text-3); }
.recovery-codes code { color: var(--text); font: .875rem/1.5 ui-monospace, Consolas, monospace; }
.menu-theme { padding: 2px 14px 8px; }
.menu-theme .segmented button { padding-inline: 8px; font-size: .75rem; }

.person-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 170px minmax(0, 1fr) 20px; align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.person-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.person-row:hover::before { opacity: 1; }
.person-who { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.person-who strong { font-weight: 500; font-size: .9375rem; }
.person-shield { display: inline-flex; color: var(--text-3); min-width: 24px; }
.person-shield.is-on { color: var(--ok); }
.person-facts { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0 14px; }
.person-actions { margin-bottom: 8px; }
.person-add { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.person-add .form-grid { width: 100%; max-width: 560px; }
.registration-mode { max-width: 320px; margin-bottom: 18px; }
.member-who a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; text-decoration-color: var(--line-2); }

/* ---------- zložky ---------- */

.section-head-row { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.section-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.my-folder .section-lead { margin-top: 0; }
.folder-lead { margin: 8px 0 0; }
.folder-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 12px; font-size: .8125rem; color: var(--text-2); }
.folder-path a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; text-decoration: none; }
.folder-path a:hover { color: var(--text); text-decoration: underline; }
.folder-path [aria-current="page"] { color: var(--text); font-weight: 500; }
.folder-rows { margin-bottom: 14px; }
.folder-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 20px; align-items: center; gap: 4px 14px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.folder-row > .icon:first-child { color: var(--text-2); }
.folder-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.folder-row:hover::before { opacity: 1; }
.folder-name { display: flex; flex-direction: column; min-width: 0; }
.folder-name strong { font-weight: 500; overflow-wrap: anywhere; }
.folder-meta { white-space: nowrap; }
.folder-copy { width: 28px; height: 28px; }
.sort-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 10px; }
.folder-new { color: var(--text); font-weight: 500; }
.check-line { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; white-space: nowrap; }
.moved-fold { margin-top: 12px; color: var(--text-2); }
/* Zákazky v zložke klienta: nad jeho vlastnými súbormi, aby bolo vidieť, čo k nemu patrí. */
.folder-jobs { margin-bottom: 22px; }
.folder-jobs h2 { margin-bottom: 10px; }
.folder-jobs .rows { margin: 0; padding: 6px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.folder-jobs .rows > :first-child { border-top: 0; }

.design-item .folder-row { padding-right: calc(var(--actions, 1) * 40px + 8px); }
.design-item > .row-actions { position: absolute; right: 0; top: 38px; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; }
.design-item:has(> .folder-row) > .row-actions { top: 50%; }
.row-actions .row-action { position: static; transform: none; }
.row-menu { width: 220px; }
.version-fold { margin: -6px 0 8px 72px; font-size: .8125rem; }
.version-fold > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--text-2); list-style: none; }
.version-fold > summary::-webkit-details-marker { display: none; }
.version-fold > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t); }
.version-fold[open] > summary::before { transform: rotate(45deg); }
.version-fold > summary:hover { color: var(--text); }
.version-label { margin-top: 8px; color: var(--text-3); font-size: .75rem; }
.version-label-old { display: flex; align-items: center; gap: 5px; color: var(--warn); }
.version-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 2px 0; }
.version-list a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; }
.version-list.is-old a { font-weight: 400; color: var(--text-2); }

/* ---------- hlavička a stránky ---------- */

/* Hlavička ako v náhľade D: názov vľavo, úlohy systému v strede, nástroje vpravo. Pri posúvaní ostáva hore a stránka pod ňou presvitá. */
.app-header { position: sticky; top: 0; z-index: var(--z-bar); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 64px; padding: 8px clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--rail) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-center { display: flex; justify-content: center; }
.brand { display: inline-flex; align-items: center; min-height: 28px; color: var(--text); text-decoration: none; }
.brand-logo { display: block; height: 24px; width: auto; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.header-send { margin-right: 6px; white-space: nowrap; }
.bell-trigger, .help-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--text-2); transition: background var(--t), color var(--t); }
.bell-trigger:hover, .bell-trigger[aria-expanded="true"], .help-trigger:hover, .help-trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.bell-trigger.has-new { color: var(--text); }
.bell-count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 2px var(--rail); color: var(--on-accent); font: 500 .625rem/17px var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
/* Upozornenia (od 0.73): veta „kto, čo, kde“ s avatarom toho, kto to urobil. Nové sú na sivom podklade s bodkou
   pri avatare, upozornenia oddeľuje prerušovaná čiara. Pod vetou je podľa druhu súbor, citát alebo tlačidlá. */
.notif-panel { width: 440px; }
.notif-head { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 10px; background: var(--raised); box-shadow: 0 1px 0 var(--line); }
.notif-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-title h2 { font: 600 1.0625rem/1.3 var(--font-display); }
.notif-close { display: grid; flex: none; place-items: center; width: 32px; height: 32px; margin-right: -6px; border-radius: var(--r-sm); color: var(--text-2); transition: background var(--t), color var(--t); }
.notif-close:hover { background: var(--surface-2); color: var(--text); }
.notif-tabs button { min-height: 32px; }
.notif-tools { display: flex; justify-content: flex-end; margin-top: -4px; }
.notif-tools .link-btn { font-size: .75rem; white-space: nowrap; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.notif-list { display: flex; flex-direction: column; margin: 0; padding: 10px 12px 12px; list-style: none; }
.notif-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 12px; border-radius: 12px; transition: background var(--t); }
.notif-item + .notif-item { margin-top: 11px; }
.notif-item + .notif-item::before { content: ''; position: absolute; top: -6px; left: 4px; right: 4px; border-top: 1px dashed var(--line-2); pointer-events: none; }
.notif-item.is-unread { background: var(--surface-2); }
.notif-item.is-read:hover { background: var(--raised-hover); }
.notif-item.is-unread:hover { background: color-mix(in srgb, var(--surface-2) 94%, var(--text)); }
.notif-item:has(.notif-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.notif-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--person) 17%, #fff); color: color-mix(in srgb, var(--person) 72%, #000); font: 600 .75rem/1 var(--font-body); user-select: none; }
:root:not([data-theme="light"]) .notif-avatar:not(.is-system) { filter: saturate(.85) brightness(.9); }
.notif-avatar.is-system { background: var(--field); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.notif-avatar.tone-ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.notif-avatar.tone-warn { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.notif-dot { position: absolute; top: -1px; left: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-line); box-shadow: 0 0 0 2px var(--surface-2); }
.notif-body { display: flex; flex-direction: column; min-width: 0; }
.notif-say { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.notif-say strong { color: var(--text); font-weight: 600; }
.notif-link { color: inherit; font: inherit; text-align: left; text-decoration: none; }
.notif-link::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.notif-link:focus-visible { outline: none; }
.notif-status { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 500 .6875rem/1.4 var(--font-body); vertical-align: 1px; white-space: nowrap; }
.notif-status.status-approved { background: var(--ok-soft); box-shadow: none; color: var(--ok); }
.notif-status.status-changes_requested { background: var(--warn-soft); box-shadow: none; color: var(--warn); }
.notif-status.status-in_review { background: var(--info-soft); box-shadow: none; color: var(--info); }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 3px 0 0; color: var(--text-3); font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.notif-sep { margin: 0 6px; }
.notif-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.notif-file-type { display: grid; flex: none; place-items: center; width: 32px; height: 36px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-text); font: 700 .5625rem/1 var(--font-body); letter-spacing: .02em; }
.notif-file-text { display: flex; flex-direction: column; min-width: 0; }
.notif-file-name { overflow: hidden; color: var(--text); font-size: .8125rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.notif-file-meta { color: var(--text-3); font-size: .75rem; font-variant-numeric: tabular-nums; }
.notif-quote { display: -webkit-box; margin-top: 8px; padding: 1px 0 1px 10px; overflow: hidden; border-left: 2px solid var(--line-2); color: var(--text-2); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.notif-detail { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--text-2); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Tlačidlá ležia nad odkazom celého upozornenia, aby klik na ne upozornenie neotvoril. */
.notif-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notif-done { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--text-2); font-size: .75rem; }
.notif-done.is-ok { color: var(--ok); }
.notif-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 12px; text-align: center; }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; padding: 14px clamp(16px, 2vw, 24px); border-top: 1px solid var(--line); color: var(--text-2); font-size: .8125rem; }
.site-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.site-footer-link { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.site-footer-version { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; color: var(--text-2); text-decoration: none; transition: color var(--t); }
.site-footer-version:hover { color: var(--text); }
.site-footer-version:hover .site-footer-news { text-decoration: underline; text-underline-offset: 3px; }
.site-footer-version .tab-badge.is-new { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.site-footer-version { font-family: var(--font-body); font-size: .75rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.site-footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.site-footer-legal { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-2); font-size: .75rem; text-decoration: none; transition: color var(--t); }
.site-footer-legal:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-legal > * { max-width: 720px; }
/* Ľavý okraj ako pri ostatných stránkach, riadky textu kratšie na čítanie. */
.page-news > * { max-width: 720px; }
.release-date { margin-left: auto; }
.release-count { margin-top: 2px; }
.release-items { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.release-items li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.release-n { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-3); color: var(--text); font: 500 .6875rem/24px var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
.support-form textarea { width: 100%; }
.support-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.support-body { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.tool-support { flex: none; }
/* Pomocník: bodka na otázniku znamená novú verziu, ktorú človek ešte nevidel. */
.help-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.help-panel > .menu-section:first-child { border-top: 0; }
.help-panel .menu-item kbd { color: var(--text-2); }
.page-help > * { max-width: 760px; }
.page-help > .help-keys { max-width: 1040px; margin-top: 24px; }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.help-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; text-decoration: none; transition: background var(--t), border-color var(--t); }
.help-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.help-card > svg { flex: none; margin-top: 1px; color: var(--text-2); }
.help-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-card-text strong { font-weight: 500; }
.help-card-text span { color: var(--text-2); font-size: .8125rem; }
.help-guide { padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.help-guide h3 { margin-bottom: 6px; font-size: .875rem; }
.help-guide p { max-width: 68ch; margin: 0 0 6px; color: var(--text-2); }
.help-guide p:last-child { margin-bottom: 0; }
.help-card-wide { grid-column: 1 / -1; }
.help-card-wide > svg { color: var(--accent-text); }
.keys-need { display: block; color: var(--text-3); font-size: .75rem; }

/* Sprievodca systémom: úvod s Začnite tu, úlohami a kapitolami, téma s obsahom vľavo a textom vpravo, slovník pojmov.
   Text je v stĺpci do 68 znakov, aby sa dobre čítal aj na širokom monitore. */
.guide-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 0 20px; }
.guide-tools .guide-search { max-width: 520px; }
.guide-found:empty { display: none; }
.guide-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.guide-chapter { padding: 16px 18px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-chapter-head { display: flex; align-items: center; gap: 10px; }
.guide-chapter-head > svg { flex: none; color: var(--accent-text); }
.guide-chapter-head h3 { font-size: 1rem; }
.guide-chapter-lead { margin: 4px 0 8px 30px; max-width: 62ch; }
.guide-list, .guide-results { list-style: none; padding: 0; }
.guide-list li + li { border-top: 1px solid var(--line); }
.guide-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 9px 30px; margin: 0 -10px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; transition: background var(--t); }
.guide-item:hover { background: var(--surface-2); }
.guide-item strong { font-weight: 500; }
.guide-item span { color: var(--text-2); font-size: .8125rem; max-width: 72ch; }
.guide-item small { color: var(--text-3); font-size: .75rem; }
.guide-results { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.guide-results .guide-item { margin: 0; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); }
.guide-results .guide-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.guide-item mark { background: var(--sel-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--accent-line); }
.guide-none { padding: 12px 0; }
.guide-none .btn { margin-top: 8px; }

/* Začnite tu: krátky úvod pre nováčika a cesta návrhu Portalom v očíslovaných krokoch. */
.guide-start { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-start-intro h2 { margin-bottom: 6px; font-size: 1.125rem; }
.guide-start-intro p { max-width: 64ch; margin: 0 0 14px; color: var(--text-2); line-height: 1.55; }
.guide-start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-start-flow { padding-top: 16px; border-top: 1px solid var(--line); }
.guide-start-flow h3 { margin-bottom: 10px; color: var(--text-2); font-size: .8125rem; font-weight: 500; }
.guide-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-flow li { position: relative; display: flex; }
/* Tenká čiara od čísla k ďalšiemu kroku, aby bolo vidno, že kroky idú po sebe. */
.guide-flow li:not(:last-child)::before { content: ""; position: absolute; top: 20px; left: 40px; right: -8px; height: 1px; background: var(--line-2); }
.guide-flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 9px 10px 10px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; transition: background var(--t); }
.guide-flow-step:hover { background: var(--surface-2); }
.guide-flow-num { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--surface); color: var(--accent-text); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.guide-flow-text { display: flex; flex-direction: column; gap: 2px; }
.guide-flow-text strong { font-weight: 500; }
.guide-flow-text span { color: var(--text-2); font-size: .8125rem; line-height: 1.45; }
.guide-block .guide-flow { margin-top: 2px; }

/* Čo chcete urobiť: časté úlohy ako dlaždice, každá vedie na tému s postupom. */
.guide-section { margin-bottom: 36px; }
.guide-section > h2 { margin-bottom: 4px; font-size: 1.0625rem; }
.guide-section-lead { max-width: 64ch; margin: 0 0 14px; font-size: .875rem; }
.guide-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-tasks li { display: flex; }
.guide-task { display: flex; align-items: center; gap: 12px; flex: 1; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; transition: background var(--t), border-color var(--t); }
.guide-task:hover { border-color: var(--line-2); background: var(--surface-2); }
.guide-task-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.guide-task-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.guide-task-text strong { font-weight: 500; line-height: 1.35; }
.guide-task-text span { color: var(--text-2); font-size: .8125rem; line-height: 1.4; }
.guide-task > svg:last-child { flex: none; color: var(--text-3); transition: color var(--t), transform var(--t); }
.guide-task:hover > svg:last-child { color: var(--accent-text); transform: translateX(2px); }

/* Výsledky hľadania: najprv pojmy, potom témy. */
.guide-results-group + .guide-results-group { margin-top: 24px; }
.guide-results-group > h2 { margin-bottom: 10px; color: var(--text-2); font-size: .8125rem; font-weight: 500; }

/* Pojmy v téme: zavreté ukážu len názvy, otvorené aj vysvetlenia. */
.guide-terms { margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-terms > summary { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); list-style: none; transition: background var(--t); }
.guide-terms > summary::-webkit-details-marker { display: none; }
.guide-terms > summary:hover { background: var(--surface-2); }
.guide-terms > summary > svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.guide-terms > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 6px 4px 0 auto; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform var(--t); }
.guide-terms[open] > summary::after { margin-top: 9px; transform: rotate(-135deg); }
.guide-terms[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.guide-terms-head { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.guide-terms-head strong { font-weight: 500; }
.guide-terms-names { color: var(--text-2); font-size: .8125rem; line-height: 1.45; }
.guide-terms[open] .guide-terms-names { display: none; }
.guide-terms-list { margin: 0 14px; border-top: 1px solid var(--line); }
.guide-terms-list > div { padding: 10px 0; }
.guide-terms-list > div + div { border-top: 1px solid var(--line); }
.guide-terms-list dt { font-weight: 500; }
.guide-terms-list dd { max-width: 68ch; margin: 2px 0 0; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.guide-terms-all, .guide-term-more { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-size: .8125rem; text-decoration: none; }
.guide-terms-all { margin: 2px 14px 12px; }
.guide-terms-all:hover, .guide-term-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Slovník pojmov: názov vľavo, vysvetlenie vpravo, aby sa dal zoznam rýchlo prejsť očami. */
.guide-glossary-page .guide-tools { margin-top: 0; }
.guide-term-group + .guide-term-group { margin-top: 28px; }
.guide-term-group .section-head h2 { font-size: 1rem; }
.guide-term-list { border-top: 1px solid var(--line); }
.guide-term { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin: 24px; transition: background var(--t), box-shadow var(--t); }
.guide-term:focus { outline: none; }
.guide-term h3 { grid-column: 1; grid-row: 1 / span 2; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.guide-term p { grid-column: 2; max-width: 68ch; margin: 0; color: var(--text-2); line-height: 1.55; }
.guide-term-more { grid-column: 2; justify-self: start; }
.guide-term.is-target { border-radius: 2px; background: var(--sel-bg); box-shadow: 0 0 0 8px var(--sel-bg); }
.guide-term mark { background: var(--sel-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--accent-line); }
.guide-toc a.guide-toc-glossary { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text); font-weight: 500; }
.guide-toc-glossary > svg { flex: none; color: var(--accent-text); }

.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
/* Obsah je vždy celý, bez vlastného posuvníka, a ide so stránkou. */
.guide-toc { display: flex; flex-direction: column; gap: 14px; padding: 12px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-toc .guide-search { max-width: none; flex: none; }
.guide-toc-chapter + .guide-toc-chapter { margin-top: 12px; }
.guide-toc-title { margin-bottom: 2px; color: var(--text-3); font-size: .75rem; font-weight: 500; }
.guide-toc ul { list-style: none; padding: 0; }
.guide-toc a { display: block; padding: 5px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: .8125rem; line-height: 1.35; text-decoration: none; transition: background var(--t), color var(--t); }
.guide-toc a:hover { background: var(--surface-2); color: var(--text); }
.guide-toc a[aria-current="page"] { background: var(--sel-bg); color: var(--accent-text); font-weight: 500; }
.guide-toc li[hidden], .guide-toc-chapter[hidden] { display: none; }

.guide-topic { max-width: 840px; }
/* Pod textom témy, obsahom a slovníkom je pevný podklad, mriežka pozadia by inak rušila pri čítaní. */
.guide-main { min-width: 0; max-width: 840px; }
.guide-paper { padding: 26px 32px 30px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-paper .guide-where, .guide-paper .guide-terms { background: var(--field); }
.guide-paper .guide-terms > summary:hover { background: var(--surface-2); }
.guide-main > .guide-pager { margin-top: 16px; padding-top: 0; border-top: 0; }
.guide-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.guide-topic h1 { margin-bottom: 6px; }
.guide-where { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-where > svg { flex: none; color: var(--text-2); }
.guide-where-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.guide-label { color: var(--text-3); font-size: .75rem; }
.guide-where .btn { flex: none; }
.guide-admin { display: flex; align-items: center; gap: 6px; margin: -6px 0 16px; }
.guide-text { max-width: 68ch; margin-bottom: 10px; line-height: 1.6; }
.guide-block { margin-top: 26px; }
.guide-block > h2 { margin-bottom: 10px; font-size: 1rem; }
.guide-steps { display: flex; flex-direction: column; gap: 8px; padding-left: 0; list-style: none; counter-reset: guide-step; }
.guide-steps li { position: relative; padding-left: 34px; max-width: 68ch; line-height: 1.55; counter-increment: guide-step; }
.guide-steps li::before { content: counter(guide-step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: .75rem; font-weight: 600; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.guide-fields { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.guide-fields dt, .guide-fields dd { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.guide-fields dt { padding-right: 18px; font-weight: 500; }
.guide-fields dd { color: var(--text-2); max-width: 68ch; }
.guide-tips { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; list-style: disc; }
.guide-tips li { max-width: 68ch; color: var(--text-2); line-height: 1.55; }
.guide-tips li::marker { color: var(--text-3); }
.guide-related { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.guide-related a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .8125rem; text-decoration: none; transition: background var(--t), border-color var(--t); }
.guide-related a:hover { border-color: var(--line-2); background: var(--surface-2); }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.guide-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; transition: background var(--t), border-color var(--t); }
.guide-pager a:hover { border-color: var(--line-2); background: var(--surface-2); }
.guide-pager small { color: var(--text-3); font-size: .75rem; }
.guide-pager span { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
.guide-pager-next { grid-column: 2; text-align: right; align-items: flex-end; }
/* Odkaz z obrazovky na tému sprievodcu. */
.guide-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: .8125rem; text-decoration: none; white-space: nowrap; }
.guide-link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.disclaimer .guide-link, .section-head-small .guide-link { align-self: flex-start; }
.disclaimer p { margin: 0; }
@media (max-width: 900px) {
  .guide-chapters { grid-template-columns: minmax(0, 1fr); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guide-flow { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-flow li:nth-child(3n)::before { display: none; }
  /* Na úzkej obrazovke je obsah na úvodnej stránke sprievodcu, téma ukáže len text a cestu späť. */
  .guide-toc { display: none; }
}
@media (max-width: 560px) {
  .guide-fields { grid-template-columns: minmax(0, 1fr); }
  .guide-fields dt { padding-bottom: 0; border-bottom: 0; }
  .guide-fields dd { padding-top: 4px; }
  .guide-where { flex-wrap: wrap; }
  .guide-pager { grid-template-columns: minmax(0, 1fr); }
  .guide-pager-next { grid-column: 1; }
  .guide-start { padding: 18px 16px 14px; }
  .guide-paper { padding: 18px 16px 22px; }
  /* Na telefóne idú kroky pod sebou a čiara vedie zvisle od čísla k číslu. */
  .guide-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guide-flow li:not(:last-child)::before, .guide-flow li:nth-child(3n):not(:last-child)::before { display: block; top: 33px; bottom: -9px; left: 20px; right: auto; width: 1px; height: auto; }
  .guide-flow-step { flex-direction: row; align-items: flex-start; gap: 12px; }
  .guide-flow-num { flex: none; }
  .guide-term { grid-template-columns: minmax(0, 1fr); }
  .guide-term h3 { grid-row: auto; }
  .guide-term p, .guide-term-more { grid-column: 1; }
}
/* Zvonček ani otáznik nie sú na kraji hlavičky, široká ponuka by na telefóne vyšla z obrazovky. */
@media (max-width: 560px) {
  .notif-panel, .help-panel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100dvh - 76px); }
  .help-cards { grid-template-columns: minmax(0, 1fr); }
  /* V otvorenom návrhu na telefóne má prednosť názov návrhu. Skratky sú pre klávesnicu, pomocník je v hlavičke ostatných stránok. */
  .v-top .help { display: none; }
}
.app-name { color: var(--text-2); font-size: .8125rem; white-space: nowrap; text-decoration: none; }
.app-name:hover { color: var(--text); }
.menu-home { border-top: 0; }
.menu-home + .menu-who { border-top: 1px solid var(--line); }
.lang-switch button { min-width: 36px; padding-inline: 8px; font-size: .75rem; }
.dev-badge { padding-left: 14px; border-left: 1px solid var(--line-2); color: var(--text-3); font-size: .75rem; }

#app:has(> .site-footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* Ľavý pás ako v náhľade D: logo, tlačidlo na zbalenie a hlavné stránky. Rozbalený ukazuje pri ikonách aj názvy, zbalený len ikony.
   Vybraná stránka je fialová. Pomocník a účet sú vpravo hore v hlavičke. */
.app-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.rail { position: sticky; top: 0; z-index: var(--z-bar); display: flex; flex-direction: column; gap: 4px; width: 224px; height: 100vh; height: 100dvh; padding: 12px; overflow: hidden auto; border-right: 1px solid var(--line); background: var(--rail); scrollbar-width: none; transition: width .2s ease, padding .2s ease; }
.rail::-webkit-scrollbar { display: none; }
.rail-closed > .rail { width: 64px; padding-inline: 10px; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 18px; }
.rail-closed .rail-top { flex-direction: column; }
/* Logo bez rámčeka, vo farbe textu: vo svetlom čierne, v tmavom svetlé. Od 0.11 o štvrtinu nižšie ako ovládače vedľa neho. */
.brand.rail-logo { display: flex; flex: none; align-items: center; height: 40px; min-height: 0; padding: 0 2px; border-radius: var(--r-sm); color: var(--text); }
.rail-logo .brand-logo { height: 30px; width: auto; }
.rail-closed .rail-logo .brand-logo { height: auto; width: 30px; }
/* Vlastné logo z Vizuálu systému drží výšku loga vcg a do šírky sa zmestí vedľa tlačidla na zbalenie. Logo pre tmavý vzhľad je voliteľné. */
.brand-custom { display: flex; align-items: center; }
.brand-custom .brand-img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
:root[data-theme="dark"] .brand-custom .only-light, :root[data-theme="light"] .brand-custom .only-dark { display: none; }
.rail-logo .brand-custom { max-width: 150px; }
.rail-closed .rail-logo .brand-custom { width: 40px; height: 30px; }
.rail-closed .rail-logo .brand-custom .brand-img { width: 100%; }
.rail-toggle { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 9px; color: var(--text-3); transition: background var(--t), color var(--t); }
.rail-toggle:hover { background: var(--surface-2); color: var(--text); }
.rail-btn { display: flex; flex: none; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 9px; color: var(--text-2); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--t), color var(--t); }
.rail-btn .icon { flex: none; color: var(--text-3); transition: color var(--t); }
.rail-btn:hover, .rail-btn:hover .icon { background: var(--surface-2); color: var(--text); }
.rail-btn[aria-current="page"], .rail-btn[aria-current="page"] .icon { background: var(--accent); color: var(--on-accent); }
.rail-btn:focus-visible { outline-offset: 1px; }
.rail-label { overflow: hidden; text-overflow: ellipsis; }
.rail-closed .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Ohlásená časť ponuky má pri názve značku čoskoro. V zbalenom páse a na mobile ju povie popis pri ikone. */
.rail-btn:has(.rail-soon) { gap: 10px; }
.rail-soon { flex: none; margin-left: auto; padding: 1px 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-size: .6875rem; font-weight: 500; line-height: 1.5; }
.rail-btn[aria-current="page"] .rail-soon { background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
.app-shell .v-top .brand { display: none; }
.app-name { font-size: .9375rem; font-weight: 500; color: var(--text); }
.page-wrap { flex: 1 0 auto; padding: 28px clamp(16px, 2.4vw, 32px) 72px; }
/* Telefón: pás ikon je riadok nad hlavičkou a nedá sa rozbaliť. V návrhu má prednosť plocha návrhu. */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  /* Relatívne: skryté popisy ikon ostanú v páse. Keby sa ikony nezmestili, posúva sa len pás, nie celá stránka. */
  .rail, .rail-closed > .rail { position: relative; flex-direction: row; align-items: center; width: auto; height: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .rail-top { margin: 0 8px 0 0; }
  .rail-logo .brand-logo, .rail-closed .rail-logo .brand-logo { height: 26px; width: auto; }
  .rail-logo .brand-custom, .rail-closed .rail-logo .brand-custom { max-width: 96px; }
  .rail-toggle { display: none; }
  .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-shell.is-viewer > .rail { display: none; }
  .app-header { position: relative; display: flex; justify-content: space-between; }
  .header-center:empty { display: none; }
}
/* Úzky telefón: v riadku je až desať ikon. Medzery sa zúžia, aby sa zmestili bez posúvania. Ikony sú tesne vedľa seba, 42 bodov široké a 44 vysoké. */
@media (max-width: 480px) {
  .rail, .rail-closed > .rail { gap: 0; padding-inline: 6px; }
  .rail-top { margin-right: 2px; }
  .rail-logo .brand-logo, .rail-closed .rail-logo .brand-logo { height: 22px; }
  .rail-logo .brand-custom, .rail-closed .rail-logo .brand-custom { max-width: 56px; }
  .rail-btn { padding: 0 11px; }
  /* Od ôsmich položiek, napríklad štúdio s Marketingom, sú ikony 38 bodov široké, aby sa zmestili na 390 bodov. */
  .rail:has(> a:nth-of-type(8)) .rail-btn { padding: 0 9px; }
  /* Deväť položiek má štúdio s Kalkuláciami a Marketingom. Ikony sú 32 bodov široké, stále 44 vysoké, aby sa zmestili aj na 375 bodov. */
  .rail:has(> a:nth-of-type(9)) .rail-btn { padding: 0 6px; }
  /* Desať položiek má štúdio aj s Lokálnou schránkou ukážky. Ikony sú 30 bodov široké. */
  .rail:has(> a:nth-of-type(10)) .rail-btn { padding: 0 5px; }
}
.page { max-width: 1120px; margin: 0 auto; }
.page-narrow { max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.page-narrow .lead { margin-bottom: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.lead { color: var(--text-2); font-size: .9375rem; max-width: 62ch; margin-bottom: 14px; }
.next-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; }
.next-step-text { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text); }
.next-step-text.sev-warn { color: var(--warn); }
.next-step-text.sev-ok { color: var(--ok); }
.next-step .link-btn { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.status-mobile { display: none; }
.crumb { margin-bottom: 14px; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--text-2); text-decoration: none; font-size: .8125rem; }
.crumb a:hover { color: var(--text); }
.section { margin-top: 40px; }
.section-first { margin-top: 24px; }
.section > h2, .section-head { margin-bottom: 12px; }
.section-head { display: flex; align-items: baseline; gap: 10px; }
.section-count { color: var(--text-3); font: 400 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.section-lead { margin: -6px 0 12px; max-width: 62ch; }
.inline-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 26px; }
.panel-body .inline-form { padding: 2px 0 18px; margin: 0; }
.panel-body .inline-form h2 { font-size: 1.0625rem; }
.panel-body .dropzone { padding: 16px; }

.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 4px; }
.list-tools:empty { display: none; }
.search-field { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-field input { padding-left: 34px; }

.rows { display: flex; flex-direction: column; }
.design-row, .waiting-row {
  position: relative; isolation: isolate;
  display: grid; align-items: center; gap: 6px 16px;
  grid-template-columns: 56px minmax(0, 1fr) auto 136px;
  padding: 10px 0; border-top: 1px solid var(--line);
  text-decoration: none;
}
.waiting-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) 20px; }
.design-row::before, .waiting-row::before, .demo-user::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.design-row:hover::before, .waiting-row:hover::before, .demo-user:hover::before { opacity: 1; }
.design-item { position: relative; }
.design-item .design-row { padding-right: calc(var(--actions, 1) * 38px + 8px); }
.row-action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.design-comments { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.row-thumb { width: 56px; height: 56px; object-fit: contain; background: var(--thumb-bg); }
.row-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.design-name { display: flex; flex-direction: column; min-width: 0; }
.design-name strong { font-weight: 500; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waiting-reason { display: inline-flex; align-items: flex-start; gap: 8px; }
.waiting-reason .icon { margin-top: 2px; }
.waiting-none { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.waiting-none .icon { color: var(--ok); }
.row-go { color: var(--text-3); }
.project-block { margin-top: 24px; }
.project-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 8px; }
.project-head h3 { font: 500 1.0625rem/1.3 var(--font-display); }
.project-head a { text-decoration: none; }
.project-head h3 a { display: inline-block; padding-block: 2px; }
.project-head h3 a:hover { text-decoration: underline; }
.project-go { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin-left: auto; color: var(--text-3); font-size: .8125rem; transition: color var(--t); }
.project-go:hover { color: var(--text); }
.project-go .icon { align-self: center; }
.project-empty { padding: 10px 0; border-top: 1px solid var(--line); }
.show-more { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .8125rem; transition: color var(--t); }
.show-more:hover { color: var(--text); }
.locked-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.locked-row:hover { color: var(--text); }
.plain-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.token-name { display: flex; flex-direction: column; min-width: 0; }
.token-name strong { font-weight: 500; }
.archived > summary { color: var(--text-2); font-size: .875rem; padding: 8px 0; }
.archived > summary:hover { color: var(--text); }
.archived .rows { margin-top: 8px; }
/* Doba uchovania: kedy sa dáta archivovaného projektu zmažú, a záznam, ktorý po nich ostal. */
.archived-purge { margin-left: 8px; }
.archive-notice { align-items: center; margin-top: 6px; }
.archive-notice .icon { flex: none; color: var(--text-3); }
table.purge-record td { font-size: .8125rem; }
table.purge-record td > div + div { margin-top: 4px; }

/* Prístup podpory: každý prístup v samostatnom rámiku, platný zvýraznený. Pás navrchu, kým je prihlásená podpora. */
.support-grants { display: grid; gap: 10px; margin-top: 14px; }
.support-grant { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); }
.support-grant.is-live { border-color: var(--accent-line); }
.support-grant-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.support-grant-project { font-size: .875rem; }
.support-grant-actions { margin-top: 6px; gap: 6px; }
.support-state { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-3); }
.support-state.is-active { color: var(--warn); }
.support-state.is-waiting { color: var(--text-2); }
.dialog:has(.support-log) { width: min(720px, calc(100vw - 32px)); }
.support-log .table-wrap { max-height: 55vh; overflow: auto; }
.support-path { font: .75rem/1.4 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.support-bar { display: flex; align-items: center; gap: 10px; padding: 6px 16px; background: var(--warn-soft); border-bottom: 1px solid var(--line); color: var(--text); font-size: .8125rem; }
.support-bar > .icon { flex: none; color: var(--warn); }
.support-bar > span { flex: 1 1 0; min-width: 0; }
.support-bar > .btn { flex: none; }
.app-shell.is-viewer > .app-main.has-support-bar { height: 100vh; height: 100dvh; }
.app-main.has-support-bar > .fullscreen { flex: 1 1 auto; min-height: 0; height: auto; }
.support-link-facts { display: grid; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.support-link-facts li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); }
.support-link-facts .icon { flex: none; margin-top: 2px; color: var(--text-3); }

.demo-users { display: flex; flex-direction: column; margin-top: 8px; }
.demo-user { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid var(--line); }
.demo-user .icon { color: var(--text-3); }
.demo-user-text { display: flex; flex-direction: column; min-width: 0; }
.demo-user strong { font-weight: 500; }
.demo-user-text span { font-size: .8125rem; }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 18px 0 22px; overflow: auto hidden; scrollbar-width: none; }
.tabs a { padding: 9px 0; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; transition: color var(--t); }
.tabs a:hover { color: var(--text); }
.tabs a.is-active { color: var(--text); border-bottom-color: var(--accent-line); }
.tabs a:focus-visible { outline-offset: -2px; }
.tab-count { margin-left: 6px; color: var(--text-3); font: 400 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.tab-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-head:has(.tab-actions button[hidden]):not(:has(.lead)) { display: none; }
.tab-head .lead { margin: 0; flex: 1 1 320px; }
/* Zákazka bez klienta: ponuka priradiť klienta nad nahrávaním, aby v Zložkách neostala v Nezaradených. */
.unsorted-notice { align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: .8125rem; }
.unsorted-notice > .icon { color: var(--accent-text); flex: none; }
.unsorted-notice > span { flex: 1 1 280px; }

.tab-actions { display: flex; gap: 8px; flex: none; }

.dropzone { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t), background var(--t); }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent-line); background: var(--row-hover); }
.dropzone.has-file { border-style: solid; }
.dropzone-icon { flex: none; color: var(--text-2); }
.dropzone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dropzone strong { font-weight: 500; }
input[type="file"]:focus-visible + .dropzone { outline: 2px solid var(--focus); outline-offset: 2px; }

table.data.members th, table.data.members td { vertical-align: middle; padding-block: 10px; }
table.data.members tbody th { color: var(--text); font-weight: 400; text-align: left; padding-right: 20px; min-width: 200px; white-space: normal; border-bottom: 1px solid var(--line); }
table.members tr.is-inactive strong { color: var(--text-3); }
table.members .cell-check { text-align: center; }
table.members thead th:nth-child(n+3):nth-child(-n+9) { text-align: center; }
table.data.members thead th:not(:first-child), table.data.members td { padding-inline: 8px; }
table.members .cell-check input { margin: 0 auto; display: block; }
table.members input[type="date"], table.members select { min-height: 32px; padding-block: 4px; font-size: .8125rem; width: auto; }
table.members .cell-action { text-align: right; }
.th-tip { border-bottom: 1px dotted var(--line-2); cursor: help; }
.member-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member-who strong { font-weight: 500; }

.final-files { display: flex; flex-direction: column; }
.final-file { padding: 16px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.final-file > .status-text { align-self: flex-start; }
.final-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.final-title { min-width: 0; }
.final-head strong { font-weight: 500; font-size: .9375rem; }
.final-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.final-actions .link-danger { margin-left: auto; }
.grants { display: flex; flex-direction: column; gap: 2px; }
.grants li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 4px 0; min-height: 34px; }
.grants li.is-inactive .grant-who { color: var(--text-3); }
.grants li.muted { display: block; }
.grant-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.grant-lock { display: inline-flex; color: var(--text-3); }
.grant-form { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }

.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .8125rem; }
table.data th { text-align: left; color: var(--text-3); font-weight: 500; padding: 6px 12px 6px 0; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
/* Hlavička tabuľky ako v náhľade D: sivý pás, malé písmo s rovnakou šírkou znakov, veľké písmená. */
table.data thead th { padding: 9px 12px; border-bottom: 0; background: var(--field); font: 500 .6875rem/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
table.data thead th:first-child { border-radius: 6px 0 0 6px; }
table.data thead th:last-child { border-radius: 0 6px 6px 0; }
table.data td, table.data tbody th { padding-left: 12px; }
table.data td { padding: 6px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data td.num { white-space: nowrap; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--surface-2); }
.sev-error { color: var(--err); }
.sev-warn { color: var(--warn); }
.sev-ok { color: var(--ok); }
.sev-info { color: var(--info); }

.settings-form { max-width: 520px; }
.checklist-edit { margin: 10px 0; display: flex; flex-direction: column; }
.checklist-edit li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 4px 0; }
.section form.row input { flex: 1 1 280px; width: auto; }

.outbox { margin-top: 16px; }
.mail { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mail header { display: flex; flex-direction: column; }
.mail header strong { font-weight: 500; }
.mail-body { white-space: pre-wrap; color: var(--text-2); max-width: 75ch; overflow-wrap: anywhere; }

.kv-list { display: flex; flex-direction: column; gap: 4px; }
.kv { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 12px; font-size: .8125rem; }
.kv dt { color: var(--text-3); }
.kv dd { overflow-wrap: anywhere; }
.kv-inline { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; padding: 3px 0; }
ul.plain li { padding: 3px 0; font-size: .8125rem; }

/* Zákazkový list: hlavička, položky so špecifikáciou a pripomienky. Riadky s linkami ako finálne súbory, bez kariet. */
.sheet-head-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 14px; }
.sheet-head-line .section-head { margin-bottom: 0; }
.sheet-number { font: 500 .9375rem/1 var(--font-body); color: var(--text); }
.sheet-status-line { display: flex; align-items: center; gap: 10px; }
.sheet-status { color: var(--text); }
.sheet-form { max-width: 760px; }
.sheet-facts { max-width: 640px; }
.sheet-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.sheet-section-head .section-head { margin-bottom: 0; }
.sheet-items { list-style: none; margin: 0; padding: 0; }
.sheet-item { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.sheet-item:last-child { border-bottom: 1px solid var(--line); }
.sheet-item-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 14px; }
.sheet-item-num { color: var(--text-3); font-size: .8125rem; }
.sheet-item-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sheet-item-title strong { font-weight: 500; font-size: .9375rem; }
.sheet-item-qty { font-weight: 500; white-space: nowrap; }
.sheet-item-actions { display: flex; align-items: center; gap: 2px; align-self: center; }
.sheet-item-actions .btn { margin-right: 6px; }
.sheet-spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px 24px; margin: 0 0 0 38px; font-size: .8125rem; }
.sheet-spec dt { color: var(--text-3); font-size: .75rem; }
.sheet-spec dd { margin: 0; overflow-wrap: anywhere; }
/* Ponuky v liste: číslo, stav a súhrn v riadku, akcie vpravo. */
.sheet-offers { list-style: none; margin: 0; padding: 0; }
.sheet-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.sheet-offer.is-cancelled .sheet-offer-main > strong { color: var(--text-2); text-decoration: line-through; }
.sheet-offer-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.sheet-offer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-offers-section > .muted { max-width: 80ch; margin: 0 0 8px; }
/* Podklad k faktúre: odberateľ nad zoznamom, riadky a súčty v rozbalení. */
.invoice-customer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 10px 0 12px; }
.invoice-address { margin: 2px 0 0; }
.invoice-missing { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; }
.invoice-row { flex-direction: row; }
.invoice-more { flex: 1 1 100%; }
.invoice-more summary { cursor: pointer; font-size: .8125rem; color: var(--text-2); }
.invoice-detail { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.invoice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 20px; margin: 0; }
.invoice-facts .kv { display: block; }
.invoice-facts dt { color: var(--text-2); font-size: .8125rem; }
.invoice-facts dd { margin: 2px 0 0; }
.invoice-lines .num { text-align: right; white-space: nowrap; }
.invoice-lines tfoot th, .invoice-lines tfoot td { font-weight: 500; }
.invoice-lines .invoice-total th, .invoice-lines .invoice-total td { font-weight: 700; }

/* Ponuka na papieri: položky v tabuľke, náklady pod položkou, súčty vpravo. */
.offer-table { width: 100%; }
.offer-table thead th { font-size: .75rem; color: var(--paper-2); font-weight: 500; border-bottom: 1px solid var(--paper-text); }
.offer-table .num { text-align: right; white-space: nowrap; }
.report-table.offer-table .offer-item > tr:first-child > * { padding-top: 10px; vertical-align: top; }
.report-table.offer-table .offer-item > tr > * { border-bottom: 0; }
.offer-item { border-bottom: 1px solid var(--paper-line); break-inside: avoid; }
.report-table.offer-table .offer-item th { font-weight: 400; }
.offer-item th > strong { display: block; font-weight: 600; font-size: .875rem; }
.offer-meta { display: block; color: var(--paper-2); font-size: .8125rem; font-weight: 400; }
.report-table.offer-table .offer-options > td { padding: 4px 0 10px 16px; }
.offer-options-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.offer-options-table caption { text-align: left; font-weight: 600; padding-bottom: 2px; }
.report-table .offer-options-table th, .report-table .offer-options-table td { padding: 2px 12px 2px 0; border-bottom: 0; font-weight: 400; }
.report-table .offer-options-table thead th { color: var(--paper-2); font-size: .75rem; }
.report-table .offer-options-table .is-chosen > * { font-weight: 600; }
.offer-totals { display: grid; justify-content: end; gap: 4px; margin: 14px 0 0; }
.offer-totals > div { display: grid; grid-template-columns: auto minmax(110px, auto); gap: 24px; }
.offer-totals dt { color: var(--paper-2); text-align: right; }
.offer-totals dd { margin: 0; text-align: right; }
.offer-gross dt, .offer-gross dd { color: var(--paper-text); font-weight: 700; font-size: 1.0625rem; }
.offer-cancelled { margin: 6px 0 0; font-weight: 700; color: var(--err); }
.offer-vat-missing { text-align: right; }

.sheet-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; padding-top: 12px; font-size: .875rem; }
.sheet-remarks { list-style: none; margin: 14px 0 0; padding: 0; }
.sheet-remark { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.sheet-remark-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sheet-remark-head strong { font-weight: 500; }
.sheet-remark-head .btn { margin-left: auto; }
.sheet-remark.is-done .sheet-text { color: var(--text-2); }
.sheet-remark-form { max-width: 640px; }
.sheet-record { margin-top: 18px; }
/* Úprava položky: špecifikácia tlače je vlastná skupina polí, obálka a vnútro sú pod sebou na sivej ploche. */
.sheet-spec-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-spec-form[hidden] { display: none; }
.sheet-spec-form > h3 { font: 450 1.0625rem/1.3 var(--font-display); color: var(--text); }
.sheet-spec-form > h3 + p { margin-top: -10px; }
.sheet-parts { gap: 10px; align-items: stretch; }
.sheet-part { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border-radius: 8px; background: var(--surface-2); }
.sheet-part > h4 { font: 500 .8125rem/1.4 var(--font-body); color: var(--text); }
.sheet-size { display: flex; align-items: center; gap: 8px; }
.sheet-size input { flex: 1 1 0; min-width: 0; }
.sheet-finishing { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px 20px; }
.sheet-finish { display: flex; flex-direction: column; gap: 6px; }
.sheet-finish input[type="text"] { min-height: 32px; padding-block: 4px; font-size: .8125rem; }
.sheet-dialog [aria-invalid="true"] { border-color: var(--err); }
/* Porovnanie položky s PDF návrhu: nezhoda na žltej ploche, zhoda a technické farby ako tichý riadok. */
.sheet-pdf { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0 38px; font-size: .8125rem; }
.sheet-pdf-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.sheet-pdf-line.muted { font-size: .75rem; }
.sheet-pdf-ok { color: var(--text-2); flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.sheet-pdf-ok svg { flex: none; margin-top: 1px; color: var(--ok); }
.sheet-pdf-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--text); }
.sheet-pdf-warn > svg { flex: none; margin-top: 1px; color: var(--warn); }
.sheet-pdf-warn strong { font-weight: 500; }
.sheet-pdf-warn ul { margin: 4px 0 0; padding-left: 18px; }
.sheet-pdf-warn li + li { margin-top: 2px; }
.sheet-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sheet-fill-note:empty { display: none; }
.sheet-fill-note { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: .8125rem; }
.sheet-fill-note p { margin: 0; }
.sheet-fill-colors { margin: 0; padding-left: 18px; }
.decide-sheet ul { margin: 4px 0; padding-left: 18px; }
.decide-sheet li + li { margin-top: 2px; }
.decide-sheet-item { font-weight: 500; }
/* Podrobnosti dokončovacej práce v úprave položky: strany, počet alebo druh falcovania pod názvom práce. */
.sheet-finish select, .sheet-finish input[type="number"] { min-height: 32px; padding-block: 4px; font-size: .8125rem; }
.sheet-calc-differs { color: var(--warn); }
/* Kalkulácia položky: voľby, nákres hárka vedľa údajov, čo chýba, rozpis a súčet. Nákres v tónoch rozhrania, kusy ako tenké obrysy. */
.dialog:has(.calc-dialog) { width: min(960px, calc(100vw - 32px)); }
.calc-dialog { display: flex; flex-direction: column; gap: 14px; }
.calc-dialog [aria-invalid="true"] { border-color: var(--err); }
.calc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.calc-status { min-height: 1.4em; margin: 0; color: var(--text-2); font-size: .8125rem; }
.calc-content { display: flex; flex-direction: column; gap: 16px; }
.calc-content:empty { display: none; }
.calc-where { margin: 0; font-weight: 500; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 28px; align-items: start; }
.calc-figure { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.calc-drawing { display: block; width: 100%; max-height: 320px; }
.calc-drawing-roll { max-height: 420px; }
.calc-sheet { fill: var(--surface-2); stroke: var(--line-3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.calc-area { fill: none; stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.calc-piece > rect:first-child { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.calc-piece.is-rotated > rect:first-child { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.calc-piece.is-unused > rect:first-child { fill: none; stroke: var(--line-3); stroke-dasharray: 3 3; }
.calc-piece.is-unused .calc-trim { display: none; }
.calc-trim { fill: none; stroke: var(--accent-line); stroke-width: 1px; stroke-dasharray: 2 2; opacity: .55; vector-effect: non-scaling-stroke; }
.calc-facts .kv { grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); }
.calc-lines tbody th { color: var(--text); font-weight: 400; white-space: normal; padding-right: 12px; border-bottom: 1px solid var(--line); }
.calc-lines td.num, .calc-lines thead th:not(:first-child) { text-align: right; }
.calc-totals { display: flex; flex-direction: column; gap: 6px; width: min(100%, 380px); margin-left: auto; }
.calc-totals .kv { grid-template-columns: minmax(0, 1fr) auto; }
.calc-totals dd { text-align: right; }
.calc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line-2); }
.calc-total strong { font: 500 1.25rem/1.2 var(--font-display); }
.calc-totals > .muted { margin: 0; text-align: right; }
@media (max-width: 720px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }
/* Brožúra: lom dvojstrany a hrany chrbta na nákrese, obálka a vnútro ako samostatné bloky, riadky rozpisu po častiach. */
.calc-fold { stroke: var(--text-2); stroke-width: 1px; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.calc-part { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.calc-part > h3 { margin: 0; font-size: .9375rem; font-weight: 600; }
.calc-lines tbody tr.calc-group th { padding-top: 14px; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line-2); }
.calc-lines tbody:first-of-type tr.calc-group th { padding-top: 6px; }
/* Stránka Kalkulácie v hlavnom menu. */
.calcs-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.calcs-head h1 { margin-bottom: 6px; }
.calcs .section { margin-top: 32px; }
.calcs .list-tools { margin-bottom: 12px; }
.calcs-table td, .calcs-table th { vertical-align: middle; }
.calcs-table td.num, .calcs-table th.num { text-align: right; }
.calcs-table .cell-action { text-align: right; white-space: nowrap; }
.calcs-number { display: block; margin-top: 2px; }
/* Na telefóne sú riadky bloky: zákazka a položka navrchu, ostatné s popiskom, aby sa tabuľka nemusela posúvať do strany. */
@media (max-width: 640px) {
  .table-wrap:has(table.calcs-table) { overflow: visible; }
  table.calcs-table, table.calcs-table tbody, table.calcs-table tr, table.calcs-table td { display: block; width: 100%; }
  table.calcs-table thead { display: none; }
  table.calcs-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.data.calcs-table td { padding: 2px 0; border: 0; text-align: left; }
  table.calcs-table td.calcs-item { font-weight: 500; }
  table.calcs-table td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  table.calcs-table td[data-label]::before { content: attr(data-label); color: var(--text-2); }
  table.calcs-table .cell-action { padding-top: 8px; }
}
.calcs-head > .btn { margin-top: 4px; }
.calcs .section > div > .btn { margin-top: 12px; }
/* Cenník kalkulácie v Nastaveniach: tabuľky ako inde, vypnuté riadky tlmené, história ako tichý zoznam. */
.pricelist .section > p.muted.small { margin-bottom: 12px; }
.pricelist-table tr.is-inactive td { color: var(--text-2); }
.pricelist-import-sample { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); font: .75rem/1.5 var(--font-mono, ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.pricelist-import-preview { display: flex; flex-direction: column; gap: 8px; }
.pricelist-import-title { margin: 8px 0 0; font-size: .9375rem; }
.pricelist-import-change { display: block; }
.pricelist-table .cell-action { text-align: right; white-space: nowrap; }
.pricelist-add { flex-wrap: wrap; gap: 6px; }
.pricelist-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pricelist-tiers { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pricelist-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pricelist-tier input { width: 9em; }
.pricelist-tier-text { display: block; white-space: nowrap; }
.pricelist-size-h { display: inline-flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; }
.pricelist-size-h input { flex: 1 1 0; min-width: 0; }
.pricelist-dialog [aria-invalid="true"], .pricelist [aria-invalid="true"] { border-color: var(--err); }
/* Stroje v Nastaveniach (own-machines.js): vybavenie, požiadavky na dáta, limity a názvy farieb ako oddelené časti dialógu. */
.machine-fieldset { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 4px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
.machine-fieldset legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-weight: 600; }
.machine-fieldset legend + * { clear: both; }
.machine-pair { display: flex; align-items: center; gap: 8px; }
.machine-pair input { flex: 1 1 0; min-width: 0; }
.machine-dialog .dialog-actions-start { margin-right: auto; }
/* Stránka Stroje: tlačové stroje a zušľachtenie ako dve karty na podklade, stroje v nich oddelené čiarou.
   Súhrn stroja je v tlmených blokoch, aby sa dal prečítať bez otvorenia dialógu. */
.machine-groups { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.machine-group { padding: 18px 20px 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.machine-group-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.machine-group-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.machine-group-lead { margin: 6px 0 14px; max-width: 72ch; line-height: 1.5; }
.machine-list { margin: 0; }
/* Dve triedy: ul.plain li inak prebije odsadenie riadku. */
.machine-list > .machine-item { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.machine-item-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.machine-item-title { flex: 1 1 260px; min-width: 0; }
.machine-item-title h3 { margin: 0; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.machine-item-title p { margin: 4px 0 0; max-width: 72ch; line-height: 1.5; }
.machine-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.machine-item-body { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 720px) {
  .machine-item-body { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
}
.machine-facts { min-width: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.machine-facts h4 { margin: 0 0 6px; color: var(--text-2); font-size: .75rem; font-weight: 600; }
.machine-facts p { margin: 0; font-size: .8125rem; }
.machine-facts-list li { padding: 2px 0; font-size: .8125rem; line-height: 1.45; }
.machine-item-use { margin: 10px 0 0; }
.machine-empty { margin: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); }
/* Knižnica priamych farieb tlačiarne v Nastaveniach (od 0.96) */
.spot-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-2); vertical-align: middle; flex: none; }
.spot-swatch-large { width: 44px; height: 44px; border-radius: 8px; }
.spot-group { padding-bottom: 16px; }
.spot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spot-search { max-width: 320px; margin: 0 0 12px; }
.spot-table th.num, .spot-table td.num { text-align: right; }
/* L, a, b sú značky veličín, a a b ostávajú malé. */
table.data.spot-table thead th.num { text-transform: none; font-size: .75rem; }
.spot-table tbody th { text-align: left; font-weight: 500; color: var(--text); }
.spot-name, .spot-aliases { display: block; }
.spot-aliases { font-weight: 400; margin-top: 2px; }
.spot-cell-swatch { width: 34px; }
.spot-cell-actions { text-align: right; white-space: nowrap; }
.spot-lab { border: 0; padding: 0; margin: 4px 0 14px; min-width: 0; }
.spot-lab legend { padding: 0; margin-bottom: 6px; font-size: .8125rem; color: var(--text-2); }
.spot-lab-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.spot-lab-row .field { width: 88px; }
.spot-import-result:empty { display: none; }
.spot-import-result { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.spot-import-result > p { margin: 0 0 8px; }
.spot-preview li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.spot-skipped { margin-top: 8px; font-size: .8125rem; }
.spot-skipped ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; }
.spot-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.spot-filters .spot-search { margin: 0; }
.spot-more:empty { display: none; }
.spot-more { justify-content: space-between; padding: 10px 0 0; }

/* Prevodník na priame farby (od 0.102): vľavo zadanie, vpravo upozornenie a najbližšie farby. */
.match-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.match-layout.is-dialog { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 0; }
@media (max-width: 900px) { .match-layout { grid-template-columns: minmax(0, 1fr); } }
.match-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); min-width: 0; }
.match-layout.is-dialog .match-card { padding: 0; border: 0; background: none; }
@media (min-width: 901px) { .match-input { position: sticky; top: 16px; } }
.match-layout.is-dialog .match-input { position: static; }
.match-types { width: 100%; }
.match-fields-box { min-height: 62px; }
.match-fields { display: flex; gap: 10px; align-items: flex-end; }
.match-fields .field { flex: 1 1 0; min-width: 0; }
.match-fields .input-num { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.match-unit { position: relative; display: block; }
.match-unit .input-num { padding-right: 22px; }
.match-unit > span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .75rem; pointer-events: none; }
.match-hex, .match-spot { width: 100%; }
.match-hex { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.match-hint { margin: -6px 0 0; }
.match-input .form-error { margin: -4px 0 0; }
.match-options { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.match-options .select-small { width: 100%; }
.match-paper-seg button { flex-direction: column; gap: 0; padding: 4px 6px; line-height: 1.2; white-space: normal; text-align: center; }
.match-paper-seg .segmented-count { margin-left: 0; font-size: .75rem; }
.match-profile-fixed { margin: 0; }
.match-warning { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--text); }
.match-warning > svg { flex: none; margin-top: 1px; color: var(--warn); }
.match-warning strong { display: block; font-weight: 600; font-size: .875rem; }
.match-warning p { margin: 2px 0 0; font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.match-source { display: flex; gap: 14px; align-items: center; min-height: 56px; }
.match-source-swatch { flex: none; width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--line-2); }
.match-source-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.match-source-text p { margin: 0; }
.match-source-title { font-weight: 600; overflow-wrap: anywhere; }
.match-idle { margin: 0; }
.match-results-head { justify-content: space-between; margin-bottom: 4px; }
.match-results-head h3 { font-size: .9375rem; }
.match-results { list-style: none; margin: 0; padding: 0; }
.match-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.match-row:last-child { border-bottom: 1px solid var(--line); }
/* Dve polovice vedľa seba: zadaná farba a nájdená, aby sa dali porovnať pohľadom. */
.match-pair { display: grid; grid-template-columns: 1fr 1fr; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.match-pair > span { display: block; }
.match-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.match-rank { color: var(--text-3); font-size: .8125rem; }
.match-name { font-weight: 600; overflow-wrap: anywhere; }
.match-best { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.match-book { overflow-wrap: anywhere; }
.match-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.match-bar { position: relative; width: 120px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; flex: none; }
.match-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent-line); }
.match-pct { font-weight: 600; font-size: .875rem; }
.match-details { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; }
.match-gamut { color: var(--warn); }
.match-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.match-more { margin-top: 10px; }
.match-empty { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.match-empty p { margin: 0 0 8px; }
.match-how { margin: 0; line-height: 1.45; }
.match-library-link { display: flex; align-items: center; gap: 12px; }
.dialog:has(.match-dialog) { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.match-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 560px) {
  .match-row { grid-template-columns: 48px minmax(0, 1fr); }
  .match-pair { width: 48px; height: 40px; }
  .match-actions { grid-column: 1 / -1; flex-direction: row; }
  .match-bar { width: 80px; }
}
.ink-similar { margin-left: 4px; }
.pricelist-log { list-style: none; margin: 0; padding: 0; }
.pricelist-log > li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.pricelist-log > li:last-child { border-bottom: 1px solid var(--line); }
.pricelist-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pricelist-log-head strong { font-weight: 500; }
.pricelist-log-changes { margin: 0; padding-left: 18px; color: var(--text-2); }
/* Schválená podoba položky: tichý riadok, keď sa nič nezmenilo. Zmena na potvrdenie je na žltej ploche, len zapísaná na sivej. */
.sheet-approval { margin: 2px 0 0 38px; font-size: .8125rem; }
.sheet-approval-logged { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--text); }
.sheet-approval-logged > svg { flex: none; margin-top: 1px; color: var(--text-2); }
.sheet-approval-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sheet-approval-body > div { margin-top: 4px; }
.sheet-record-approved { margin: 4px 0 10px; }
.sheet-record-approved .sheet-spec { margin: 4px 0; }
@media (max-width: 640px) {
  .sheet-item-head { grid-template-columns: 24px minmax(0, 1fr) auto; }
  /* Na úzkom telefóne sa tlačidlá pri položke zalomia, inak by rad pretiekol o pár bodov (chyba z 0.36). */
  .sheet-item-actions { grid-column: 2 / -1; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
  .sheet-spec { margin-left: 0; }
  .sheet-pdf { margin-left: 0; }
  .sheet-approval { margin-left: 0; }
}

/* Výrobný list: rovnaký list papiera ako protokol, položka za položkou so špecifikáciou v tabuľke. */
.jobsheet-item { padding: 12px 0; border-top: 1px solid var(--paper-line); }
.jobsheet-item:first-of-type { border-top: 0; padding-top: 0; }
.report .jobsheet-item h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 2px; font-size: .9375rem; }
.jobsheet-qty { white-space: nowrap; }
.report-table.jobsheet-spec { margin-top: 6px; }
.report-table.jobsheet-spec th { width: 30%; font-weight: 500; color: var(--paper-2); border-bottom: 1px solid var(--paper-line); vertical-align: top; }

/* ---------- prehliadač ---------- */

.fullscreen { height: 100vh; height: 100dvh; overflow: hidden; }
.viewer {
  --pages: 116px;
  --tools: 48px;
  --panel: 400px;
  display: grid; height: 100%;
  grid-template-columns: var(--pages) var(--tools) minmax(0, 1fr) var(--panel);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top top" "pages tools center panel";
}
.viewer.single-page { --pages: 0px; }
.viewer.in-compare { --tools: 0px; }
.viewer.in-compare .v-tools { display: none; }
.viewer.panel-hidden { --panel: 0px; }
.viewer.panel-hidden .v-panel { display: none; }

.v-top { grid-area: top; display: flex; align-items: center; gap: 10px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; min-height: 64px; background: var(--rail); }
.v-top-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.v-top-center { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.v-top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* Na širokej obrazovke ostáva lišta v jednom riadku. Keď sa nezmestí meno pri avatare, skráti sa najprv názov projektu a návrhu. */
@media (min-width: 1280px) {
  .v-top { flex-wrap: nowrap; }
  .v-top-left { flex: 0 1 auto; }
  .v-top-center { flex-shrink: 0; }
  /* Stav a tlačidlá rozhodnutia (od 0.55 aj pre štúdio) ostávajú v jednom rade. */
  .v-top-right { flex-wrap: nowrap; flex-shrink: 0; }
  .v-top-left .back, .v-top-left .back-name { min-width: 0; }
  .v-top-left .back { flex: 0 4 auto; }
  .v-top-left .back-up { flex: none; }
}
/* Pod 1440 px sa s tlačidlami rozhodnutia lišta nezmestí. Pri avatare ostanú iniciály ako pod 1280 px, názov návrhu sa nestratí. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .v-top:has(.v-top-right button) .menu-trigger.is-compact .menu-trigger-name { display: none; }
}
.tool-panel { width: 32px; height: 32px; margin-left: -8px; }
.back { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; color: var(--text-2); text-decoration: none; font-size: .8125rem; max-width: 190px; }
.back:hover { color: var(--text); }
.back-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-sep { color: var(--text-3); }
/* Cesta k návrhu: dlhé mená sa skrátia, celé sú v popise. Názov návrhu má prednosť. */
.v-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 3 auto; font-size: .8125rem; }
.crumb-link { min-width: 2.5em; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 28px; color: var(--text-2); text-decoration: none; }
.crumb-link:hover { color: var(--text); text-decoration: underline; }
.v-title { font: 500 1rem/1.2 var(--font-display); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stará verzia: plný pruh nad návrhom, nedá sa zavrieť ani prehliadnuť. */
.old-banner { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 14px; background: var(--warn); color: var(--on-warn); font-size: .8125rem; font-weight: 500; }
.old-banner a { display: inline-flex; align-items: center; min-height: 28px; margin-left: auto; padding: 2px 12px; border: 1.5px solid currentColor; border-radius: var(--r-sm); font-weight: 600; white-space: nowrap; color: inherit; text-decoration: none; text-decoration-color: currentColor; text-underline-offset: 3px; white-space: nowrap; }
/* Vodoznak pre klientov: štúdio vidí, či pozerá čistý obraz, alebo ten, ktorý dostane klient. */
.client-note { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: .8125rem; }
.client-note.is-preview { border-bottom-color: transparent; background: var(--accent); color: var(--on-accent); }
.client-note-text { flex: 1 1 0; min-width: min(70%, 260px); }
.client-note-btn { display: inline-flex; align-items: center; min-height: 28px; margin-left: auto; padding: 2px 12px; border: 1.5px solid currentColor; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }

.v-pages { grid-area: pages; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 12px; border-right: 1px solid var(--line); background: var(--rail); }
.page-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); font: 400 .75rem/1 var(--font-body); flex: none; font-variant-numeric: tabular-nums; }
.page-thumb img { width: 92px; height: auto; background: var(--thumb-bg); outline: 1px solid var(--line); outline-offset: 0; transition: outline-color var(--t); }
.page-thumb:hover img { outline-color: var(--line-2); }
.page-thumb.is-current { color: var(--text); }
.page-thumb.is-current img { outline: 2px solid var(--accent-line); }
.page-count { position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; background: #14161b; color: #fff; font: 500 .6875rem/20px var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }

.v-tools { grid-area: tools; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-right: 1px solid var(--line); background: var(--rail); overflow: hidden auto; scrollbar-width: none; }
.tool-sep { width: 22px; height: 1px; background: var(--line); margin: 5px 0; flex: none; }
.tool.mobile-only { display: none; }
.tool-help { margin-top: auto; }

.v-center { grid-area: center; min-width: 0; min-height: 0; }
.stage-slot { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--stage-gray); outline: none; }
.stage:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.viewer[data-surround="dark"] .stage { background: var(--stage-dark); }
.viewer[data-surround="light"] .stage { background: var(--stage-light); }
.stage[data-cursor="grab"] { cursor: grab; }
.stage[data-cursor="grabbing"] { cursor: grabbing; }
.stage[data-cursor="crosshair"] { cursor: crosshair; }
.stage[data-cursor="none"] { cursor: none; }
.stage[data-cursor="copy"] { cursor: copy; }
.stage[data-cursor="help"] { cursor: help; }
.stage-canvas, .stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-overlay { touch-action: none; }
.stage-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 80%); padding: 14px 20px; background: var(--bg); border-radius: var(--r-md); text-align: center; }
/* Pôvodné PDF počas kontroly: riadok s priebehom a pod ním PDF z prehliadača cez celú plochu. */
.source-preview { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.source-preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.source-preview-state { display: flex; align-items: center; gap: 12px; color: var(--text); }
.source-preview-state strong { white-space: nowrap; }
.source-preview-state progress { width: 160px; flex-shrink: 1; min-width: 60px; accent-color: var(--accent); }
.source-preview-note { margin: 0; max-width: 72ch; color: var(--text-2); font-size: .8125rem; }
.source-preview-note a { color: var(--accent); }
.source-preview-early { flex-shrink: 0; max-height: 38%; overflow: auto; padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.source-preview-early summary { padding: 9px 0; color: var(--text); font-size: .875rem; font-weight: 600; cursor: pointer; }
.source-preview-early ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; margin: 0; padding: 0 0 8px; list-style: none; }
.source-preview-early li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.source-preview-early-note { margin: 0 0 10px; max-width: 72ch; color: var(--text-2); font-size: .8125rem; }
.source-preview-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--surface-2); }
.stage-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; background: var(--bg); border-radius: var(--r-md); }
.stage-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: max-content; max-width: min(90%, 520px); padding: 6px 12px; border-radius: var(--r-sm); background: var(--card); color: var(--text); font-size: .75rem; text-align: center; box-shadow: var(--float); pointer-events: none; }

.pin { cursor: pointer; }
.pin.can-move { cursor: move; }
.shape-hit { cursor: pointer; pointer-events: stroke; }
.shape-hit.is-body { pointer-events: all; }
.shape-hit.can-move { cursor: move; }
.is-preview { pointer-events: none; }
.shape-handle { fill: var(--mark-accent); stroke: var(--mark-dark); stroke-width: 1; pointer-events: none; }
.shape-handle-hit.handle-nw, .shape-handle-hit.handle-se { cursor: nwse-resize; }
.shape-handle-hit.handle-ne, .shape-handle-hit.handle-sw { cursor: nesw-resize; }
.pin.has-person .pin-dot, .pin.has-person:hover:not(.is-selected) .pin-dot, .pin.has-person.is-selected .pin-dot { fill: var(--person); }
.pin.has-person.is-selected .pin-text { fill: #fff; }
.pin.has-person.is-selected .pin-check { stroke: #fff; }
.pin.has-person.is-selected .pin-halo { fill: var(--mark-accent); }
.pin.has-person.is-selected .pin-tail-halo { fill: var(--mark-accent); stroke: var(--mark-accent); }
.pin-actions { position: absolute; display: flex; pointer-events: auto; background: var(--bg); border-radius: var(--r-sm); box-shadow: var(--float); }
.pin-action { width: 28px; height: 28px; }
.f-row.f-many { grid-template-columns: 22px minmax(0, 1fr) auto 16px; align-items: center; padding: 12px 0; }
.f-many-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--surface-3); font: 500 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.f-many > .icon { color: var(--text-3); }
.issue-panel { gap: 16px; }
.issue-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.issue-head { display: flex; flex-direction: column; gap: 4px; }
.issue-title { display: flex; align-items: flex-start; gap: 8px; }
.issue-title h3 { margin: 0; font: 500 1.125rem/1.3 var(--font-display); }
.issue-steps { display: flex; flex-direction: column; gap: 6px; }
.issue-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.issue-at { font: 500 .8125rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.issue-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); font-size: .875rem; line-height: 1.5; }
.issue-card p { margin: 0; }
.issue-card-label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font: 600 .8125rem/1.4 var(--font-body); }
.issue-card.is-problem { border-color: var(--err); background: var(--err-soft); }
.issue-card.is-problem .issue-card-label { color: var(--err); }
.issue-card.is-review { border-color: var(--warn); background: var(--warn-soft); }
.issue-card.is-review .issue-card-label { color: var(--warn); }
.issue-card.is-fix { border-color: var(--ok); background: var(--ok-soft); }
.issue-card.is-fix .issue-card-label { color: var(--ok); }
/* Postup v programe (od 0.99): kroky ako číslovaný zoznam, výber programu nad nimi. */
.fix-program-row { display: flex; }
.fix-program-row .select-small { max-width: 100%; }
.fix-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; }
.fix-steps li { padding-left: 2px; }
.fix-steps li::marker { color: var(--text-2); font-variant-numeric: tabular-nums; }
.issue-facts { color: var(--text-2); font-size: .8125rem; }
.issue-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.issue-view { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.panel-cards { gap: 14px; }
.tool-section.panel-card, .panel-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.tool-section.panel-card > h3, .panel-card .section-head-small h3 { margin: 0; font: 500 .9375rem/1.3 var(--font-display); }
.panel-card .segmented { align-self: flex-start; }
.page-size { position: absolute; transform: translateY(calc(-100% - 5px)); color: var(--stage-label); font-size: .75rem; font-weight: 500; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.viewer[data-surround="light"] .page-size { color: var(--stage-label-on-light); }
.page-frame-under { fill: none; stroke: var(--mark-dark); stroke-width: 5; stroke-opacity: .75; vector-effect: non-scaling-stroke; pointer-events: none; }
.page-frame { fill: none; stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.page-frame.is-selected { stroke: var(--mark-accent); stroke-width: 4; }
.page-frame-tag { position: absolute; transform: translateY(-50%); padding: 2px 8px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.issue-mark-under { fill: none; stroke: var(--mark-dark); stroke-width: 4; stroke-opacity: .75; vector-effect: non-scaling-stroke; pointer-events: none; }
.issue-mark { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.issue-mark.is-current { stroke-width: 2.5; }
.issue-mark.sev-error { stroke: var(--mark-err); }
.issue-mark.sev-warn { stroke: var(--mark-warn); }
.issue-mark.sev-info, .issue-mark.sev-ok { stroke: #ffffff; }
.issue-tag { position: absolute; transform: translateY(-100%); padding: 1px 6px; color: var(--mark-dark); font-size: .75rem; font-weight: 600; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.issue-tag.sev-error { background: var(--mark-err); }
.issue-tag.sev-warn { background: var(--mark-warn); }
.issue-tag.sev-info, .issue-tag.sev-ok { background: #ffffff; }
input.hud-input[type="text"] { width: 7ch; min-height: 0; padding: 3px 2px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; cursor: text; transition: background var(--t), border-color var(--t); }
input.hud-input[type="text"]:hover { border-color: var(--line-3); background: var(--surface-2); }
input.hud-input[type="text"]:focus { outline: none; border-color: var(--focus); background: var(--field); }
.hud-page { display: inline-flex; align-items: center; gap: 2px; font-size: .75rem; }
.hud-page-total { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tool-sep-strong { background: var(--line-3); margin: 8px 0; }
.old-banner-text { flex: 1 1 0; min-width: min(70%, 260px); }
.h-note { font-size: .875rem; }
.h-flag { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.h-flag.is-latest { color: var(--accent-text); }
.h-flag.is-old { color: var(--warn); }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.h-version.panel-card { gap: 6px; padding: 14px; }
/* Aktuálna verzia: plný pruh navrchu a hrubší rámik, aby sa nedala zameniť so staršou. */
.h-version.panel-card.is-latest { border-color: var(--accent); border-width: 2px; padding: 0 13px 13px; overflow: hidden; }
.h-version.panel-card.is-latest .h-head h3 { color: var(--text); font-size: 1.125rem; font-weight: 500; }
.h-latest-label { display: flex; align-self: stretch; align-items: center; gap: 6px; margin: 0 -13px 6px; padding: 7px 13px; background: var(--accent); color: var(--on-accent); font-size: .8125rem; font-weight: 600; }
.h-latest-open { margin-left: auto; font-weight: 400; opacity: .9; }
.h-file { display: flex; align-items: flex-start; gap: 6px; color: var(--text-2); overflow-wrap: anywhere; }
.h-file svg { flex: none; margin-top: 1px; }
.h-file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.h-older-toggle { align-self: flex-start; }
.h-version.panel-card.is-old { background: transparent; }
.h-older-list { display: flex; flex-direction: column; gap: 10px; }
.content-block { margin: 2px 0 4px; }
.rail-note { flex: none; padding: 2px 0 6px; color: var(--text-2); font-size: .75rem; text-align: center; white-space: nowrap; align-self: center; }
.sheet-view { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; background: var(--bg); cursor: auto; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sheet-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.sheet-title h2 { margin: 0; font: 500 1.25rem/1.25 var(--font-display); }
.sheet-close { margin-left: auto; }
.sheet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sheet-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); font-size: .8125rem; transition: background var(--t), border-color var(--t); }
.sheet-chip:hover { background: var(--row-hover); }
.sheet-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-line); color: var(--on-accent); }
.sheet-chip-count { color: var(--text-2); font: 400 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.sheet-chip[aria-pressed="true"] .sheet-chip-count { color: inherit; }
.sheet-chip.sev-error:not([aria-pressed="true"]) { color: var(--text); border-color: var(--err); }
.sheet-chip.sev-warn:not([aria-pressed="true"]) { color: var(--text); border-color: var(--warn); }
.sheet-chip-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; padding: 16px 18px 28px; }
.sheet-page { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; text-align: left; border-radius: var(--r-sm); }
.sheet-page:focus-visible { outline-offset: 3px; }
.sheet-thumb { display: block; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow var(--t); }
.sheet-thumb img { display: block; width: 100%; height: auto; }
.sheet-page:hover .sheet-thumb { box-shadow: 0 0 0 2px var(--text-2); }
.sheet-page.is-current .sheet-thumb { box-shadow: 0 0 0 2px var(--accent-line); }
.sheet-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .8125rem; }
.sheet-no { color: var(--text); font-weight: 500; }
.sheet-count { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sheet-tags { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.sheet-tag { max-width: 100%; padding: 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); font-size: .75rem; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-tag.sev-error { border-color: var(--err); }
.sheet-tag.sev-warn { border-color: var(--warn); }
.viewer.sheet-open .strip { display: none; }
.viewer.sheet-open { --pages: 0px; }
.viewer.sheet-open .v-pages { display: none; }
.settings-subhead { margin-top: 16px; }
.obj-under { fill: none; stroke: var(--mark-dark); stroke-width: 3.5; stroke-opacity: .75; vector-effect: non-scaling-stroke; pointer-events: none; }
.obj-image { fill: none; stroke: #ffffff; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.obj-image.is-flagged { stroke: var(--mark-accent); stroke-width: 2; }
.obj-vector { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.obj-picked { fill: none; stroke: var(--mark-accent); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.obj-tag { position: absolute; transform: translateY(-100%); padding: 1px 6px; background: var(--mark-dark); color: #ffffff; font-size: .75rem; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.obj-tag.is-flagged { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.obj-card { position: absolute; left: 32px; top: 32px; width: min(320px, calc(100% - 48px)); max-height: calc(100% - 44px); overflow: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px 12px; background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--float); font-size: .8125rem; cursor: auto; }
.obj-card p { margin: 0; }
.obj-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.obj-card-head strong { font: 500 .9375rem/1.3 var(--font-display); }
.obj-close { width: 28px; height: 28px; margin: -4px -6px -4px 0; }
.obj-main { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.obj-note { display: flex; align-items: flex-start; gap: 6px; color: var(--text); }
.obj-note .icon { flex: none; margin-top: 2px; color: var(--warn); }
.obj-others { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line); }
/* Inšpektor objektu (od 0.91): nastavenia z PDF pod popisom objektu, pri zlúčenom objekte po blokoch. */
.obj-insp { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); }
.obj-state { width: 100%; }
.obj-state + .obj-state { padding-top: 8px; border-top: 1px dashed var(--line); }
.obj-state .kv { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.obj-state dd { display: flex; flex-direction: column; min-width: 0; }
.obj-space { overflow-wrap: anywhere; }
.ruler { position: absolute; left: 0; top: 0; display: block; }
.ruler-mark { position: absolute; left: 0; top: 0; background: var(--accent-line); pointer-events: none; }
.ruler-mark-x { width: 1px; height: 24px; }
.ruler-mark-y { width: 24px; height: 1px; }
.ruler-corner { position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-2); font-size: .75rem; line-height: 1; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transition: color var(--t), background var(--t); }
.ruler-corner:hover { color: var(--text); background: var(--surface-2); }
.ruler-corner:focus-visible { outline-offset: -2px; }
.stage.has-rulers .hud { left: 34px; }
.stage.has-rulers .stage-hint { top: 34px; }

/* ---------- Kontrola bez otvoreného návrhu ---------- */
/* Plocha, pravítka, nástroje a panel sú ako v návrhu, len prázdne. Ponuka, čo otvoriť, je okno uprostred plochy. */
.ws-note { min-width: 0; overflow: hidden; color: var(--text-3); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.ws-layer { position: absolute; inset: 24px 0 0 24px; display: grid; place-items: center; padding: 28px; overflow: auto; }
.ws-open { display: flex; flex-direction: column; width: min(780px, 100%); height: min(600px, 100%); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: var(--float); }
.ws-open-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 0 22px; }
.ws-open-head h2 { font-size: 1.125rem; }
.ws-open-head h2:focus { outline: none; }
.ws-open-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 22px 0; }
.ws-open-tools .search-field { max-width: none; }
.ws-tabs { display: flex; gap: 4px; width: 100%; border-bottom: 1px solid var(--line); }
.ws-tab { min-height: 40px; margin-bottom: -1px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: .875rem; font-weight: 500; transition: color var(--t), border-color var(--t); }
.ws-tab:hover { color: var(--text); }
.ws-tab[aria-selected="true"] { border-bottom-color: var(--accent-line); color: var(--text); }
.ws-tab:focus-visible { outline-offset: -2px; }
.ws-open-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 22px 22px; }
.ws-lead { margin-bottom: 14px; color: var(--text-2); font-size: .875rem; }
.ws-loading { display: grid; place-items: center; min-height: 160px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.ws-card { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text); text-decoration: none; transition: border-color var(--t), background var(--t); }
.ws-card:hover { border-color: var(--line-2); background: var(--hover-soft); }
.ws-card-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--thumb-bg); }
.ws-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ws-card-empty { color: var(--text-3); }
.ws-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.ws-card-text strong, .ws-card-project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-card-text strong { font-size: .875rem; font-weight: 500; }
.ws-card-status { padding: 0 2px; }
.ws-card-status .status-text { font-size: .75rem; }
.ws-group + .ws-group { margin-top: 20px; }
.ws-group-title { margin-bottom: 6px; color: var(--text-3); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ws-projects { display: flex; flex-direction: column; }
.ws-project { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--text); text-align: left; transition: background var(--t); }
.ws-project:first-child { border-top: 0; }
.ws-project:hover { background: var(--hover-soft); }
.ws-project:focus-visible { outline-offset: -2px; }
.ws-project > .icon { color: var(--text-3); }
.ws-project-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--text-3); }
.ws-project-meta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ws-fresh { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); font-weight: 500; }
.ws-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: -4px 0 8px -6px; padding: 0 8px 0 4px; border-radius: var(--r-sm); color: var(--text-2); font-size: .8125rem; transition: background var(--t), color var(--t); }
.ws-back:hover { background: var(--hover-soft); color: var(--text); }
.ws-project-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.ws-project-head h3 { flex: 1 1 200px; min-width: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.ws-project-head h3:focus { outline: none; }
.ws-project-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-folder { display: inline-flex; align-items: center; gap: 4px; }
/* V ponuke stačí, čo návrh je a v akom je stave. Pripomienky a na koho sa čaká, ukáže projekt aj návrh. */
.ws-rows .design-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.ws-rows .design-comments { display: none; }
.ws-panel-tabs span { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; min-height: 30px; padding: 0 7px; color: var(--text-3); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.ws-panel-hint { padding: 18px 16px; color: var(--text-3); font-size: .875rem; line-height: 1.5; }
/* Pustenie súborov: veľká plocha je len počas ťahania, stále je len riadok pod oknom. Plocha nechytá myš,
   udalosti ťahania tak chodia prvkom pod ňou a nevznikajú ďalšie príchody a odchody. */
.ws-open { position: relative; }
.ws-open-foot { display: flex; align-items: center; gap: 8px; padding: 10px 22px 12px; border-top: 1px dashed var(--line-2); color: var(--text-3); font-size: .8125rem; }
.ws-open-foot .icon { flex: none; }
.ws-drop { position: absolute; inset: 0; z-index: 6; display: flex; padding: 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--raised) 90%, transparent); pointer-events: none; animation: fade-in .12s ease-out; }
.ws-stage > .ws-drop { inset: 24px 0 0 24px; padding: 28px; border-radius: 0; background: color-mix(in srgb, var(--bg) 84%, transparent); }
.ws-drop-box { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 2px dashed var(--accent-line); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); text-align: center; }
.ws-drop-box .icon { color: var(--accent-text); }
.ws-drop-box strong { font-size: 1.375rem; font-weight: 500; }
.ws-drop-box span { max-width: 40ch; color: var(--text-2); font-size: .9375rem; line-height: 1.45; }
.ws-drop.is-refused .ws-drop-box { border-color: var(--err); background: var(--err-soft); }
.ws-drop.is-refused .ws-drop-box .icon { color: var(--err); }
@media (prefers-reduced-motion: reduce) { .ws-drop { animation: none; } }
/* Dotyková obrazovka bez myši súbor neťahá. Rada o pustení by tam len mýlila, tlačidlo Nahrať návrh ostáva. */
@media (hover: none) { .ws-drop-only { display: none; } }
/* Formulár nahratia jedného alebo viacerých súborov v okne. */
.ws-up { display: flex; flex-direction: column; gap: 14px; }
.ws-up-fields { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ws-up-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ws-up-section .ws-group-title { margin-bottom: 0; }
.ws-up-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.ws-up-file { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 6px 10px 12px; border-top: 1px solid var(--line); }
.ws-up-file:first-child { border-top: 0; }
.ws-up-icon { display: grid; place-items: center; color: var(--text-3); }
.ws-up-file.is-done .ws-up-icon { color: var(--ok); }
.ws-up-file.is-failed .ws-up-icon { color: var(--err); }
.ws-up-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ws-up-meta { color: var(--text-3); line-height: 1.4; overflow-wrap: anywhere; }
.ws-up-more { align-self: flex-start; }
.ws-up-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text); font-size: .875rem; overflow-wrap: anywhere; }
.ws-up-fixed .icon { flex: none; color: var(--text-3); }
.ws-up-change { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ws-up-extras { display: flex; flex-direction: column; gap: 12px; }
.ws-up-extras:empty { display: none; }
/* Telefón: plocha je pod lištou a okno ide s ňou. Nástroje, strany a panel bez návrhu nemajú čo ukázať. */
@media (max-width: 860px) {
  .ws-viewer .v-pages, .ws-viewer .v-tools, .ws-viewer .v-panel, .ws-note { display: none; }
  .ws-viewer .ws-stage { height: auto; min-height: calc(100dvh - 130px); overflow: visible; }
  .ws-layer { position: relative; inset: auto; display: block; padding: 36px 12px 16px 36px; overflow: visible; }
  .ws-open { width: 100%; height: auto; }
  .ws-open-head { padding-left: 16px; }
  .ws-open-tools, .ws-open-body { padding-inline: 16px; }
  /* Nahrať návrh je na telefóne v spodnej lište, v okne by bolo druhýkrát. */
  .ws-open-tools .btn { display: none; }
  .ws-tab { flex: 1 1 auto; min-height: 44px; white-space: nowrap; }
  .ws-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .ws-project { grid-template-columns: 32px minmax(0, 1fr) 18px; }
  .ws-project-meta { grid-column: 2; grid-row: 2; }
  .ws-project > .icon { grid-column: 3; grid-row: 1 / span 2; }
  .ws-project-icon { grid-row: 1 / span 2; }
  .ws-back { min-height: 44px; }
  .ws-open-foot { padding-inline: 16px; }
  .ws-stage > .ws-drop { inset: 0; padding: 16px; }
  .ws-up-remove { width: 44px; height: 44px; }
}
.hud-unit { flex: none; min-width: 34px; min-height: 28px; padding: 2px 10px; background: var(--card); color: var(--text-2); border-radius: var(--r-sm); font: 400 .75rem/1 var(--font-body); box-shadow: var(--float); pointer-events: auto; transition: color var(--t), background var(--t); font-variant-numeric: tabular-nums; }
.hud-unit:hover { color: var(--text); background: var(--surface-2); }
.context-menu { position: fixed; right: auto; top: 0; left: 0; width: 220px; }
.menu-separator { height: 1px; margin: 6px 0; background: var(--line); }
.placing-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: .8125rem; }
.pin-halo { fill: #fff; }
.pin-tail-halo { fill: #fff; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.pin-dot { fill: var(--mark-dark); transition: fill var(--t); }
.pin:hover:not(.is-selected) .pin-dot { fill: var(--mark-hover); }
.pin-text { fill: #fff; font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.pin.is-selected .pin-dot { fill: var(--accent); }
.pin.is-selected .pin-text { fill: var(--on-accent); }
.pin.is-resolved:not(.is-selected) .pin-dot { fill: var(--mark-muted); }
.pin-check { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pin.is-selected .pin-check { stroke: var(--on-accent); }
.pin.is-ghost .pin-halo { fill: none; stroke: #fff; stroke-dasharray: 3 2; stroke-width: 1.5; }
.pin.is-ghost .pin-dot { fill: rgb(12 12 13 / .75); }
.pin.is-ghost .pin-text { font-size: 9px; }

.guide { stroke: #fff; stroke-width: 1; }
.guide-under { opacity: .55; stroke-width: 2.2; }
.guide-bleed { stroke-dasharray: 6 4; }
/* Stlmená spadávka: farba okolia na 75 % nad obrazom, takže zo spadávky ostane štvrtina. */
.bleed-dim { fill: var(--stage-gray); fill-opacity: .75; pointer-events: none; }
.viewer[data-surround="dark"] .bleed-dim { fill: var(--stage-dark); }
.viewer[data-surround="light"] .bleed-dim { fill: var(--stage-light); }
.grid-minor, .grid-major { fill: none; stroke: #fff; mix-blend-mode: difference; }
.grid-minor { stroke-opacity: .35; stroke-width: .6; }
.grid-major { stroke-opacity: .8; stroke-width: .8; }
.flash { fill: color-mix(in srgb, var(--mark-accent) 18%, transparent); stroke: var(--mark-accent); stroke-width: 2.5; animation: flash 1.1s ease-out 2; }
@keyframes flash { 0% { stroke-width: 6; stroke-opacity: 1; } 100% { stroke-width: 2; stroke-opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
.region { fill: none; stroke: var(--mark-dark); stroke-width: 1.5; }
.region.is-selected { stroke: var(--mark-accent); stroke-width: 2.5; }
.compare-divider { stroke: var(--mark-dark); stroke-width: 2; }
.compare-tag { position: absolute; background: var(--bg); color: var(--text); font-size: .75rem; padding: 2px 7px; border-radius: 3px; }
.swipe-handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mark-accent); pointer-events: auto; cursor: ew-resize; touch-action: none; }
.swipe-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.measure-label { position: absolute; transform: translate(-50%, calc(-100% - 8px)); background: var(--bg); padding: 3px 9px; border-radius: var(--r-sm); font-size: .75rem; display: flex; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.measure-label strong { color: var(--accent-text); font-weight: 600; }
.measure-label span { color: var(--text-2); }

.hud { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; pointer-events: none; }
.hud-pos { display: inline-flex; align-items: center; min-height: 28px; background: var(--card); color: var(--text-2); font: 400 .75rem/1.3 var(--font-body); padding: 4px 10px; border-radius: var(--r-sm); box-shadow: var(--float); white-space: pre; font-variant-numeric: tabular-nums; }
.hud-pos:empty { visibility: hidden; }
.hud-detail { margin-right: auto; }
.zoom { display: flex; align-items: center; gap: 2px; background: var(--card); border-radius: 9px; padding: 3px; pointer-events: auto; box-shadow: var(--float); }
.zoom .tool { width: 30px; height: 30px; border-radius: var(--r-sm); }
.zoom-label { min-width: 54px; font: 400 .75rem/1 var(--font-body); text-align: center; color: var(--text); padding: 7px 2px; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.zoom-label:hover { background: var(--surface-2); }
.hud-page { min-width: 44px; font-size: .75rem; text-align: center; }

/* Kontrolný pruh: políčka farieb tesne vedľa seba ako na tlačovom hárku. */
.strip { flex: none; display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 10px 14px; background: var(--rail); border-top: 1px solid var(--line); min-height: 64px; }
.strip-patches { display: flex; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.strip-middle { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.strip-note { grid-column: 1 / -1; }
.patch { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; min-width: 74px; max-width: 170px; text-align: left; font-size: .75rem; line-height: 1.3; color: var(--text); }
.patch-swatch { grid-column: 1 / -1; height: 24px; background: var(--ink); margin-bottom: 5px; transition: opacity var(--t); box-shadow: inset 0 0 0 1px var(--swatch-edge); }
.patch:hover .patch-swatch { box-shadow: inset 0 0 0 1.5px var(--swatch-edge-hover); }
.patch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.patch-value { color: var(--text); min-width: 5ch; text-align: right; font: 500 .75rem/1.3 var(--font-body); padding-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.patch:first-child .patch-swatch { border-radius: 4px 0 0 4px; }
.patch:last-child .patch-swatch { border-radius: 0 4px 4px 0; }
.patch.is-technical .patch-swatch { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 6px); }
.patch.is-off { color: var(--text-3); }
.patch.is-off .patch-swatch { background: linear-gradient(to top right, transparent calc(50% - .75px), var(--text-3) calc(50% - .75px), var(--text-3) calc(50% + .75px), transparent calc(50% + .75px)); box-shadow: inset 0 0 0 1px var(--line-2); }
.patch:disabled { opacity: .45; }
.strip-total { display: flex; flex-direction: column; font-size: .75rem; line-height: 1.3; min-width: 50px; }
.strip-total-value { font: 400 1rem/1.2 var(--font-body); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.strip-status { font-size: .75rem; }
/* Lab z profilu a ΔE2000 k referencii (od 0.94) vedľa súčtu. Kým príde hodnota, stará je bledšia. */
.strip-totals { display: flex; align-items: flex-start; gap: 6px 18px; min-width: 0; }
.strip-lab { display: flex; gap: 18px; border-radius: var(--r-sm); }
.strip-lab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lab-value { white-space: nowrap; transition: opacity var(--t); }
.lab-value.is-pending { opacity: .55; }
.lab-ref { pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .85)); }
.lab-ref circle, .lab-ref path { fill: none; stroke: var(--mark-accent); stroke-width: 2; }
/* Najviac dva riadky. Pruh tak nezmení výšku a návrh neposkočí, keď kurzor príde na plochu. */
.strip-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .75rem; }
.strip.has-reading .strip-hint { visibility: hidden; }
.strip.is-loading .strip-hint { display: none; }
.strip-view { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; color: var(--warn); font-size: .75rem; }
.strip-view .link-btn { color: var(--text); font-size: .75rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.strip-trust { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: .75rem; font-weight: 500; margin-left: auto; padding: 4px 10px; border-radius: var(--r-sm); text-align: left; transition: box-shadow var(--t); }
.strip-trust:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* Úzky pruh medzi náhľadmi strán a panelom: spoľahlivosť ostane len ikonou, aby bolo vidno, čo je zapnuté. */
.stage-slot { container-type: inline-size; }
@container (max-width: 820px) {
  .strip { grid-template-columns: minmax(0, auto) auto minmax(120px, 1fr) auto; }
  .strip-trust { padding: 4px 6px; }
  .strip-trust > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.strip-trust.trust-exact { background: var(--ok-soft); color: var(--ok); }
.strip-trust.trust-converted { background: var(--info-soft); color: var(--info); }
.strip-trust.trust-unreliable { background: var(--warn-soft); color: var(--warn); }
.strip-note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .8125rem; }

/* Panel */
/* Panel vpravo ako v náhľade D: karty na ploche stránky a záložky ako prepínač s vyvýšenou vybranou voľbou. */
.v-panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-left: 1px solid var(--line); }
.panel-tabs { display: flex; flex: none; gap: 2px; margin: 12px 12px 0; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 7px; border-radius: 5px; color: var(--text-2); white-space: nowrap; font-size: .75rem; font-weight: 500; transition: background var(--t), color var(--t), box-shadow var(--t); }
.panel-tabs button:hover { color: var(--text); }
.panel-tabs button.is-active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--line); }
:root:not([data-theme="light"]) .panel-tabs button.is-active { background: var(--surface-3); box-shadow: none; }
.panel-tabs button:focus-visible { outline-offset: -2px; }
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--surface-3); color: var(--text); font: 500 .6875rem/1 var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
.panel-tabs button.is-active .tab-badge { background: var(--accent); color: var(--on-accent); }
.tab-badge.is-error, .panel-tabs button.is-active .tab-badge.is-error { background: var(--err-soft); color: var(--err); }
.panel-content { flex: 1 1 auto; overflow-y: auto; }
.panel-body { padding: 12px 12px 28px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.panel-body h3 { margin-top: 8px; }
.panel-title { font: 500 1.0625rem/1.3 var(--font-display) !important; margin-top: 0 !important; }
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.c-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.composer { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 14px; border-bottom: 1px solid var(--line-2); }
.composer-title { font-size: .8125rem; font-weight: 600; }
.kbd-hint { display: inline-flex; gap: 3px; margin-left: auto; color: var(--text-3); }
.c-list { display: flex; flex-direction: column; margin: 0 -12px; }
.c-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 10px; margin: 0 12px 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: background var(--t), border-color var(--t); }
.c-item:hover { background: var(--hover-soft); }
.c-item.has-person { border-color: color-mix(in srgb, var(--person) 60%, var(--line)); }
.c-item.has-person .c-num, .c-item.has-person.is-selected .c-num { background: var(--person); color: #fff; box-shadow: 0 0 0 1px var(--mark-ring); }
.c-author { display: inline-flex; align-items: center; gap: 6px; }
.person-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--person); box-shadow: 0 0 0 1px var(--mark-ring); }
.c-people { display: flex; flex-direction: column; gap: 6px; margin: 0 12px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.c-people h3 { font: 500 .875rem/1.3 var(--font-display); }
.c-person { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; width: 100%; min-height: 40px; padding: 5px 6px; border-radius: var(--r-sm); text-align: left; transition: background var(--t); }
.c-person:hover { background: var(--hover-soft); }
.c-person[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.c-person-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.c-person-name strong { font-weight: 500; font-size: .8125rem; }
.reviewer-state { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--text-2); }
.reviewer-state.reviewer-approved, .reviewer-state.reviewer-approved .icon { color: var(--ok); }
.reviewer-state.reviewer-changes_requested, .reviewer-state.reviewer-changes_requested .icon { color: var(--warn); }
.c-item.is-selected { border-color: var(--accent-line); background: var(--surface-2); }
.c-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.c-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.c-head strong { font-size: .8125rem; font-weight: 600; }
.c-meta { color: var(--text-3); font: 400 .75rem/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.c-num { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--mark-dark); color: #fff; box-shadow: 0 0 0 1px var(--mark-ring); display: inline-flex; align-items: center; justify-content: center; font: 500 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.c-item.is-selected .c-num { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.c-item.is-resolved .c-num { background: var(--mark-muted); }
.c-item.is-resolved .c-body { color: var(--text-2); }
.c-item.is-carried .c-num { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.c-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.c-origin { font-size: .75rem; color: var(--text-3); }
.c-ink { font-size: .75rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.c-resolved { display: flex; gap: 5px; align-items: flex-start; font-size: .75rem; color: var(--ok); }
.c-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.c-btn { min-height: 28px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: .75rem; font-weight: 500; transition: background var(--t), border-color var(--t); }
.c-btn:hover { border-color: var(--line-3); }
.c-btn:disabled { opacity: .5; }
.c-btn.is-info { border-color: color-mix(in srgb, var(--info) 35%, transparent); background: var(--info-soft); color: var(--info); }
.c-btn.is-ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); }
.c-btn.is-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); color: var(--warn); }
.c-btn.is-err { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-soft); color: var(--err); }
.c-btn.is-info:hover, .c-btn.is-ok:hover, .c-btn.is-warn:hover, .c-btn.is-err:hover { border-color: currentColor; }
.c-replyitem { padding: 6px 0 2px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.c-reply-form { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; cursor: default; }
/* Rozpracovaná pripomienka (0.55): čiarkovaný okraj a odznak, kým autor neukončí úpravy. */
.c-item.is-draft { border-style: dashed; }
.c-draft { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 500 .6875rem/1.5 var(--font-body); }
.c-drafts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; margin: 0 12px 10px; padding: 10px 12px; border: 1px dashed var(--accent-line); border-radius: var(--r-md); background: var(--card); font-size: .8125rem; }
.c-drafts p { flex: 1 1 180px; }
.c-carried { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.c-carried h3 { font: 500 .9375rem/1.3 var(--font-display); }
.c-crop { background-color: var(--thumb-bg); background-repeat: no-repeat; min-height: 40px; max-height: 150px; }

.check-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.check-summary { display: inline-flex; gap: 8px; align-items: center; font: 500 1rem/1.3 var(--font-display); }
.f-group { display: flex; flex-direction: column; }
.f-group > h3 { display: flex; align-items: center; gap: 8px; color: var(--text-2); margin: 6px 0 6px; }
details.f-group { display: block; }
.f-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; width: 100%; padding: 8px 0; text-align: left; border-top: 1px solid var(--line); }
button.f-row::before { content: ""; position: absolute; inset: 0 -8px; z-index: -1; background: var(--surface-2); opacity: 0; transition: opacity var(--t); }
button.f-row:hover::before { opacity: 1; }
.f-icon { padding-top: 1px; }
.f-text { display: flex; flex-direction: column; gap: 1px; font-size: .8125rem; min-width: 0; overflow-wrap: anywhere; }
.f-text strong { font-weight: 600; }
.f-text span { color: var(--text-2); }
.f-text .f-page { color: var(--text-3); font-size: .75rem; }
.details { display: flex; flex-direction: column; gap: 8px; }
.details > .fold + .fold { margin-top: -8px; }
.details > .kv-list { margin-bottom: 4px; }
.disclaimer { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.trust { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; }
.trust strong { display: inline-flex; align-items: center; gap: 7px; font: 500 .9375rem/1.3 var(--font-display); }
.trust p { color: var(--text-2); }
.trust-exact strong { color: var(--ok); }
.trust-converted strong { color: var(--info); }
.trust-unreliable strong, .trust-none strong { color: var(--warn); }
.section-head-small { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-head-small h3 { margin: 8px 0 0; }

/* Hlavička karty s tlačidlom i: názov vľavo, vysvetlivka sa otvorí pod tlačidlom, pri spodnom okraji nad ním. */
.card-head { align-items: center; }
.panel-card .card-head h3 { font: 500 .8125rem/1.4 var(--font-body); }
.info-wrap { position: relative; display: inline-flex; flex: none; }
.info-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px -4px -4px 0; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); transition: background var(--t), color var(--t); }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: var(--surface-2); }
.info-btn > .icon { width: 18px; height: 18px; }
.info-pop { position: absolute; right: -4px; top: calc(100% + 6px); z-index: var(--z-menu); display: flex; flex-direction: column; gap: 8px; width: 280px; max-width: calc(100vw - 32px); padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--float); color: var(--text-2); font-size: .8125rem; line-height: 1.5; text-align: left; white-space: normal; animation: fade-in .12s ease-out; }
.info-pop.is-up { top: auto; bottom: calc(100% + 6px); }
.info-pop-title { margin: 0; color: var(--text); font-weight: 500; }
.info-pop-text { display: flex; flex-direction: column; gap: 6px; }
.info-pop p { margin: 0; }
.info-pop .guide-link { align-self: flex-start; }
@media (pointer: coarse) { .info-btn { width: 44px; height: 44px; margin: -13px -13px -13px 0; } }

/* Upozornenie na konci Kontroly a pod ním tlačidlo do sprievodcu. */
.check-notice { display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: .8125rem; line-height: 1.5; }
.check-notice strong { font-weight: 500; }
.check-notice p { margin: 0; }
.check-guide { width: 100%; color: var(--text-2); }
.check-guide:hover { color: var(--text); }
.ink-group + .ink-group { margin-top: 4px; }
.ink-group h4 { margin: 0 0 2px; color: var(--text-2); font: 600 .75rem/1.4 var(--font-body); }
.ink-list { display: flex; flex-direction: column; gap: 8px; }
.layer-list { display: flex; flex-direction: column; }
.layer-row { padding: 6px 0; border-top: 1px solid var(--line); }
.composite-block { margin: 4px 0 8px; }
.composite-block > h3 { margin: 0; font: 500 .9375rem/1.3 var(--font-display); }
.ink-row { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-top: 1px solid var(--line); }
.ink-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ink-metrics { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 0 26px; font-size: .75rem; }
.ink-metrics > div { display: flex; gap: 5px; }
.ink-metrics dt { color: var(--text-3); }
.ink-metrics dd { margin: 0; color: var(--text); font-weight: 500; }
/* Priama farba porovnaná s knižnicou tlačiarne (od 0.96) */
.ink-library { margin: 4px 0 0 26px; font-size: .75rem; line-height: 1.4; }
.ink-solo { flex: none; font-size: .75rem; }
.ink-actions { display: inline-flex; flex: none; align-items: center; gap: 14px; }
.ink-rename-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ink-rename-roles > .muted { flex-basis: 100%; }
.layer-picker { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line); }
.layer-picker-title { margin: 0; color: var(--text-2); font-weight: 500; }
.layer-pick-row { flex-wrap: nowrap; width: 100%; }
.layer-pick { flex: 1; min-width: 0; width: auto; }
.sim-pick, .show-pick { width: 100%; max-width: none; }
/* Mapa hrúbky laku: škála rovnaká ako v náhľade, značka na hranici 3D efektu. */
.thick-pick { width: 100%; max-width: none; }
.thick-legend { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.thick-bar { position: relative; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.thick-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.thick-ticks { display: flex; justify-content: space-between; color: var(--text-3); font-size: .75rem; }
/* Kontrola podľa stroja: dva výbery vedľa seba, v úzkom paneli pod sebou. */
.machine-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.machine-pick .field { margin: 0; }
.machine-select { width: 100%; max-width: none; }
/* Požiadavky na dáta vybraného tlačového stroja v karte stroja v Kontrole. */
.machine-requirements { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.machine-requirements h4 { margin: 0; font-size: .8125rem; font-weight: 600; }
.machine-requirements .requirement-lines { margin-top: 4px; }
.machine-requirements > p:last-child { margin: 6px 0 0; }
.machine-requirements-open { margin: 6px 0 0; }
.machine-presets { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.machine-presets-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.machine-presets-head h4 { margin: 0; font-size: .8125rem; font-weight: 600; }
.machine-presets-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; }
/* Predvolený stroj zákazky pri prázdnom výbere: veta a tlačidlo Použiť v jednom riadku, v úzkom paneli pod sebou. */
.machine-job { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 8px 0 0; }
.machine-job p { margin: 0; flex: 1 1 160px; }
/* Požiadavky tlačiarne: pravidlá vybranej sady pod výberom v Kontrole, v dialógu hodnota a úroveň vedľa seba. */
.requirement-lines { margin: 8px 0 0; }
.requirement-lines li { padding: 3px 0; line-height: 1.45; border-top: 1px solid var(--line); }
.requirement-lines li:first-child { border-top: 0; }
.requirement-rule { align-items: start; }
/* Stroj v cenníku kalkulácie: údaje výrobcu a Prevziať formát pod výberom. */
.press-machine-row { align-items: center; justify-content: space-between; gap: 6px 12px; margin: 2px 0 10px; }
.press-machine-row .press-machine-facts { margin: 0; flex: 1 1 220px; }
/* Masky laku a fólie pri verzii: náhľad strany masky, názov so stavom a pridanie ďalšej. */
.mask-list { display: flex; flex-direction: column; margin: 4px 0 0; }
.mask-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.mask-thumb { flex: none; width: 44px; height: 44px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.mask-thumb.is-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }
.mask-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mask-main p { margin: 0; }
.mask-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.mask-name .muted { font-size: .75rem; }
.mask-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mask-add .field { margin: 0; }
/* Bezpečné opravy (od 0.105): zoznam opráv so zaškrtnutím, neponúknuté s dôvodom, tlačidlo pod zoznamom. */
.fix-list { display: flex; flex-direction: column; margin: 4px 0 0; }
.fix-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.fix-row .check-text strong, .fix-row .check-text { font-weight: 500; }
.fix-row .check-text small { font-weight: 400; }
.fix-row.is-off { flex-direction: row; align-items: flex-start; gap: 8px; }
.fix-off { flex: none; display: grid; place-items: center; width: 16px; height: 20px; color: var(--text-3); }
.fix-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; line-height: 1.4; }
.fix-main p { margin: 0; }
.fix-main strong { font-weight: 500; color: var(--text-2); }
.fix-keep { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; }
.fix-keep .field { margin: 0; }
.fix-keep .select-small { max-width: 100%; }
.fix-run { display: flex; padding-top: 10px; border-top: 1px solid var(--line); }
.issue-card.is-portal-fix { border-color: var(--accent-line); }
.issue-card.is-portal-fix .issue-card-label { color: var(--accent-text); }
.layer-manual li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .8125rem; }
.ink-name { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 500; }
.ink-name .muted { font-weight: 400; font-size: .75rem; }
.ink-swatch { width: 14px; height: 14px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-edge); flex: none; }
.tool-section { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); align-items: flex-start; }
.tool-section h3 { margin: 0; }
.range { display: flex; align-items: center; gap: 10px; width: 100%; font-size: .8125rem; }
.range input { flex: 1; min-width: 0; }

.region-list { display: flex; flex-direction: column; margin: 0 -8px; }
.region-list button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 8px; border-radius: var(--r-sm); font-size: .8125rem; text-align: left; transition: background var(--t); }
.region-list button:hover { background: var(--surface-2); }
.region-list button.is-selected { background: var(--surface-3); }
.text-compare { display: flex; flex-direction: column; gap: 8px; }
.text-compare + .text-compare { padding-top: 14px; border-top: 1px solid var(--line); }
.compare-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.compare-head h3 { margin: 0; font: 500 .9375rem/1.3 var(--font-display); }
.compare-count { color: var(--text-2); font-size: .8125rem; }
.compare-none { display: flex; align-items: center; gap: 6px; color: var(--ok); }
.text-page { margin: 6px 0 -4px; font-weight: 500; }
.text-change-list { display: flex; flex-direction: column; margin: 0 -8px; }
.text-change-list button { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: var(--r-sm); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; transition: background var(--t); }
.text-change-list button:hover { background: var(--surface-2); }
.text-change-list button.is-selected { background: var(--surface-3); }
.text-ops { color: var(--text-2); }
.text-ops ins { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-ops del { color: var(--text-3); text-decoration: line-through; }
.text-kind { display: block; color: var(--text-3); font-size: .75rem; }

.h-version { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.panel-actions + .h-version { margin-top: 2px; }
.h-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; }
.h-head a { display: inline-flex; align-items: center; min-height: 24px; }
.h-head h3 { margin: 0; font: 500 .9375rem/1.3 var(--font-display); }
.h-version:not(.is-current) .h-head h3 { color: var(--text-2); font-weight: 400; }
.h-decisions { margin-top: 5px; width: 100%; }
.h-decisions li { display: flex; gap: 6px; align-items: flex-start; }
.h-decisions li.is-superseded { color: var(--text-3); }

.decide-mine { display: flex; gap: 8px; align-items: flex-start; }
.decide-actions { display: flex; flex-direction: column; gap: 6px; }
.decide-confirm { width: 100%; }
.decide-notes { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.reviewers { width: 100%; }
ul.plain .reviewer { display: flex; align-items: center; gap: 8px; }
.reviewer .muted { margin-left: auto; }
.reviewer-approved .icon { color: var(--ok); }
.reviewer-changes_requested .icon { color: var(--warn); }
.reviewer-waiting .icon { color: var(--text-3); }

.compare-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.compare-arrow { display: inline-flex; }
.compare-fade { width: 150px; min-height: 24px; }

@media (max-width: 1180px) {
  .viewer { --pages: 92px; --tools: 46px; --panel: 320px; }
  .page-thumb img { width: 70px; }
  .v-pages { padding: 10px; }
}

/* Protokol: dokument na bielom papieri, aj na obrazovke, aby vyzeral tak, ako sa vytlačí. */
.rgb-region { fill: none; stroke: var(--mark-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rgb-region-under { fill: none; stroke: var(--mark-dark); stroke-width: 4; vector-effect: non-scaling-stroke; }
.rgb-tag { position: absolute; transform: translateY(-100%); padding: 1px 6px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 600; line-height: 1.35; }

.f-block { display: flex; flex-direction: column; padding-bottom: 10px; }
.f-places { display: flex; flex-direction: column; gap: 4px; }
.f-places + .f-places { margin-top: 6px; }
.f-place-list { display: flex; flex-direction: column; margin: 0 -8px; }
.f-place { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border-radius: var(--r-sm); font-size: .8125rem; text-align: left; transition: background var(--t); }
.f-place:hover { background: var(--surface-2); }
.f-place .icon { color: var(--text-2); }
.f-place-tools { margin-top: 4px; }

.h-older { display: flex; flex-direction: column; gap: 8px; }
.h-older-note { display: flex; align-items: flex-start; gap: 6px; }
.h-older-note svg { flex: none; margin-top: 1px; color: var(--warn); }
.h-older .h-version h3 { font-weight: 400; }
.h-requests { border-top: 0; padding-top: 0; }
.h-request { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.h-hidden { margin-top: 4px; }
.h-hidden .field, .h-hidden form { width: 100%; }

/* Protokol: list papiera aj v tmavom vzhľade. Na obrazovke farebné náhľady a značky, v tlači len čierna na bielej. */
.report-wrap { max-width: 920px; margin: 0 auto; }
.report-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Nastavenia pre InDesign nad súhrnom požiadaviek (od 0.100), len na obrazovke. */
.adobe-presets { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.adobe-presets-text { flex: 1 1 360px; min-width: 0; }
.adobe-presets h2 { margin: 0 0 4px; font-size: .9375rem; font-weight: 600; }
.adobe-presets p { margin: 4px 0 0; font-size: .8125rem; line-height: 1.5; max-width: 68ch; }
.adobe-presets-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report {
  --paper-text: #17171a; --paper-2: #5c5c62; --paper-line: #e2e2e6; --paper-line-2: #b9b9bf; --paper-accent: var(--accent);
  --paper-ok: #23702c; --paper-warn: #8a4b00; --paper-err: #b42318;
  background: #fff; color: var(--paper-text); padding: 32px 40px 24px; font-size: .875rem; line-height: 1.5;
  border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line);
}
.report a { color: inherit; }
.report ::selection { background: #17171a; color: #fff; }
.report h1 { font: 500 1.75rem/1.15 var(--font-display); margin: 14px 0 8px; overflow-wrap: anywhere; }
.report h2 { font: 500 1.0625rem/1.3 var(--font-display); margin: 0 0 12px; }
.report h3 { font: 600 .8125rem/1.4 var(--font-body); margin: 16px 0 8px; }
.report code { font-size: .75rem; overflow-wrap: anywhere; }
.report p { margin: 0; }
.report-muted { color: var(--paper-2); font-size: .8125rem; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; }

.report-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 20px; padding-bottom: 14px; }
.report-head-top { display: flex; align-items: center; gap: 12px; }
.report-brand { display: block; height: 22px; width: auto; color: var(--paper-text); }
.report-kicker { padding-left: 12px; border-left: 1px solid var(--paper-line-2); font-size: .8125rem; font-weight: 500; line-height: 1.2; color: var(--paper-2); }
.report-link { margin-top: 6px; overflow-wrap: anywhere; }
.report-link a { text-decoration: underline; text-underline-offset: 2px; }
/* QR kód s odkazom na návrh. Obrázok má v sebe tichú zónu, tá presahuje do okraja listu, kód lícuje s textom. */
.report-qr { --qr-w: 116px; display: flex; flex-direction: column; align-items: center; width: var(--qr-w); margin: calc(var(--qr-quiet, 0) * var(--qr-w) * -1) calc(var(--qr-quiet, 0) * var(--qr-w) * -1) 0 0; color: var(--paper-2); text-decoration: none; }
.report-qr-code { display: block; width: 100%; height: auto; }
.report-qr-label { font-size: .6875rem; line-height: 1.3; text-align: center; }
/* Na telefóne už človek v Portali je, kód by mu nebol na nič. Len na obrazovke, pri tlači ostáva. */
@media screen and (max-width: 600px) { .report-qr { display: none; } }
.report-head-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.report-decision { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1px solid var(--paper-line-2); border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; color: var(--paper-2); white-space: nowrap; }
.report-decision.is-approved { color: var(--paper-ok); border-color: currentColor; }
.report-decision.is-changes { color: var(--paper-warn); border-color: currentColor; }
.report .report-notice { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .8125rem; font-weight: 600; }

.report-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 14px 0; border-top: 1px solid var(--paper-text); border-bottom: 1px solid var(--paper-line); }
.report-facts dt { font-size: .75rem; color: var(--paper-2); }
.report-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.report-note { padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.report-note .report-text { margin-top: 2px; }

.report-section { padding-top: 22px; }
.report-section + .report-section { margin-top: 22px; border-top: 1px solid var(--paper-line); }

.report-decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.report-decisions li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.report-decisions li > p { flex-basis: 100%; }
.report-decisions .is-superseded { color: var(--paper-2); }
.report-decisions .is-superseded .report-decision { color: var(--paper-2); border-color: var(--paper-line-2); }

.report-page + .report-page { margin-top: 22px; }
.report-page-body { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 22px; align-items: start; }
.report-page.no-figure .report-page-body { grid-template-columns: minmax(0, 1fr); }
.report-figure { margin: 0; }
.report-art { display: block; width: 100%; height: auto; max-height: 520px; border: 1px solid var(--paper-line-2); background: #fff; }
.report-shape-halo { fill: none; stroke: #fff; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.report-shape { fill: none; stroke: var(--paper-accent); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.report-shape.is-done { stroke: var(--paper-2); }
.report-pin-halo { fill: #fff; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.report-pin-fill { fill: var(--paper-accent); }
.report-pin text { fill: #fff; font-family: var(--font-body); font-weight: 600; }
.report-pin.is-done .report-pin-fill { fill: #fff; stroke: var(--paper-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.report-pin.is-done text { fill: var(--paper-2); }

.report-comments { list-style: none; margin: 0; padding: 0; }
.report-comment { padding: 10px 0; border-top: 1px solid var(--paper-line); }
.report-comment:first-child { border-top: 0; padding-top: 0; }
.report-comment-head { display: flex; align-items: center; gap: 8px; }
.report-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.report-num { flex: none; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper-accent); color: #fff; font-size: .75rem; font-weight: 600; }
.report-comment.is-done .report-num { background: #fff; color: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--paper-line-2); }
.report-comment-body { padding-left: 30px; display: grid; gap: 3px; margin-top: 3px; }
.report-comment.no-num .report-comment-body { padding-left: 0; }
.report-check { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.report-check-box { display: inline-flex; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; align-items: center; justify-content: center; }
.report-check.is-done { color: var(--paper-2); font-weight: 400; }
.report-replies { list-style: none; margin: 5px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--paper-line); display: grid; gap: 6px; }

.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li { padding: 6px 0; border-top: 1px solid var(--paper-line); }
.report-list li:first-child { border-top: 0; padding-top: 0; }
.report-list p { margin-top: 2px; }
.report-severity { display: flex; align-items: center; gap: 6px; }
.report-severity.is-error { color: var(--paper-err); }
.report-severity.is-warn { color: var(--paper-warn); }
.report-severity.is-ok { color: var(--paper-ok); }
.report-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.report-table th { text-align: left; font-weight: 600; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--paper-line-2); }
.report-table td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.report-table .is-current td { font-weight: 600; }
.report .text-ops { color: inherit; }
.report .text-ops ins { color: inherit; }
.report .text-ops del, .report .text-kind { color: var(--paper-2); }
.report-foot { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--paper-line-2); font-size: .75rem; color: var(--paper-2); display: grid; gap: 2px; }

@media (max-width: 640px) {
  .report-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-page-body { grid-template-columns: minmax(0, 1fr); }
  .report-art { max-height: 420px; width: auto; max-width: 100%; }
}

/* Tlač na bežnej stolovej tlačiarni: čierna na bielej, tenké linky, žiadne plné plochy. Náhľad je sivý a svetlý, len na orientáciu. */
@media print {
  @page { size: A4; margin: 12mm 12mm 13mm; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; }
  .app-header, .rail, .site-footer, .report-bar, .adobe-presets, .toasts, .skip-link, .tooltip { display: none !important; }
  .app-shell { display: block; }
  body::before { display: none !important; }
  .page-wrap { padding: 0; }
  .report-wrap { max-width: none; }
  .report {
    --paper-text: #000; --paper-2: #444; --paper-line: #c4c4c4; --paper-line-2: #8a8a8a; --paper-accent: #000;
    --paper-ok: #000; --paper-warn: #000; --paper-err: #000;
    padding: 0; font-size: 8.5pt; line-height: 1.4; box-shadow: none; border-radius: 0;
  }
  .report h1 { font-size: 15pt; margin: 8px 0 4px; }
  .report h2 { font-size: 10.5pt; margin-bottom: 6px; }
  .report h3 { margin: 10px 0 4px; }
  .report-muted { font-size: 7.5pt; }
  .report-brand { height: 15px; }
  .report-head { padding-bottom: 8px; }
  .report-qr { --qr-w: 26mm; }
  .report-qr-label { font-size: 6.5pt; }
  .report-facts { padding: 8px 0; gap: 6px 16px; }
  .report-section { padding-top: 12px; }
  .report-section + .report-section { margin-top: 12px; }
  .report-page + .report-page { margin-top: 12px; }
  .report-page-body { grid-template-columns: 58mm minmax(0, 1fr); gap: 5mm; }
  .report-art { max-height: 80mm; border-width: .5pt; }
  .report-art-image { filter: grayscale(1); opacity: .4; }
  .report-shape, .report-shape.is-done { stroke: #000; stroke-width: 1.2px; }
  .report-pin-fill, .report-pin.is-done .report-pin-fill { fill: #fff; stroke: #000; stroke-width: 1px; }
  .report-pin text, .report-pin.is-done text { fill: #000; }
  .report-num, .report-comment.is-done .report-num { width: 15px; height: 15px; font-size: 7pt; background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
  .report-comment { padding: 5px 0; }
  .report-comment-body { padding-left: 21px; }
  .report-check-box { width: 9px; height: 9px; border-width: 1px; border-radius: 1px; }
  .report-check-box .icon { width: 8px; height: 8px; }
  .report-decision { padding: 0 6px; font-size: 7.5pt; }
  .report-figure, .report-comment, .report-list li, .report-table tr, .report-head, .report-facts, .report-decisions li, .report-foot { break-inside: avoid; }
  .report .jobsheet-item h3 { font-size: 9.5pt; }
  .jobsheet-item { padding: 6px 0; break-inside: avoid; }
  .report h2, .report h3 { break-after: avoid; }
}

/* Dotyk: ovládač musí mať aspoň 44 px, aj keď na veľkej obrazovke stačí menej. */
@media (pointer: coarse) {
  .btn, .btn-small, .select-small, .link-btn { min-height: 44px; }
  .segmented button { min-height: 40px; }
  .menu-item { min-height: 44px; }
  .kbd-hint { display: none; }
}

@media (max-width: 860px) {
  body { font-size: .9375rem; }
  h1 { font-size: 1.5rem; }
  /* Pole so 16 px písma: iPhone by inak pri zameraní približoval celú stránku. */
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="search"], textarea, select, .select-small { min-height: 44px; font-size: 1rem; }
  .select-small { max-width: none; }
  .btn, .btn-small { min-height: 44px; }
  .link-btn { min-height: 44px; font-size: .875rem; }
  .segmented button { min-height: 44px; }
  .tabs { gap: 18px; }
  .tabs a { padding-block: 12px; }
  .crumb a, .project-head h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .project-go { display: none; }
  .show-more { min-height: 44px; }
  .brand { min-width: 44px; min-height: 44px; }
  .h-head a { display: inline-flex; align-items: center; min-height: 44px; }
  .bell-trigger, .help-trigger { width: 44px; height: 44px; }
  .bell-count { top: 4px; right: 3px; }
  .header-send { min-width: 44px; justify-content: center; margin-right: 0; padding-inline: 10px; }
  .header-send-label { display: none; }
  .notif-close { width: 44px; height: 44px; }
  .notif-actions .btn { min-height: 44px; padding-inline: 14px; }
  .site-footer-link, .site-footer-version, .site-footer-legal { min-height: 44px; }
  .menu-trigger { min-width: 44px; min-height: 44px; justify-content: center; padding: 4px 8px; }
  .menu-item { min-height: 44px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .check { min-height: 44px; align-items: center; }
  .check-text { font-size: .875rem; }
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .page-head .btn-primary { flex: none; }
  .tab-head { align-items: stretch; }
  .tab-actions .btn { width: 100%; }
  .tab-actions { flex: 1 1 100%; }
  .kbd-hint { display: none; }

  .report { padding: 24px 18px; }

  /* Riadok návrhu: náhľad vľavo, všetko ostatné pod sebou vedľa neho. */
  .design-row { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 4px 14px; }
  .design-row .row-thumb { grid-row: 1 / span 3; }
  .design-row > :not(.row-thumb) { grid-column: 2; }
  .design-row .design-comments { align-items: flex-start; text-align: left; }
  .design-row .design-comments:empty { display: none; }
  .design-item .design-row { padding-right: calc(var(--actions, 1) * 46px); }
  .row-action { width: 44px; height: 44px; }
  .waiting-row { grid-template-columns: 56px minmax(0, 1fr) 20px; }
  .waiting-reason { grid-column: 2; grid-row: 2; color: var(--text-2); font-size: .8125rem; }
  .waiting-reason.sev-warn { color: var(--warn); }
  .waiting-reason.sev-error { color: var(--err); }
  .waiting-row .row-go { grid-row: 1 / span 2; grid-column: 3; }
  .grants li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 8px; border-top: 1px solid var(--line); }
  .grants li > .btn { justify-self: start; }
  .list-tools .segmented { overflow-x: auto; scrollbar-width: none; }

  /* Oprávnenia: tabuľka sa na telefóne mení na bloky s popiskami, inak by sa musela posúvať do strany. */
  .table-wrap:has(table.members) { overflow: visible; }
  table.members, table.members tbody, table.members tr, table.members td, table.data.members tbody th { display: block; width: 100%; }
  table.members thead { display: none; }
  table.members tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.data.members td, table.data.members tbody th { padding: 2px 0; border: 0; min-width: 0; }
  table.members td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  table.members td[data-label]::before { content: attr(data-label); color: var(--text-2); font-size: .875rem; }
  table.members .cell-check input { margin: 0; }
  table.members .cell-action { text-align: left; }
  table.members .cell-action .btn { margin-left: -13px; }
  table.members input[type="date"], table.members select { min-height: 44px; font-size: 1rem; }
  table.members .member-full { padding-top: 6px; }

  .fullscreen { height: auto; min-height: 100dvh; overflow: visible; }
  .viewer, .viewer.single-page, .viewer.panel-hidden, .viewer.in-compare {
    height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "top" "tools" "center" "pages" "panel";
  }
  .viewer.panel-hidden .v-panel { display: flex; }
  .viewer.in-compare .v-tools { display: flex; }
  .tool-panel, .tool-help { display: none; }

  .v-top { gap: 4px 8px; padding: 4px 12px 8px; }
  .v-top .brand { display: none; }
  /* Zvonček je v prvom riadku vedľa názvu, návrh tak ostane vysoko. */
  .v-top-left { flex: 1 1 0; width: auto; gap: 2px; }
  .v-top > .bell, .v-top > .menu { order: 1; }
  .v-top-center { order: 2; }
  .back { justify-content: center; min-width: 44px; min-height: 44px; margin-left: -12px; }
  .back-name, .v-crumbs, .v-top .crumb-sep { display: none; }
  .v-title { flex: 0 1 auto; font-size: 1.0625rem; }
  .status-mobile { display: inline-flex; flex: none; margin-left: auto; padding-left: 8px; }
  .v-top-center { width: 100%; gap: 8px; }
  .v-version { flex: 1 1 130px; width: auto; min-width: 0; }
  .v-upload { display: none; }
  .compare-bar { width: 100%; }
  .compare-bar select { flex: 1 1 0; width: auto; min-width: 0; }
  .compare-modes { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .compare-modes { gap: 0; }
  .compare-modes button { flex: 1 1 auto; padding-inline: 4px; font-size: .75rem; }
  .compare-fade { flex: 1 1 100%; width: auto; min-height: 44px; }

  .v-top-right .status-text { display: none; }
  .v-top-right:not(:has(button)) { display: none; }
  .v-top-right { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-2); flex-wrap: nowrap; }
  .v-top-right .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .viewer:has(.v-top-right button) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .old-banner { position: sticky; top: 0; z-index: var(--z-bar); padding-block: 10px; }
  .old-banner a { display: inline-flex; align-items: center; min-height: 44px; }
  .client-note-btn { min-height: 44px; }
  .person-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 12px; }
  .person-row > * { grid-column: 1; }
  .person-row .row-go { grid-column: 2; grid-row: 1 / span 4; }
  .person-row .person-activity:empty, .person-shield:empty { display: none; }
  .folder-path a { min-height: 44px; }
  .folder-copy { width: 44px; height: 44px; }
  .folder-meta { white-space: normal; }
  .c-person { min-height: 44px; }
  .lang-switch button { min-height: 44px; }
  .version-fold { margin-left: 70px; }
  .version-fold > summary { min-height: 44px; }
  .version-list li { min-height: 44px; align-items: center; }
  .version-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .f-place { min-height: 44px; }
  .row-actions .row-action { width: 44px; height: 44px; }
  .design-item .folder-row { padding-right: calc(var(--actions, 1) * 46px + 8px); }
  .password-toggle { width: 44px; height: 44px; }
  .member-who a { min-height: 44px; }
  .check-line { white-space: normal; }
  .code-input { max-width: none; }

  .v-tools { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; padding: 2px 4px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .tool-sep { display: none; }
  .tool { width: 44px; height: 44px; }
  .tool.mobile-only { display: inline-flex; order: 2; }
  .tool-extra { display: none; order: 4; }
  .v-tools.is-open .tool-extra { display: inline-flex; }
  .v-tools.is-open::after { content: ""; flex-basis: 100%; order: 3; }
  .tool-more { margin-left: auto; }
  .tool-more.is-open { background: var(--surface-2); color: var(--text); }
  .zoom .tool { width: 40px; height: 40px; }
  .hud { display: none; }
  .pin-actions { display: none; }
  .page-size { display: none; }
  .sheet-view { position: fixed; z-index: var(--z-menu); }
  .sheet-head { padding: 12px 16px 10px; }
  .sheet-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .sheet-chip { flex: none; min-height: 44px; }
  .sheet-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 12px 16px 24px; }
  .ruler-corner::after { content: ""; position: absolute; inset: 0 -20px -20px 0; }

  .v-center { height: auto; min-height: 0; }
  .stage-slot { height: auto; }
  .stage { flex: none; height: 62dvh; min-height: 320px; }
  .swipe-grip { width: 44px; height: 44px; }

  .v-pages { flex-direction: row; overflow-x: auto; padding: 10px 12px; border-right: 0; border-top: 1px solid var(--line); }
  .page-thumb img { width: 52px; }
  .v-panel { border-left: 0; border-top: 1px solid var(--line); }
  .panel-content { overflow: visible; }
  .panel-tabs button { min-width: 44px; min-height: 44px; justify-content: center; font-size: .875rem; }
  .c-actions { gap: 0 16px; }
  .c-num::after { content: ""; position: absolute; inset: -10px; }
  .text-change-list button, .region-list button { min-height: 44px; align-items: center; }

  .strip { display: flex; flex-wrap: wrap; }
  .patch { min-width: 56px; }
  .strip-hint { display: none; }
  .strip-middle:empty { display: none; }
  .strip-trust { min-height: 44px; margin-left: 0; padding-inline: 0; }
}

/* Bez kurzora sa hodnoty pod ním nezobrazia, prázdne pomlčky by len zavádzali. */
@media (hover: none) {
  .strip:not(.has-reading) .patch-value, .strip:not(.has-reading) .strip-total { display: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Prehľad a Ľudia: každá časť je samostatný celok, aby sa nezlievali. Výnimka z pravidla bez kontajnerov, pozri DESIGN.md. */
.dash-section { margin-top: 20px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.dash-section.section-first { margin-top: 20px; }
.dash-section > h2:first-child, .dash-section > .section-head:first-child { margin-bottom: 12px; }
.dash-section .project-block:first-of-type { margin-top: 12px; }
.dash-section .project-block + .project-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dash-section .list-tools { margin-bottom: 10px; }
.client-rows { max-height: 396px; overflow-y: auto; margin-inline: -10px; padding-inline: 10px; }
.design-mark { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--text-2); }
.h-watermark { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.h-watermark p { display: inline-flex; align-items: center; gap: 6px; }
.protected-note { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font-size: .8125rem; }
.panel-body > .protected-note { margin: 12px 12px 8px; }
.panel-cards > .protected-note { margin: 0; }
.person-contact { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.person-activity { display: flex; flex-direction: column; min-width: 0; }
.person-state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.person-flags { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.person-flag { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 500; color: var(--warn); }
.person-flag.flag-decide { color: var(--info); }
.person-pending { border-color: var(--warn); background: var(--warn-soft); }
.person-danger .danger-text { border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.attention-row { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) 20px; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.attention-row strong { font-weight: 500; overflow-wrap: anywhere; }
.invite-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t), background var(--t); }
.choice-card:hover { border-color: var(--line-3); }
.choice-card.is-selected { border-color: var(--accent-line); background: var(--surface-2); }
.choice-card input { margin-top: 3px; accent-color: var(--control); }
.choice-text { display: flex; flex-direction: column; gap: 3px; }
.choice-text strong { font-weight: 500; }
.choice-text small { color: var(--text-2); font-size: .8125rem; line-height: 1.4; }
.field-slot { display: contents; }
.person-contact-card .form-grid { width: 100%; }
.person-contact-card .stack > .btn { align-self: flex-start; }
.add-client { margin-top: 16px; padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); }
.page-wide { max-width: 1320px; }
.mail-tools { margin-top: 16px; }
.mail-tools .select-small { max-width: 260px; }
.mail-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.mail-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 250px); overflow-y: auto; padding-right: 4px; }
.mail-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text); text-align: left; transition: border-color var(--t), background var(--t); }
.mail-row:hover { border-color: var(--line-3); }
.mail-row.is-selected { border-color: var(--accent-line); background: var(--surface-2); }
.mail-row strong { font-weight: 500; overflow-wrap: anywhere; }
.mail-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mail-kind { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: .75rem; font-weight: 500; }
.mail-reader { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); min-width: 0; }
.mail-reader-head { display: flex; flex-direction: column; gap: 6px; }
.mail-reader-head h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.mail-meta { display: grid; gap: 4px; width: 100%; margin: 0; padding: 10px 0; border-block: 1px solid var(--line); font-size: .875rem; }
.mail-meta > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.mail-meta dt { color: var(--text-3); }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-reader .mail-body { margin: 0; color: var(--text); }
/* E-mail tak, ako ho uvidí adresát. Pozadie je pozadie e-mailu, aby rámček pri načítaní neblikol bielou. */
.mail-frame { align-self: stretch; display: block; width: 100%; min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-md); background: #f2f1f6; }
.mail-format { align-self: flex-start; }
.mail-groups { flex-basis: 100%; width: max-content; max-width: 100%; overflow-x: auto; }
.mail-channels { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--text-3); }
.mail-channel { display: inline-flex; }
.mail-row-detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--text-2); font-size: .8125rem; }
.mail-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--accent-line); background: var(--surface-2); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; }
.mail-actions { flex-wrap: wrap; gap: 8px; }
.mail-thread { display: flex; flex-direction: column; gap: 6px; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); }
.mail-thread h3 { margin: 0; font: 500 .9375rem/1.3 var(--font-display); }
.mail-thread ol { display: flex; flex-direction: column; gap: 4px; }
.mail-thread-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text); text-align: left; transition: background var(--t), border-color var(--t); }
.mail-thread-row:hover { background: var(--surface-2); }
.mail-thread-row.is-current { border-color: var(--accent-line); background: var(--sel-bg); }
.mail-thread-row .mail-kind { grid-column: 1; }
.mail-thread-row > .muted { grid-column: 2; grid-row: 1; }
.mail-thread-text { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.transfer-zone { flex-wrap: wrap; cursor: default; }
.transfer-zone .dropzone-text { flex: 1 1 240px; }
.transfer-zone-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.transfer-picked { max-height: 260px; overflow-y: auto; }
.transfer-files { display: flex; flex-direction: column; gap: 4px; margin: 0; width: 100%; }
.transfer-files:empty { display: none; }
.transfer-files li { display: flex; align-items: center; gap: 8px; min-height: 28px; flex-wrap: wrap; }
.transfer-file-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.transfer-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; }
.transfer-head h3 { font: 500 1.0625rem/1.3 var(--font-display); overflow-wrap: anywhere; }

/* Stav návrhov na Prehľade: obdobie sa vyberá vpravo v hlavičke karty. */
.status-card .section-head { align-items: center; }
.status-period { margin-left: auto; width: auto; }
.status-note { margin: 10px 0 0; }

/* Okno Odoslať dáta: hlavička s krížikom, posúvaný obsah s okrajmi a tlačidlá dole vpravo. */
.dialog:has(.send-dialog) { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: hidden; }
.send-dialog { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.send-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--line); }
.send-dialog-head h2 { margin: 0 0 4px; font-size: 1.125rem; }
.send-dialog-head p { margin: 0; max-width: 52ch; }
.send-dialog-close { flex: none; width: 36px; height: 36px; margin: -4px -4px 0 0; color: var(--text-2); }
.send-dialog-body { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 20px 24px 22px; overflow-y: auto; overscroll-behavior: contain; }
.send-dialog-body .transfer-zone { padding: 18px; }
.send-dialog-body .transfer-picked:not(:empty) { padding: 4px 0; border-block: 1px solid var(--line); }
.send-dialog-body .form-error, .send-dialog-body .form-note:empty { margin: 0; }
.send-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.send-dialog-body textarea { min-height: 84px; resize: vertical; }
.send-dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--raised); }
@media (max-width: 560px) {
  .dialog:has(.send-dialog) { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .send-dialog { max-height: calc(100dvh - 18px); }
  .send-dialog-head { padding: 16px 12px 12px 16px; }
  .send-dialog-body { padding: 16px; }
  .send-dialog-grid { grid-template-columns: minmax(0, 1fr); }
  .send-dialog-foot { padding: 12px 16px; }
  .send-dialog-foot .btn { flex: 1 1 0; justify-content: center; }
}

/*
 * Evidencia odoslaných dát: každé odoslanie je samostatná karta. Zavretá má v jednom riadku názov, kedy a komu, stav odkazu
 * a tlačidlá Stiahnuť a Kopírovať odkaz. Stĺpce sú spoločné pre celý zoznam, stavy a tlačidlá sú tak pod sebou.
 * Rozbalená karta má pod sebou sivý podklad a na ňom obsah, odkaz, údaje a možnosti, každé vo vlastnom rámčeku.
 */
.transfer-register > .list-tools { margin-bottom: 14px; }
.transfer-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 16px; }
.transfer-list > .empty { grid-column: 1 / -1; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.transfer-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 0; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); scroll-margin-top: 16px; transition: border-color var(--t), box-shadow var(--t); }
.transfer-row:hover, .transfer-row.is-open { border-color: var(--line-2); }
.transfer-row.is-target { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.transfer-title { min-width: 0; margin: 0; font: inherit; }
.transfer-toggle { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 8px; align-items: center; width: 100%; min-height: 44px; padding: 6px 8px 6px 6px; border-radius: var(--r-sm); background: none; color: var(--text); text-align: left; transition: background var(--t); }
.transfer-toggle:hover { background: var(--hover-soft); }
.transfer-chevron { display: grid; place-items: center; color: var(--text-3); transform: rotate(-90deg); transition: transform var(--t), color var(--t); }
.transfer-toggle:hover .transfer-chevron { color: var(--text); }
.transfer-row.is-open .transfer-chevron { transform: none; }
.transfer-name { font: 500 1rem/1.3 var(--font-display); overflow-wrap: anywhere; }
.transfer-row.is-gone .transfer-name { color: var(--text-2); }
.transfer-sub { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--text-2); font-size: .8125rem; }
.transfer-sep { color: var(--text-3); }
.transfer-sub-lock { display: inline-flex; align-items: center; gap: 4px; }
.transfer-state { display: flex; min-width: 0; }
.transfer-quick { display: flex; justify-content: flex-end; gap: 8px; }
.transfer-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; gap: 12px; margin: 8px -14px -8px -8px; padding: 14px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--bg); animation: fade-in .14s ease-out; }
.transfer-detail[hidden] { display: none; }
.transfer-detail-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.transfer-box { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.transfer-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin: 0; color: var(--text); font: 500 .875rem/1.3 var(--font-body); }
.transfer-box-head .muted { font-size: .75rem; font-weight: 400; }
.transfer-box .transfer-content { margin: 0 -14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.transfer-box .transfer-content > li { padding: 4px 8px 4px 14px; }
.transfer-box .transfer-content:last-child { margin-bottom: -14px; }
.transfer-zip { align-self: flex-start; }
.transfer-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.transfer-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; }
.transfer-facts dt { color: var(--text-3); font-size: .8125rem; }
.transfer-facts dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.transfer-options { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: -4px -8px -6px; }
.transfer-status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-2); font-size: .8125rem; white-space: nowrap; }
.transfer-status.is-live { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); background: var(--ok-soft); }
.transfer-status.is-live.sev-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-soft); }
.transfer-status.is-dead { color: var(--text-3); }
.transfer-note { margin: 0; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.transfer-content { gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.transfer-content > li { padding: 4px 6px 4px 10px; min-height: 36px; }
.transfer-content > li + li { border-top: 1px solid var(--line); }
.transfer-content .icon { flex: none; color: var(--text-3); }
.transfer-get { width: 30px; height: 30px; flex: none; color: var(--text-2); }
.transfer-files li.transfer-folder { display: block; }
.transfer-folder summary { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; list-style: none; }
.transfer-folder summary::-webkit-details-marker { display: none; }
/* Šípka pred priečinkom ukazuje, že sa dá rozbaliť na súbory. */
.transfer-folder summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform var(--t); }
.transfer-folder details[open] summary::before { transform: rotate(45deg); }
.transfer-folder summary:hover .transfer-file-name { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.transfer-folder summary .transfer-get { margin-left: 0; }
.transfer-subfiles { display: flex; flex-direction: column; margin: 4px 0 4px 7px; border-left: 1px solid var(--line-2); }
.transfer-subfiles li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding-left: 26px; font-size: .8125rem; }
.link-copy { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 4px 4px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--field); }
.link-copy > .icon { flex: none; color: var(--text-3); }
.link-copy-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text); text-decoration: none; }
a.link-copy-url:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-copy.is-dead .link-copy-url { color: var(--text-3); }
.link-copy-btn { flex: none; }
.link-copy-btn.is-done { color: var(--ok); }
.transfer-actions { align-items: center; justify-content: space-between; gap: 8px 12px; }

/* Stránka na stiahnutie pre príjemcu: pozadie firmy na celú obrazovku a vľavo karta, ako pri WeTransferi.
   Pozadie je rovnaké vo svetlom aj tmavom vzhľade, karta sa riadi vzhľadom zariadenia príjemcu. */
.dl { position: relative; min-height: 100vh; min-height: 100dvh; }
.dl-bg { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 82%, #ffffff) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 64%, #000000) 100%); }
.dl-bg-mark { position: absolute; right: -6vmax; bottom: -10vmax; width: 78vmax; height: auto; fill: none; stroke: rgb(255 255 255 / .16); stroke-width: .35; }
.dl-card { position: fixed; z-index: 1; top: 50%; left: clamp(20px, 5vw, 72px); transform: translateY(-50%); display: flex; flex-direction: column; width: min(424px, calc(100vw - 40px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: 18px; background: var(--card); box-shadow: var(--float); }
.dl[data-side="right"] .dl-card { left: auto; right: clamp(20px, 5vw, 72px); }
.dl-card-head { flex: none; padding: 24px 28px 0; }
.dl-brand { display: flex; height: 26px; color: var(--text); }
.dl-brand .brand-logo { height: 26px; }
.dl-brand .brand-custom { max-width: 180px; }
.dl-card-body { min-height: 0; overflow: auto; padding: 22px 28px 26px; }
.dl-from { margin: 0 0 6px; color: var(--text-2); font-size: .875rem; font-weight: 500; }
.dl-title { margin: 0; font: 600 1.625rem/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.dl-title:focus { outline: none; }
.dl-title-icon { display: flex; align-items: center; gap: 10px; }
.dl-title-icon .icon { flex: none; color: var(--accent-text); }
.dl-message { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--field); color: var(--text-2); font-size: .90625rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-summary { display: flex; flex-wrap: wrap; margin: 18px 0 0; color: var(--text-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.dl-summary span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--text-3); }
.dl-items { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dl-items li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dl-item-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--field); color: var(--text-2); }
.dl-item-text { min-width: 0; }
.dl-item-name { display: block; font-size: .90625rem; font-weight: 500; overflow-wrap: anywhere; }
.dl-item-meta { display: block; color: var(--text-3); font-size: .78125rem; font-variant-numeric: tabular-nums; }
.dl-main { width: 100%; min-height: 52px; margin-top: 20px; padding: 0 18px; border-radius: var(--r-md); font-size: 1rem; font-weight: 600; white-space: normal; text-align: center; }
.dl-main .icon { flex: none; }
.dl-started { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-size: .875rem; font-weight: 500; }
.dl-started[hidden] { display: none; }
.dl-started .icon { flex: none; }
.dl-note { margin: 14px 0 0; color: var(--text-3); font-size: .8125rem; }
.dl-note + .dl-note { margin-top: 4px; }
.dl-lead { margin: 10px 0 0; color: var(--text-2); }
.dl-form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.dl-form input { height: 46px; font-size: 1rem; }
.dl-form .dl-main { margin-top: 6px; }
.dl-card-body .notice { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); }
.dl-card-body .notice .icon { flex: none; margin-top: 1px; }
/* Ochrana údajov: zbalená pod kartou, malé písmo, stiahnutie má prednosť. */
.dl-privacy { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8125rem; }
.dl-privacy summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text-2); font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--r-sm); }
.dl-privacy summary::-webkit-details-marker { display: none; }
.dl-privacy summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.dl-privacy[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.dl-privacy summary:hover span { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.dl-privacy summary .icon { flex: none; }
.dl-privacy-body p { margin: 8px 0 0; line-height: 1.5; }
.dl-privacy-body a { color: var(--accent-text); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .dl-privacy summary::after { transition: none; } }
/* Telefón: pozadie je pruh hore, karta pod ním na celú šírku, tlačidlo na dosah palca. */
@media (max-width: 720px) {
  .dl-bg { bottom: auto; height: 40vh; }
  .dl-card, .dl[data-side] .dl-card { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; max-height: none; min-height: calc(60vh + 20px); margin-top: calc(40vh - 20px); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgb(0 0 0 / .18); }
  .dl-card-head { padding: 22px 20px 0; }
  .dl-card-body { overflow: visible; padding: 18px 20px 32px; }
  .dl-title { font-size: 1.4375rem; }
  .dl-item-get { min-height: 44px; }
  /* Pri dlhom zozname ostáva hlavné tlačidlo prilepené dole, kým je zoznam na obrazovke. */
  .transfer-download .dl-main { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1; box-shadow: 0 0 0 6px var(--card), 0 10px 24px rgb(0 0 0 / .22); }
}
/* Užší obsah: stav a tlačidlá idú pod názov, rámčeky po rozbalení pod seba. Rozhoduje šírka evidencie, nie okna, ľavý panel môže byť otvorený aj zavretý. */
.transfer-register { container-type: inline-size; }
@container (max-width: 960px) {
  .transfer-list { display: flex; flex-direction: column; }
  .transfer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding-bottom: 12px; }
  .transfer-title { grid-column: 1 / -1; }
  .transfer-state { padding-left: 34px; }
  .transfer-detail { margin-top: 4px; margin-bottom: -12px; }
}
@container (max-width: 720px) {
  .transfer-detail { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 540px) {
  .transfer-row { grid-template-columns: minmax(0, 1fr); padding-inline: 6px 10px; }
  .transfer-detail { margin-inline: -6px -10px; padding: 10px; }
  .transfer-quick { padding-left: 34px; justify-content: stretch; }
  .transfer-quick .btn { flex: 1 1 0; justify-content: center; }
  .transfer-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .link-copy { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .link-copy-url { flex-basis: calc(100% - 30px); white-space: normal; overflow-wrap: anywhere; }
  .link-copy-btn { margin-left: auto; }
}
@media (max-width: 860px) {
  .dash-section { padding: 14px 14px 16px; }
  .person-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .person-contact, .person-activity, .person-state { grid-column: 1; }
  .person-row .row-go { grid-column: 2; grid-row: 1; }
  .attention-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .attention-row .person-flag, .attention-row strong { grid-column: 1; }
  .attention-row .row-go { grid-column: 2; grid-row: 1 / span 2; }
  .mail-layout { grid-template-columns: minmax(0, 1fr); }
  .mail-list { max-height: 45dvh; }
  .mail-reader { position: static; padding: 14px; }
  .c-btn { min-height: 44px; padding-inline: 12px; font-size: .8125rem; }
  .choice-card { min-height: 44px; }
}

/* Prihlásenie: formulár a vedľa neho vecne, čo sa tu dá spraviť. */
.auth-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.auth-about { padding-left: 48px; border-left: 1px solid var(--line); }
.auth-about h2 { margin-bottom: 14px; font-size: 1.0625rem; }
.auth-about dl { max-width: 46ch; }
.auth-about-row { padding: 12px 0; border-top: 1px solid var(--line); }
.auth-about dt { font-weight: 500; }
.auth-about dd { margin-top: 2px; font-size: .8125rem; }

/* Bežný stav ustupuje, aby bolo vidno výnimky. Tichá akcia sa zafarbí až pri hoveri. */
.status-in_review, .status-draft { font-weight: 400; }
.btn-quiet { color: var(--text-2); font-weight: 400; }
.btn-quiet:hover { color: var(--err); }

.page-head { align-items: flex-start; }
.page-head .lead { margin: 6px 0 0; }
.tab-head:has(.lead) { justify-content: space-between; }
.my-folder-head { align-items: flex-start; gap: 12px 24px; }
.my-folder-title { flex: 1 1 320px; }
.my-folder-head .section-lead { margin: 6px 0 0; }
.dash-section > .empty:first-child { padding: 0 0 12px; }
.dash-section > .empty:only-child { padding: 0; }
.attention-row { grid-template-columns: 220px minmax(0, 1fr) 20px; }

/* Sekcie ako karty z náhľadu D: tenká linka, malé zaoblenie, plocha karty nad pozadím stránky. */
.dash-section { margin-top: 16px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.dash-section.section-first { margin-top: 22px; }
.dash-section > h2:first-child, .dash-section > .section-head:first-child h2, .dash-section > .section-head h2 { font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
.dash-section .section-count { font: 400 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.dash-section.archived { background: transparent; }
.dash-section.people-list { padding-top: 16px; }
/* Čakajúci účet je výzva na rozhodnutie, preto si plochu nechá. */
.dash-section.person-pending { padding: 16px 18px; border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--warn-soft); }
.registration-mode { max-width: none; margin: 32px 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.registration-mode .field { display: grid; grid-template-columns: auto minmax(180px, 260px) minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.registration-mode .field-hint { margin: 0; }

/* Pripomienky: ľudia v jednom riadku, samotné pripomienky sú hneď pod nimi. Farba osoby je len na čísle, ako na značke v návrhu. */
.c-people { gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
.c-person { grid-template-columns: 10px minmax(0, 1fr) auto 18px; gap: 8px; min-height: 32px; padding: 4px 6px; }
.c-person-name strong { font-size: .8125rem; }
.c-person-count { text-align: right; }
.reviewer-state { grid-column: auto; white-space: nowrap; }
.c-item { margin: 0 12px 12px; }
.c-item.has-person { border-color: var(--line); }
.c-item.has-person.is-selected { border-color: var(--accent-line); }
/* Akcie berú celú šírku karty aj pod číslom, inak by sa Zmazať zalomilo na vlastný riadok. */
.c-actions { margin-left: -34px; }
.c-btn { padding: 3px 8px; }
.c-btn.is-info { border-color: color-mix(in srgb, var(--info) 22%, transparent); background: color-mix(in srgb, var(--info-soft) 55%, transparent); }
.c-btn.is-ok { border-color: color-mix(in srgb, var(--ok) 22%, transparent); background: color-mix(in srgb, var(--ok-soft) 55%, transparent); }
.c-btn.is-warn { border-color: color-mix(in srgb, var(--warn) 22%, transparent); background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
.c-btn.is-err { margin-left: auto; border-color: color-mix(in srgb, var(--err) 22%, transparent); background: color-mix(in srgb, var(--err-soft) 55%, transparent); }
@media (pointer: coarse), (max-width: 860px) {
  .c-person { min-height: 44px; }
}

@media (max-width: 860px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-about { padding-left: 0; border-left: 0; }
  .attention-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .my-folder-head .section-actions { width: 100%; }
  .my-folder-head .btn-primary { order: -1; width: 100%; }
  .my-folder-head .btn-secondary { flex: 1 1 auto; }
  .registration-mode .field { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dev-badge { display: none; }
}

/* Správy k návrhu: skupinový rozhovor odhora nadol, najnovšie dole pri poli na písanie.
   Ostatní sú vľavo s pastelovým kolieskom v ich farbe, vlastné správy vpravo vo fialovej bubline. Udalosť je karta s ikonou v štvorčeku. */
.tab-badge.is-new, .panel-tabs button.is-active .tab-badge.is-new { background: var(--accent); color: var(--on-accent); }
.msg-panel { min-height: 100%; padding-bottom: 12px; }
.msg-intro { margin: 0; }
.msg-list { display: flex; flex-direction: column; flex: 1 0 auto; }
.avatar { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--person) 17%, #fff); color: color-mix(in srgb, var(--person) 72%, #000); font: 500 .6875rem/1 var(--font-body); user-select: none; font-variant-numeric: tabular-nums; }
:root:not([data-theme="light"]) .avatar:not(.is-neutral) { filter: saturate(.85) brightness(.9); }
.avatar.is-neutral { background: var(--field); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; margin-top: 12px; }
.msg.is-follow { margin-top: 4px; }
.msg.is-mine { grid-template-columns: minmax(0, 1fr); }
.msg-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.msg.is-mine .msg-main { align-items: flex-end; }
.msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.msg-head strong { font-size: .8125rem; font-weight: 500; }
.msg-role { color: var(--text-3); font-size: .75rem; }
.msg-body { max-width: 100%; margin: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; background: var(--card); font-size: .8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.is-follow .msg-body { border-radius: 14px; }
.msg.is-mine .msg-body { max-width: 86%; border-color: transparent; border-radius: 14px 4px 14px 14px; background: var(--mine); }
.msg.is-mine.is-follow .msg-body { border-radius: 14px; }
.msg.is-target .msg-body { box-shadow: 0 0 0 2px var(--focus); }
.msg-body { transition: box-shadow var(--t); }
.msg.is-deleted .msg-body { border: 1px dashed var(--line-2); background: transparent; color: var(--text-3); font-style: italic; }
.msg.is-deleted .avatar { opacity: .45; }
.msg-foot { display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 4px; color: var(--text-3); font: 400 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.msg.is-mine .msg-foot { flex-direction: row-reverse; }
.msg-version { padding: 3px 6px; border-radius: 4px; background: var(--field); color: var(--text-2); white-space: nowrap; }
/* Kôš je pri čase pod bublinou, nič nezakrýva. Ukáže sa pri myši alebo zameraní, na dotyku je vidieť stále. */
.msg-delete { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); color: var(--text-3); opacity: 0; transition: opacity var(--t), color var(--t), background var(--t); }
.msg-delete:hover { background: var(--err-soft); color: var(--err); }
.msg:hover .msg-delete, .msg:focus-within .msg-delete { opacity: 1; }
@media (hover: none) { .msg-delete { opacity: 1; } }
.msg-event { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; column-gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--field); }
.msg-event-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--card); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.msg-event.is-upload .msg-event-icon { background: var(--info-soft); color: var(--info); box-shadow: none; }
.msg-event.is-approved .msg-event-icon { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.msg-event.is-changes .msg-event-icon { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.msg-event.is-superseded { background: transparent; }
.msg-event.is-superseded .msg-event-icon { background: var(--field); color: var(--text-3); box-shadow: none; }
.msg-event .msg-main { gap: 4px; }
.msg-event-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; padding-top: 1px; font-size: .8125rem; }
.msg-event-meta { color: var(--text-3); font: 400 .75rem/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.msg-event-title strong { font-weight: 500; }
.msg-event.is-superseded .msg-event-title strong { color: var(--text-2); font-weight: 400; }
.msg-tag { align-self: center; padding: 3px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-3); font: 400 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.msg-quote { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--line-2); color: var(--text-2); font-size: .8125rem; line-height: 1.5; }
.msg-day { display: flex; align-items: center; gap: 10px; margin: 20px 0 6px; color: var(--text-3); font: 400 .6875rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-day:first-child { margin-top: 4px; }
.msg-day::before, .msg-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.msg-new { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--accent-text); font: 500 .6875rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.msg-new::before, .msg-new::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.msg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 20px; color: var(--text-2); text-align: center; }
.msg-empty p { margin: 0; }
.msg-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 10px; background: var(--field); color: var(--text-2); }
.msg-readonly { margin: 8px 0 0; }
/* Pole na písanie cez celú šírku panelu, prilepené dole. Rastie s textom do 200 px. */
.msg-compose { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin: 12px -12px -12px; padding: 12px; border-top: 1px solid var(--line); background: var(--bg); }
.msg-compose-field { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: end; }
.msg-compose textarea { width: 100%; min-height: 40px; max-height: 200px; resize: none; line-height: 1.5; font-size: .8125rem; }
.msg-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 42px; }


/* Vyraďovanie zatiaľ len ohlásené: tri kroky postupu, posledný čaká. */
.page-impose > * { max-width: 760px; }
.impose-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 20px; padding: 0; list-style: none; }
.impose-step { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.impose-step.is-soon { border-style: dashed; border-color: var(--accent-line); background: transparent; }
.impose-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); font-size: .75rem; font-weight: 600; line-height: 24px; text-align: center; }
.impose-step.is-soon .impose-n { background: var(--accent); color: var(--on-accent); }
.impose-text { display: flex; flex-direction: column; gap: 4px; }
.impose-text strong { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .impose-steps { grid-template-columns: 1fr; } }

/* Kontrola ako v náhľade D: súhrn je karta navrchu, nálezy sú karty podľa závažnosti.
   Ikona závažnosti je vo farebnom štvorčeku, počet je štítok s rovnakou šírkou číslic. */
.check-card { gap: 10px; }
.check-card .check-summary { display: flex; align-items: center; gap: 12px; color: var(--text); font: 450 1.0625rem/1.3 var(--font-display); }
.check-card .check-summary .f-icon { width: 36px; height: 36px; border-radius: 8px; }
.check-card .content-block { margin: 0; }
.f-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); background: var(--field); }
.f-icon.sev-error { background: var(--err-soft); }
.f-icon.sev-warn { background: var(--warn-soft); }
.f-icon.sev-info { background: var(--info-soft); }
.f-icon.sev-ok { background: var(--ok-soft); }
.f-icon > .icon { width: 16px; height: 16px; }
.check-card .check-summary .f-icon > .icon { width: 18px; height: 18px; }
.panel-body > .f-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.panel-body > .f-group > h3, .panel-body > details.f-group > summary { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px 10px; color: var(--text); font: 500 .8125rem/1.35 var(--font-body); }
.panel-body > details.f-group > summary { padding-bottom: 12px; transition: background var(--t); }
.panel-body > details.f-group > summary:hover { background: var(--surface-2); }
.panel-body > details.fold.f-group[open] { padding-bottom: 0; }
.panel-body > details.fold.f-group { border-top: 1px solid var(--line); }
.f-group .fold-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font: 500 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.f-group:has(> .f-row .f-icon.sev-error) .fold-count { background: var(--err-soft); color: var(--err); }
.f-group:has(> .f-row .f-icon.sev-warn) .fold-count { background: var(--warn-soft); color: var(--warn); }
.f-group:has(> .f-row .f-icon.sev-info) .fold-count { background: var(--info-soft); color: var(--info); }
.f-group:has(> .f-row .f-icon.sev-ok) .fold-count { background: var(--ok-soft); color: var(--ok); }
.panel-body > .f-group .f-row { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
.panel-body > .f-group .f-row.f-many { grid-template-columns: 28px minmax(0, 1fr) auto 16px; }
.panel-body > .f-group button.f-row::before { inset: 0; background: var(--surface-2); }
.f-many-count:empty { visibility: hidden; }

/* Nálezy oproti predošlej verzii (0.98): tri čísla vedľa seba, opravené zelené, nové vo farbe značky. */
.diff-block { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.diff-block .card-head h3 { margin: 0; font: 500 .8125rem/1.35 var(--font-body); }
.diff-block > p { margin: 0; }
.diff-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.diff-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.diff-num { color: var(--text); font: 500 1.125rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.diff-label { color: var(--text-2); font-size: .75rem; }
.diff-stat.is-fixed:not(.is-zero) { background: var(--ok-soft); }
.diff-stat.is-fixed:not(.is-zero) .diff-num { color: var(--ok); }
.diff-stat.is-new:not(.is-zero) .diff-num { color: var(--accent-text); }
.diff-stat.is-zero .diff-num { color: var(--text-3); }
.diff-block > .fold { border-top: 0; }
.diff-fixed .f-row { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.f-text .f-new { display: inline-block; margin-right: 2px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; font: 600 .625rem/1.4 var(--font-body); vertical-align: 1px; }
.issue-change { color: var(--text-2); font-size: .75rem; font-weight: 500; }
.issue-change.is-new { color: var(--accent-text); }
.f-text .f-page { font-family: var(--font-body); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.issue-title .f-icon { width: 36px; height: 36px; border-radius: 8px; }
.disclaimer { border-top: 0; padding-top: 0; }

/* Zoznam návrhov a priečinkov v projekte je karta ako sekcie na prehľade. Zoradenie ostáva nad riadkami v karte. */
.tab-content .sorted-list:has(.rows) { margin-top: 12px; padding: 6px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.tab-content .sorted-list > .list-tools { padding: 8px 0 6px; }
.tab-content .sorted-list > .rows:first-child > :first-child,
.tab-content .sorted-list > .rows:first-child > .design-item:first-child > .design-row,
.tab-content .sorted-list > .list-tools + .rows > :first-child,
.tab-content .sorted-list > .list-tools + .rows > .design-item:first-child > .design-row { border-top: 0; }

/* Prehľad ako dashboard: rad čísel, vedľa zoznamu Čaká na vás stav návrhov a čo naposledy pribudlo, pod tým projekty.
   Čísla sú veľké a tenké ako v náhľade D, s bežnými číslicami. Zarovnané číslice majú len zoznamy. */
.dash-date { margin: 4px 0 0; font-size: .875rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.kpi { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.kpi-label { color: var(--text-2); font-size: .8125rem; }
.kpi-value { margin-top: 10px; color: var(--text); font-size: 2.25rem; font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
.kpi-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; color: var(--text-3); font-size: .75rem; line-height: 1.5; }
.kpi-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--field); color: var(--text-2); }
.kpi-chip b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); align-items: start; gap: 16px; margin-top: 16px; }
.dash-grid .dash-section, .dash-side .dash-section { margin-top: 0; }
.dash-side { display: grid; gap: 16px; }
.status-bar { display: flex; gap: 2px; height: 10px; margin: 14px 0 10px; overflow: hidden; border-radius: 4px; }
.status-seg { flex-basis: 0; min-width: 6px; background: var(--line-3); }
.status-seg.is-changes_requested { background: var(--warn); }
.status-seg.is-in_review { background: var(--info); }
.status-seg.is-approved { background: var(--ok); }
.status-legend .icon { color: var(--line-3); }
.status-legend .is-changes_requested .icon { color: var(--warn); }
.status-legend .is-in_review .icon { color: var(--info); }
.status-legend .is-approved .icon { color: var(--ok); }
.status-legend { display: grid; margin: 0; padding: 0; list-style: none; }
.status-legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .8125rem; }
.status-legend .num { font-weight: 500; }
.recent-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; }
.recent-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; border-radius: var(--r-sm); background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.recent-row:hover::before { opacity: 1; }
.recent-card .rows { margin-top: 4px; isolation: isolate; }
.recent-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--info-soft); color: var(--info); }
.recent-row .design-name strong { font-size: .8125rem; }
.recent-time { align-self: start; padding-top: 2px; color: var(--text-3); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1180px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Na úzkom displeji ide „Čaká na vás“ s dôvodmi cez celú šírku, aby vedľa nej neostalo prázdne miesto. */
@media (max-width: 560px) {
  .kpi:first-child, .kpi:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .dash-kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 1.875rem; }
}

/* ---------- Zložky ---------- */

/* Jeden panel ako v Total Commanderi: husté riadky, kurzor na vybranom riadku, pod zoznamom lišta F-kláves.
   Názov otvorí, klik vedľa vyberie. Na telefóne nie je čím vyberať, tam otvorí klik kamkoľvek do riadku. */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drive-path { margin-bottom: 10px; }
.drive-panel .list-tools { padding: 2px 0 10px; }
.drive-list { container-type: inline-size; }
.drive-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 110px 84px 130px 40px; align-items: center; gap: 2px 16px; min-height: 40px; padding: 2px 0; border-top: 1px solid var(--line); }
.drive-row:not(.drive-head)::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; border-radius: var(--r-sm); background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.drive-row:not(.drive-head):hover::before { opacity: 1; }
.drive-row.is-marked::before { opacity: 1; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.drive-row.is-selected::before { opacity: 1; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent-line); }
.drive-row.is-selected, .drive-row.is-selected + .drive-row { border-top-color: transparent; }
.drive-head { min-height: 32px; padding: 0; border-top: 0; color: var(--text-2); font-size: .75rem; }
.drive-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; transition: background var(--t), color var(--t); }
.drive-sort:hover { background: var(--surface-2); color: var(--text); }
.drive-sort.is-on { color: var(--text); }
.drive-name { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.drive-icon { display: grid; place-items: center; color: var(--text-2); }
.drive-icon > .icon + .icon { display: none; }
.drive-row.is-selected .drive-icon { color: var(--accent-text); }
/* Označený riadok ako v Total Commanderi: názov inou farbou a fajka namiesto ikony. Čítačka k názvu dostane „označené“. */
.drive-row.is-marked .drive-icon > .icon:first-child { display: none; }
.drive-row.is-marked .drive-icon > .icon + .icon { display: block; }
.drive-row.is-marked .drive-icon, .drive-row.is-marked .drive-link { color: var(--accent-text); }
.drive-row.is-marked .drive-link { font-weight: 600; }
.drive-mark-text { display: none; }
.drive-row.is-marked .drive-mark-text { display: inline; }
.drive-marked { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0 0; color: var(--text-2); font-size: .8125rem; }
.drive-link { justify-self: start; max-width: 100%; color: var(--text); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-link:hover { text-decoration: underline; }
.drive-link:focus-visible { outline: 0; }
.drive-row:has(.drive-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 0; border-radius: var(--r-sm); }
.is-up .drive-link { color: var(--text-2); letter-spacing: .08em; }
.drive-date, .drive-type, .drive-size { white-space: nowrap; }
.drive-size { text-align: right; }
/* Hlavička nemá ikonu: bez mriežky by sa Názov so šípkou vtesnal do stĺpca ikony a na telefóne prekryl Veľkosť. */
.drive-head .drive-name { display: flex; }
.drive-head .drive-size { justify-self: end; }
.drive-head .drive-size .drive-sort { margin: 0 -6px 0 0; }
.drive-actions { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
/* Otvorená ponuka siaha cez ďalšie riadky. Jej riadok ide nad ne, inak by klik trafil riadok pod ňou. */
.drive-row:has(.menu-panel:not([hidden])) { z-index: 2; }
.drive-actions .row-action { position: static; transform: none; }
.drive-list .empty { padding: 12px 0 4px; }

/* Lišta F-kláves: ostáva na spodku okna, kým je zoznam na obrazovke. Príkaz, ktorý pre vybraný riadok nejde, je sivý. */
.drive-keys { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; margin: 10px -10px 0; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--surface); }
.drive-key { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 10px 2px 4px; border-radius: var(--r-sm); color: var(--text); font-size: .8125rem; transition: background var(--t), color var(--t); }
.drive-key:hover:not(:disabled) { background: var(--surface-2); }
.drive-key:disabled { color: var(--text-3); cursor: default; }
.drive-key:disabled kbd { color: var(--text-3); }
.drive-key-hint { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 2px 4px; }

/* Portal Commander: dva panely vedľa seba, každý so svojou cestou navrchu. Aktívny panel má zvýraznený rámik a cestu,
   v druhom je vybraný riadok len orámovaný. Lišta kláves je spoločná pod oboma. Na úzkej obrazovke sú panely pod sebou. */
.page.drive.is-commander { max-width: 1560px; }
.drive-mode { flex: none; }
.drive-commander { container-type: inline-size; }
.drive-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.drive-commander .drive-panel { min-width: 0; padding: 0 12px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); transition: border-color var(--t), box-shadow var(--t); }
.drive-commander .drive-panel.is-active { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.drive-commander .drive-panel-path { margin: 0 -12px 4px; padding: 9px 12px; border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); }
.drive-commander .drive-panel.is-active .drive-panel-path { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.drive-commander .drive-panel-path .drive-path { margin: 0; }
.drive-commander .drive-panel-path .drive-path > :is(a, span:not(.crumb-sep)) { display: inline-flex; align-items: center; gap: 6px; }
.drive-commander .drive-panel:not(.is-active) .drive-row.is-selected::before { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.drive-commander .drive-panel:not(.is-active) .drive-row.is-selected .drive-icon { color: var(--text-2); }
.drive-commander .drive-keys { margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r-md); }
@container (max-width: 760px) {
  .drive-panels { grid-template-columns: minmax(0, 1fr); }
}

/* Výber miesta v dialógu kopírovania a presunu. */
.drive-dialog { width: min(520px, 100%); }
.drive-picker { display: flex; flex-direction: column; gap: 6px; }
.drive-picker .drive-path { margin: 0; }
.drive-picker .drive-path > span:not(.crumb-sep), .drive-picker .drive-path button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.drive-picker .drive-path button { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.drive-picker .drive-path [aria-current] { color: var(--text); font-weight: 500; }
.drive-picker-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--field); }
.drive-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text); font-size: .8125rem; text-align: left; transition: background var(--t); }
.drive-pick > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-pick:hover { background: var(--row-hover); }
.drive-pick > .icon { color: var(--text-2); }
.drive-pick.is-up { color: var(--text-2); letter-spacing: .08em; }
.drive-pick-empty { margin: 0; padding: 8px; }
.drive-where { margin: 0; }

/* Užší zoznam vedľa ľavého pásu: typ povie ikona. */
@container (max-width: 620px) {
  .drive-row { grid-template-columns: minmax(0, 1fr) 76px 120px 40px; }
  .drive-type { display: none; }
}
/* Telefón: dátum a veľkosť pod názvom, riadok sa otvára klikom kamkoľvek, lišta F-kláves nie je, príkazy sú v ponuke riadku. */
@container (max-width: 440px) {
  .drive-row { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "name name actions" "date size actions"; row-gap: 2px; min-height: 52px; padding: 6px 0; }
  .drive-name { grid-area: name; }
  .drive-date { grid-area: date; padding-left: 30px; }
  .drive-size { grid-area: size; text-align: left; }
  .drive-actions { grid-area: actions; }
  .drive-link::after { content: ""; position: absolute; inset: 0; }
  .drive-row.is-up { grid-template-areas: "name name actions"; min-height: 44px; }
  .drive-row.is-up .drive-date, .drive-row.is-up .drive-size { display: none; }
  .drive-head { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 4px 0; }
  .drive-head .drive-size { justify-self: auto; }
  .drive-head .drive-size .drive-sort { margin: 0 0 0 -6px; }
  .drive-head .drive-actions { display: none; }
  .drive-keys { display: none; }
}

/* ---------- Marketing ---------- */

/* Interný marketing firmy. Záložky a obsah každej časti stoja na jednom podklade, aby texty a ovládače neboli na mriežke
   pozadia (želanie majiteľa zo 4. 11.). Bloky Prehľadu sú na ňom orámované, databázy sú na riadkoch s linkou hore.
   Grafy majú jednu modrú pre údaje a sivú pre porovnanie. Stav je vždy ikona a slovo, farba ho len dopĺňa. */
.mkt-panel { margin-top: 18px; padding: 4px 28px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.mkt-panel > .tabs { margin-top: 0; }
.mkt-panel .mkt-card, .mkt-panel .mkt-tile { border: 1px solid var(--line); }
.mkt .tab-actions { flex-wrap: wrap; justify-content: flex-end; }
.mkt .tab-content { display: flex; flex-direction: column; gap: 16px; }
.mkt .tab-content > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mkt-card { padding: 16px 18px; border-radius: var(--r-md); background: var(--card); min-width: 0; }
.mkt-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.mkt-section-head .section-head { margin-bottom: 0; }
.mkt-section-head .mkt-source { flex: 1 0 100%; margin: -4px 0 0; }
.mkt-section { margin-top: 24px; }
.mkt-section:first-child, .mkt .section-first { margin-top: 4px; }
.mkt-section .rows { margin-bottom: 4px; }
.mkt-subhead { margin: 4px 0 8px; font: 500 .9375rem/1.3 var(--font-display); }
.mkt-source { color: var(--text-3); }
.mkt-block { display: block; }
.mkt-link { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; overflow-wrap: anywhere; }
.mkt-pre { white-space: pre-line; }
.mkt-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font: 500 .6875rem/1.5 var(--font-body); letter-spacing: .02em; vertical-align: 2px; }
.mkt-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: .8125rem; white-space: nowrap; }
.mkt-status.is-ok { color: var(--ok); }
.mkt-status.is-warn { color: var(--warn); }
.mkt-status.is-err { color: var(--err); }
.mkt-status.is-info { color: var(--info); }
.mkt-status-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.mkt-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text-2); font-size: .8125rem; max-width: 92ch; }
.mkt-notice .icon { margin-top: 2px; color: var(--info); }
.mkt-notice a { color: var(--text); }
.mkt-sample-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.mkt-sample-card > div { flex: 1 1 360px; max-width: 72ch; }
.mkt-sample-card h2 { margin-bottom: 4px; }
.mkt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* Dlaždice ukazovateľov: popis, veľké číslo, zmena oproti predošlému obdobiu, malá krivka a zdroj s obdobím. */
.mkt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.mkt-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); min-width: 0; }
.mkt-tile-label { color: var(--text-2); font-size: .8125rem; }
.mkt-tile-value { font: 500 1.75rem/1.15 var(--font-display); letter-spacing: -.01em; }
.mkt-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.mkt-delta { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: .8125rem; white-space: nowrap; }
.mkt-delta.is-ok { color: var(--ok); }
.mkt-delta.is-err { color: var(--err); }
.mkt-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; }
.mkt-hero strong { font: 500 3rem/1 var(--font-display); letter-spacing: -.02em; }
.mkt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mkt-span-2 { grid-column: 1 / -1; }
.mkt-inner { margin-top: 12px; gap: 24px; }
.mkt-mini { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 12px 0 0; }
.mkt-mini > div { display: flex; flex-direction: column; gap: 2px; }
.mkt-mini dt { color: var(--text-3); font-size: .75rem; }
.mkt-mini dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 500 1.125rem/1.3 var(--font-display); }
.mkt-mini-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 12px; }
.mkt-table td, .mkt-table tbody th, .mkt-table tfoot th { vertical-align: middle; }
.mkt-table tbody th, .mkt-table tfoot th { padding: 6px 12px; color: var(--text); font-weight: 400; border-bottom: 1px solid var(--line); white-space: normal; min-width: 140px; }
.mkt-table tfoot th, .mkt-table tfoot td { font-weight: 500; border-bottom: 0; }
.mkt-table-fold { margin-top: 10px; font-size: .8125rem; }
.mkt-table-fold summary { color: var(--text-2); min-height: 28px; }
.mkt-table-fold .table-wrap { max-height: 320px; overflow-y: auto; margin-top: 6px; }

/* Graf trendu: čiary 2 px, jemná plocha pod aktuálnym obdobím, vlasové mriežky a popis pri kurzore. */
.mkt-chart { position: relative; }
.mkt-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 6px; color: var(--text-2); font-size: .8125rem; }
.mkt-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.mkt-key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; background: var(--viz-1); }
.mkt-key.is-previous { background: var(--viz-muted); }
.mkt-plot { position: relative; width: 100%; min-height: 220px; }
.mkt-svg { display: block; overflow: visible; }
.mkt-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.mkt-grid { stroke: var(--line); stroke-width: 1; }
.mkt-axis { stroke: var(--line-2); stroke-width: 1; }
.mkt-tick { fill: var(--text-3); font: 400 12px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.mkt-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mkt-line.is-current { stroke: var(--viz-1); }
.mkt-line.is-previous { stroke: var(--viz-muted); }
.mkt-area { fill: var(--viz-1); opacity: .1; }
.mkt-dot { fill: var(--viz-1); stroke: var(--card); stroke-width: 2; }
.mkt-dot.is-previous { fill: var(--viz-muted); }
.mkt-cross-line { stroke: var(--text-3); stroke-width: 1; }
.mkt-tip { position: absolute; top: 4px; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--float); font-size: .75rem; pointer-events: none; }
.mkt-tip-date { color: var(--text-3); }
.mkt-tip-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.mkt-tip-row strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.mkt-spark { flex: none; }

/* Zoradené pruhy: jedna farba, 12 px, zaoblený koniec a rovný začiatok pri osi. */
.mkt-bars { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mkt-bar { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 6px; margin: 0 -6px; border-radius: var(--r-sm); font-size: .8125rem; }
.mkt-bar:hover, .mkt-bar:focus-visible { background: var(--row-hover); }
.mkt-bar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-bar-track { display: block; height: 12px; }
.mkt-bar-fill { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.mkt-bar-value { white-space: nowrap; }
.mkt-meter { display: block; height: 6px; border-radius: 3px; background: var(--viz-track); overflow: hidden; }
.mkt-meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--viz-1); }
.mkt-meter-fill.is-over { background: var(--warn); }
.mkt-meter-fill.is-done { background: var(--ok); }
.mkt-over { color: var(--warn); }
.mkt-funnel { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mkt-funnel-step { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; margin: 0 -6px; border-radius: var(--r-sm); }
.mkt-funnel-step:hover, .mkt-funnel-step:focus-visible { background: var(--row-hover); }
.mkt-funnel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .875rem; }
.mkt-funnel-head strong { font: 500 1.125rem/1.2 var(--font-display); }
.mkt-funnel-track { display: block; height: 20px; }
.mkt-funnel-fill { display: block; height: 20px; border-radius: 0 4px 4px 0; }
.mkt-funnel-fill.is-1 { background: var(--viz-step-1); }
.mkt-funnel-fill.is-2 { background: var(--viz-step-2); }
.mkt-funnel-fill.is-3 { background: var(--viz-step-3); }
.mkt-funnel-fill.is-4 { background: var(--viz-step-4); }

.mkt-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 14px; }
.mkt-fact { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); color: inherit; text-decoration: none; transition: border-color var(--t), background var(--t); }
.mkt-fact:hover { border-color: var(--line-2); background: var(--row-hover); }
.mkt-fact-value { font: 500 1.25rem/1.25 var(--font-display); }
.mkt-running { display: flex; flex-direction: column; }
.mkt-running-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 20px; align-items: center; gap: 6px 18px; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.mkt-running-row::before, .mkt-row::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; background: var(--row-hover); opacity: 0; transition: opacity var(--t); }
.mkt-running-row:hover::before, a.mkt-row:hover::before, button.mkt-row:hover::before { opacity: 1; }
.mkt-running-name, .mkt-running-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-vitals { display: flex; flex-direction: column; }
.mkt-vital { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.mkt-vital > span:first-child { display: flex; flex-direction: column; }

/* Databázy: riadok cez celú šírku s linkou hore, hlavička stĺpcov drobným písmom. */
.mkt-row { position: relative; isolation: isolate; display: grid; align-items: center; gap: 6px 16px; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; text-align: left; text-decoration: none; }
.mkt-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-row-main strong { font-weight: 500; overflow-wrap: anywhere; }
.mkt-campaign-row { grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) 20px; }
.mkt-row-head { padding: 4px 0; border-top: 0; color: var(--text-3); font-size: .75rem; }
.mkt-row-channels { overflow-wrap: anywhere; }
.mkt-cell-meter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-sum { margin: 8px 0 0; }
.mkt-filters { margin-bottom: 0; }
.mkt-filters .check { align-items: center; }
.mkt-shown { margin-left: auto; }
.mkt-post-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
.mkt-post-when { display: flex; flex-direction: column; }
.mkt-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mkt-detail-title { font: 500 1.5rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.mkt-detail-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.mkt-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: .875rem; }
.mkt-facts dt { color: var(--text-3); }
.mkt-facts dd { margin: 0; overflow-wrap: anywhere; }
.mkt-results { display: flex; flex-direction: column; gap: 14px; }
.mkt-result { display: flex; flex-direction: column; gap: 6px; }
.mkt-utm { display: flex; flex-direction: column; gap: 12px; }
.mkt-utm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mkt-utm-out { flex: 1 1 320px; font-variant-numeric: tabular-nums; }
.mkt-checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.mkt-checks legend { margin-bottom: 8px; }
.mkt-checks .check-row .check { flex: 0 1 160px; }
.mkt-form { padding: 14px 0 22px; }
.mkt-form.mkt-card { padding: 16px 18px; }
.mkt-form-title { font: 500 1.0625rem/1.3 var(--font-display); }
.mkt-form-lead { margin-top: -6px; max-width: 72ch; }
.mkt-form progress { width: 100%; max-width: 520px; }
.mkt-secret { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }
.mkt-quiet { width: 32px; height: 32px; }
.mkt-quiet:hover { color: var(--err); }

/* Grafické výstupy: dlaždica je samotný objekt, preto má rám. Náhľad ostáva s ostrými rohmi ako tlačový obsah. */
.mkt-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.mkt-asset { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.mkt-asset-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 10px; border: 1px solid var(--line); background: var(--thumb-bg); overflow: hidden; }
.mkt-asset-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mkt-asset-preview .mkt-thumb-ext { width: 100%; height: 100%; }
.mkt-asset-caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-asset-title strong { font-weight: 500; overflow-wrap: anywhere; }
.mkt-asset-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mkt-asset-foot .tool { width: 32px; height: 32px; }

/* Priečinky výstupov: strom vľavo, vpravo cesta, podpriečinky a výstupy. Výstup sa dá pretiahnuť na priečinok, cestu alebo strom. */
.mkt-assets-layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 24px; align-items: start; }
.mkt-folders { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding-right: 16px; border-right: 1px solid var(--line); min-width: 0; }
.mkt-folders .mkt-label { margin: 6px 0 6px 8px; }
.mkt-folder-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px); border-radius: var(--r-sm); color: var(--text-2); font-size: .875rem; text-align: left; transition: background var(--t), color var(--t); }
.mkt-folder-btn:hover { background: var(--row-hover); color: var(--text); }
.mkt-folder-btn[aria-current="true"] { background: var(--surface-2); color: var(--text); font-weight: 500; }
.mkt-folder-btn .icon { flex: none; color: var(--text-3); }
.mkt-folder-btn .mkt-brand-tag { margin-left: 0; }
.mkt-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-folder-new { margin: 8px 0 0 8px; }
.mkt-assets-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mkt-folder-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
.mkt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9375rem; }
.mkt-crumbs .link-btn { font-size: inherit; color: var(--text-2); border-radius: 4px; }
.mkt-crumbs strong { font-weight: 500; }
.mkt-folder-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.mkt-folder-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); text-align: left; transition: border-color var(--t), background var(--t); }
.mkt-folder-tile:hover { border-color: var(--line-2); background: var(--row-hover); }
.mkt-folder-tile > .icon { flex: none; color: var(--text-3); }
.mkt-folder-tile strong { font-weight: 500; }
.mkt-asset-place { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.mkt-asset-place .icon { flex: none; }
.mkt-asset[draggable="true"] { cursor: grab; }
.mkt-asset.is-dragging { opacity: .5; }
.is-drop { outline: 2px dashed var(--accent-line); outline-offset: 2px; background: var(--row-hover); }

/* Plán obsahu: mesiac po týždňoch od pondelka. Príspevok je ovládač, preto má jemné zaoblenie, nie tvar pilulky. */
.mkt-month { display: flex; align-items: center; gap: 4px; }
.mkt-month-title { min-width: 10ch; font: 500 1.125rem/1.2 var(--font-display); text-align: center; text-transform: capitalize; }
.mkt-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.mkt-weekday { padding: 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--field); color: var(--text-3); font-size: .75rem; text-transform: capitalize; }
.mkt-day { display: flex; flex-direction: column; gap: 3px; min-height: 112px; padding: 4px 4px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.mkt-day.is-out { background: var(--hover-soft); }
.mkt-day.is-out .mkt-day-head > .num { color: var(--text-3); }
.mkt-day-head { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding-left: 4px; font-size: .8125rem; }
.mkt-day.is-today .mkt-day-head > .num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.mkt-day-add { width: 26px; height: 26px; opacity: 0; }
.mkt-day:hover .mkt-day-add, .mkt-day-add:focus-visible { opacity: 1; }
.mkt-chip { display: flex; align-items: flex-start; gap: 4px; width: 100%; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--text); font-size: .75rem; line-height: 1.3; text-align: left; transition: border-color var(--t), background var(--t); }
.mkt-chip:hover { border-color: var(--line-3); }
.mkt-chip .icon { flex: none; margin-top: 1px; color: var(--text-3); }
.mkt-chip.is-ready .icon { color: var(--ok); }
.mkt-chip.is-published { color: var(--text-2); }
.mkt-chip.is-published .icon { color: var(--info); }
.mkt-chip-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.mkt-chip-meta { margin-right: 4px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.mkt-integration { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.mkt-integration-form { padding-top: 6px; }
.mkt-int-for { margin: 28px 0 0; font: 500 1.125rem/1.3 var(--font-display); }
.mkt-int-for + p { margin: 4px 0 0; }
.mkt-int-matrix td { white-space: nowrap; }

/* Značky a weby firmy. Prepínač je v hlavičke každej stránky Marketingu, vybraná značka platí pre všetky časti. */
.mkt-brand-switch { display: flex; flex-direction: column; gap: 4px; min-width: min(100%, 260px); }
.mkt-brand-switch select { min-height: 36px; }
.mkt-brand-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-2); font: 500 .6875rem/1.5 var(--font-body); letter-spacing: .02em; vertical-align: 2px; white-space: nowrap; }
.mkt-brand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.mkt-brand-row.is-selected { margin-inline: -10px; padding-inline: 10px; background: var(--hover-soft); }
.mkt-brand-pick { color: var(--text); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.mkt-plan-card { padding: 12px; }
.mkt-plan-card .mkt-day { background: var(--card); }
.mkt-plan-card .mkt-day.is-out { background: var(--hover-soft); }

/* Značka: manuál, logá, farby a písma. */
.mkt-label { margin: 2px 0 6px; color: var(--text-3); font-size: .75rem; }
.mkt-label-old { margin-top: 16px; }
.mkt-older .mkt-file-name strong { font-weight: 400; color: var(--text-2); }
.mkt-file { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.mkt-file-name { display: flex; flex-direction: column; min-width: 0; }
.mkt-file-name strong { font-weight: 500; overflow-wrap: anywhere; }
.mkt-file-actions { display: flex; align-items: center; gap: 2px; }
.mkt-thumb { width: 56px; height: 56px; object-fit: contain; background: var(--thumb-bg); }
.mkt-thumb-ext { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mkt-logo-group { margin-top: 18px; }
.mkt-logo-group:first-of-type { margin-top: 4px; }
.mkt-group-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font: 500 .9375rem/1.3 var(--font-display); }
.mkt-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.mkt-logo { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.mkt-logo-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 16px; border: 1px solid var(--line); background: var(--thumb-bg); color: var(--text-2); }
.mkt-logo-preview.is-light { background: var(--logo-light); color: #686e79; }
.mkt-logo-preview.is-dark { background: var(--logo-dark); color: #868c97; }
.mkt-logo-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mkt-logo-ext { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.mkt-logo-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mkt-logo-facts { display: flex; flex-direction: column; min-width: 0; font-size: .8125rem; }
.mkt-logo-facts strong { font-weight: 600; }
.mkt-logo-format { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mkt-logo-format .mkt-tag { margin-left: 0; }
.mkt-logo-caption .tool { width: 32px; height: 32px; }
.mkt-color { display: grid; grid-template-columns: 48px minmax(140px, .8fr) minmax(0, 2.4fr) auto; align-items: center; gap: 8px 18px; padding: 10px 0; border-top: 1px solid var(--line); }
/* Vzorka farby je tlačový obsah: ostré rohy a vnútorná linka, aby sa aj tmavá farba odlíšila od plochy. */
.mkt-swatch { width: 48px; height: 48px; box-shadow: inset 0 0 0 1px var(--swatch-edge); }
.mkt-swatch.is-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-2) 6px 7px); }
.mkt-color-name { display: flex; flex-direction: column; min-width: 0; }
.mkt-color-name strong { font-weight: 500; overflow-wrap: anywhere; }
.mkt-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; }
.mkt-value { display: flex; flex-direction: column; min-width: 0; }
.mkt-value-name { color: var(--text-3); font-size: .75rem; }
.mkt-value-text { display: flex; align-items: center; gap: 2px; min-height: 28px; font-size: .8125rem; overflow-wrap: anywhere; }
.mkt-copy { width: 28px; height: 28px; }
.mkt-move { display: inline-flex; }
.mkt-move .tool { width: 30px; height: 30px; }
.mkt-font { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.mkt-font-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mkt-font-name { font-weight: 500; }
.mkt-font-sample { font-size: 1.75rem; line-height: 1.25; overflow-wrap: anywhere; }
.mkt-license { display: flex; align-items: flex-start; gap: 6px; }
.mkt-license .icon { margin-top: 1px; }
.mkt-font-files { align-self: stretch; margin-top: 4px; }
.mkt-font-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.mkt-font-file { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.mkt-font-file .icon { color: var(--text-3); }

/* E-maily v Marketingu: Na ozvanie, kontakty, skupiny a nastavenia. Riadky ako ostatné databázy Marketingu. */
.mail, .mail-view, .mail-view > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mail-view { align-self: stretch; }
/* Časti sa nikdy nesmú vyliať zo stránky. Na úzkom displeji sú v mriežke dva krát dva, nič sa neschová. */
.mail-sections { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mail-narrow { display: none; }
.mail-lead { margin: -4px 0 12px; max-width: 72ch; }
.mail-reminders { display: flex; flex-direction: column; }
.mail-reminder { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.mail-reminder-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.mail-reminder-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mail-reminder-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.mail-reminder-top strong { font-weight: 500; overflow-wrap: anywhere; }
.mail-why { margin: 0; max-width: 72ch; }
.mail-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; }
.mail-facts a { color: var(--text-2); }
.mail-reminder-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.mail-inline { grid-column: 1 / -1; margin-top: 6px; }
.mail-history { margin-top: 4px; font-size: .875rem; }
.mail-history summary { min-height: 32px; color: var(--text-2); cursor: pointer; }
.mail-done-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 180px); }
.mail-template-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 36px; }
.mail-template-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-row { grid-template-columns: minmax(0, 1.6fr) 150px 130px minmax(0, 1fr) 110px 20px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; cursor: pointer; }
.mail-contact-row.is-open { border-bottom: 0; }
.mail-tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-detail { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; border: 1px solid var(--line); }
.mail-detail-actions { flex-wrap: wrap; gap: 6px; }
.mail-history-grid { margin-top: 4px; }
.mail-timeline li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .875rem; overflow-wrap: anywhere; }
.mail-basis .stack-tight { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mail-basis .field { max-width: 520px; }
.mail-segment-row { grid-template-columns: minmax(0, 1fr) auto 36px; }
.mail-seg-count { white-space: nowrap; }
.mail-segment-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.mail-rules { margin: 0 0 8px; padding: 0; }
.mail-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.mail-rule select, .mail-rule input[type="text"] { width: auto; min-width: 0; max-width: 220px; }
.mail-rule-and { min-width: 18px; }
.mail-rule-remove { margin-left: auto; }
input.mail-num { width: 88px; flex: 0 0 auto; }
.mail-preview { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); min-height: 64px; }
.mail-preview p { margin: 0; }
.mail-preview-count strong { font: 500 1.5rem/1.2 var(--font-display); }
.mail-preview-list { max-height: 260px; overflow-y: auto; margin: 8px 0; }
.mail-preview-list li { display: flex; flex-direction: column; padding: 5px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: .875rem; }
.mail-settings-card { display: flex; flex-direction: column; gap: 12px; }
.mail-recipe { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mail-recipe .form-grid { max-width: 640px; }
.mail-recipe-body { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; transition: opacity var(--t); }
.mail-recipe-body:disabled { opacity: .5; }
.mail-repeat-items { margin: 0; padding: 0; }
.mail-consent-preview { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); }
.mail-fake-check { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 1.5px solid var(--text-3); border-radius: 3px; vertical-align: -2px; }
.mail-topic-row { grid-template-columns: minmax(0, 1fr) 36px; }
form.mail-topic-row { grid-template-columns: minmax(0, 320px) auto; }
.mail-topic-row .form-error { grid-column: 1 / -1; }
.mail-topic-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.mail-topic-add input { flex: 0 1 320px; min-width: 0; }
.mail-topic-add .form-error { flex: 1 0 100%; }
.mail-import-plan { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mail-import-plan .table-wrap { max-height: 420px; overflow-y: auto; }
.mail-import-plan tr.is-skipped td { color: var(--text-3); }

/* Otázka na novinky e-mailom na úvode klienta: tichá karta, nie vyskakovacie okno. */
.news-slot:empty { display: none; }
.news-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.news-prompt-text { flex: 1 1 360px; max-width: 72ch; }
.news-prompt-text p { margin: 0; }
.news-prompt-q { font-weight: 500; }
.news-prompt-actions { flex-wrap: wrap; gap: 8px; }
.news-check .check-text small { display: block; }

@media (max-width: 1180px) {
  .mkt-campaign-row { grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 1fr) minmax(0, 1fr) 20px; }
  .mkt-campaign-row > :nth-child(3), .mkt-campaign-row > :nth-child(6) { display: none; }
  .mail-contact-row { grid-template-columns: minmax(0, 1fr) 140px 120px 100px 20px; }
  .mail-contact-row > :nth-child(4) { display: none; }
}
@media (max-width: 860px) {
  .mkt-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .mail-reminder { grid-template-columns: 32px minmax(0, 1fr); }
  .mail-reminder-actions { grid-column: 1 / -1; justify-content: flex-start; }
  /* Hlavné tlačidlo je na telefóne prvé. V Kontaktoch sú zriedkavé akcie v ponuke Ďalšie vedľa neho. */
  .mail .tab-actions > .btn-primary { order: -1; }
  .mail .mail-wide { display: none; }
  .mail .mail-narrow { display: block; }
  .mail .tab-actions > .menu:not(.mail-narrow) { flex: 1 1 100%; }
  .mail .tab-actions.mail-contacts-actions { flex-wrap: nowrap; }
  .mail .mail-contacts-actions > .btn-primary { flex: 1 1 auto; }
  .mail .mail-contacts-actions .mail-narrow .btn { width: auto; }
  .mail-contact-row { grid-template-columns: minmax(0, 1fr) auto 20px; }
  .mail-contact-row > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .mail-contact-row > :nth-child(2) { grid-column: 1; }
  .mail-contact-row > :nth-child(4), .mail-contact-row > :nth-child(5) { display: none; }
  .mail-contact-row > .row-go { grid-column: 3; grid-row: 1; }
  .mail-template-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .mail-template-body { display: none; }
  .mail-done-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mail-done-row > :last-child { grid-column: 1 / -1; }
  .mail-segment-grid { grid-template-columns: minmax(0, 1fr); }
  .mail-timeline li { grid-template-columns: minmax(0, 1fr); }
  .mkt-campaign-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mkt-campaign-row > :nth-child(n+3) { grid-column: 1 / -1; }
  .mkt-campaign-row > :nth-child(3), .mkt-campaign-row > :nth-child(6), .mkt-campaign-row > :last-child { display: none; }
  .mkt-row-head { display: none; }
  .mkt-running-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .mkt-running-kpi { grid-column: 1; }
  .mkt-color { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mkt-values { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-color > .mkt-file-actions { grid-column: 3; grid-row: 1; }
  .mkt-file { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mkt-file > .mkt-status { grid-column: 2; }
  .mkt-thumb { width: 48px; height: 48px; }
  .mkt-integration { grid-template-columns: minmax(0, 1fr) auto; }
  .mkt-integration > .mkt-file-actions { grid-column: 1 / -1; }
  .mkt-assets-layout { grid-template-columns: minmax(0, 1fr); }
  .mkt-folders { display: none; }
  .mkt-brand-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mkt-brand-row > .num { grid-column: 1; }
  .mkt-brand-switch { flex: 1 1 100%; }
  .mkt-plan-card { padding: 8px; }
  .mkt-shown { margin-left: 0; }
  .mkt-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mkt-day { min-height: 72px; }
  .mkt-chip-text, .mkt-chip-meta { display: none; }
  .mkt-chip { justify-content: center; padding: 3px; }
  .mkt-hero strong { font-size: 2.25rem; }
}
@media (max-width: 480px) {
  .mail-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; overflow: visible; }
  .mkt-panel { margin-inline: -4px; padding: 2px 12px 20px; border-radius: 12px; }
  .mkt-card { padding: 14px; }
  .mkt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mkt-tile { padding: 12px; }
  .mkt-tile-value { font-size: 1.375rem; }
  .mkt-spark { display: none; }
  .mkt-bar { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  .mkt-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mkt-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mkt-font-sample { font-size: 1.375rem; }
  .mkt-post-row { grid-template-columns: 84px minmax(0, 1fr); }
  .mkt-post-row > .mkt-status { grid-column: 2; }
  .mkt-vital { grid-template-columns: minmax(0, 1fr) auto; }
  .mkt-vital > .mkt-status { grid-column: 1 / -1; }
  .mkt-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mkt-facts dd { margin-bottom: 8px; }
}