/*
 * DS component layer (.acrm-*) — shared primitives consumed app-wide, built ONLY
 * on @acrm/ui tokens (no new color/spacing values). Per RULES §0.1 do not improvise:
 * promote a primitive here only when it mirrors DS canon AND is reused across screens
 * (Art-Director gate). The app SHELL is NOT here — it is the ported .as-* family
 * (apps/web/src/ds/app-shell.css) per RULES §1; the segment-table / detail / drawer
 * engines live in their ported apps/web/src/ds/*.css files.
 */

/* ---- Page header ---- */
.acrm-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.acrm-h1 {
  font: var(--h1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.acrm-eyebrow {
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-muted);
}

/* ---- Inputs (DS control height, hairline, radius-sm) ----
   The bespoke box-input clones (.finput/.sgb-input/.dlr-input/.au-input) are aliased
   here to the canonical field so they share ONE definition (their drifted defs were
   deleted; .au-input's off-spec 46px reconciled to DS per RULES §4). Borderless
   composed fields (.ac-input) and modifiers (.prof-input) are intentionally NOT aliased. */
.acrm-input,
.sgb-input,
.dlr-input,
.au-input,
.nastaveni-page .finput {
  height: 32px; /* DS field height (deliberately distinct from --control-h 30px) */
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-100);
  color: var(--fg);
  font: var(--p);
  width: 100%;
}
.acrm-input::placeholder,
.sgb-input::placeholder,
.dlr-input::placeholder,
.au-input::placeholder,
.nastaveni-page .finput::placeholder {
  color: var(--fg-muted);
}
.acrm-input:focus,
.sgb-input:focus,
.dlr-input:focus,
.au-input:focus,
.nastaveni-page .finput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); /* DS translucent focus ring */
}
/* disabled / error / šířkové varianty (Inputs karta) — sdíleno všemi aliasy pole */
.acrm-input:disabled,
.acrm-input.is-disabled,
.sgb-input:disabled,
.dlr-input:disabled,
.au-input:disabled,
.nastaveni-page .finput:disabled {
  background: var(--surface-75);
  border-color: var(--border);
  box-shadow: none;
  color: var(--fg-muted);
  cursor: default;
}
.acrm-input.is-error,
.sgb-input.is-error,
.au-input.is-error {
  border-color: var(--critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 16%, transparent);
}
.acrm-input--num {
  width: 88px;
  max-width: 100%;
}
.acrm-input--code {
  width: 132px;
  max-width: 100%;
}
.acrm-input--short {
  width: 210px;
  max-width: 100%;
}
.acrm-input--email {
  width: 280px;
  max-width: 100%;
}
/* dark: DS enginy (_ds/builder-panels, _ds/segment-screen, _ds/auth) shodně
   předepisují tmavé pole na --surface-50 — jedno kanonické pravidlo pro všechny aliasy */
[data-theme='dark'] .acrm-input,
[data-theme='dark'] .sgb-input,
[data-theme='dark'] .dlr-input,
[data-theme='dark'] .au-input,
[data-theme='dark'] .nastaveni-page .finput {
  background: var(--surface-50);
}

.acrm-field {
  display: grid;
  gap: var(--sp-1);
}
.acrm-field-label {
  font: var(--section);
  color: var(--fg-secondary);
}
/* hint/error pod polem — hint dle DS vzoru sgb-hint, error dle precedentu
   v DrawerForm (--critical-ink); error má v <Field> přednost před hintem */
.acrm-field-hint {
  font: var(--small);
  color: var(--fg-muted);
}
.acrm-field-error {
  font: var(--small);
  color: var(--critical-ink);
}
/* select — same box as .acrm-input (plochý v klidu dle Inputs karty), keeps the
   native arrow. Pole jsou konzistentně plochá bez resting elevace: .acrm-input
   (shadow odstraněn v MR !198), .acrm-select i .acrm-textarea (zde). */
.acrm-select {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-100);
  color: var(--fg);
  font: var(--p);
  width: 100%;
  cursor: pointer;
}
.acrm-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* textarea — .acrm-input box, vertical padding, resizable */
.acrm-textarea {
  min-height: 72px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-100);
  color: var(--fg);
  font: var(--p);
  width: 100%;
  resize: vertical;
}
.acrm-textarea::placeholder {
  color: var(--fg-muted);
}
.acrm-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* checkbox / radio — DS accent tint, native box */
.acrm-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
/* checkbox s popiskem — port 1:1 z DS .sgb-check (builder-panels.css);
   input uvnitř nese .acrm-check (16px kánon; 15px v sgb vrstvě = známý
   drift k reconciliaci upstream) */
.acrm-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  align-self: flex-start;
  font: var(--small);
  color: var(--fg-secondary);
  cursor: pointer;
  user-select: none;
}
/* dark: select/textarea shodně s .acrm-input aliasy (--surface-50) */
[data-theme='dark'] .acrm-select,
[data-theme='dark'] .acrm-textarea {
  background: var(--surface-50);
}

/* ---- Icon button — the single ghost icon-only control (was ~12 bespoke families) ---- */
.acrm-icobtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  flex: none;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.acrm-icobtn:hover {
  background: var(--hover-surface);
  color: var(--fg);
}
.acrm-icobtn.sm {
  width: 24px;
  height: 24px;
}

