/* =========================================================================
   BPM Assessment — Component System (Visual Design Phase v1)
   Jedna třída = jedna znovupoužitelná komponenta. Obrazovky pouze skládají
   tyto třídy, nemají vlastní ad-hoc styly.
   Princip: Less is More · Whitespace is a Feature · One Primary Action.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3, p { margin: 0; }

/* =========================================================================
   Prototype bar — nenápadná lišta pro klikání prototypem (mimo produkt)
   ========================================================================= */
.pbar {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 var(--s4);
  background: var(--c-navy); color: #AEBACb;
  font-size: 11px; letter-spacing: .04em;
}
.pbar__tag { text-transform: uppercase; opacity: .75; }
.pbar__actions { display: flex; gap: var(--s2); }
.pbar__btn {
  background: transparent; color: #C7D0Dc; border: 1px solid #24384f;
  border-radius: var(--r-sm); padding: 3px 10px; font: inherit; cursor: pointer;
}
.pbar__btn:hover { border-color: var(--c-orange); color: #fff; }

/* App shell — vyplní prostor, footer drží u spodní hrany na všech obrazovkách. */
.app { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Globální subtilní footer (sdílený layout, na všech obrazovkách diagnostiky).
   Dva řádky: branding + build identifikace (§112), oba sekundární. */
.app-footer {
  flex: 0 0 auto; text-align: center;
  padding: var(--s4) var(--s4) var(--s5);
  color: var(--c-faint); font-size: var(--fs-xs); letter-spacing: .02em;
  display: flex; flex-direction: column; gap: 2px;
}
/* Build identifikace — ještě nenápadnější než branding, ať nekonkuruje obsahu. */
.app-footer__build {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  opacity: .7; letter-spacing: 0;
}
.app-footer__build:empty { display: none; }

/* =========================================================================
   Logo
   ========================================================================= */
.logo { display: inline-flex; align-items: center; gap: 12px; user-select: none; }
.logo__img { display: block; flex: 0 0 auto; }
.logo__mark { display: block; flex: 0 0 auto; }
.logo__word { display: flex; flex-direction: column; line-height: 1; }
.logo__bpm { font-weight: 800; letter-spacing: -.01em; color: var(--c-navy); }
.logo__assessment {
  font-weight: 600; color: var(--c-orange);
  text-transform: uppercase; letter-spacing: .34em;
}
.logo--sm .logo__bpm { font-size: 20px; }
.logo--sm .logo__assessment { font-size: 8.5px; letter-spacing: .26em; margin-top: 3px; }
.logo--md .logo__bpm { font-size: 28px; }
.logo--md .logo__assessment { font-size: 11px; margin-top: 4px; }
.logo--lg .logo__bpm { font-size: 40px; }
.logo--lg .logo__assessment { font-size: 15px; margin-top: 6px; }

/* =========================================================================
   Typografie utility
   ========================================================================= */
.h1 { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.02em; }
.h2 { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; }
.h3 { font-size: var(--fs-md); font-weight: 600; }
.lead { font-size: var(--fs-md); color: var(--text-2); line-height: var(--lh-base); }
.body { font-size: var(--fs-base); color: var(--text); }
.muted { color: var(--text-3); }
.faint { color: var(--c-faint); }
.small { font-size: var(--fs-sm); }
.meta { font-size: var(--fs-sm); color: var(--text-3); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); font-weight: 700; color: var(--c-orange); }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }

/* Layout helpers */
.stack   > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }
.row { display: flex; gap: var(--s3); align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Screen wrapper (obsah pod Universal Headerem) */
.screen { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.screen--narrow { max-width: var(--maxw-narrow); }
.screen--wide   { max-width: var(--maxw-wide); }
.screen__head { margin-bottom: var(--s6); }
.screen__head .h2 { margin-bottom: var(--s2); }

/* Centrovaná framing obrazovka (Welcome / Completion) */
.frame { flex: 1 0 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--s7) var(--s5); }
.frame__inner { width: 100%; max-width: 560px; text-align: center; }
.frame__inner > * + * { margin-top: var(--s5); }

/* Sticky action bar pro pracovní plochu (One Primary Action) */
.actionbar {
  position: sticky; bottom: 0; z-index: 20;
  margin: var(--s6) calc(-1 * var(--s5)) calc(-1 * var(--s8));
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s3);
  background: linear-gradient(to top, var(--bg) 62%, rgba(242,244,246,0));
}
.actionbar .spacer { flex: 1; }

/* =========================================================================
   Universal Header — pouze orientace, žádné akční prvky
   ========================================================================= */
.uh {
  position: sticky; top: 30px; z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.uh__bar {
  max-width: var(--maxw-wide); margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s5);
}
/* LEFT: kompletní logo + info o modulu (drží se pohromadě, nedeformuje logo). */
.uh__left { display: flex; align-items: center; gap: var(--s4); flex: 0 1 auto; min-width: 0; }
.uh__left .logo__img { min-width: 0; }
.uh__module { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.uh__module-name { font-weight: 600; font-size: var(--fs-base); color: var(--c-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh__module-no { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
/* CENTER: progress bez pevné šířky — roztahuje se dle viewportu. */
.uh__progress { flex: 1 1 auto; min-width: 48px; }
/* RIGHT: čas — stabilní šířka. */
.uh__clock { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-sm); }
.uh__clock-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.uh__clock-item svg { opacity: .7; }
.uh__sep { width: 1px; height: 20px; background: var(--line); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-weight: 600; font-size: var(--fs-base);
  padding: 12px 22px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .04s ease, box-shadow .12s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn--primary { background: var(--c-orange); color: #fff; box-shadow: 0 1px 2px rgba(255,138,0,.35); }
.btn--primary:hover { background: var(--c-orange-strong); }
.btn--secondary { background: var(--surface); color: var(--c-navy); border-color: var(--c-cool); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { border-color: var(--c-slate); }
.btn--navy { background: var(--c-navy); color: #fff; }
.btn--navy:hover { background: var(--c-navy-soft); }
.btn--text { background: transparent; color: var(--c-orange); padding: 8px 6px; }
.btn--text:hover { color: var(--c-orange-strong); }
.btn--text .btn__arrow { transition: transform .12s ease; }
.btn--text:hover .btn__arrow { transform: translateX(3px); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-sm); }
.btn--lg { padding: 15px 30px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { padding: 9px; width: 40px; height: 40px; }

/* =========================================================================
   Card
   ========================================================================= */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card--pad-lg { padding: var(--s6); }
.card__header { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.card__title { font-size: var(--fs-md); font-weight: 600; }
.card__sub { font-size: var(--fs-sm); color: var(--text-3); }

/* =========================================================================
   Progress Bar
   ========================================================================= */
.progress { width: 100%; }
.progress__track { height: 6px; background: var(--c-cool); border-radius: var(--r-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--c-orange); border-radius: var(--r-pill); transition: width .4s cubic-bezier(.4,0,.2,1); }
.progress--thin .progress__track { height: 4px; }
.progress__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin-top: 6px; }

/* =========================================================================
   Countdown Timer
   ========================================================================= */
.timer {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 14px; font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--surface); color: var(--c-navy); box-shadow: var(--shadow-sm);
}
.timer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); }
.timer.is-warn { color: var(--c-danger); border-color: var(--c-danger); }
.timer.is-warn .timer__dot { background: var(--c-danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* =========================================================================
   Choice Card / Scenario Card
   ========================================================================= */
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); background: var(--surface); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.choice:hover { border-color: var(--c-slate); }
.choice.is-selected { border-color: var(--c-orange); background: var(--c-orange-tint); box-shadow: inset 0 0 0 1px var(--c-orange); }
.choice__marker {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 2px solid var(--c-cool); margin-top: 1px; position: relative; transition: border-color .12s;
}
.choice.is-selected .choice__marker { border-color: var(--c-orange); }
.choice.is-selected .choice__marker::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-orange); }
.choice__body { flex: 1; }
.choice__title { font-weight: 600; }
.choice__desc { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
/* „Nevím" jako samostatná, vizuálně odlišená pátá možnost (opt-out). */
.choice--muted { margin-top: 6px; border-style: dashed; }
.choice--muted .choice__title { font-weight: 500; color: var(--text-2); }

/* =========================================================================
   Modul „Dokážete odhalit logiku?" — sekvenční vizuální úlohy (SVG)
   Hierarchie: otázka → dominantní bílý canvas (5 pozic) → menší odpovědi → Další
   ========================================================================= */
.reveal-head { text-align: center; margin-bottom: 24px; }
.reveal-taskno { margin-top: 6px; }
.reveal-question { margin-top: 10px; font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); }

/* A. Zadání — dominantní bílý canvas se sekvencí 1–5 (bez šipek) */
.reveal-canvas { max-width: 860px; margin: 0 auto 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 28px 24px; overflow-x: auto; }
.reveal-seq { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: nowrap; }
.reveal-pos { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.reveal-pos__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--c-faint); }
.reveal-diagram { line-height: 0; }
/* §120 — pozice 5 („?") drží stejnou velikost jako zvětšené zadávací obrazce (144 px). */
.reveal-qmark { width: 144px; height: 144px; border: 2px dashed var(--c-cool); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 58px; font-weight: 700; color: var(--text-3); }

/* B. Odpovědi — sekundární, výrazně menší karty; jen vycentrovaný obrázek */
.reveal-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); max-width: 620px; margin: 0 auto; }
.reveal-opt { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
.reveal-opt:hover { border-color: var(--c-slate); }
.reveal-opt.is-selected { border-color: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange); background: var(--c-orange-tint); }