/* ---- Segmented control — the single toggle row (was 6 bespoke `button{}` blocks) ---- */
.acrm-segmented {
  display: inline-flex;
  gap: var(--sp-0);
  padding: var(--sp-0);
  background: var(--line-100);
  border-radius: var(--radius-sm);
}
.acrm-segmented > button {
  height: 26px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg-secondary);
  font: var(--small);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.acrm-segmented > button.on,
.acrm-segmented > button[aria-selected='true'] {
  background: var(--surface-100);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}
.acrm-segmented > button .ti {
  font-size: var(--ico-xs);
}
/* plná šířka (formulářový přepínač v draweru) — rovnoměrné sloupce */
.acrm-segmented.grow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.acrm-segmented.grow > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* ---- List rows (RULES §0: group by space + hierarchy, NO box per row) ---- */
.acrm-list {
  background: var(--bg-canvas);
}
.acrm-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 44px;
  padding: 0 var(--cell-px);
  border-bottom: 1px solid var(--border);
  cursor: default;
  font: var(--cell);
}
.acrm-row:hover {
  background: var(--hover-surface);
}
.acrm-row .muted {
  color: var(--fg-secondary);
}
.acrm-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 32px;
  padding: 0 var(--cell-px);
  border-bottom: 1px solid var(--border);
  font: var(--overline);
  color: var(--fg-muted);
}

/* ---- Card / panel (one framing level only) ---- */
.acrm-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ---- Avatar (RULES §3: light surface, 1.5px colored ring, colored initial) ----
   Single identity mark. The @acrm/ui <Avatar> emits these classes and sets --av-hue
   (name hash); CSS screens reuse them, so React and CSS share ONE source of truth.
   Ported 1:1 from the DS "Avatars" card: surface bg + hsl(--av-hue) ring & initial,
   never a solid fill. Circle = person, .square = company. Sizes: .inline 16 · .sm 24 ·
   (default) 26 · .lg 32. Hue fallback 220 keeps a sane colour if --av-hue is unset. */
.acrm-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-75);
  color: hsl(var(--av-hue, 220) 52% 42%);
  border: 1.5px solid hsl(var(--av-hue, 220) 62% 60%);
  display: grid;
  place-items: center;
  overflow: hidden;
  font: 600 11px/1 var(--font-display);
  flex: none;
}
.acrm-avatar.square {
  border-radius: var(--radius-sm);
}
.acrm-avatar.inline {
  width: 16px;
  height: 16px;
  font-size: 6px;
}
.acrm-avatar.sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.acrm-avatar.lg {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.acrm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-theme='dark'] .acrm-avatar {
  background: var(--surface-100);
  color: hsl(var(--av-hue, 220) 70% 72%);
  border-color: hsl(var(--av-hue, 220) 52% 52%);
}

/* ---- Entity reference (Components · Entity reference card) ----
   Inline cross-reference to an entity. The @acrm/ui <EntityRef> emits these classes.
   Person/user = circle <Avatar>, company = square <Avatar>; typed objects (deal,
   meeting, segment, task, file, product) = solid --ic tile + white glyph (.eref-tile).
   Affordance = dashed underline on the name (NO arrow, NO pill). `mini` = text-only,
   12px, lighter — for dense lists/cells/feeds. Ported 1:1 from the DS card; promoted
   here from the old `.kalendar-page .eref-chip` scope so the whole app can consume it. */
.eref-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  margin: -1px 0;
  padding: 1px var(--sp-1) 1px var(--sp-0);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  cursor: pointer;
  vertical-align: -3px;
  font: inherit;
  text-align: left;
  transition: background 0.12s ease;
}
.eref-chip:hover,
.eref-chip.is-hover {
  background: var(--hover-surface);
}
.eref-chip .acrm-avatar {
  flex: none;
}
.eref-chip-nm {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px dashed var(--border-strong);
}
.eref-chip:hover .eref-chip-nm,
.eref-chip.is-hover .eref-chip-nm {
  border-bottom-color: var(--ink-700);
}
.eref-date {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* typed-object identity tile — solid --ic-{tone} + white glyph (16px), like segments */
.eref-tile {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #fff; /* ds-ok: white glyph on a solid --ic identity tile (§6) */
}
.eref-tile svg {
  width: 11px;
  height: 11px;
  display: block;
}
/* mini — no mark/tile, smaller, lighter; flows inside dense lists/cells/prose */
.eref-chip.eref-mini {
  gap: 0;
  margin: 0;
  padding: 0 1px;
  vertical-align: baseline;
  border-radius: var(--radius-xs);
}
.eref-chip.eref-mini:hover,
.eref-chip.eref-mini.is-hover {
  background: none;
}
.eref-chip.eref-mini .eref-chip-nm {
  font-size: 12px;
  color: var(--fg-secondary);
  border-bottom-color: var(--border-strong);
}
.eref-chip.eref-mini:hover .eref-chip-nm,
.eref-chip.eref-mini.is-hover .eref-chip-nm {
  color: var(--ink-900);
  border-bottom-color: var(--ink-500);
}
.eref-chip.eref-mini .eref-date {
  font-size: 11px;
  margin-left: var(--sp-1);
}

/* ============================================================
   Entity reference — ODEBÍRATELNÁ varianta (port 1:1 z DS
   „Components · Entity reference (odebíratelná)"). Reference jako
   člen seznamu/výběru: sama zůstává klikací (otevře záznam),
   navíc koncový křížek na hover/fokus ji z TOHOTO seznamu odebere.
   ============================================================ */
/* kanonický remove-× — shodně s .pill .x: průhledný, dědí barvu, tlumený
   v klidu, na hover NEUTRÁLNÍ currentColor tint. Žádná červená — odebrání ze
   seznamu je vratné; --critical zůstává vyhrazené pro nevratné mazání. */
.eref-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    background 0.12s ease;
}
.eref-x svg {
  width: 11px;
  height: 11px;
  display: block;
}
.eref-x:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.eref-x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  opacity: 1;
  transform: none;
}
/* dotyk / no-hover: křížek je trvale viditelný v klidové opacitě */
@media (hover: none) {
  .eref-x {
    opacity: 0.65;
    transform: none;
  }
}

/* forma A: token v poli výběru (pilulka nese povrch, chip uvnitř je bez bg) */
.eref-token {
  display: inline-flex;
  align-items: center;
  gap: 1px; /* ds-ok: věrný port z DS entity-ref-removable (sub-token) */
  max-width: 100%;
  padding: 2px 3px 2px 4px; /* ds-ok: věrný port z DS entity-ref-removable (sub-token) */
  background: var(--surface-75);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.eref-token:hover,
.eref-token:focus-within,
.eref-token.is-hover {
  border-color: var(--border-strong);
  background: var(--surface-100);
}
.eref-token:hover .eref-x,
.eref-token:focus-within .eref-x,
.eref-token.is-hover .eref-x {
  opacity: 0.65;
  transform: none;
}
.eref-token .eref-chip {
  margin: 0;
  padding: 0 2px 0 0; /* ds-ok: věrný port z DS entity-ref-removable (sub-token) */
  vertical-align: baseline;
}
.eref-token .eref-chip:hover,
.eref-token .eref-chip.is-hover {
  background: none;
}

/* Formulářová varianta (DS): reference NEŽIJÍ ve viditelném poli — plovoucí tokeny
   + VŽDY přítomná afordance „Přidat" (i v prázdném stavu). Hledání až v popoveru. */
.eref-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.eref-add {
  position: relative;
  display: inline-flex;
}
.add-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* ds-ok: věrný port z DS entity-ref-removable (sub-token) */
  height: 26px;
  padding: 0 11px 0 8px; /* ds-ok: věrný port z DS entity-ref-removable (sub-token) */
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--fg-secondary);
  font: 600 12px var(--font-display);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}