/* DEV — jednoznačně označená vývojová informace (nikdy produkční pohled respondenta) */
.reveal-dev { max-width: 620px; margin: 20px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-faint); }
.reveal-dev__tag { flex: 0 0 auto; font-weight: 800; font-size: 10px; letter-spacing: .08em; color: #fff; background: var(--c-faint); border-radius: 4px; padding: 2px 6px; }

.reveal-actions { display: flex; justify-content: flex-end; max-width: 620px; margin: 22px auto 0; }
@media (max-width: 720px) { .reveal-opts { grid-template-columns: repeat(2, 1fr); } .reveal-seq { gap: 10px; } }

/* §121 — časový pruh otázky (Rozhodování při nejistotě). Čistý, nekonkuruje
   otázce; plný → plynule se zkracuje zleva doprava. Bez blikání/pulzování. */
.qbar { height: 6px; background: var(--c-cool-2); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qbar__fill { height: 100%; width: 100%; background: var(--c-orange); border-radius: var(--r-pill); }

/* =========================================================================
   Modul „Váš pohled na práci" — stabilní layout mezi otázkami (#111)
   Text otázky má pevně rezervovanou oblast na 2 řádky; 1řádková otázka
   nechá 2. řádek prázdný → karta, odpovědi i tlačítka se neposouvají.
   ========================================================================= */
.m7-question { min-height: 64px; margin-bottom: 32px; display: flex; align-items: flex-start; }
.m7-question__text { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--c-navy); }
.m7-actions { min-height: 48px; }

/* =========================================================================
   Zadavatel — Definice požadavků na pracovní profil (dashboard)
   ========================================================================= */
.profile-topbar { margin-bottom: 10px; }
/* §113 2.1: kompaktní horní část — texty využívají šířku viewportu a responsivně
   se zalamují, header nesmí být zbytečně vysoký kvůli úzkému textovému sloupci. */
.profile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4) var(--s6); flex-wrap: wrap; margin-bottom: var(--s5); }
.profile-header__intro { flex: 1 1 560px; min-width: 0; }
.profile-header__intro .h2 { margin-bottom: 4px; }
.profile-header__intro .lead { margin-top: 4px; }
/* Sekundární instrukce: stejná velikost jako hlavní instrukce (lead), jen světlejší
   odstín — NESMÍ působit jako drobná poznámka pod čarou. */
.profile-header__hint { margin-top: 6px; font-size: var(--fs-md); color: var(--text-3); }
.profile-controls { display: flex; gap: var(--s5); align-items: flex-start; flex-wrap: wrap; }
.profile-stat { display: flex; flex-direction: column; gap: 4px; }
.profile-stat__label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.profile-stat__val { font-weight: 700; font-size: var(--fs-lg); color: var(--c-navy); }
.profile-stat__val.is-over { color: var(--c-danger); }

/* #109: horní řádek už jen „Zbývá rozdělit" — výrazný dynamický údaj. */
.profile-remain { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: 0 0 auto; }
.profile-remain__label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.profile-remain__val { font-weight: 800; font-size: var(--fs-2xl); line-height: 1; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.profile-remain__val.is-over { color: var(--c-danger); }

/* #109 §6: souhrn 4 nadřazených oblastí — horizontální progress bary (x / 15). */
.profile-areasum__body { padding: 10px var(--s5) var(--s5); display: grid; gap: 13px; }
.areabar__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: 6px; }
.areabar__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy); }
.areabar__val { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.areabar__track { height: 8px; background: var(--c-cool); border-radius: var(--r-pill); overflow: hidden; }
.areabar__fill { height: 100%; background: var(--c-orange); border-radius: var(--r-pill); transition: width .18s ease; }

/* #109 §9: legenda radaru (jen když existuje typický profil). */
.radar-legend { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 5px; }
.radar-legend__row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
.radar-legend__line { display: inline-block; width: 18px; border-top: 2px solid; flex: 0 0 auto; }
.radar-legend__line--typ { border-top-color: #9AA6B6; }
.radar-legend__line--own { border-top-color: var(--c-orange); }

/* §113 2.2: desktop 35 % / 65 %. minmax(0,…) brání horizontálnímu přetékání. */
.profile-grid { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: var(--s4); align-items: start; }
.profile-left { display: flex; flex-direction: column; max-height: 72vh; min-width: 0; }
.profile-left__body { overflow-y: auto; min-height: 0; padding: 8px var(--s4) var(--s4); }
.profile-area { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-orange); font-weight: 700; margin: 16px 0 8px; }
.profile-area:first-child { margin-top: 2px; }
.profile-comp { border: 1px solid transparent; border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.profile-comp:hover { background: var(--c-cool-2); }
.profile-comp.is-active { background: var(--c-orange-tint); border-color: var(--c-orange-line); }
.profile-comp__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: 4px; }
.profile-comp__name { font-weight: 600; font-size: var(--fs-sm); }
.profile-comp__val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-navy); }
.profile-slider { width: 100%; accent-color: var(--c-orange); cursor: pointer; }

.profile-right { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

/* §113 2.4: kompaktní info panel — název nahoře, tři části vedle sebe. */
.profile-detail { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4) var(--s5); box-shadow: var(--shadow-sm); }
.profile-detail__name { font-size: var(--fs-md); margin-bottom: var(--s3); }
.profile-detail__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.profile-detail__col { min-width: 0; }
.profile-detail__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-orange); font-weight: 700; }
.profile-detail__text { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); margin-top: 4px; }