.add-ref:hover {
  border-color: var(--ink-500);
  color: var(--ink-900);
}
.add-ref svg {
  width: 13px;
  height: 13px;
  flex: none;
}
/* vyhledávací popover otevřený z „Přidat" (skládá se z .tf-menu boxu) */
.tf-menu.eref-add-pop {
  right: auto;
  min-width: 260px;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.eref-add-pop .acrm-input {
  width: 100%;
}
.eref-add-list {
  max-height: 200px;
  overflow-y: auto;
}
/* skupinový nadpis v seznamu popoveru (např. „Nejpoužívanější" v ProductPickeru) */
.eref-add-list .eref-group-lb {
  padding: var(--sp-1) var(--sp-3);
  font: var(--overline);
  color: var(--fg-muted);
}

/* ---- .eref-hc — Entity preview popover (Components · Entity preview popover,
   entity-previews.html). NON-modální hover náhled entity nad <EntityRef> chipem;
   @acrm/ui <EntityPreview> ho portáluje do <body> — karta má position:static jen
   pro galerii, in-app je fixed a pozici dodává komponenta přes --eref-hc-x/-y
   (place util sdílený s Popoverem). Identitu osob/firem nese DS .acrm-avatar
   (hodnoty .av-mark/.av-lg karty == .acrm-avatar/.lg 1:1 vč. dark remapu);
   generická jména karty scopována: .av-tile → .eref-hc-tile, .st → .eref-hc-st,
   .faces → .eref-hc-faces, .av-xs → .eref-hc-crow > .acrm-avatar. ---- */
.eref-hc {
  position: fixed; /* ds-ok: karta renderuje static jen v galerii — reálný overlay = fixed + portál */
  left: var(--eref-hc-x, -9999px); /* ds-ok: offscreen, než <EntityPreview> změří a umístí */
  top: var(--eref-hc-y, 0); /* ds-ok: pozice řízená komponentou (place util) */
  z-index: 71; /* ds-ok: overlay vrstva jako .acrm-popover (bez scrimu — non-modální) */
  width: 280px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--shadow-pop);
}
.eref-hc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.eref-hc-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
}
.eref-hc-nm {
  font: 600 14px var(--font-sans);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eref-hc-sub {
  font: 500 13px var(--font-sans);
  color: var(--fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eref-hc-facts {
  margin: 0;
  font: 400 13px var(--font-sans);
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}
.eref-hc-facts .due-soon {
  color: var(--warning-ink);
  font-weight: 600;
}
.eref-hc-sep {
  height: 1px;
  background: var(--border);
  margin: 0 calc(var(--sp-3) * -1);
}
.eref-hc-excerpt {
  margin: 0;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--fg-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eref-hc-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eref-hc-crow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font: 400 13px var(--font-sans);
  color: var(--fg);
  min-width: 0;
}
.eref-hc-crow > svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--fg-muted);
}
.eref-hc-cv {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.eref-hc-cv .lbl {
  color: var(--fg-muted);
}
.eref-hc-more {
  font: 500 13px var(--font-sans);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.eref-hc-open {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-2);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font: 500 13px var(--font-sans);
  color: var(--ink-900);
  cursor: pointer;
  transition: background 0.12s ease;
}
.eref-hc-open:hover {
  background: var(--hover-surface);
}
.eref-hc-open svg {
  width: 14px;
  height: 14px;
  color: var(--fg-secondary);
}
/* typová identita v hlavě — plná --ic dlaždice + bílý glyf, 32px (karta:
   .av av-square av-tile av-lg); barvu dodává komponenta přes --eref-hc-ic */
.eref-hc-tile {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  line-height: 1;
  background: var(--eref-hc-ic, var(--ic-grey));
  color: #fff; /* ds-ok: bílý glyf na plné --ic dlaždici (§6) */
}
.eref-hc-tile svg {
  width: 18px;
  height: 18px;
}
/* skládané faces účastníků schůzky (karta: .faces; 22px, ring = surface, překryv -7px) */
.eref-hc-faces {
  display: flex;
  align-items: center;
  flex: none;
}
.eref-hc-faces .acrm-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  box-shadow: 0 0 0 2px var(--surface-100);
  margin-left: -7px;
}
.eref-hc-faces .acrm-avatar:first-child {
  margin-left: 0;
}
/* xs avatar řešitele přímo v řádku (karta: .av-xs — 18px, iniciály 8px) */
.eref-hc-crow > .acrm-avatar {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
/* stavová pilulka hlavy (karta: .st) — tečka = plná stavová barva, text -ink na -subtle */
.eref-hc-st {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* ds-ok: hodnota 1:1 z DS karty entity-previews */
  flex: none;
  align-self: flex-start;
  height: 18px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  font: 600 11px var(--font-sans);
  white-space: nowrap;
}
.eref-hc-st .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.eref-hc-st.info {
  color: var(--info-ink);
  background: var(--info-subtle);
}
.eref-hc-st.info .dot {
  background: var(--info);
}
.eref-hc-st.warning {
  color: var(--warning-ink);
  background: var(--warning-subtle);
}
.eref-hc-st.warning .dot {
  background: var(--warning);
}
.eref-hc-st.positive {
  color: var(--positive-ink);
  background: var(--positive-subtle);
}
.eref-hc-st.positive .dot {
  background: var(--positive);
}

/* ---- Auth (RULES §4: white bg, thin border, radius-xl, NO shadow, airy) ---- */
.acrm-auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface-100);
  padding: var(--sp-6);
}
.acrm-auth-card {
  width: 380px;
  max-width: 100%;
  background: var(--surface-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
  padding: var(--sp-7);
  display: grid;
  gap: var(--sp-5);
}

.acrm-muted {
  color: var(--fg-secondary);
  font: var(--small);
}
/* Tichý meta/stavový text (redukce pilulek, AD 12.7.26): .ico drží glyph + text
   na jednom řádku (náhrada pilulky s ikonou), .crit značí selhání. Upstream
   publish čeká — docs/DS-UPSTREAM-QUEUE.md. */
.acrm-muted.ico {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}
.acrm-muted.crit {
  color: var(--critical-ink);
}
.acrm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* ds-ok: hodnota DS zdroje _ds/pills.css */
  height: 22px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  font: 600 11.5px var(--font-sans); /* ds-ok: DS pill font (_ds/pills.css), type token neexistuje */
  line-height: 1;
  white-space: nowrap;
}
.acrm-pill.sm {
  height: 20px;
  padding: 0 7px; /* ds-ok: hodnota DS zdroje _ds/pills.css */
  font-size: 11px;
}
.acrm-pill .ti {
  font-size: 12px;
}
/* odebratelný tag — <span class="acrm-pill purple">tag<button class="x">…×…</button></span>
   (port 1:1 z _ds/pills.css .pill .x) */
.acrm-pill .x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
}
.acrm-pill .x:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.acrm-pill .x .ti {
  font-size: var(--ico-2xs);
}
/* tone modifiers — soft attribute pills (all reference DS pill tokens, no hex) */
.acrm-pill.lime {
  background: var(--pill-lime-bg);
  color: var(--pill-lime-ink);
}
.acrm-pill.amber {
  background: var(--pill-amber-bg);
  color: var(--pill-amber-ink);
}
.acrm-pill.blue {
  background: var(--pill-blue-bg);
  color: var(--pill-blue-ink);
}
.acrm-pill.purple {
  background: var(--pill-purple-bg);
  color: var(--pill-purple-ink);
}
.acrm-pill.green {
  background: var(--pill-green-bg);
  color: var(--pill-green-ink);
}
.acrm-pill.rose {
  background: var(--pill-rose-bg);
  color: var(--pill-rose-ink);
}
.acrm-pill.grey {
  background: var(--pill-grey-bg);
  color: var(--pill-grey-ink);
}
/* functional status tones */
.acrm-pill.positive {
  background: var(--positive-subtle);
  color: var(--positive-ink);
}
.acrm-pill.warning {
  background: var(--warning-subtle);
  color: var(--warning-ink);
}
.acrm-pill.critical {
  background: var(--critical-subtle);
  color: var(--critical-ink);
}
.acrm-pill.info {
  background: var(--info-subtle);
  color: var(--info-ink);
}
.acrm-pill.accent {
  background: var(--accent-tint);
  color: var(--accent-ink);
}
/* leading status dot (deal/room/status pills) */
.acrm-pill.dot::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: var(--sp-1);
  border-radius: 50%;
  background: currentColor;
}