/* §113 2.5: společná vizualizační úroveň — radar ~2/3, souhrn oblastí ~1/3. */
.profile-viz { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
/* Radar má být dominantní — vyplní kartu, žádné velké prázdné okraje. */
.profile-radarcard { padding: var(--s3) var(--s3) 2px; display: flex; }
.profile-radar { position: relative; line-height: 0; width: 100%; }
.profile-radar svg { display: block; width: 100%; height: auto; }

/* §113 2.9: responsivita. Tablet ~40/60 + info panel do 1 sloupce; mobil 1 sloupec. */
@media (max-width: 1024px) {
  .profile-grid { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .profile-detail__cols { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 820px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-left { max-height: none; }
  .profile-viz { grid-template-columns: 1fr; }
}

/* =========================================================================
   Tvůrce profilu — úvod + klasifikace role (#108)
   ========================================================================= */
.pintro { max-width: 620px; margin: 0 auto; }
.pintro-topbar { margin-bottom: var(--s5); }
.pintro-lead { margin-top: var(--s4); }
.pintro-form { margin-top: var(--s6); display: grid; gap: var(--s5); }
.pintro-field { display: block; }
.pintro-field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.pintro-budget {
  margin-top: var(--s5); font-size: var(--fs-sm); color: var(--c-navy);
  background: var(--c-orange-tint); border: 1px solid var(--c-orange-line);
  border-radius: var(--r-md); padding: 11px 15px;
}
.pintro-actions { margin-top: var(--s6); display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); }
.pintro-actions .btn--text { align-self: center; }

/* Searchable single-select (#108) */
.ssel { position: relative; }
.ssel__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font: inherit; font-size: var(--fs-base); text-align: left; padding: 12px 14px;
  border: 1px solid var(--c-cool); border-radius: var(--r-md); background: var(--surface);
  color: var(--c-navy); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
.ssel__trigger:hover { border-color: var(--c-slate); }
.ssel.is-open .ssel__trigger { border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }
.ssel.is-disabled .ssel__trigger { background: var(--c-cool-2); color: var(--c-faint); cursor: not-allowed; box-shadow: none; }
.ssel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel__value--ph { color: var(--c-faint); }
.ssel__caret {
  flex: 0 0 auto; width: 0; height: 0; margin-left: var(--s3);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--c-muted); transition: transform .12s ease;
}
.ssel.is-open .ssel__caret { transform: rotate(180deg); }
.ssel__panel {
  display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.ssel.is-open .ssel__panel { display: block; }
.ssel__searchwrap { padding: 8px; border-bottom: 1px solid var(--line); }
.ssel__search {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm);
  padding: 9px 12px; border: 1px solid var(--c-cool); border-radius: var(--r-sm); color: var(--c-navy);
}
.ssel__search:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }
.ssel__list { max-height: 240px; overflow-y: auto; padding: 6px; }
.ssel__opt { padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-navy); cursor: pointer; }
.ssel__opt:hover { background: var(--c-cool-2); }
.ssel__opt.is-sel { background: var(--c-orange-tint); font-weight: 600; }
.ssel__empty { padding: 12px; font-size: var(--fs-sm); color: var(--c-faint); text-align: center; }

/* =========================================================================
   Administrace — přehled assessmentů (tabulka)
   ========================================================================= */
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.adm-logout { background: none; border: none; font: inherit; font-size: var(--fs-sm); color: var(--text-3); cursor: pointer; padding: 4px 6px; }
.adm-logout:hover { color: var(--c-orange); }
.admin-head { margin-bottom: var(--s5); }
.admin-head .h2 { margin-bottom: 4px; }
.admin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s5); }
.admin-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4) var(--s5); box-shadow: var(--shadow-sm); }
.admin-card__num { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-navy); line-height: 1.1; }
.admin-card__label { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.admin-toolbar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.admin-search { flex: 1 1 320px; min-width: 220px; }
.admin-search .input { width: 100%; }
.admin-select { font: inherit; font-size: var(--fs-sm); padding: 9px 12px; border: 1px solid var(--c-cool); border-radius: var(--r-md); background: var(--surface); color: var(--c-navy); cursor: pointer; }
.admin-select:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }
.admin-tablewrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: auto; max-height: 62vh; box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); white-space: nowrap; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table thead th { position: sticky; top: 0; background: var(--c-cool-2); color: var(--text-2); font-weight: 600; z-index: 1; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.adm-th--sort { cursor: pointer; user-select: none; }
.adm-th--sort:hover { color: var(--c-navy); }
.adm-th.is-sorted { color: var(--c-orange); }
.adm-sort { opacity: .55; font-size: 10px; }
.admin-table tbody tr:hover { background: var(--c-cool-2); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.adm-id { font-weight: 700; font-family: ui-monospace, monospace; color: var(--c-navy); }
.adm-email { color: var(--text-2); }
.adm-num { text-align: center; font-variant-numeric: tabular-nums; }
.adm-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.adm-lic { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-cool-2); border: 1px solid var(--line); font-weight: 700; font-size: var(--fs-xs); }
.adm-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent; }
.adm-badge--neutral { background: var(--c-cool-2); color: var(--text-2); border-color: var(--line); }
.adm-badge--muted { background: var(--c-light); color: var(--c-faint); border-color: var(--line); }
.adm-badge--active { background: var(--c-orange-tint); color: var(--c-orange-strong); border-color: var(--c-orange-line); }
.adm-badge--done { background: #ECF6EE; color: #2E7D46; border-color: rgba(46,125,70,.2); }
.adm-badge--expired { background: var(--c-danger-tint); color: var(--c-danger); border-color: rgba(198,69,59,.25); }
.adm-detail-btn { padding: 5px 14px; font-size: var(--fs-sm); }
.adm-empty { text-align: center; color: var(--text-3); padding: 28px; }
@media (max-width: 860px) { .admin-cards { grid-template-columns: repeat(2, 1fr); } }

/* Řádek hlavičky s akcí „Založit nový assessment" */
.admin-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.admin-head--row > div { min-width: 0; }

/* =========================================================================
   Administrace — Datový explorer (#110)
   ========================================================================= */
.adm-topbar__right { display: flex; align-items: center; gap: var(--s4); flex: 1 1 auto; justify-content: flex-end; }
.adm-gsearch { flex: 0 1 340px; min-width: 160px; }
.adm-gsearch__input { width: 100%; }

/* horní záložky pohledů */
.adm-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.adm-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text-3); padding: 10px 16px; cursor: pointer; margin-bottom: -1px; transition: color .12s ease, border-color .12s ease; }
.adm-tab:hover { color: var(--c-navy); }
.adm-tab.is-active { color: var(--c-navy); border-bottom-color: var(--c-orange); }

.adm-tabhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.adm-tabhead__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); }
.adm-tabhead__lead { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; max-width: 640px; }

/* dashboard karty (interaktivní) */
.admin-cards--6 { grid-template-columns: repeat(6, 1fr); }
.admin-card--btn { appearance: none; text-align: left; font: inherit; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .04s ease; }
.admin-card--btn:hover { border-color: var(--c-orange-line); box-shadow: var(--shadow-md); }
.admin-card--btn:active { transform: translateY(1px); }
@media (max-width: 1100px) { .admin-cards--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .admin-cards--6 { grid-template-columns: repeat(2, 1fr); } }

/* klikací hodnoty = rychlý filtr (dvoubarevná BPM filozofie, ne modré odkazy) */
.adm-link { color: var(--c-navy); font-weight: 600; cursor: pointer; border-radius: 4px; transition: background .12s ease; }
.adm-link:hover { text-decoration: underline; text-underline-offset: 2px; background: var(--c-cool-2); box-shadow: 0 0 0 3px var(--c-cool-2); }

/* explorer tabulka — hlavička se sort/filter ikonami */
.admin-table--explorer thead th { padding: 8px 12px; }
.admin-table--explorer th.adm-th--num .adm-th__in { justify-content: flex-end; }
.adm-th__in { display: flex; align-items: center; gap: 6px; }
.adm-th__label { white-space: nowrap; }
.adm-icbtn { appearance: none; background: none; border: none; padding: 2px; margin: 0; line-height: 1; cursor: pointer; color: var(--c-faint); border-radius: 4px; display: inline-flex; align-items: center; font-size: 11px; }
.adm-icbtn:hover { color: var(--c-navy); background: var(--c-cool); }
.adm-ic-sort.is-on { color: var(--c-orange); }
.adm-ic-filter.is-on { color: var(--c-orange); background: var(--c-orange-tint); }
.adm-actioncell { white-space: nowrap; }