/* ---- Count — numeric chip (nav/tab/column/notification counters) ---- */
.acrm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-pill);
  background: var(--line-100);
  color: var(--fg-secondary);
  font: var(--overline);
  font-variant-numeric: tabular-nums;
}
.acrm-count.accent {
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.acrm-count.alert {
  background: var(--critical);
  color: var(--fg-on-accent);
}

/* ---- Badge — small squared label ("AI", "NOVÉ", "Ověřeno"); tone via status class ---- */
.acrm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 18px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: var(--overline);
}
.acrm-badge.positive {
  background: var(--positive-subtle);
  color: var(--positive-ink);
}
.acrm-badge.critical {
  background: var(--critical-subtle);
  color: var(--critical-ink);
}
.acrm-badge.grey {
  background: var(--pill-grey-bg);
  color: var(--pill-grey-ink);
}

/* ---- Button (RULES §5: the single DS button) ----
   Canonical button primitive. The @acrm/ui <Button> emits these classes, and CSS
   screens reuse them, so React and CSS share ONE source of truth (no parallel .btn).
   Mirrors the DS reference button (tokenised: --control-h, --radius-sm, 13px label).
   Focus ring comes from the foundation rule below; disabled via :disabled. */
/* `.btn` is aliased to `.acrm-btn` so the ~210 legacy `.btn` consumers share ONE
   canonical definition (the bespoke global `.btn` + per-page redeclarations were
   deleted). Reconciled to DS spec (gap --sp-3, ghost/default = --fg). */
.acrm-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 500 13px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.acrm-btn:disabled,
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.acrm-btn.primary,
.btn.primary {
  background: var(--accent);
  color: var(--fg-on-accent);
  border-color: var(--accent-press);
}
.acrm-btn.primary:hover,
.btn.primary:hover {
  background: var(--accent-press);
}
.acrm-btn.default,
.btn.default {
  background: var(--surface-100);
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.acrm-btn.default:hover,
.btn.default:hover {
  background: var(--hover-surface);
}
.acrm-btn.ghost,
.btn.ghost {
  background: transparent;
  color: var(--fg);
}
.acrm-btn.ghost:hover,
.btn.ghost:hover {
  background: var(--hover-surface);
}
.acrm-btn .ti,
.btn .ti {
  font-size: 16px;
}
.acrm-btn.primary .ti,
.btn.primary .ti {
  color: var(--fg-on-accent);
}
[data-theme='dark'] .acrm-btn.default,
[data-theme='dark'] .btn.default {
  background: var(--surface-50);
}
.acrm-btn.danger,
.btn.danger {
  background: var(--critical);
  border-color: var(--critical);
  color: var(--fg-on-accent);
}
.acrm-btn.danger:hover,
.btn.danger:hover {
  background: var(--critical-ink);
  border-color: var(--critical-ink);
}
.acrm-btn.sm,
.btn.sm {
  height: 26px;
  padding: 0 var(--sp-3);
  font: var(--small);
}
.acrm-btn.icon,
.btn.icon {
  width: var(--control-h);
  padding: 0;
}

/* ---- Empty state — flat icon (no tile, §0) + title + subtitle + optional action ---- */
.acrm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.acrm-empty-ic {
  display: inline-flex;
  font-size: 20px; /* ds-ok: velikost stavové ikony 1:1 z DS karty empty-error-state */
  color: var(--fg-muted);
  margin-bottom: var(--sp-1);
}
.acrm-empty-t {
  font: var(--label);
  color: var(--fg-secondary);
}
.acrm-empty-s {
  font: var(--small);
  color: var(--fg-muted);
  max-width: 340px;
}
.acrm-empty.sm {
  padding: var(--sp-5) var(--sp-4);
}

/* ---- .acrm-dialog — JEDEN centrovaný modal (scrim + card + flat header + body + foot).
   Zdroj pravdy: DS karta `dialog.html` (Dialog system; původní šablona Popups smazána) —
   nahrazuje popup-* / fp-modal-* / bespoke modaly. Overlay tokeny --ov-scrim /
   --overlay-shadow definuje segment-screen.css :root. ---- */
.acrm-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 11vh var(--sp-6) var(--sp-6);
  background: var(--ov-scrim);
  animation: acrmDialogScrim 0.12s ease both;
}
.acrm-dialog-scrim.center {
  align-items: center;
  padding: var(--sp-6);
}
.acrm-dialog {
  max-width: calc(100vw - 48px);
  max-height: min(80vh, 680px);
  display: flex;
  flex-direction: column;
  background: var(--surface-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--overlay-shadow); /* ds-ok: overlay elevation (DS podpisový stín) */
  overflow: hidden;
  animation: acrmDialogRise 0.16s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.acrm-dialog-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.acrm-dialog-ic {
  color: var(--fg-secondary);
  display: inline-flex;
}
.acrm-dialog-title {
  font: var(--h3);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acrm-dialog-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  cursor: pointer;
}
.acrm-dialog-x:hover {
  background: var(--hover-surface);
}
.acrm-dialog-body {
  padding: var(--sp-5);
  overflow: auto;
  min-height: 0;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.acrm-dialog.tall {
  max-height: 88vh;
}
.acrm-dialog-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  flex: none;
}
.acrm-dialog-foot .lead {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
/* Confirm — 400 px, centrovaný; titulek + jedna věta důsledku + Zrušit/primár. */
.acrm-dialog-confirm-text {
  font: var(--p);
  color: var(--fg-secondary);
  text-wrap: pretty;
}
@keyframes acrmDialogScrim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes acrmDialogRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acrm-dialog-scrim,
  .acrm-dialog {
    animation: none !important;
  }
}

/* ---- .acrm-popover — portálovaný, anchor-positioned overlay (menu/dropdown).
   Fixed pozice od kotvy → nikdy se neořízne v overflow kontejneru. Anatomie
   podle DS menu (sgb-menu-pop / fin-menu): surface + hairline + shadow-pop. ---- */
.acrm-popover-scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
}
.acrm-popover {
  position: fixed;
  z-index: 101;
  min-width: 180px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--surface-100);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); /* ds-ok: overlay elevation (DS popover) */
  padding: var(--sp-2);
}
/* položka: jednořádková, 500 13/20 → výška 32 px (schváleno 21. 8. 2026; .acrm-popover-label a .sub zrušeny) */
.acrm-popover-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: 500 13px/20px var(--font-sans);
  color: var(--fg);
}
.acrm-popover-item:hover {
  background: var(--hover-surface);
}
.acrm-popover-item:disabled {
  opacity: 0.4;
  cursor: default;
}
.acrm-popover-item:disabled:hover {
  background: transparent;
}
.acrm-popover-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-1) 0;
}
/* prázdný / načítací stav menu — jediný text místo položek (typ B; 1:1 .acrm-recordselect-empty) */
.acrm-popover-empty {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font: 400 13px var(--font-sans);
  color: var(--fg-muted);
}
/* Položka menu (výběr pohledu/fáze): ikona · název · check — jednořádkově (port rvsw-*). */
.acrm-popover-item .ic {
  width: 18px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--fg-secondary);
  font-size: var(--ico-sm);
}
.acrm-popover-item .tx {
  display: flex;
  min-width: 0;
  flex: 1;
}
.acrm-popover-item .nm {
  font: 500 13px/20px var(--font-sans);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acrm-popover-item .chk {
  flex: none;
  color: var(--accent);
}
.acrm-popover-item .chk.off {
  visibility: hidden;
}
.acrm-popover-item .tag {
  font: var(--overline);
  color: var(--fg-muted);
  flex: none;
}
.acrm-popover-item.strong {
  background: var(--positive-subtle);
}
.acrm-popover-item.danger {
  color: var(--critical-ink);
}
.acrm-popover-item.danger:hover {
  background: var(--critical-subtle);
}

/* ---- .acrm-tabs — JEDEN underline tab strip pro record sub-nav (gate ruling:
   taby zůstávají). Port .pr-tabs rodiny (1:1 s DS 'Person detail (CRM)') vč.
   scroll + edge-fade anatomie; sjednocuje pr-tabs / mr-tabs. ---- */
.acrm-tabswrap {
  position: relative;
  flex: none;
}
.acrm-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--sp-5) 0 0; /* tabs flush-left; right gutter only */
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.acrm-tabs::-webkit-scrollbar {
  display: none;
}
.acrm-tabsedge {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 60px;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
}
.acrm-tabsedge.on {
  opacity: 1;
}
.acrm-tabsedge.left {
  left: 0;
  justify-content: flex-start;
  padding-left: var(--sp-3);
  background: linear-gradient(to right, var(--bg-canvas) 40%, transparent);
}
.acrm-tabsedge.right {
  right: 0;
  justify-content: flex-end;
  padding-right: var(--sp-3);
  background: linear-gradient(to left, var(--bg-canvas) 40%, transparent);
}
.acrm-tabsbtn {
  pointer-events: none;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  flex: none;
  padding: var(--sp-2);
}
.acrm-tabsedge.on .acrm-tabsbtn {
  pointer-events: auto;
}
.acrm-tabsbtn:hover {
  color: var(--ink-900);
}
.acrm-tabsbtn .ti {
  font-size: var(--ico-sm);
}
.acrm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 46px;
  padding: 0 var(--sp-3);
  font: 600 13px var(--font-sans);
  color: var(--fg-secondary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
}
.acrm-tab .ti {
  font-size: var(--ico-sm);
  color: var(--fg-muted);
}
.acrm-tab .cnt {
  font: 600 11px var(--font-mono);
  color: var(--fg-secondary);
  background: var(--surface-75);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  min-width: 17px;
  height: 17px;
  padding: 0 5px; /* ds-ok: pill mikro-padding (port pr-tab .cnt) */
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.acrm-tab:hover {
  color: var(--ink-800);
}
.acrm-tab.active {
  color: var(--ink-900);
}
.acrm-tab.active .ti {
  color: var(--ink-800);
}
.acrm-tab.active::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

/* ---- .acrm-dealcard — Deal card (Components · Deal card, deal-card.html) ----
   Atomická jednotka pipeline boardu: JEDNA 5řádková kostra pro oba typy obchodu
   (identita+hodnota → one-liner → produkty → signály → patička); firma = čtvercový
   avatar, osoba / investice = kruhový (.round). @acrm/ui <DealCard> emituje tyto
   třídy; vnitřní anatomie drží názvy tříd 1:1 z DS karty (c-top … c-due), jen
   namespacované pod .acrm-dealcard (generická jména — board má vlastní .plpage port).
   Produkty = DS entity reference (.eref-chip výše); barvy signálů se odvozují
   z hodnoty (prob.hi/mid/lo, health token), nikdy natvrdo u dat. */
.acrm-dealcard {
  width: 264px; /* ds-ok: šířka karty 1:1 z DS karty deal-card (kontext boardu ji přepíše) */
  background: var(--surface-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 10px 11px; /* ds-ok: 10/11px 1:1 z DS karty deal-card (off-scale) */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.acrm-dealcard.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.acrm-dealcard.drag {
  box-shadow: var(--shadow-md);
  transform: rotate(1.5deg);
  cursor: grabbing;
  border-color: var(--border-strong);
}
.acrm-dealcard .c-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.acrm-dealcard .c-av {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: hsl(var(--av-hue, 222) 52% 42%);
  background: var(--surface-75);
  border: 1.5px solid hsl(var(--av-hue, 222) 62% 60%);
  font: 600 10px var(--font-display);
  flex: none;
}
.acrm-dealcard .c-av.round {
  border-radius: 50%;
}
[data-theme='dark'] .acrm-dealcard .c-av {
  color: hsl(var(--av-hue, 222) 70% 72%);
  border-color: hsl(var(--av-hue, 222) 52% 52%);
}
.acrm-dealcard .c-name {
  font: 600 13px var(--font-sans);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.acrm-dealcard .c-val {
  font: 600 11px var(--font-mono);
  color: var(--ink-900);
  flex: none;
  white-space: nowrap;
}
.acrm-dealcard .c-sub {
  font: 400 12.5px var(--font-sans);
  color: var(--fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acrm-dealcard .c-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px; /* ds-ok: 5px 1:1 z DS karty deal-card (off-scale) */
}
.acrm-dealcard .tags-more {
  font: 500 11px var(--font-mono);
  color: var(--fg-muted);
}
.acrm-dealcard .c-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.acrm-dealcard .prob {
  display: inline-flex;
  align-items: center;
  font: 600 12px var(--font-mono);
  white-space: nowrap;
}
.acrm-dealcard .prob.hi {
  color: var(--pill-green-ink);
}
.acrm-dealcard .prob.mid {
  color: var(--pill-amber-ink);
}
.acrm-dealcard .prob.lo {
  color: var(--pill-grey-ink);
}
.acrm-dealcard .hdot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex: none;
}
.acrm-dealcard .c-spacer {
  margin-left: auto;
}
.acrm-dealcard .c-bot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.acrm-dealcard .c-owner {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: hsl(var(--av-hue, 222) 52% 42%);
  background: var(--surface-75);
  border: 1.5px solid hsl(var(--av-hue, 222) 62% 60%);
  font: 600 9px var(--font-display);
  flex: none;
}
[data-theme='dark'] .acrm-dealcard .c-owner {
  color: hsl(var(--av-hue, 222) 70% 72%);
  border-color: hsl(var(--av-hue, 222) 52% 52%);
}
.acrm-dealcard .c-task {
  display: inline-flex;
  align-items: center;
  gap: 3px; /* ds-ok: 3px 1:1 z DS karty deal-card (off-scale) */
  font: 500 11px var(--font-mono);
  color: var(--fg-muted);
}
.acrm-dealcard .c-task .ti {
  font-size: 13px;
}
.acrm-dealcard .c-due {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font: 500 11px var(--font-mono);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.acrm-dealcard .c-due.over {
  color: var(--critical);
  font-weight: 600;
}
.acrm-dealcard .c-due .ti {
  font-size: 13px;
}

/* ---- Section top bar — normativní horní lišta obrazovky (.tbar) ----
   Zdroj: packages/ui/reference/screens/Section top bar.html (Components ·
   Section top bar). JEDEN vzor pro pipeline, seznamy i detaily: 49px lišta +
   spodní vlasová linka; vlevo IDENTITA (ikona / barevná dlaždice / .nav-pav
   avatar + název, volitelně jako heading-dropdown), vpravo tiché chipy
   ovládání oddělené .tdiv + nejvýš JEDNA primární akce (DS .acrm-btn.primary).
   Slovník lišty je UZAVŘENÝ (identita · oddělovač · chip · výplň · tlačítko) —
   rozšíření jen po schválení Art Directorem, nejdřív v DS kartě.
   React: @acrm/ui <SectionTopBar> (+ Title/Chip/Search/Divider/Spacer;
   dropdown chipy = NavSelect, menu = PickerMenu/.acrm-popover — otevřené stavy
   menu v kartě jsou dokumentace, ne tato vrstva). Přesunuto z ds/navigation.css
   (tentýž port, hodnoty srovnány 1:1 na kartu); děti zůstávají globální třídy
   (status quo — .tdiv/.vspace/.tchip užívají i ne-.tbar kontexty, např.
   .sgb-top). Bespoke lišty obrazovek (.pr-top, .plpage .tbar…) žijí vedle;
   migrace na tuto normu = samostatné MR. */
.tbar {
  height: 49px; /* ds-ok: 49px 1:1 z DS karty Section top bar */
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* ds-ok: 14px vlevo 1:1 z DS karty Section top bar (off-scale) */
  padding: 0 var(--sp-4) 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-canvas);
}
.tbar.flat {
  border-bottom: 0;
}
/* identita s ikonou — statická varianta „jen identita“ (karta: Reporty);
   ikona 20px + název; lišta VŽDY začíná identitou, nikdy holým textem. */
.tbar-id {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2);
}
.tbar-id > .ti {
  font-size: var(--ico-lg);
  color: var(--fg-secondary);
}
.tbar-h {
  font: var(--h2);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
}
/* avatar osoby v identitě detailu (DS §3: světlá plocha, 1.5px barevný okraj,
   barevný iniciál; hue = hashHue(name) přes --av-hue). */
.nav-pav {
  width: 22px;
  height: 22px;
  border-radius: var(
    --radius-pill
  ); /* ds-ok: kruh — --radius-pill ≡ 50 % na čtverci (tokenizace) */
  display: grid;
  place-items: center;
  flex: none;
  font: 600 10px var(--font-display);
  color: hsl(var(--av-hue, 265) 52% 42%);
  background: var(--surface-75);
  border: 1.5px solid hsl(var(--av-hue, 265) 62% 60%);
}
[data-theme='dark'] .nav-pav {
  color: hsl(var(--av-hue, 265) 70% 72%);
  background: var(--surface-100);
  border-color: hsl(var(--av-hue, 265) 52% 52%);
}
/* oddělovač skupin ovládání — tenká svislá linka 1×20px. */
.tdiv {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--sp-1);
  flex: none;
}
/* pružná výplň — odtlačí primární akci doprava. */
.vspace {
  flex: 1;
}
/* chip ovládání (zobrazení / řazení / filtr) — tichý, vlasová linka; NIKDY plné
   tlačítko, pill ani tab. Appearance reset: emituje se jako <button> (a11y). */
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* ds-ok: 7px 1:1 z DS karty Section top bar */
  height: var(--control-h);
  padding: 0 10px; /* ds-ok: 10px 1:1 z DS karty Section top bar */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  font: var(--small);
  color: var(--ink-700);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  appearance: none;
  -webkit-appearance: none;
}
.tchip:hover {
  background: var(--surface-75);
}
.tchip.open {
  background: var(--active-surface); /* otevřené menu — jednotné s .pipe-btn.open */
}
.tchip .ti {
  font-size: var(--ico-xs);
  color: var(--fg-secondary);
}
.tchip .k {
  color: var(--fg-muted);
}
.tchip .v {
  color: var(--ink-900);
  font-weight: 600;
}
.tchip .chev {
  font-size: var(--ico-xs);
  color: var(--fg-muted);
  margin-left: 1px; /* ds-ok: optický 1px 1:1 z DS karty Section top bar */
}
/* vyhledávací pole — chip s inputem; fokus jej rozšíří na 250px, blur zkrátí. */
.tsearch {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* ds-ok: 7px 1:1 z DS karty Section top bar */
  height: var(--control-h);
  width: 132px; /* klidová šířka 1:1 z DS karty */
  padding: 0 10px; /* ds-ok: 10px 1:1 z DS karty Section top bar */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  box-shadow: var(--shadow-xs);
  cursor: text;
  transition:
    width 0.18s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.tsearch:hover {
  background: var(--surface-75);
}
.tsearch:focus-within {
  width: 250px; /* fokusová šířka 1:1 z DS karty */
  border-color: var(--accent);
  background: var(--surface-100);
}
.tsearch .ti {
  font-size: var(--ico-xs);
  color: var(--fg-secondary);
  flex: none;
}
.tsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none; /* fokus nese chip (border-color: accent), ne input */
  font: var(--small);
  color: var(--ink-900);
}
.tsearch input::placeholder {
  color: var(--fg-muted);
}
/* heading-as-dropdown — identita, která přepíná (pipeline / pohled záznamu);
   statické identitě s dlaždicí/avatarem slouží tatáž kostra bez chevronu. */
.pipe-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 32px; /* ds-ok: 32px 1:1 z DS karty Section top bar */
  padding: 0 7px 0 var(--sp-2); /* ds-ok: 7px vpravo 1:1 z DS karty Section top bar */
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-900);
  appearance: none;
  -webkit-appearance: none;
}
.pipe-btn:hover {
  background: var(--hover-surface);
}
.pipe-btn.open {
  background: var(--active-surface);
}
.pipe-tile {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--fg-on-accent);
  flex: none;
}
.pipe-tile .ti {
  font-size: 13px; /* ds-ok: 13px 1:1 z DS karty Section top bar */
}
.pipe-nm {
  font: var(--h2);
  letter-spacing: var(--tracking-tight);
}
.pipe-btn .chev {
  font-size: 15px; /* ds-ok: 15px 1:1 z DS karty Section top bar */
  color: var(--fg-secondary);
}

/* ---- Typografie: váha 700 se nepoužívá (ruling 6.7.26) — vše polotučné 600.
   Headingy řeší type tokeny (--h1..--label = 600); tady jen native bold elementy. */
b,
strong {
  font-weight: 600;
}

/* ---- DS foundation focus ring (keyboard a11y) ----
   One visible indicator for every interactive control that doesn't define its own.
   Uses `outline` (not box-shadow) so it never disturbs resting elevation and follows
   each element's own border-radius. Loads first (main.tsx) so controls that set
   `outline:none` + their own ring (inputs, combos) override it. */
:where(
  button,
  a[href],
  [role='button'],
  [role='menuitem'],
  [role='menuitemradio'],
  [role='menuitemcheckbox'],
  [role='switch'],
  [role='tab'],
  [tabindex]:not([tabindex='-1'])
):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}