/* chips aktivních filtrů */
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--s4); }
.adm-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--c-orange-tint); border: 1px solid var(--c-orange-line); color: var(--c-navy); border-radius: var(--r-pill); padding: 4px 6px 4px 12px; font-size: var(--fs-sm); font-weight: 600; }
.adm-chip__x { appearance: none; background: none; border: none; cursor: pointer; color: var(--c-slate); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.adm-chip__x:hover { color: var(--c-danger); }
.adm-chips__clear { appearance: none; background: none; border: none; font: inherit; font-size: var(--fs-sm); color: var(--text-3); cursor: pointer; padding: 4px 6px; text-decoration: underline; text-underline-offset: 2px; }
.adm-chips__clear:hover { color: var(--c-orange); }

/* popover filtru sloupce */
.adm-pop { position: fixed; width: 260px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; }
.adm-pop__head { padding: 10px; border-bottom: 1px solid var(--line); }
.adm-pop__search { width: 100%; box-sizing: border-box; }
.adm-pop__list { max-height: 240px; overflow-y: auto; padding: 6px; }
.adm-pop__opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-navy); cursor: pointer; }
.adm-pop__opt:hover { background: var(--c-cool-2); }
.adm-pop__opt input { accent-color: var(--c-orange); }
.adm-pop__empty { padding: 12px; text-align: center; color: var(--c-faint); font-size: var(--fs-sm); }
.adm-pop__range { display: flex; align-items: center; gap: 8px; padding: 12px; }
.adm-pop__range .input { width: 100%; box-sizing: border-box; }
.adm-pop__dash { color: var(--c-faint); }
.adm-pop__foot { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); }
.adm-pop__link { appearance: none; background: none; border: none; font: inherit; font-size: var(--fs-sm); color: var(--c-slate); cursor: pointer; padding: 2px; }
.adm-pop__link:hover { color: var(--c-orange); }

/* detail (modál) — klíč/hodnota */
.adm-kv { display: grid; gap: 8px; }
.adm-kv__row { display: flex; justify-content: space-between; gap: var(--s4); border-bottom: 1px dashed var(--line); padding-bottom: 7px; }
.adm-kv__row:last-child { border-bottom: none; }
.adm-kv__k { color: var(--text-3); font-size: var(--fs-sm); }
.adm-kv__v { color: var(--c-navy); font-weight: 600; text-align: right; }

/* =========================================================================
   Administrace — Nový assessment (formulář) + Souhrn
   ========================================================================= */
.anew-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: start; }
.anew-form { display: flex; flex-direction: column; gap: var(--s5); }
.anew-section { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s5); box-shadow: var(--shadow-sm); }
.anew-section__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-navy); margin-bottom: var(--s4); }
.anew-field { display: block; margin-bottom: var(--s4); }
.anew-field:last-child { margin-bottom: 0; }
.anew-field .field__label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 6px; }
.anew-field .input { width: 100%; }
.anew-num { max-width: 140px; }
.anew-ico-row { display: flex; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s3); }
.anew-ico-row .anew-field { flex: 1 1 auto; margin-bottom: 0; }
.anew-ico-row .btn { flex: 0 0 auto; white-space: nowrap; }
.anew-ares-msg:not(:empty) { margin-bottom: var(--s4); }
.anew-note { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.anew-note--muted { color: var(--text-3); margin-bottom: var(--s3); }
.anew-counts { margin-top: 2px; }

/* Výběr typu assessmentu */
.anew-types { display: grid; gap: var(--s3); }
.anew-type { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); cursor: pointer; transition: border-color .12s, background .12s; }
.anew-type:hover { border-color: var(--c-cool); background: var(--c-cool-2); }
.anew-type.is-selected { border-color: var(--c-orange); background: var(--c-orange-tint); box-shadow: inset 0 0 0 1px var(--c-orange-line); }
.anew-type.is-disabled { opacity: .55; cursor: not-allowed; background: var(--c-light); }
.anew-type.is-disabled:hover { border-color: var(--line); background: var(--c-light); }
.anew-type__head { display: flex; align-items: center; gap: 10px; }
.anew-type__radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-cool); flex: 0 0 auto; position: relative; }
.anew-type.is-selected .anew-type__radio { border-color: var(--c-orange); }
.anew-type.is-selected .anew-type__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-orange); }
.anew-type__label { font-weight: 700; color: var(--c-navy); font-size: var(--fs-sm); }
.anew-type__desc { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; margin-top: 5px; padding-left: 26px; }

/* Licence radia */
.anew-radios { display: flex; flex-direction: column; gap: 10px; }
.anew-radio { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--c-navy); cursor: pointer; }
.anew-radio input { accent-color: var(--c-orange); width: 16px; height: 16px; }

/* Aside — cena */
.anew-aside { position: sticky; top: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.anew-price { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s5); box-shadow: var(--shadow-sm); }
.anew-price__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-navy); margin-bottom: var(--s3); }
.anew-price__value { margin-top: var(--s3); font-size: var(--fs-lg); color: var(--c-navy); }
.anew-devtag { font-size: var(--fs-xs); color: var(--text-3); font-style: italic; margin-top: var(--s3); }

/* Souhrn po vytvoření */
.anew-summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--s5); }
.anew-summary__row { display: flex; justify-content: space-between; gap: var(--s4); padding: 12px var(--s5); border-bottom: 1px solid var(--line); }
.anew-summary__row:last-child { border-bottom: none; }
.anew-summary__k { color: var(--text-2); font-size: var(--fs-sm); }
.anew-summary__v { color: var(--c-navy); font-weight: 600; text-align: right; }
.anew-mono { font-family: ui-monospace, monospace; }
.anew-emailblock { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s5); }
.anew-sent:not(:empty) { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 860px) { .anew-grid { grid-template-columns: 1fr; } .anew-aside { position: static; } }

/* =========================================================================
   Modul 3 — Výsledky společnosti (management report)
   ========================================================================= */
.mr-intro { margin-bottom: var(--s5); }
.mreport-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.mreport-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--c-cool-2); }
.mreport-company { font-weight: 800; color: var(--c-navy); font-size: var(--fs-md); }
.mreport-period { margin-top: 2px; }
.mreport-unit { white-space: nowrap; }
.mreport-wrap { overflow-x: auto; }
.mreport { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mreport th, .mreport td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mreport .mr-corner, .mreport .mr-rowlabel { text-align: left; }
.mr-rowlabel { font-weight: 600; color: var(--c-navy); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.mreport thead th { background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; position: sticky; top: 0; }
.mr-corner { color: var(--text-3); z-index: 2; }
.mr-qhead.is-latest { color: var(--c-orange); }
.mr-qhead__tag { display: inline-block; margin-left: 6px; font-size: 9px; padding: 1px 5px; border-radius: var(--r-pill); background: var(--c-orange-tint); color: var(--c-orange-strong); border: 1px solid var(--c-orange-line); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.mr-section td { background: var(--c-light); font-weight: 700; color: var(--text-2); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; position: sticky; left: 0; }
.mr-row--sub td, .mr-row--sub th { border-top: 2px solid var(--c-cool); }
.mr-cell { cursor: pointer; transition: background .1s; vertical-align: top; }
.mr-cell:hover { background: var(--c-cool-2); }
.mr-cell.is-selected { background: var(--c-orange-tint); box-shadow: inset 0 0 0 2px var(--c-orange); }
.mr-cell__val { display: block; color: var(--c-navy); font-weight: 600; }
.mr-cell--sub .mr-cell__val { font-weight: 800; }
.mr-cell__sub { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.mr-dev { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); font-style: italic; }
.mr-dev strong { font-style: normal; letter-spacing: .06em; color: var(--text-2); }

/* Forced-choice mřížka (Modul 0) — větší, klidné klikací karty, rovná výška. */
.choice-grid .choice { align-items: center; min-height: 92px; height: 100%; }
.choice-grid .choice__title { line-height: var(--lh-base); }

/* Scenario speaker / situation */
.scenario { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.scenario__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--c-cool-2); }
.scenario__role-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--c-navy); color: #fff; font-weight: 700; font-size: var(--fs-base);
}
.scenario__role { font-weight: 600; }
.scenario__role-sub { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.scenario__body { padding: var(--s5); }
.scenario__situation { color: var(--text); font-size: var(--fs-md); line-height: var(--lh-base); }
.scenario__steps { display: flex; gap: 6px; padding: 0 var(--s5) var(--s4); }
.scenario__step { height: 4px; flex: 1; border-radius: var(--r-pill); background: var(--c-cool); }
.scenario__step.is-done { background: var(--c-orange); }
.scenario__step.is-active { background: var(--c-slate); }

/* =========================================================================
   Task Card + Drag & Drop Timeline (Mini Assessment)
   ========================================================================= */
.mini { display: grid; grid-template-columns: 340px 1fr; gap: var(--s4); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel__title { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.panel__body { padding: var(--s4); }

.task {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s3) var(--s4); cursor: grab;
  transition: box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}
.task + .task { margin-top: var(--s3); }
.task:hover { border-color: var(--c-slate); box-shadow: var(--shadow-sm); }
.task.is-dragging { opacity: .35; }
.task__grip { color: var(--c-faint); flex: 0 0 auto; margin-top: 2px; cursor: grab; }
.task__body { flex: 1; min-width: 0; }
.task__title { font-weight: 600; font-size: var(--fs-base); }
.task__desc { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.task__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.task__top { display: flex; align-items: flex-start; gap: var(--s3); }
.task__top .task__title { flex: 1; min-width: 0; }
.task__due { font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px; }
/* §115 §3/§11: stručný situační text karty — dobře čitelný, více prostoru pro kontext. */
.task__situation { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); margin-top: 5px; }

.tag {
  font-size: var(--fs-xs); background: var(--c-cool-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px 10px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.tag svg { opacity: .7; }

/* Důležitost (1–4 ★) */
.stars { display: inline-flex; gap: 1px; flex: 0 0 auto; line-height: 1; font-size: 13px; margin-top: 1px; }
.star { color: var(--c-cool); }
.star.is-on { color: var(--c-orange); }

/* =========================================================================
   Day Planner (Modul 1) — proporcionální časová osa
   ========================================================================= */
.planner { display: grid; grid-template-columns: 340px 1fr; gap: var(--s4); align-items: stretch; }
/* Dva samostatné, pevně vysoké panely, každý s vlastním svislým scrollem —
   při scrollování dlouhého seznamu časová osa (cílová oblast) nikdy nezmizí. */
.planner__list { display: flex; flex-direction: column; height: 64vh; min-height: 440px; }
.planner__list .panel__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.planner__board { display: flex; flex-direction: column; height: 64vh; min-height: 440px; }
.task.is-ghosted { opacity: .3; }
.task { touch-action: none; }

/* Kompaktní řazení nad seznamem úkolů */
.planner__controls { display: flex; align-items: center; gap: 8px; padding: 8px var(--s4); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.planner__controls-label { font-size: var(--fs-xs); color: var(--text-3); }
.planner__sort { font: inherit; font-size: var(--fs-sm); padding: 5px 10px; border: 1px solid var(--c-cool); border-radius: var(--r-sm); background: var(--surface); color: var(--c-navy); cursor: pointer; }
.planner__sort:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }
/* §115 §6: samostatné tlačítko obrácení směru — vizuálně odlišné od dropdownu. */
.planner__sortdir { font: inherit; font-size: var(--fs-md); font-weight: 700; line-height: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-cool); border-radius: var(--r-sm); background: var(--c-cool-2); color: var(--c-navy); cursor: pointer; flex: 0 0 auto; }
.planner__sortdir:hover { border-color: var(--c-orange); color: var(--c-orange); }
.planner__sortdir:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }

.planner__scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 10px var(--s4) 14px; }
.track { position: relative; display: grid; grid-template-columns: 52px 1fr; }
.track__gutter { position: relative; }
.track__area {
  position: relative; border-left: 1px solid var(--line);
  background: var(--c-cool-2);
}

/* Časová mřížka */
.track__label {
  position: absolute; right: 10px; transform: translateY(-50%);
  font-size: 11px; color: var(--c-faint); font-variant-numeric: tabular-nums;
}
.track__label.is-hour { color: var(--text-2); font-weight: 600; font-size: var(--fs-xs); }
.track__line { position: absolute; left: 0; right: 0; height: 1px; background: var(--c-cool); }
.track__line.is-hour { background: var(--c-cool); box-shadow: 0 0 0 .5px var(--c-cool); }
.track__area > .track__line:not(.is-hour) { background: rgba(10,29,55,.05); }

/* Náhled cílové pozice při přetažení */
.track__ghost {
  position: absolute; left: 6px; right: 6px; display: none; z-index: 2;
  border-radius: var(--r-md); border: 1.5px dashed; pointer-events: none;
}
.track__ghost.is-free { border-color: var(--c-orange); background: rgba(255,138,0,.10); }
.track__ghost.is-blocked { border-color: var(--c-danger); background: var(--c-danger-tint); }

/* Umístěná karta úkolu — výška = délka úkolu */
.pcard {
  position: absolute; left: 6px; right: 6px; z-index: 3; overflow: hidden;
  display: flex; gap: 8px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); cursor: grab; touch-action: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pcard:hover { border-color: var(--c-slate); box-shadow: var(--shadow-md); }
.pcard.is-ghosted { opacity: .3; }
.pcard.is-shifting { transition: top .13s ease; }   /* plynulý odsun navazujících úkolů */
.pcard__bar { flex: 0 0 4px; border-radius: var(--r-pill); background: var(--c-orange); margin: 6px 0 6px 6px; }
.pcard__body { flex: 1; min-width: 0; padding: 6px 10px 6px 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pcard__title { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pcard.is-compact .pcard__body { flex-direction: row; align-items: center; gap: 8px; padding: 0 10px 0 0; }
.pcard.is-compact .pcard__time { display: none; }

/* Plovoucí náhled u kurzoru během přetažení */
.pcard--float { position: fixed; z-index: 1000; pointer-events: none; opacity: .96; box-shadow: var(--shadow-lg); left: 0; top: 0; }

/* Urgentní úkol (vložený „změnou situace") */
.pcard--urgent { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange-line), var(--shadow-sm); }
.pcard--urgent .pcard__bar { background: var(--c-orange-strong); }
.task--urgent { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange-line); }
.task--urgent .task__grip { color: var(--c-orange); }
.task--urgent .task__meta .tag:last-child { border-color: var(--c-orange-line); color: var(--c-orange-strong); background: var(--c-orange-tint); }

/* Seznam jako cílová zóna (návrat úkolu) */
.planner__list.is-drop { outline: 2px dashed var(--c-orange); outline-offset: 2px; }

/* Pevné bloky (schůzky / přestávky / blokované časy / disruptory) — připraveno
   pro budoucí rozšíření; stejná mechanika obsazenosti jako u úkolů. */
.fixedblock {
  position: absolute; left: 6px; right: 6px; z-index: 3; overflow: hidden;
  border-radius: var(--r-md); padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 1px solid var(--c-cool);
  background: repeating-linear-gradient(45deg, var(--c-cool-2), var(--c-cool-2) 9px, var(--c-white) 9px, var(--c-white) 18px);
  cursor: not-allowed;
}
.fixedblock__title { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixedblock__time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fixedblock--meeting { background: rgba(51,75,107,.10); border-color: var(--c-slate); }
.fixedblock--break { background: rgba(255,138,0,.08); border-color: var(--c-orange-line); }

/* =========================================================================
   Email Card (Preference Check — sortable)
   ========================================================================= */
.sortlist { display: flex; flex-direction: column; gap: var(--s3); }
.email {
  display: flex; gap: var(--s3); align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: var(--s4); cursor: grab; box-shadow: var(--shadow-sm);
  transition: box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}
.email:hover { border-color: var(--c-slate); }
.email.is-dragging { opacity: .35; }
.email.is-over { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange); }
.email__rank {
  flex: 0 0 auto; width: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--c-faint);
}
.email__rank-no {
  width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm);
}
.email__grip { cursor: grab; }
.email__body { flex: 1; min-width: 0; }
.email__subject { font-weight: 600; font-size: var(--fs-base); }
/* pre-line = zachová odřádkování/odrážky (formální, strukturovaný e-mail). */
.email__preview { color: var(--text-2); font-size: var(--fs-sm); margin-top: 3px; line-height: 1.5; white-space: pre-line; }
.sortlist__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin: var(--s2) 2px; text-transform: uppercase; letter-spacing: .05em; }

/* §116 — Situační preference. Text možnosti: čitelný, navy, vizuálně rovnocenný
   pro všechny čtyři varianty (žádné typologické odlišení barvou/ikonou). */
.opt__text { font-size: var(--fs-base); color: var(--c-navy); line-height: 1.5; }
/* Nenápadný progress „Situace X z 8" — bez diagnostických informací. */
.sit-progress { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: var(--s2) 0 var(--s3); }
/* Situační zadání — bílá karta s dobře čitelným textem. */
.sit-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c-orange); border-radius: var(--r-md); padding: var(--s4) var(--s5); box-shadow: var(--shadow-sm); margin-bottom: var(--s4); }
.sit-card__text { font-size: var(--fs-md); color: var(--c-navy); line-height: var(--lh-base); }
/* Druhý řádek instrukce — vizuálně méně výrazný. */
.sit-subtle { color: var(--text-3); margin-top: 4px; }

/* §124/§127 — comparative judgment: kompaktní řazení 4 kompetencí. */
/* §6 — centrální pracovní oblast ~650–750 px, zarovnaná na střed. */
.cj-arena { max-width: 720px; margin: 0 auto; }
.cj-arena .sortlist { gap: 10px; }
/* §6 — kompaktní karta: výška ~70–85 px, jen název, žádná prázdná plocha. */
.cj-card { padding: 0 var(--s4); min-height: 74px; align-items: center; }
.cj-card .email__rank { flex-direction: row; width: auto; gap: 10px; align-items: center; }
.cj-card__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-navy); }
/* §8 — pořadové číslo = aktuální pozice (přepočítává Sortable.reindex). */
.cj-card .email__rank-no { width: 30px; height: 30px; font-size: var(--fs-md); }
/* §9/§10 — prostorová osa důležitosti; jen navy/gray, žádná good/bad semantika. */
.cj-axis { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; }
.cj-axis--top { text-align: center; margin: 0 0 10px; }
.cj-axis--bottom { text-align: center; margin: 10px 0 0; }
/* §3B/§4 — název posuzované role + sekundární kontext (Profile Creator). */
.cj-rolename { color: var(--c-navy); }
.cj-rolectx { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
/* Velmi nenápadný obecný indikátor bez počtu kol (§12). */
.cj-progress { height: 3px; background: var(--c-cool-2); border-radius: var(--r-pill); overflow: hidden; margin: 2px 0 18px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cj-progress__bar { height: 100%; width: 35%; background: var(--c-orange); border-radius: var(--r-pill); opacity: .5; animation: cjmove 2.4s ease-in-out infinite; }
@keyframes cjmove { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
/* Výsledný radar — dominantní prvek stránky (§14). */
.cj-result { max-width: 760px; margin: 8px auto 0; }
.cj-result .profile-radar { width: 100%; }
/* Drop indikátor — oranžová linka v cílové MEZeře mezi kartami při přetahování. */
.sortlist__indicator { height: 3px; border-radius: 2px; background: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.18); margin: 1px 0; }

/* =========================================================================
   Flash Check — artefakt + Visual Selection Marker
   ========================================================================= */
.artifact-stage {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
  min-height: 440px; cursor: crosshair;
}
.artifact-stage__inner { padding: var(--s6); pointer-events: none; }
.marker {
  position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255,138,0,.18); pointer-events: none;
  animation: markerIn .18s ease-out;
}
.marker::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--c-orange); }
@keyframes markerIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* Mock artefakty */
.doc { font-size: var(--fs-sm); color: var(--text); }
.doc__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--s2); }
.doc__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.doc__bars { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding-top: var(--s4); }
.doc__bar { flex: 1; background: var(--c-navy); border-radius: 6px 6px 0 0; }
.doc__bar--accent { background: var(--c-orange); }
.doc__table { width: 100%; border-collapse: collapse; }
.doc__table th, .doc__table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.doc__table th { color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs); }
.doc__kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); }
.doc__kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }
.doc__kpi-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.doc__kpi-value { font-size: var(--fs-xl); font-weight: 700; margin-top: 4px; }

/* =========================================================================
   Likert Scale (1–5)
   ========================================================================= */
.likert__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.likert__opt {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: var(--s4) var(--s2); text-align: center; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.likert__opt:hover { border-color: var(--c-slate); transform: translateY(-1px); }
.likert__opt.is-selected { border-color: var(--c-orange); background: var(--c-orange-tint); box-shadow: inset 0 0 0 1px var(--c-orange); }
.likert__num { display: block; font-weight: 700; font-size: var(--fs-xl); color: var(--c-navy); }
.likert__opt.is-selected .likert__num { color: var(--c-orange); }
.likert__lbl { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; min-height: 26px; }
.likert__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s2); }

/* =========================================================================
   Employee Card + Budget Counter (Leadership)
   ========================================================================= */
.budget {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  background: var(--c-navy); color: #fff; border-radius: var(--r-lg); padding: var(--s5);
}
.budget__block { display: flex; flex-direction: column; }
.budget__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: #9FB0C6; }
.budget__value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.budget__value.is-over { color: #FF8A00; }
.budget__track { flex: 1 1 220px; height: 8px; background: rgba(255,255,255,.16); border-radius: var(--r-pill); overflow: hidden; min-width: 160px; }
.budget__fill { height: 100%; background: var(--c-orange); border-radius: var(--r-pill); transition: width .3s ease; }
.budget__toggle { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: #C7D2E0; cursor: pointer; }

.employee {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--shadow-sm);
}
.employee.is-over { border-color: var(--c-danger); }
.employee__head { display: flex; gap: var(--s3); align-items: center; }
/* Fotografie jsou volitelně vypnutelné (§13). Výchozí stav: skryté. */
.employee__photo {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-pill); object-fit: cover;
  background: var(--c-cool-2); border: 1px solid var(--line);
  align-items: center; justify-content: center; color: var(--c-slate); font-weight: 700;
  display: none;
}
/* Foto varianta (Situace 2): fotografie je záměrně VÝRAZNÁ — velký banner přes
   celou šířku karty nahoře, jednotná velikost i formát pro všechny (UI nikoho
   nezvýhodňuje). Cílem je, aby si respondent osob skutečně všiml. */
.grid[data-photos="1"] .employee { overflow: hidden; }
.grid[data-photos="1"] .employee__photo {
  display: block;
  width: calc(100% + 2 * var(--s5));
  height: 220px;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;
  border: 0; border-radius: 0;
  object-fit: cover; object-position: center 30%;
}
.grid[data-photos="1"] .employee__head { text-align: center; }
.grid[data-photos="1"] .employee__name { font-size: var(--fs-md); }
.employee__name { font-weight: 600; }
.employee__role { font-size: var(--fs-sm); color: var(--text-3); }
.employee__text { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); }
.employee__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.stat__dots { display: flex; gap: 3px; }
.stat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cool); }
.stat__dot.is-on { background: var(--c-orange); }

/* Modul 5 — dvě hlavní metriky (Schopnost/výkon, Motivace/nasazení) výrazně:
   každá na vlastním řádku, popisek vlevo, pět bodů vpravo. */
.employee__stats { display: flex; flex-direction: column; gap: var(--s2); }
.employee__stats .stat { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3); }
.employee__stats .stat__label { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text-2); }
.employee__stats .stat__dots { gap: 5px; }
.employee__stats .stat__dot { width: 11px; height: 11px; }
.employee__alloc { border-top: 1px solid var(--line); padding-top: var(--s4); }
.employee__alloc-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); }
.employee__alloc-label { font-size: var(--fs-sm); color: var(--text-3); }
.employee__alloc-value { font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.employee__controls { display: flex; align-items: center; gap: var(--s2); }
.employee__controls input[type=range] { flex: 1; accent-color: var(--c-orange); }
.stepbtn {
  width: 44px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--c-cool);
  background: var(--surface); color: var(--c-navy); font-weight: 700; font-size: var(--fs-base); cursor: pointer;
  flex: 0 0 auto;
}
.stepbtn:hover { border-color: var(--c-slate); }
.stepbtn:active { transform: translateY(1px); }

/* =========================================================================
   Text field / Textarea
   ========================================================================= */
.field { display: block; }
.field__label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.input, .textarea {
  width: 100%; font: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--c-cool); border-radius: var(--r-md); padding: 12px 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--c-faint); }
.input:focus, .textarea:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }
.input--icon { padding-left: 42px; }
.field--icon { position: relative; }
.field--icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-faint); pointer-events: none; }
.textarea { min-height: 104px; resize: vertical; }
/* Chybný stav pole (jemné červené zvýraznění + hláška pod polem) */
.input--error { border-color: var(--c-danger); }
.input--error:focus { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(198,69,59,.15); }
.field__error { color: var(--c-danger); font-size: var(--fs-sm); margin-top: 6px; }

/* =========================================================================
   Tooltip
   ========================================================================= */
.tip { position: relative; display: inline-flex; }
.tip__trigger {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--c-cool);
  color: var(--text-3); font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; cursor: help; background: var(--surface);
}
.tip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--c-navy); color: #fff; font-size: var(--fs-xs); line-height: 1.4; font-weight: 400;
  padding: 8px 12px; border-radius: var(--r-sm); width: max-content; max-width: 240px;
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 50;
  box-shadow: var(--shadow-md);
}
.tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--c-navy); }
.tip:hover .tip__bubble, .tip__trigger:focus + .tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   Validation Message
   ========================================================================= */
.validation {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--fs-sm); border-radius: var(--r-md); padding: 10px 14px;
}
.validation svg { flex: 0 0 auto; margin-top: 1px; }
.validation--error { background: var(--c-danger-tint); color: var(--c-danger); border: 1px solid rgba(198,69,59,.25); }
.validation--info  { background: var(--c-cool-2); color: var(--text-2); border: 1px solid var(--line); }
.validation--success { background: #ECF6EE; color: #2E7D46; border: 1px solid rgba(46,125,70,.2); }

/* =========================================================================
   Modal / Disruption Modal
   ========================================================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,29,55,.45);
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 540px; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: rise .2s cubic-bezier(.4,0,.2,1);
  /* Panel se přizpůsobí výšce viewportu: header/footer fixní, obsah scrolluje. */
  display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--s5));
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal__header { padding: var(--s5) var(--s5) var(--s3); flex: 0 0 auto; }
.modal__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-orange); margin-bottom: var(--s2); }
.modal__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); animation: pulse 1.4s infinite; }
.modal__title { font-size: var(--fs-lg); font-weight: 700; }
.modal__body { padding: var(--s3) var(--s5) var(--s5); flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal__footer { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; flex: 0 0 auto; }
.modal--disruption { border-top: 4px solid var(--c-orange); }

/* Bloky uvnitř disruption modalu */
.infoblock { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); background: var(--c-cool-2); }
.infoblock + .infoblock { margin-top: var(--s3); }
.infoblock__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; margin-bottom: 4px; }
.infoblock__text { font-size: var(--fs-base); color: var(--text); }

/* =========================================================================
   Completion Screen
   ========================================================================= */
.completion__badge {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto;
  background: var(--c-orange-tint); border: 1px solid var(--c-orange-line);
  display: flex; align-items: center; justify-content: center; color: var(--c-orange);
}
.completion__note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); }

/* =========================================================================
   Responsivita (desktop-first)
   ========================================================================= */
@media (max-width: 960px) {
  .mini { grid-template-columns: 1fr; }
  .planner { grid-template-columns: 1fr; }
  .planner__list { position: static; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .doc__kpis { grid-template-columns: repeat(2,1fr); }
  .uh__progress { display: none; }
}
@media (max-width: 560px) {
  .likert__scale { gap: 6px; }
  .likert__num { font-size: var(--fs-lg); }
  .uh__clock .uh__clock-item:first-child { display: none; }
}

/* =========================================================================
   §114 — Klientská větev (registrace / nový assessment)
   ========================================================================= */
/* Textový odkaz pod primárním tlačítkem (login i klientské obrazovky). */
.login-alt { background: none; border: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-orange); cursor: pointer; padding: 4px 6px; text-decoration: none; }
.login-alt:hover { text-decoration: underline; }

/* Horní lišta klientských obrazovek + nenápadný account indicator (§20). */
.client-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: 14px; }
.client-topbar__right { display: flex; align-items: center; gap: var(--s4); }
.client-account { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); background: var(--c-cool-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; max-width: 60vw; overflow: hidden; }
.client-account__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-account__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); flex: 0 0 auto; }

/* Ověření e-mailu (§4). */
.client-verify__email { font-weight: 700; color: var(--c-navy); font-size: var(--fs-md); }
.client-verify__actions { display: flex; gap: var(--s4); justify-content: center; }
.codeboxes { display: flex; gap: 12px; justify-content: center; }
.codebox { width: 54px; height: 62px; text-align: center; font-size: var(--fs-2xl); font-weight: 700; color: var(--c-navy);
  border: 1px solid var(--c-cool); border-radius: var(--r-md); background: var(--surface); }
.codebox:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,138,0,.15); }

/* Segmented control „Na firmu / Na jméno" (§6). */
.segmented { display: inline-flex; padding: 3px; background: var(--c-cool-2); border: 1px solid var(--line); border-radius: var(--r-pill); gap: 2px; }
.segmented__opt { border: none; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); cursor: pointer; padding: 8px 20px; border-radius: var(--r-pill); transition: background .12s, color .12s; }
.segmented__opt.is-active { background: var(--c-orange); color: #fff; }

/* Registrační panely + fakturační pole. */
.client-panel { margin-top: var(--s5); display: grid; gap: var(--s4); }
.client-official { display: grid; gap: var(--s4); padding-top: var(--s2); }
.client-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.client-grid3 { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--s4); }
.input--readonly { background: var(--c-cool-2); color: var(--text-2); cursor: default; }
.ares-badge { display: inline-block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-orange); }

/* Typ assessmentu — rozbalovací selectable karty (§12). */
.atype-list { display: grid; gap: var(--s4); margin-top: var(--s2); }
.atype { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color .12s, box-shadow .12s, opacity .12s; }
.atype__head { display: flex; align-items: flex-start; gap: 12px; padding: var(--s4) var(--s5); cursor: pointer; }
.atype.is-disabled { opacity: .55; }
.atype.is-disabled .atype__head { cursor: not-allowed; }
.atype.is-dimmed { opacity: .5; }
.atype.is-selected { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange-line); opacity: 1; }
.atype.is-selected .atype__head { background: var(--c-orange-tint); }
.atype__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-cool); flex: 0 0 auto; margin-top: 2px; position: relative; }
.atype.is-selected .atype__radio { border-color: var(--c-orange); }
.atype.is-selected .atype__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-orange); }
.atype__meta { min-width: 0; }
.atype__label { font-weight: 700; color: var(--c-navy); font-size: var(--fs-md); }
.atype__desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.atype__body { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); }

/* Formuláře uvnitř rozbalené karty. */
.client-form { display: grid; gap: var(--s4); }
.client-list { display: grid; gap: 10px; }
.client-list__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.client-list__row--2 { grid-template-columns: 1fr 1fr auto; }
.client-list__rm { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; }
.client-list__rm:hover { border-color: var(--c-danger); color: var(--c-danger); }
.client-add { justify-self: start; }

@media (max-width: 640px) {
  .client-grid2, .client-grid3 { grid-template-columns: 1fr; }
  .client-list__row--2 { grid-template-columns: 1fr auto; }
  .codebox { width: 46px; height: 54px; font-size: var(--fs-xl); }
}

/* =========================================================================
   §123 — Gateway (známý e-mail) + Sponzorský prostor „Moje assessmenty"
   ========================================================================= */
.gate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow-sm); text-align: left; }
.gate-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-navy); margin-bottom: 4px; }
.gate-card__row { display: flex; gap: 10px; margin-top: 10px; }
.gate-card__row .input { flex: 1; min-width: 0; }

.sp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }

.spa-list { display: flex; flex-direction: column; gap: 10px; }
.spa-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.spa-row:hover { border-color: var(--c-slate); }
.spa-row__main { min-width: 0; }
.spa-row__name { font-weight: 700; color: var(--c-navy); }
.spa-row__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
.spa-row__meta { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; }
.spa-progress { width: 120px; height: 6px; background: var(--c-cool-2); border-radius: var(--r-pill); overflow: hidden; }
.spa-progress__fill { height: 100%; background: var(--c-orange); border-radius: var(--r-pill); }

/* Stavové odznaky — jen navy/orange/šedá (žádná nová paleta). */
.sp-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--c-cool-2); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.sp-badge--done { background: var(--c-orange-tint); color: var(--c-orange-strong); border-color: var(--c-orange-line); }
.sp-badge--active { color: var(--c-navy); }
.sp-badge--warn, .sp-badge--neutral { color: var(--text-3); }

.sp-people { display: flex; flex-direction: column; gap: 8px; }
.sp-person { display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px var(--s4); }
.sp-person__name { font-weight: 600; color: var(--c-navy); }
.sp-person__right { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; }

@media (max-width: 640px) {
  .spa-row, .sp-person { flex-direction: column; align-items: flex-start; }
  .spa-row__meta { flex-wrap: wrap; }
  .spa-progress { width: 100%; }
}

/* =========================================================================
   §125 — Registrace / login / recovery / voucher / karty assessmentů
   ========================================================================= */

/* §18 — DEV nápověda (jen dev; produkce nezobrazuje). */
.dev-hint { margin-top: var(--s5); padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--c-light); text-align: left; }
.dev-hint__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.dev-hint__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dev-hint__list li { font-size: var(--fs-xs); color: var(--text-3); font-family: ui-monospace, monospace; }
.dev-hint__note { font-size: var(--fs-xs); color: var(--text-3); margin-top: 8px; font-style: italic; }
.dev-hint__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-hint__chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.dev-hint__chip:hover { border-color: var(--c-orange); background: var(--c-orange-tint); }
.dev-hint__chip-mail { font-size: var(--fs-xs); font-weight: 600; color: var(--c-navy); font-family: ui-monospace, monospace; }
.dev-hint__chip-note { font-size: 10px; color: var(--text-3); }
.anew-devtag--fill { display: inline-block; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 4px 8px; background: #fff; cursor: pointer; font-family: ui-monospace, monospace; transition: border-color .12s, background .12s; }
.anew-devtag--fill:hover { border-color: var(--c-orange); background: var(--c-orange-tint); }

/* §4 — nenápadné „Registrace · e-mail" (bez dot, bez odhlásit). */
.client-reg-tag { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }

/* §15 — volba přístupu „Kam chcete pokračovat?". */
.gate-choices { display: grid; gap: 10px; margin: var(--s4) 0; }
.gate-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px var(--s5); cursor: pointer;
  transition: border-color .12s, box-shadow .12s; box-shadow: var(--shadow-sm); }
.gate-choice:hover { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange-line); }
.gate-choice__label { font-weight: 700; color: var(--c-navy); }
.gate-choice__sub { font-size: var(--fs-sm); color: var(--text-3); }

/* Recovery (§12–§17) — nenápadná akce + potvrzovací box. */
.login-alt--muted { color: var(--text-2); font-weight: 500; display: block; margin: 8px auto 0; }
.recovery-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-light); text-align: left; display: grid; gap: 10px; }

/* §14 — kontext konkrétní pozvánky nad polem Přístupového kódu. */
.access-ctx { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-cool-2); text-align: left; }
.access-ctx__name { font-weight: 700; color: var(--c-navy); }
.access-ctx__role { font-size: var(--fs-sm); color: var(--text-3); }

/* §10 — jednorázové zobrazení Kódu sponzora. */
.sponsorcode { margin: var(--s4) 0; padding: 16px var(--s5); border: 1px solid var(--c-orange-line); border-radius: var(--r-lg); background: var(--c-orange-tint); display: grid; gap: 6px; text-align: center; }
.sponsorcode__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-orange-strong); }
.sponsorcode__value { font-family: ui-monospace, monospace; font-size: var(--fs-xl); font-weight: 700; color: var(--c-navy); letter-spacing: .06em; }

/* §6 — telefonní pole s country calling code. */
.phone-field { display: flex; gap: 10px; }
.phone-cc { flex: 0 0 130px; }
.phone-num { flex: 1 1 auto; min-width: 0; }

/* §8 — address autocomplete. */
.addr-search { position: relative; }
.addr-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; }
.addr-opt { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 10px 14px; }
.addr-opt:hover { background: var(--c-cool-2); }
.addr-opt__street { font-size: var(--fs-sm); color: var(--c-navy); font-weight: 600; }
.addr-opt__city { font-size: var(--fs-xs); color: var(--text-3); }

/* §33–§36 — voucher / slevový kód (v kroku Cena / Aktivace). */
.voucher-panel { margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.voucher-panel > summary { cursor: pointer; padding: 12px var(--s5); font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy); list-style: none; }
.voucher-panel > summary::-webkit-details-marker { display: none; }
.voucher-panel > summary::before { content: '＋ '; color: var(--c-orange); font-weight: 700; }
.voucher-panel[open] > summary::before { content: '－ '; }
.voucher-body { padding: 0 var(--s5) var(--s4); display: grid; gap: 10px; }
.voucher-msg:not(:empty) { margin-top: 4px; }
.voucher-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.anew-summary__v--strong { font-size: var(--fs-md); color: var(--c-navy); font-weight: 800; }

/* §22 — karta v „Aktivní assessmenty" (název + typ | datum + progress | status). */
.spa-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--s5); align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; }
.spa-card:hover { border-color: var(--c-slate); box-shadow: var(--shadow-md); }
.spa-card__main { min-width: 0; }
.spa-card__name { font-weight: 700; color: var(--c-navy); font-size: var(--fs-md); }
.spa-card__type { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
/* §126 — kompaktní 2×2 kontext pracovní role, sekundární vůči názvu. */
.spa-card__ctx { display: grid; grid-template-columns: auto auto; gap: 2px 16px; margin-top: 8px; justify-content: start; }
.spa-card__ctx span { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.spa-card__mid { min-width: 0; display: grid; gap: 5px; }
.spa-card__date { font-size: var(--fs-xs); color: var(--text-3); }
.spa-card__done { font-size: var(--fs-sm); color: var(--text-2); }
.spa-card__mid .spa-progress { width: 100%; }
.spa-card__status { flex: 0 0 auto; justify-self: end; }
.sp-empty { padding: var(--s6) var(--s5); text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--c-light); }

@media (max-width: 640px) {
  .spa-card { grid-template-columns: 1fr; gap: 10px; }
  .spa-card__status { justify-self: start; }
  .phone-field { flex-direction: column; }
  .phone-cc { flex: none; width: 100%; }
}

/* §15/§16 — multi-role Profile Creator: přechod mezi rolemi + dokončení. */
.role-next { margin: 4px auto 24px; padding: 16px var(--s5); border: 1px solid var(--c-orange-line); border-radius: var(--r-lg); background: var(--c-orange-tint); text-align: center; max-width: 460px; }
.role-next__name { font-size: var(--fs-lg); font-weight: 800; color: var(--c-navy); }
.role-next__ctx { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.role-done-list { display: inline-flex; flex-direction: column; gap: 8px; margin: 8px auto 4px; text-align: left; }
.role-done-list__row { display: flex; align-items: center; gap: 8px; color: var(--c-navy); font-weight: 600; }
.role-done-list__row svg { color: var(--c-orange); flex: 0 0 auto; }